ES6解构赋值及ES6的一些简写介绍

news2025/8/14 4:23:41

1、ES6解构赋值：

● 解构赋值，就是快速地从对象或者数组中取出成员的一个语法方式

(1) 解构数组：

● 快速从数组中获取成员

 <script>
        //ES5的方式从数组中获取成员
        var arr = ['Jack','Rose','Tom']
        var a = arr[0] //Jack
        var b = arr[1] //Rose
        var c = arr[2] //Tom
  </script>

  <script>
        //使用ES6解构赋值的方法从数组中获取成员
        let arr = ['Jack','Rose','Tom']
        let [a,b,c] = arr
        console.log(a,b,c)
  </script>

● ES6方式结果：Jack Rose Tom

● 上述ES6方式代码解释：

● 前面的[ ]表示要从arr这个数组中获取成员了

● a b c 分别对应这个数组中的索引 0 1 2

● arr必须是一个数组

● 解构赋值就是构建一个和数组一模一样的解构，然后再赋值给数组arr，这样每一个相对应就能获取里面的成员，你可以单独获取a，这样a就代表取出第一个，但是你要是想取出第三个Tom不能只写c，因为只写c代表取出一个，那就是第一个，所以你要想取出Tom，必须要前两个也取出这样。

  <script>
        //多维数组
        let arr = [1,3,[4,5,[6]]]
        let [a,b,[c,d,[e]]] = arr
        console.log(e) //结果：6
  </script>

● 数组的快速交换

  <script>
        var a = 10
        var b = 20
        var [a,b] = [b,a]
        console.log(a,b) //结果：20 10
  </script>

解释说明：之前都是用第三方变量中转，现在就直接用解构赋值的方式交换

(2) 解构对象

● 快速从对象中获取成员

<script>
        //ES6的方法从对象中获取成员
        const obj = {
            name:"yiyi",
            age:21,
            location:'shenzhen'
        }
        const {name,age,location:mylocation} = obj
        console.log(name,age,mylocation)
 </script>

解释说明：

● 上面输出的结果是：yiyi 21 shenzhen

● 对象解构赋值也是一样的，按照对象解构定义一个重新赋值给对象obj

● 上面的location因为是一个关键字，直接拿来用会报错，那如果不小心使用了关键字怎么办，用重命名来解决，重命名就是上面location：mylocation重命名为mylocation

 <script>
        //复杂对象
        const obj = {
            name:"yiyi",
            age:21,
            location:{
                province:"guangdong",
                city:'shenzhen'
            },
            hobby:[111,222,333]
        }
        const {
            name,
            age,
            location:{
                province,
                city
            },
            hobby:[m,n,k]
        } = obj
        console.log(name,age,province,city,m,n,k)
  </script>

注意：

● {}是专门解构对象使用的

● [ ]是专门解构数组使用的

● 不能混用

2、ES6的对象简写：

● 当对象里key和存储value值的变量名相同时，变量名可以省略

<body>
    <input type="text" id="myusername">
    <input type="password" id="mypassword">
    <button id="btn">确定</button>
    <script>
        btn.onclick = function(){
            let username = myusername.value
            let password = mypassword.value
            let obj = {
                username:username,
                password:password
            }
            console.log("传给后端：",username,password)
        }
    </script>
</body>

结果：

解释说明：用username和password两个变量分别接收登录名和密码，通过对象的方式传给钩端，当我们对象里面的key值和变量名相同时，可以省略这个变量名，如下：

<body>
    <input type="text" id="myusername">
    <input type="password" id="mypassword">
    <button id="btn">确定</button>
    <script>
        btn.onclick = function(){
            let username = myusername.value
            let password = mypassword.value
            let obj = {
                username,
                password
            }
            console.log("传给后端：",username,password)
        }
    </script>
</body>

● 对象里面的函数名可以省略

 <script>
        //省略之前
        var obj = {
            a:1,
            getName:function(){
                console.log(this.a)
            }
        }
        obj.getName()
  </script>

 <script>
        //省略之后
        var obj = {
            a:1,
            getName(){
                console.log(this.a)
            }
        }
        obj.getName()
  </script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/14929.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！