ES6的解构赋值学习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //对象的解构赋值:
        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        let {
            b,
            c
        } = obj; //对象的解构赋值,按照属性名解构, 不受顺序影响
        // 可以不用let,但一般会加let
        //a,b,c可以换顺序==>b,a,c

        let a = 666;
        let {
            a: qq, //这是起别名, 不能看作是对象的键值对
        } = obj;
        console.log(qq); // 1
        let obj2 = {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
        }
        let {
            aa,
            bb,
            ...t //只能用在最后
        } = obj2;
        console.log(t); // { a: 1, b: 2, c: 3, d: 4 }


        //数组的解构赋值(会受顺序影响):
        let arr = [11, 22, 33, 44, 55, 66];
        let [, k] = arr; //数组的解构是以位置(索引)为基准;
        console.log(k); //22

        let x = 2,
            y = 3;
        [y, x] = [x, y]; //这样就很简单的把x和y的位置交换了;
        [i, o] = [x, y];
        console.log(x, y); // 3 2
        console.log(i, o); // 3 2


        function fn1(arr = []) { // es6的形参赋值 
            console.log(arr.length); //这样会是undefined.length会报错
        }
        fn1 && fn1(); //fn1存在 才有 fn1执行


        //解构赋值实现浅拷贝:
        let arr1 = [111, {
            q: 232
        }];
        let [...ttt] = arr1;
        console.log(ttt);
        ttt[1].q = 123; //那么arr1的q也会改变为123, 因为{q:232}是公有的堆地址
        ttt[1].a = 111; //不会改变arr1,因为ttt是私有的地址
    </script>
</body>

</html>
posted @ 2021-08-24 20:04  前端小学生er  阅读(40)  评论(0编辑  收藏  举报