zoukankan      html  css  js  c++  java
  • ES6(5)

    ES6允许按一定模式,从数组和对象中提取值,对变量进行赋值,这被称为 ‘解构’。

    一.  数组的解构赋值

    <script type="module">
           //ES5
           var a = 1;
           var b = 2;
           var c = 3;
    
           //ES6
           var [a,b,c] = [1,2,3];
           console.log(a); //1
           console.log(b); //2
           console.log(c); //3
    
    
           let[, , third] = ["first","second","third"];
           console.log(third); //third
    
           let[one, ,three] = ["One","Two","Three"];
           console.log(one); //One
           console.log(three); //Three
    
           let[head, ...tail] = [0,1,2,3,4,5,6,7,8,9];
           console.log(head); //0
           console.log(tail); //[1,2,3,4,5,6,7,8,9]
    
     </script>

    2) 不完全解构:等号左边的模式,只匹配一部分的等号右边的数组

    <script type="module">
            let[x,y] = [1,2,3];
            console.log(x); //1
            console.log(y); //2
    
            let[a,[b],c] = [1,[2,3],4];
            console.log(a); //1
            console.log(b); //2
            console.log(c); //4
    </script>

    3) 指定默认值:ES6内部使用严格的相等运算符(===)判断一个位置,所以如果一个数组成员不严格等于undefined,默认值是不会生效的

    <script type="module">
            var [temp = "string"] = [];
            console.log(temp); //string
    
            var [temp = "string"] = ["tempString"];
            console.log(temp); //tempString
    
            var [x = "aaa",y] = ["bbb"];
            console.log(x); //bbb
            console.log(y); //undefined
    
            var [m, n = "aaa"] = ["bbb"];
            console.log(m); //bbb
            console.log(n); //aaa
    
            var [p,q = "aaa"] = ["bbb",undefined];
            console.log(p); //bbb
            console.log(q); //aaa
    </script>

    注:非遍历结构报错

     <script type="module">
            var [temp] = 1; // Error: 1[Symbol.iterator] is not a function at eval
    </script>

    二. 对象的解构赋值

    <script type="module">
            var {name, age} = {name:"Conan", age: 23};
            console.log(name); //Conam
            console.log(age); //23
    </script>

    2) 变量属性名不一致:

    <script type="module">
            var {person_name, person_age, person_id} = {id:"007", name:"Conan", age: 23};
            console.log(person_name); //undefined
            console.log(person_age); //undefined
            console.log(person_id); //undefined
    
            var {name: person_name,age: person_age, id: person_id} = {id:"007", name:"Conan", age: 23};
            console.log(person_name); //Conan
            console.log(person_age); //23
            console.log(person_id); //007
    
    
            let object = {first: "Hello", last: "World"};
            let {first:firstname, last:lastName} = object;
            console.log(firstname);
            console.log(lastName)
    </script>

    3) 对象解构默认值:

    <script type="module">
            var{ x = 3 } = {};
            console.log(x); //3
    
            var{ x, y = 5} = {x: 1};
            console.log(x); //1
            console.log(y); //5
    
            var { message: msg = "u are crazy" } = {};
            console.log(msg); //u are crazy
    </script>

    三. 字符串解构赋值

    字符串被转换成一个类似数组的对象

    <script type="module">
           const [a, b, c, d, e] = "Hello";
           console.log(a);// H
           console.log(b);// e
           console.log(c);// l
           console.log(d);// l
           console.log(e);// o
    </script>

    2) 字符串的属性解构赋值:

    <script type="module">
            const {length: len} = "Hello";
            console.log(len); //5
    </script>

    四. 函数参数的解构赋值

     <script type="module">
            function sum([x,y]){
                return x + y;
            };
            console.log(sum([1,2])); //3
    </script>

    2) 函数参数解构赋值的默认值:

    <script type="module">
           function fun({x = 0, y = 0} = {}){
               return[x,y];
           };
    
           console.log(fun({x:100,y:200})); //[100,200]
           console.log(fun({x:100})); //[100,0]
           console.log(fun({})); //[0,0]
           console.log(fun()); //[0,0]
    
    </script>

    五. 解构赋值的用途

    1) 交换变量的值:

     <script type="module">
            //ES5:
            console.log("ES:5");
            var a = 100;
            var b = 200;
            console.log("交换前:");
            console.log("a="+a); // a=100
            console.log("b="+b); // b=200
            var temp;
            temp = a;
            a = b;
            b = temp;
            console.log("交换后");
            console.log("a="+a); // a=200
            console.log("b="+b); // b=100
    
            //ES6:
            console.log("ES:6");
            var x = 100;
            var y = 200;
            console.log("交换前:");
            console.log("x="+x); // x=100
            console.log("y="+y); // y=200
            [x, y] = [y, x];
            console.log("交换后:");
            console.log("x="+x); // x=200
            console.log("y="+y); // y=100
    </script>

    2) 从函数返回多个值:

    <script type="module">
           function fun(){
               return [1, 2, 3];
           };
            var [x, y, z] = fun();
            console.log(x); //1
            console.log(y); //2
            console.log(z); //3
    </script>
    <script type="module">
            function fun(){
                return{
                    id: "007",
                    name: "Conan",
                    age: 28
                }
            }
            var {id:person_id, name, age} = fun();
            console.log(person_id); // 007
            console.log(name); // Conan
            console.log(age); // 28
    
    </script>

    3) 函数参数的定义:(☆)

    <script type="module">
           //参数是一组有次序的值
            function fun([x, y, z]){
    
            };
            fun([100, 200, 300]);
            //参数是一组无次序的值
            function fun({x, y, z}){
    
            };
            fun({
                x: 100,
                y: 200,
                z: 300
            })
    </script>

    4) 提取 json 数据:(☆)

     <script type="module">
           var jsondata = {
               id: "007",
               name: "Canon",
               age: 28,
               score: {
                   Chinese: 98,
                   Math: 148,
                   English: 107
               }
           }
    
           //ES:5
           console.log("ES:5");
           console.log("Person's name is:" + jsondata.name);
    
            //ES:6
           console.log("ES:6");
            let {id: number, name, age, score} = jsondata;
            console.log(number); // 007
            console.log(name); // Canon
            console.log(age); // 28
            console.log(score.Chinese); // 98
    </script>
  • 相关阅读:
    Flask路由系统
    Flask配置方式
    Flask应用启动流程
    Flask简介及使用
    python调用支付宝支付接口
    python调用腾讯云短信接口
    Celery简介以及Django中使用celery
    django中使用redis
    Redis之缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级
    git操作
  • 原文地址:https://www.cnblogs.com/bky-1083/p/7170765.html
Copyright © 2011-2022 走看看