天天看點

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>