流程控制，模板函数

流程控制的分支，循环

1.分支
1.1单分支 if

let age = 28;
if (age >= 18) {
  console.log("允许观看");
}

1.2双分支if-else 简化 condition？true：false

age = 18;
if (age >= 18) {
  console.log("允许观看");
} else {
  console.log("少儿不宜");
}
age = 35;
let res = age >= 18 ? "允许观看" : "少儿不宜";
console.log(res);

1.3多分支if-elseif-else/switch

age = 60;
if (age >= 18 && age < 35) {
  console.log("允许单独观看");
} else if (age >= 35 && age < 60) {
  console.log("允许二人观看");
} else if (age >= 60 && age < 120) {
  console.log("建议在家人陪同下观看");
} else if (age <= 3 || age >= 120) {
  console.log("非法年龄");
} else {
  console.log("少儿不宜");
}
//!switch
//区间判断，使用true
age = 10;
switch (true) {
  case age >= 18 && age < 35:
    console.log("允许单独观看");
    break;
  case age >= 35 && age < 60:
    console.log("允许二人观看");
    break;
  case age >= 60 && age < 120:
    console.log("建议在家人陪同下观看");
    break;
  case age <= 3 || age >= 120:
    console.log("非法年龄");
    break;
  default:
    console.log("少儿不宜");
}
//单值判断：变量
let lang = "html";
lang = "css";
lang = "javascript";
lang = "js";
lang = "HTML";
switch (lang.toLowerCase()) {
  case "html":
    console.log("超文本编辑语言");
    break;
  case "css":
    console.log("层叠样式表");
    break;
  case "javascript":
  case "js":
    console.log("通用前端脚本编程语言");
    break;
  default:
    console.log("不能识别");
}

循环

1.while/do while

//!while循环
i = 0;
while (i < length) {
  console.log(colors[i]);
  i++;
}
//!循环三条件
//*1.初始条件：数组索引的引用（i=0)
//*2.循环条件：为真才执行的循环体（i<arr.length)
//*3.更新条件：必须要有，否则进入死循环（i++)
//*do{}while(),出口型判断，无论条件是否成立，必须执行一次代码块
i = 0;
do {
  console.log(colors[i]);
  i++;
} while (i < length);

2.for

//for(初始条件;循环条件;更新条件){}
for (i = 0, leng = colors.length; i < length; i++) {
  console.log(colors[i]);
}
//for-of;快速迭代处理集合数据
//用户不必再关心索引，而将注意力集中在数组成员上
for (let item of colors.entries()) {
  console.log(item);
}
for (let item of colors.keys()) {
  console.log(item);
}
for (let item of colors.values()) {
  console.log(item);
}
for (let item of colors) {
  console.log(item);
}
//!for-in 对象遍历
const obj = { a: 1, b: 2, c: 3, say: function () {} };
for (let key in obj) {
  console.log(obj[key]);
}

参数与返回值

1.参数
1.1参数不足：默认参数

f = (a, b = 0) => a + b;
console.log(f(1));

1.2参数过多：…rest

f = (...arr) => arr;
console.log(f(1, 2, 3, 4, 5));
console.log(...[1, 2, 3, 4, 5]);

2.返回值
2.1默认单值
2.2多值
2.2.1数组

f = () => [1, 2, 3];
console.log(f());

2.2.2对象

f = () => ({ a: 0, b: 1, c: 2, get: function () {} });
console.log(f());

字面量简化方案

1.属性简化
变量name与属性name同名
且在同一个作用域中，可以不写变量名

let name = "朱老师";
//!属性简化
let user = {
  // name:"朱老师",
  // name:name,
  name,
};
console.log(user.name);

2.方法简化
所谓方法：本质仍是属性，只不过它的值是一个函数声明，将”:function”删除

/*user = {
    name,
    getName: function(){
        return this.name;
    },
};*/
user = {
  name,
  getName() {
    return this.name;
  },
};
// console.log(user.getName());
console.log(user.getName());

模板字面量

//传统
console.log("hello world");
//模板字面量：反引号定义
console.log(`hello world`);
//模板字面量中，可以使用“插值”（变量，表达式），可以解析变量
let name = "朱老师";
console.log("hello" + name);
//变量/表达式等插值，使用${...}插入到模板字面量中
console.log(`hello ${name}`);
console.log(`10+20= ${10 + 20}`);

模板函数

1.使用“模板字面量”为参数
2.第一个参数必须是模板字面量中的“字面量”组成的数组
3.第二个参数起是“模板字面量”的插值列表，通常使用“…rest”来归并到一个数组中处理