解构赋值

解构赋值是对赋值运算符的扩展。

函数的rest参数:

// 无限数字相加计算器(不用arguments) 
function fn(...nums) { // 只能放在最后
// nums就是一个函数 reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。此处0为初始值
//前面也可以有其他非这个数组的参数 fn(a,b,...args){} ，那么args数组则是除开a,b参数以 外的剩余参数
return nums.reduce((n1,n2)=>{
        return n1 + n2;
    },0);
}
fn(1,2,3,4,5,6,7,8,9,10)//55

ECMA新增内容(ECMA2020):
1.空值合并：??类似于||针对null和undefined判断
2.可选链：?.

let res = null;
let o = res ?? {}; // 有点类似 null || {}; 不会针对数字和字符串区分 
console.log(o); // {}
let resObj = { error:'xx' };
let result = resObj.data ?? 'xxx';
console.log(result); //'xxx'
// 应用于非基本数据类型的属性或者对象进行判断，避免了数据类型转换带来的01、字符串 非空字符串之间的问题
let res = 0;
let o = res ?? {}; // 有点类似 0 || {}; 不会针对数字和字符串区分 console.log(o); // 0

// 通常用于后端返回数据不确定参数的情况
 {
          code:200,
          msg:'success',
          data:{
              reslut:[0,1,2,{
    obj:{id:1},
    arr:[{name:2}]
}] }
}
// 获取最里面的id 和name
let id = res?.data?.reslut?.[3]?.obj?.id;

// 函数调用
let customer = {
  name: "Carl",
  details: {age: 82, }
};
// 可选链也可以和函数调用一起使用
let duration = vacations.trip?.getTime?.();

解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。

数组模型的解构（Array）
基本

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
可嵌套

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
可忽略

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
不完全解构

let [a = 1, b] = []; // a = 1, b = undefined
剩余运算符

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
字符串等

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
解构默认值

let [a = 2] = [undefined]; // a = 2
当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

对象模型的解构（Object）
基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

解构默认值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

平铺数组两种方法：

let arr=[1,[2,[3,[6,7,[8]]]],4,5]
arr.flat(Infinity)// [1, 2, 3, 6, 7, 8, 4, 5]

function myFlat(arr){
    while(arr.some(Array.isArray)){
        arr = [].concat(...arr)
    }
    return arr
}
myFlat(arr) //[ 1, 2, 3, 6,7, 8, 4, 5]