展开运算符(…)

展开运算符(…),将一个数组进行展开,不会修改原数组

<body>
    <script>
      /* 
    展开运算符(…),将一个数组进行展开,不会修改原数组
    */
      let arr = [1, 3, 3, 7, 91];
      console.log(...arr); //[1, 3, 3, 7, 91]

      console.log(Math.max(...[1, 7, 91])); //91 求最大值
      console.log(Math.min(...[1, 7, 91])); //1 求最小值

      // 可以用于合并数组
      let arr1 = [2, 6, 8, 9];
      console.log(...arr, ...arr1); //合并数组[1, 3, 3, 7, 91,2, 6, 8, 9]
    </script>
  </body>

解构赋值 - 重点(熟悉)

概念:  ES6 允许 按照一个模式, 从目标结构 (数组/对象) 中提取值, 赋予给变量,  **解构的目的方便取值.**

目的: 优化取值的过程

let [person1, person2] = ['张飞', '关羽']

let { name,  age } = { name: 'zs', age: 18 }

let { name: username,  age } = { name: 'zs', age: 18 }

let { name: username = 'ls',  age } = { name: 'zs', age: 18 }

### 14.0 数组的解构

数组的解构

* 完全解构
* 不完全解构赋值

```jsx
// 什么是解构赋值: ES6 允许 按照一个模式, 从数组/对象中提取值, 赋予给变量
// 数组的解构
let arr = ["春天", "夏天", "秋天", "冬天"]
// let winOne = arr[0]
// let winTwo = arr[1]
// let winThree = arr[2]
// let winFour = arr[3]

// 写起来很麻烦, 解构赋值怎么写呢?
// 模式(数组/对象), 两边的模式要对应, 数组的模式: 会按照下标
let [winOne, winTwo, winThree, winFour] = arr // 完全解构
console.log(winThree)

let [winOne, , winFour] = arr // 不完全解构
console.log(winOne, winFour)

对象的解构

基本解构 解构重命名

// 例2: 对象解构举例
let obj = {
  name: 'zs',
  age: 18,
  desc: '不错'
}
// let name = obj.name
// let age = obj.age
// let desc = obj.desc
// 1. 基本解构
let { name, age, desc } = obj
console.log(name, age, desc)

// 2. 解构重命名
let { name: myname, age: myage, desc: mydesc } = obj
console.log(myname, myage, mydesc)

// 3. 解构默认值
let { name, age, desc, girl = '小花' } = obj
console.log(name, age, desc, girl)

// 4. 重命名+默认值
let { name, age, desc, girl: myGirl = '小花' } = obj
console.log(name, age, desc, myGirl)

数组解构

<body>
    <script>
      // 数组解构 赋值
      // const arr = [100, 60, 80];
      // let [a, b, c] = arr;
      // console.log(a);//100
      // console.log(b);//60
      // console.log(c);//80
    </script>
  </body>

必须加分号的两种情况

<body>
    <script>
      // 1. 立即执行函数要加
      // (function () { })();
      // (function () { })();
      // 2. 使用数组的时候
      // 交换值时一定要加结束符
      let apple = "青苹果";
      let apple1 = "红苹果";
      [apple, apple1] = [apple1, apple];
      console.log(apple, apple1);
    </script>
  </body>

数组解构细节

<body>
    <script>
      // const pc = ["海尔", "联想", "小米", "方正"];
      //  变量个数比原数组多  不匹配时 没有匹配到的返回值为undefined
      // let [a, b, c, d, e, f] = pc;
      // console.log(a, b, c, d, e, f); //海尔 联想 小米 方正 undefined undefined
      // //  变量个数比原数组少
      // let [g, r, t] = pc;
      // console.log(g, r, t); //海尔 联想 小米

      // 后面多个数据用一个变量名接收  ...变量名
      const pc = ["海尔", "联想", "小米", "方正"];
      // let [a, b, ...c] = pc
      // console.log(a, b, c) // 海尔 联想 ['小米', '方正']
      // 防止undefined
      // const arr = [0, 1]
      // let [a = 0, b = 0, c = 0] = arr
      // console.log(a, b, c) //; 0 1 0

      // 不要谁 用,号站位
      // let [a, b, , c] = pc;
      // console.log(a, b, c); //海尔 联想  方正
      // let arr = [1, 3, 4, [7, 8, [9]]];
      // console.log(arr[0]); //1
      // console.log(arr[1]); //3
      // console.log(arr[2]); //4
      // console.log(arr[3]); //7 8 [9]
      // console.log(arr[4]); //undefined

      let [a, b, c, [d, e, f]] = [1, 3, 5, [7, 8, [9]]];
      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);
      console.log(e);
      console.log(f);
    </script>
  </body>

对象解构

<body>
    <script>
      // 对象解构 把某一个属性值取出来
      // const obj = {
      //   name: "la",
      //   age: 17,
      // };

      // const { name, age } = obj;
      // console.log(name, age);
      // 重新命名

      // const { name, age: newName } = obj;
      // console.log(newName);

      // const obj = {
      //   name: "la",
      //   age: 17,
      //   family: {
      //     sonAge: 1,
      //     sonName: "小豆豆",
      //   },
      // };
      // const { name, age, family } = obj;
      // console.log(name);
      // console.log(age);
      // console.log(family); //{sonAge: 1, sonName: '小豆豆'}
      // console.log(sonAge);
      // console.log(sonName);

      const arr = [
        {
          uname: "张三",
          age: 18,
          family: {
            matherUname: "王六",
            matherAge: 28,
          },
        },
      ];
      const [
        {
          uname,
          age,
          family: { matherUname, matherAge },
        },
      ] = arr;
      console.log(uname);
      console.log(age);
      // console.log(family);
      console.log(matherUname);
      console.log(matherAge);
    </script>
  </body>

多级对象解，<body>

    <script>
      // 对象多级解构
      // const obj = {
      //   uname: "老子",
      //   family: {
      //     son: "儿子",
      //     sister: "女儿",
      //   },
      // };
      // const {
      //   uname,
      //   family: { sister, son },
      // } = obj;
      // console.log(uname);
      // console.log(sister);
      // console.log(son);

      // 深层解构
      const [ {uname,age,family,family: { matherAge, matherUname }}] = [ uname: "张三",age: 18,family: {
            matherUname: "王六",
            matherAge: 28 }}];
      console.log(uname);
      console.log(age);
      console.log(family); //{matherUname: '王六', matherAge: 28}（深层解构 解构出整个对象 不影响里面的）
      console.log(matherUname);
      console.log(matherAge);
    </script>
  </body>