2023/3/7日笔记

少年别浪
81 阅读2分钟

4-1、数组的解构赋值

什么是解构赋值

  • 解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量

代码案例

<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>4-1、数组的解构赋值</title>
</head>
<body>
    <script>
        // 1.认识解构赋值
        // const arr = [1,2,3];
        // const a = arr[0];
        // const b = arr[1];
        // const c = arr[2];
        // console.log(a,b,c);

        const [a,b,c] = [1,2,3];
        console.log(a,b,c);
        // 2.什么是解构赋值
        // 解析某一数据的结构，将我们想要的东西提取出来，赋值给变量或常量
    </script>
</body>
</html>

4-2、数组解构赋值的原理

代码案例

<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>4-2、数组解构赋值的原理</title>
</head>

<body>
    <script>
        // 1.模式（结构）匹配
        // [] = [1,2,3];

        // 2.索引值相同的完成赋值
        // const [a,b,c] = [1,2,3];
        // console.log(a,b,c);

        // 不取的，可以直接用逗号跳过
        const [a, [, , b], c] = [1, [2, 3, 4], 5];
        console.log(a, b, c);
    </script>
</body>

</html>

4-3、数组解构赋值的默认值

默认值的生效条件

  • 只有当一个数组成员严格等于（===）undefined时，对应的默认值才会生效

默认值表达式

  • 如果默认值是表达式，默认值表达式是默认求值的。即可以理解为用得到才会调用，用不到就不会调用

代码案例

<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>4-3、数组解构赋值的默认值</title>
</head>

<body>
    <script>
        // 1.默认值的基本用法
        // const [a,b] = [];
        // // 等价于
        // const [a1,b1] = [undefined,undefined];
        // console.log(a,b,a1,b1);

        // const [a = 1, b = 2] = [];
        // console.log(a, b);

        // 2.默认值的生效条件
        // 只有当一个数组成员严格等于（===）undefined时，对应的默认值才会生效
        // const [a = 1, b = 2] = [3, 0];       //3,0
        // const [a = 1, b = 2] = [3, null];    // 1,null
        // const [a = 1, b = 2] = [3];          // 3,2
        // console.log(a,b);

        // 3.默认值表达式
        // 如果默认值是表达式，默认值表达式是默认求值的。即可以理解为用得到才会调用，用不到就不会调用
        const func = () => {
            console.log("我被执行了");
            return 2;
        };
        // const [x = func] = [1]
        const [x = func()] = [];
        console.log(x);
    </script>
</body>

</html>

4-4、数组解构赋值的应用

代码案例

<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>4-4、数组解构赋值的应用</title>
</head>

<body>
    <p>123</p>
    <p>321</p>
    <p>345</p>
    <script>
        // 1.常见的类数组的解构赋值
        // arguments
        // function fun() {
        //     // console.log(arguments);
        //     // console.log(arguments.push);
        //     const [x,y]=arguments;
        //     console.log(x,y);
        // }
        // // fun();
        // fun(1,2);

        // NodeList
        // console.log(document.querySelectorAll("p"));
        // const [p1,p2,p3] =document.querySelectorAll("p");
        // console.log(p1,p2,p3);

        // 2.函数参数的解构赋值
        // const array = [1, 1];
        // // const add = arr => arr[0] + arr[1];
        // // 可以理解为 形参[x,y] = 实参[1,1]
        // const add = ([x,y]) => x+y;
        // const add = ([x = 0,y = 0]) => x+y;
        // console.log(add(array));
        // console.log(add([]));
        
        // 3.交换变量的值
        let a = 1;
        let b = 2;
        
        // let c = a;
        // a = b;
        // b = c;
        // console.log(a,b);

        // [a,b] = [b,a];
        [a,b] = [2,1];
        console.log(a,b);

    </script>
</body>

</html>

5-1、对象的解构赋值

代码案例

<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>5-1、对象的解构赋值</title>
</head>

<body>
    <script>
        // 1.模式（结构）匹配
        // {}={}

        // 2.属性名相同的完成赋值
        // const {age,username} = {username:"114514",age:24};
        // const {age:age,username:username} = {username:"114514",age:24};
        // console.log(age,username);

        // 取别名
        const { age: ages, username: uname } = { username: "114514", age: 24 };
        console.log(ages, uname);
    </script>
