ES6 语法详解(变量的解构赋值) 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        /**
         * 变量的解构赋值
         * 理解:
         *     从对象或数组中提取数据,并赋值给变量(多个)
         * 对象的解构赋值:
         *     let {name, age} = {name:'dance', age: 18}
         * 数组的解构赋值:
         *     let [a,b] = [1,'dance']
         * 用途:
         *     给多个形参赋值
         */
        
        // 定义对象
        let obj = {
            username: 'dance',
            age: 18,
            sex: 'man'
        }
        
        // 对象解构赋值 就是从指定对象中提取存在的属性,如果属性不存在就是undefined,只提取自己需要的属性就可以了,不是必须提取全部的
        let {username, age} = obj
        console.log(username,age)
        
        // 定义数组
        let arr = [1, 'flower', 2, 4]
        
        // 数组解构赋值 就是从数组中提取指定下标的值,同样的不存在就是undefined,也是只提取需要的下标的值即可,不是必须提取全部的
        let [a,b,c,d] = arr
        console.log(a,b,c,d)
        
        // 提取指定下标的值 中间不需要的不写就可以了
        let [one,,three] = arr
        console.log(one,three)
        
        // 函数形参解构
        // 定义普通函数
        function srcFoo(obj){
            console.log(obj.username + ':' + obj.age)
        }
        srcFoo(obj)
        
        // 定义形参解构函数  相当于 {username, age} = obj 也就是上面写的解构对象
        function descFoo({username, age}){
            console.log(username + ':' + age)
        }
        descFoo(obj)
    </script>
</html>

作者：彼岸舞

时间：2021\08\16

内容关于：前端知识库

本文属于作者原创,未经允许,禁止转发

posted @ 2021-08-16 22:19  彼岸舞  阅读(88)  评论(0)  编辑  收藏  举报