JavaScript-对象解构赋值


注意点

对象的解构赋值和数组的解构赋值,除了符号不一样,其它的一模一样。数组解构使用 [],对象解构使用 {},在数组的解构赋值中,等号左边的格式必须和等号右边的格式一模一样,才能完全解构,例如如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let [a, b, c] = [1, 3, 5];
        console.log(a, b, c);
    </script>
</head>
<body>

</body>
</html>

在数组的解构赋值中,两边的个数可以不一样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let [a, b] = [1, 3, 5];
        console.log(a, b);

        let [c, d, e] = [1, 3];
        console.log(c, d, e);
    </script>
</head>
<body>

</body>
</html>

在数组的解构赋值中,如果右边少于左边,我们可以给左边指定默认值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let [a, b, c = 666] = [1, 3];
        console.log(a, b, c);
    </script>
</head>
<body>

</body>
</html>

如上都是数组的解构赋值,接下来就来看看对象的解构赋值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let obj = {
            name: "BNTang",
            age: 34
        }

        let name = obj.name;
        let age = obj.age;

        console.log(name, age);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let obj = {
            name: "BNTang",
            age: 34
        }

        let {name, age} = obj;

        console.log(name, age);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {name, age} = {name: "BNTang", age: 34};

        console.log(name, age);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {name} = {name: "BNTang", age: 34};

        console.log(name);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {name, age, height} = {name: "BNTang", age: 34};
        console.log(name, age, height);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {name, age, height = 1.80} = {name: "BNTang", age: 34};
        console.log(name, age, height);
    </script>
</head>
<body>
</body>
</html>

注意点:在对象解构赋值中,左边的变量名称必须和对象的属性名称一致,才能解构出数据:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {a, b} = {name: "BNTang", age: 34};
        console.log(a, b);
    </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let {age} = {name: "BNTang", age: 34};
        console.log(age);
    </script>
</head>
<body>
</body>
</html>

End


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM