流程控制之分支和循环

流程控制之分支

单分支

if(true){
 console.log("对");
}

双分支

if(true){
 console.log("对");
}else{
 console.log("错");
}

多分支

let age = 121;
if (age >= 18 && age < 50) {
    console.log("成年人");
} else if (age >= 50 && age < 70) {
    console.log("中老年");
} else if (age >= 70 && age <= 100) {
    console.log("老年人");
} else if (age < 1 || age > 100) {
    console.log("非法传参");
} else {
    console.log("未成年");
}

多分支有个语法糖可以代替，switch

//区间判断条件用true
switch (true) {
    case age >= 18 && age < 50:
        console.log("成年人");
        break;
    case age >= 50 && age < 70:
        console.log("中老年");
        break;
    case age >= 70 && age <= 100:
        console.log("老年人");
        break;
    case age < 1 || age > 100:
        console.log("非法传参");
        break;
    default:
        console.log("未成年");
}

//单值判断用变量
let sex = 1;
switch (sex) {
    case 1:
        console.log("男");
        break;
    case 2:
        console.log("女")
        break;
    default:
        console.log("保密");
}

流程控制之循环

while循环

const arr = [1, 2, 3, 4, 5, 6];
let lenght = arr.length;
let i = 0;
while (i < lenght) {
    console.log(arr[i]);
    i++;
}

• 循环三条件

1. 初始条件: 数组索引的引用 ( i = 0 )
2. 循环条件: 为真才执行循环体 ( i < arr.length )
3. 更新条件: 必须要有,否则进入死循环 ( i++ )

do-while循环

// do{}while() 先执行后判断
i = 0
do {
    console.log(arr[i]);
    i++;
} while (i < lenght)

for循环

const colors = ["red", "blue", "green"];
for (let i = 0, lenght = colors.length; i < lenght; i++) {
    console.log(colors[i]);
}

数组操作中最常用的还有for-of循环

// 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-in 遍历对象

let obj = { "name": "张三", "sex": "1", "city": "beijing", "callback": function () { } };

for (let item in obj) {
    console.log(obj[item]);
}
// 虽然数组也是对象，但是数组一般不用for-in这种形式遍历

函数的参数与返回值

当函数参数不足时，要在函数定义时给参数加默认值

let f1=(a,b=0)=>a+b;
console.log(f1(1));//返回1
console.log(f1(2,3));//返回5

当函数参数过多，则需要把所有参数都接受到一个数组中：
... : rest语法剩余参数,归并参数,将所有参数全部压入到一个数组中

let f = (...arr) => arr;
console.log(f(1, 2, 3));//输出[1,2,3]
// ...[集合数据],可以将它"展开"成一个个独立的元素,用在调用的时候
console.log(...[1, 2, 3, 4]);//输出1,2,3,4
//用模板字符串输出看一下参数的对应情况
f = (a, b, ...arr) => `a=${a}, b=${b}, ...arr=[${arr}]`;
console.log(f(1, 2, 3, 4, 5, 6));//输出a=1,b=2,...arr=[3,4,5,6]
f = (a, b, ...arr) => arr;//只返回数组部分
console.log(f(1, 2, 3, 4, 5, 6));//输出[3,4,5,6]
// 实例1：计算任何数量的数据之和
f = (...arr) => arr.reduce((a, c) => a + c);
console.log(f(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));//输出55
// 实例2：服务器返回类型列表，把类型套上html标签，添加到页面中
const json = ["女装", "男装", "童装", "饰品", "鞋包"];
let f = (...item) => item.map(item => `<li>${item}</li>`).join("");
console.log(f(...json));
//输出：<li>女装</li><li>男装</li><li>童装</li><li>饰品</li><li>鞋包</li>
// document.body.innerHTML = "<ul>" + f(...json) + "</ul>";

函数返回单值

let f=(a,b)=>a+b;
console.log(f(1,2));//返回3

函数返回多值时有两种方式：1. 返回数组，2. 返回对象（模块）

1. 返回数组

   
   f = () => [1, "a", 2];
   console.log(f());//返回：[ 1, 'a', 2 ]
   

2. 返回对象

f = () => ({ "a": "1", "b": "2", "c": function () { } });//返回一个对象时，要用`()`把返回值包起来
console.log(f());//返回：{ a: '1', b: '2', c: [λ: c] }

对象字面量的简化——推荐使用

// 变量简化
let name = '张二狗';
let user = {
    name,//name:name,对象内的name=全局中的name，由于命名相同可以简写为name
    // getName: function () {
    //     return this.name;
    // }
    // 方法简化
    //对象中的方法可以省略function，以属性名当函数名
    getName() {
        return this.name;
    }
    //注意：对象里的方法不可以用箭头函数来简写，因为箭头函数里的this在声明时定义，写在方法中的时候是不会指向当前方法的，所以只能如上面写法；
};
console.log(user.name);//张二狗
console.log(user.getName());//张二狗

模板字面量（模板字符串）与模板函数（标签函数）

模板字面量是用一对反引号括起来的字符串；
模板字面量中可以使用插值和解析变量；

let name = "小花";
console.log("Hello " + name);
// 变量/表达式等插值,使用 ${...}插入到模板字面量中
console.log(`Hello ${name}`);//输出Hello 小花
console.log(`10 + 20 = ${10 + 20}`);//输出 10 + 20 = 30
console.log(`${10 < 20 ? `大于` : `小于`}`);//输出：小于

• 模板字面量: 可以使用插值表达式的字符串
• 模板函数: 可以使用”模板字面量”为参数的函数
• 模板函数,就是在”模板字面量”之前加一个标签/标识符,而这个标签,就是一个函数名
• 模板函数的参数是有约定的, 不能乱写, 第一个是字面量数组,从第二起才是内部的占位符参数

模板函数

// * 使用 ...rest 将插值进行合并
function sum(strings, ...args) {
  console.log(strings);//输出：['计算多个数之和：','','','','']
  console.log(args);//输出：[1,2,3,4]
  console.log(`[${args.join()}] 之和是:  ${args.reduce((a, c) => a + c)}`);
}

// 调用
sum`计算多个数和: ${1}${2}${3}${4}`;//输出：[1,2,3,4] 之和是:  10