ES6中数组解构赋值多种情况详解

话不多说看代码

// (1)普通解构赋值
let arr=['1','2']
let [str1,str2]=arr
console.log(str1,str2) // 1,2

// (2)我只需要取其中某一部分的情况

let arr=['1','2','3','4']
let [str1, , str2]=arr // 跳过谁使用逗号隔开
console.log(str1,str2) // 1,3

// (3)字符串解构赋值
let zifu='abcde' 
let [str1,,str2]=zifu // 同(2)
console.log(str1,str2) // a,c

// (4) 对数据为Object进行解构赋值
let user={names:'c',surnames:'d'};
[user.names,user.surnames]=['a','b'] // 注意对对象中已有属性进行赋值时，不能使用关键字进行声明了
console.log(user) //a,b

//(5) 对循环进行解构赋值
let user={names:'c',surnames:'d'};
for (let[key,val]  of Object.entries(user)) { //没看懂可以看下面注释在结合(1)进行看
  console.log(`键:${key},值:${val}`)
}

/**
 * Object.entries() 可以把一个对象的键值以数组的形式遍历出来，
 * 结果和 for...in 一致，但不会遍历原型属性
 * 
 * const obj = { foo: 'bar', baz: 'abc' }; 
 * console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]
 */

//(6) 结合 ...运算语法 
let arr=['a','b','c','d','e','f']
let [str1,str2,...strArr]=arr //...strArr 剩余的值将存放strArr中
console.log(str1,str2,strArr) // a,b,["c", "d", "e", "f"]

//(7) 如果数据过少 或者没有, 解构出来的是undefined ,可以使用参数默认值
let arr=[]
let [str1='参数默认值',str2,...strArr]=arr 
console.log(str1,str2,strArr) // '参数默认值', undefined, []

后面会持续更新关于ES6中的一些语法，可以关注一下