2.数据解构

数组解构

1. 根据数据位置、从前到后、简化取值赋值
2. 剩余操作符（…）只能放在最后，它只有展开、剩余两个作用
3. 只要数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值
   • 从当前位置的所有成员组成的数组，用剩余操作符
   • 变量 < 数组，多余数组舍掉
   • 变量 > 数组，多余变量为undefined
   • 变量设置默认值，直接在变量后面赋值，当变量为undefined时才会使用默认值

const arr = [100, 200, 300];

const [foo, bar, baz] = arr;
console.log(foo, bar, baz); // 100 200 300

const [, , baz] = arr;
console.log(baz); // 300

const [foo, ...rest] = arr;
console.log(rest); // [200,300]

const [foo, bar, baz, more] = arr;
console.log(more); // undefined

const [foo, bar, baz = 123, more = 'default value'] = arr;
console.log(baz, more);  // 300, 'default value'

const path = '/foo/bar/baz';
const [, , rootdir] = path.split('/');
console.log(rootdir); // bar


// 数组的展开
console.log(...arr); // 100,200,300
console.log.apply(console, arr); // 100,200,300

对象解构

根据属性名提取；其他特点 = 数组解构

const obj = { name: 'wr', age: 18 };

// 直接属性解构
const { name } = obj;
console.log(name); // wr

// 重命名解决同名解构
const name = 'tom';
const { name: objName } = obj;
console.log(objName); // wr

// 设置默认值：当obj中没有name属性默认值生效，有name属性会覆盖默认值
const name = 'tom';
const { name: objName = 'jack' } = obj;
console.log(objName); // wr

// 简单应用 
const { log} = console;
log(5);

扩展运算符（…）

1.取出参数对象中的所有可遍历属性拷贝到当前对象中
2.对象中的扩展运算符：浅拷贝、从右往左覆盖
3.数组的扩展运算符：任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组，将字符串转为数组、结合解构赋值生成数组、复制数组、将数组转换为参数序列

  //拷贝 = 浅拷贝
   let bar = { a: 1, b: 2 };
   let baz1 = { ...bar }; // { a: 1, b: 2 }


   //浅拷贝 == 基础数据类型，相互不影响
   let obj1 = { a: 1, b: 2 };
   let obj2 = { ...obj1, b: "bNew" };
   console.log(obj1); // {a: 1, b: 2}
   console.log(obj2); // {a: 1, b: "bNew"}

   ///浅拷贝 == 引用数据类型，相互影响
   let obj1 = { a: 1, b: 2, c: { name: "d" } };
   let obj2 = { ...obj1 };
   obj2.c.name = "dNew";
   console.log(obj1); // {a: 1, b: 2, c: {name: 'dNew'}}
   console.log(obj2); // {a: 1, b: 2, c: {name: 'dNew'}}

   //覆盖
   let bar = { a: 1, b: 2 };
   let baz = { ...bar, ...{ a: 11, b: 22 } }; // a: 11, b: 22


   const { log } = console;
   // 将字符串转为数组
   log([..."hello"]); // [ "h", "e", "l", "l", "o" ]

   // 结合解构赋值，生成数组
   const [first, ...rest] = [1, 2, 3, 4, 5];
   log(first); // 1
   log(rest); // [2, 3, 4, 5]

   // 复制数组，相互不影响，深拷贝
   const arr1 = [1, 2];
   const arr2 = [...arr1];

   // 将数组转换为参数序列
   function add(x, y) {
     return x + y;
   }
   const numbers = [4, 38];
   log(add(...numbers)); // 42
   log(...[4, 38]); // 4 38