ES6：ES6解构考点（*****五颗星）

1.对象解构

      对象解构: 将对象中的值 提取出来,赋值给变量

            let {变量,变量,变量..}  =  对象

            实现 将对象的key 的 value值赋值给  key同名的变量

            注意点: key要和变量同名才可以解构，在对象中找不到和变量同名的key,得到undefined

完全解构：将对象中的所有值全部拿出来赋值给变量

部分解构：将对象的一部分值赋值给变量

解构之后重命名   let {对象对应的key:重命名之后的变量名} = obj;

解构 内置对象的方法：

let {变量} = Math内置对象    {random:fn}

需求：取出对象的所有值，赋值给变量

<script>
        var obj = {
            name:"张三",
            age:21,
            hobby:"打球"
        }

        // 需求: 取出对象的所有值,赋值给变量

        // var name = obj.name;
        // var age = obj.age;
        // var hobby = obj.hobby;
        // console.log(name,age,hobby);
        // 上面的方法太麻烦，用ES6解构会更简单，如下：

        // 1. 对象解构: 将对象中的值 提取出来,赋值给变量 
        /*
            let {变量,变量,变量..}  =  对象
            实现 将对象的key 的 value值赋值给  key同名的变量
            注意点: key要和变量同名才可以解构
        */
        let {n,age,hobby} = obj;
        console.log(n,age,hobby);//undefined 21 '打球'。在对象中找不到和变量同名的key,得到undefined

        // 将对象中的所有值全部拿出来赋值给变量---------完全解构


        //2. 将对象的一部分值赋值给变量--------部分解构
        // **** 解构之后重命名   let {对象对应的key:重命名之后的变量名} = obj;
        let {name:myName，,age:myAge} = obj;
        console.log(myName，myAge);//张三，21


        // 3.解构 内置对象的方法 
        // let {变量} = Math内置对象    {random:fn}
        let {random,max} = Math;
        console.log(random(),max(1,4));//0.8527309893876087,4
</script>

2.数组解构

数组解构： 将数组中的值赋值给变量

语法: let [变量，变量。。。] = arr

ES6 是为了简化代码, 当你发现不能简化的时候, 用ES5

完全解构

部分解构(顺序----补全逗号 占位)

复合解构

<script>
        let arr = [1, 2, 3];
        // 需求: 对数组arr进行解构赋值
        // 数组解构： 将数组中的值赋值给变量
        // 语法: let [变量，变量。。。] = arr
        // 1. 完全解构
         let [a, b, c] = arr;
         console.log(a,b,c);

        // 2. 部分解构(顺序----补全逗号  占位)
        let [e, f, g, d] = arr;
        console.log(e, f, g, d);// 解构失败,得到undefined

        // ES6 是为了简化代码, 当你发现不能简化的时候, 用ES5
        let [,, h] = arr;
        let [, k] = arr;
        console.log(h,k);

        // 3. 复合解构 
        let arr2 = [11, 22, 33, [10, 20, 30]]; // 二维数组
        let [q,w,r, [x, y, z]] = arr2;
        console.log(q,w,r, x, y, z);
</script>

3.字符串解构

解构一个字符串(本质上和数组解构是一样的)

字符串有索引有长度,不能使用数组方法------本质上是一个伪数组

字符串也不能修改

<script>
        // 需求:解构一个字符串(本质上和数组解构是一样的)
        // 字符串有索引有长度,不能使用数组方法------本质上是一个伪数组

        let str = "今天天气真不错!!";
        console.log(str[1]);//天
        console.log(str.length);//9

        // str.forEach();//字符串不能用数组的方法

        str[1] = "日";//不能修改!!!
        console.log(str);//今天天气真不错!!，不能修改!!!

        let [a,b] = str;
        console.log(a,b);//今，天
</