ES6 解构赋值

最新推荐文章于 2024-08-22 20:42:51 发布

Karma Dreamer

最新推荐文章于 2024-08-22 20:42:51 发布

阅读量134

点赞数

文章标签： javascript 前端 vue.js es6

原文链接：https://blog.csdn.net/weixin_63763239/article/details/123406822?spm=1001.2014.3001.5501

版权

解构赋值是对赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

es6可以根据一定的规则，从数组或变量中提取值赋给变量，字符串也可以直接进行结构赋值

无论对象还是数组，两边的数据类型和数据结构都必须保持一致

1、数组的解构赋值是按照索引值一一对应的，如果多层嵌套，结构也必须保持一致不想要的书局可以再结构时用，逗号隔开空格表示

2、字符串的解构遵循数组的方式，因为他同样具下标和length

3、解构的默认值：数组，对象，字符串都是一样的

默认值就是a = 值默认值只有在没有数据，也就是undefined时生效

4、解构赋值的rest参数 rest会将剩余的所有数据赋值给rest，必须放在最后，...rest

数字和布尔值不能直接解构赋值可以转换为字符串来赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 解构赋值就是采用一定的模式将数组或者对象中的数据一一取出的方法
    // 解构赋值的时候等号两遍的数据结构必须保持一致 
    // 对于数组的解构赋值 他是按照索引值一一取出的
    // var arr = [1, 2, 3, 5]
    // var [a, b, c] = arr
    // console.log(a, b, c)
    // let arr = [1, 2, [3, 4, [5]]]
    // let [,,[,,[a]]] = arr
    // console.log(a)
    // let [,a,] = arr
    // ... 扩展运算符 通常适用于rest参数 他可以将剩余的参数放在一个集合中 他必须放在最后一个使用
    // let [a, ...b] = arr
    // console.log(a, b)
    // let [...a] = arr
    // let arr2 = [...arr, 4, 5, 6]
    // console.log(arr2)
    // let [a, b, c, d=4] = arr
    // console.log(d)
    // 对象的解构赋值 对象是按照key进行对比取值的
    let obj = {
      name: 'zhangsan',
      age: 16,
      info: {
        tel: 110,
        sex: ''
      }
    }
    // let {age, name, tel} = obj
    // console.log(age, name, tel)
    // let {name, ...obj2 } = obj
    // console.log(name, obj2)
    // let { sex='男' } = obj
    // console.log(sex)
    // let {info: {tel}} = obj
    // console.log(tel)
    // 函数参数的解构赋值 满足对象和数组解构赋值的所有规则
    // function fn({name, ...arg}) {
    //   console.log(name)
    //   console.log(arg)
    // }
    // fn(obj)
    // 字符串的解构赋值
    // let str = 'hell'
    // let [a, b, c] = str
    // console.log(a, b, c)
    // let num = 1243 // 数字不能直接解构赋值
    // let bool = true
    // var a = 1
    // var b = 2
    // var [b, a] = [a, b]
    // console.log(a, b)
  </script>
</body>
</html>