当前位置: 代码迷 >> 综合 >> ES6之解构
  详细解决方案

ES6之解构

热度:88   发布时间:2024-03-06 13:52:59.0

解构的意思:

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

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

1. 数组中的解构

let [a,b,c] = ['我是a', '我是b', '我是c']console.log(a)  // 我是aconsole.log(b)  // 我是bconsole.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

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

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

 

  相关解决方案