解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。
let arr = [1, 2, 3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
单独赋值给变量,解构赋值。
let [a, b, c] = [1, 2, 3]
解构赋值重点是在赋值,赋值的元素是要拷贝出来赋值给变量,赋值的元素本身是不会被改变的。
数组解构赋值
- 赋值元素可以是任意可遍历的对象
赋值的元素不仅是数组,它可以是任意可遍历的对象
let [one, two, three] = new Set([1, 2, 3])
console.log(one)//1
- 左边的变量
被赋值的变量还可以是对象的属性,不局限于单纯的变量。
let user = {};
[user.firstName, user.secondWork] ='xiaowu it'.split(' ');
console.log(user.firstName, user.secondWork) ;
// 注意:对象下面的属性firstName和secondWork最好驼峰命名
'Kobe Bryant'.split(' ') // ["Kobe", "Bryant"] ---------split() 方法用于把一个字符串分割成字符串数组。
- 循环体
普通对象遍历
let user = {
name: 'xiaowu',
age: 16
}
for(let key in user){
console.log(user[key]) //xiaowu 16
}
解构赋值在循环体中的应用,可以配合 entries 使用
let user = {
name: 'John',
age: 16
}
// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
console.log(`${key}:${value}`) // name:John, age:16
}
扩展:
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到