4小时快速掌握ES6核心用法 - 1.7 解构赋值

最新推荐文章于 2024-07-08 18:51:22 发布

longfei815

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量363

点赞数

分类专栏： es6 文章标签：前端 html javascript es6 html5

本文链接：https://blog.csdn.net/jolinoy/article/details/123609419

版权

es6 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.7 解构赋值

解构赋值时对赋值运算符的一种扩展
它通常针对数组或者对象进行操作。
优点：代码书写上简洁且易读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1.7 解构赋值</title>
</head>
<body>
    <script>
        // 解构赋值时对赋值运算符的一种扩展
        // 它通常针对数组或者对象进行操作。
        // 优点：代码书写上简洁且易读

        // 1.对象结构 es6写法
        let node = {
            type:'iden',
            name:'foo'
        }
        // 完全解构
        let {type,name} = node;
        console.log(type,name); // 输出：iden foo
        
        // 不完全解构，可忽略
        // let obj = {
        //     a:{
        //         name:'张三'
        //     },
        //     b:[],
        //     c:'hello world'
        // }
        // 可忽略
        // let {a} = obj;
        // 剩余运算符
        // let {a,...res} = obj;
        // console.log(a,res);     // 输出：{name: "张三"}  {b: [] c: "hello world"}

        // 默认值
        // let {a,b = 10} = {a:20};
        // console.log(a,b);
        
        // 对数组解构
        // let arr = [1,2,3];
        // 将以上数组解构
        // let [b,c,d] = [1,2,3];
        // console.log(b,c,d); // 输出：1 2 3 

        // 可嵌套
        // let [a,[b],c] = [1,[2],[3]];
        // 可忽略
        let [a,b] = [1,2,3,4,5];
        console.log(a,b); // 输出：1 2

        // 解构赋值默认值
        // let [a,b,c,d,e,f=10] = 'hello';
        // console.log(a,b,c,d,e,f);   // 输出：h e l l o 10
        
    </script>
    
</body>
</html>

longfei815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4小时快速掌握ES6核心用法 - 1.7 解构赋值

1.7 解构赋值解构赋值时对赋值运算符的一种扩展它通常针对数组或者对象进行操作。优点：代码书写上简洁且易读<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
复制链接

扫一扫