ES6之解构

最新推荐文章于 2022-09-15 08:51:15 发布

原创最新推荐文章于 2022-09-15 08:51:15 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

es6 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了ES6中的解构赋值概念及其应用场景，包括数组解构、对象解构及混合解构等，通过具体示例展示了如何简化变量赋值过程。

解构的意思：

结构分解，ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

开发中比较常见的有对象解构、数组解构、混合解构。这是一种将数据结构分解为更小的部分的过程，从而达到简化提取信息的目的。

1. 数组中的解构

let [a,b,c] = ['我是a', '我是b', '我是c']
 console.log(a)  // 我是a
 console.log(b)  // 我是b
 console.log(c)  // 我是c

2.对象的解构

let { name, age } = { name: 'slz', age: 19}
console.log(name) // slz
console.log(age)  // 19

数组的结构用[];对象的解构用{}；一定要区分它是数组还是对象;

区分方法：看它是在赋值还是在拿值，等号左边，都为解构，等号右边，都是数组或者对象。

3. ...运算符

let [a,b,...c] = ['我是a', '我是b', '我是c', '我是多余的吗1', '我是多余的吗2']
console.log(a)
console.log(b)
console.log(c)

...运算符必须出现在尾巴（即最后），叫做 rest 运算符，俗称“尾巴”解构；

函数的形参列表也能使用 ... 运算符

checkInfo(...arr) {
  for (var i = 0;i<arr.length;i++) {
    let sum = 0;
    sum+=arr[i]
    console.log(sum)
  }
}
this.checkInfo(2,3,4)

此时这个函数即为计算所有实参的和，原来使用的arguments,也被代替。

let obj = { 'a': 1, 'b': 2};
let { a: n, b: m } = obj;
console.log(n)  // 1
console.log(m)  // 2
console.log(a)  // a is not defined
console.log(b)  // b is not defined

冒号右边的变量被是被真正赋值的，冒号左边的变量是表示的是对象的属性；

通常用来从对象中取一个属性，但要给此属性改名