</body>

</html>

5-2、对象解构赋值的注意事项

默认值的生效条件

  • 对象的属性值严格等于 undefined 时，对应的默认值才会生效

默认值表达式

  • 如果默认值是表达式，默认值表达式是惰性求值的

将一个已经声明的变量用于解构赋值

  • 如果将一个已经声明的变量用于对象的解构赋值，整个赋值需再圆括号中进行

代码案例

<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>5-2、对象解构赋值的注意事项</title>
</head>

<body>
    <script>
        // 1.默认值的生效条件
        // 对象的属性值严格等于 undefined 时，对应的默认值才会生效
        const { username = "ZhangSan", age = 0 } = { username: "Alex" }
        console.log(username, age);

        // 2.默认值表达式
        // 如果默认值是表达式，默认值表达式是惰性求值的
        // 只要默认值是表达式，就不区分是数组还是对象，都是一样惰性求值，故此处案例省略

        // 3.将一个已经声明的变量用于解构赋值
        // 如果将一个已经声明的变量用于对象的解构赋值，整个赋值需再圆括号中进行
        // let {x} = {x:1}
        // let x = 1;
        // ({x} = {x:"Alex"})
        // [x] = [1]
        // console.log(x);

        // 4.可以取到继承的属性
        // const {a = 1} = {};
        // const { toString } = {};
        // console.log(toString);
        // Object.prototype
        // console.log(Object.prototype);
        console.log({});
    </script>
</body>

</html>

5-3、对象解构赋值的应用

代码案例

<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>5-3、对象解构赋值的应用</title>
</head>
<body>
    <script>
        // 1.函数参数的解构赋值
        // const logPersonInfo = user => console.log(user.username,user.age);
        // logPersonInfo({username:"张三",age:24});

        // const logPersonInfo = ({age,username}) => console.log(username,age);
        // logPersonInfo({username:"张三",age:24});

        // const logPersonInfo = ({age = 0,username = "ZhangSan"}) => console.log(username,age);
        // logPersonInfo({});

        // 2.复杂的嵌套
        const obj = {
            x: 1,
            y: [2,3,4],
            z: {
                a: 5,
                b: 6,
            }
        };
        // 如果只想获取到3
        const {y:[,yyy]} = obj;
        console.log(yyy);

        // 如果想要获取整个y
        // const {y} = obj;
        const {y:y} = obj;
        console.log(y);

        // 如果想要获取整个z和z里面的b
        const {z,z:{b:b}} = obj;
        console.log(z,b);
    </script>
</body>
</html>

5-4、其他数据类型的解构赋值

字符串的解构赋值

  • 字符串既可以按数组形式来解构赋值，也可以按对象形式来解构赋值

undefined 和 null 的解构赋值

  • 由于undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错
  • 或者说 undefined 和 null 没有对应的包装对象所以无法通过它们转换成相应对象

代码案例

<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>5-4、其他数据类型的解构赋值</title>
</head>

<body>
    <script>
        // 1.字符串的解构赋值
        // 数组形式的解构赋值
        // const [a,b,,,c] = "hello";
        // console.log(a,b,c);

        // 对象形式的解构赋值
        // const { 0: a, 1: b, 4: c, length } = "hello";
        // console.log(a, b, c, length);
        // console.log("hello".length);

        // 字符串既可以按数组形式来解构赋值，也可以按丢相信是来解构赋值

        // 2.数值和布尔值的解构赋值
        // 先将等号右边的值转为对象
        // console.log(new Number(123));
        // const { a, toString } = 123;
        // const { a = 1,toString } = 123;
        // console.log(a,toString);

        // const { b = 2, toString } = true;
        // console.log(b, toString);
 
        // 3.undefined 和 null 的解构赋值
        // 由于undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错
        // 或者说 undefined 和 null 没有对应的包装对象所以无法通过它们转换成相应对象
        // const {toString} = undefined;
        // const {toString} = null;
    </script>
</body>

</html>
avatar
文章
阅读
粉丝