ES6变量的解构赋值（ES6学习笔记）

数组的结构赋值

简单的解构赋值

const arr = [1,2,3,4]
let [a,b,c,d] = arr
console.log([a,b,c,d])
//输出：[1,2,3,4]

复杂点的数组解构赋值

const arr = ['a','b',['c','d'],['e','f','g','h','i']]
//要拿到'a','b' 的值
const [a,b] = arr
//要拿到'b' 的值
const [, b] = arr
//要拿到'd'的值
const [, , [, d]]=arr
//要拿到'h'的值
const [, , , [, , , h]] = arr

（注意：定义[x, y] 是由于const 声明的是常量，不能重新赋值与改变，如果是const [a,b] 会与下面的const [, b]重复声明报错）

如果赋值对应的是数组项，则该项的值等于数组，如

const arr = [1,[1,2]]
const [a,b] = arr 
console.log(b)
//b输出的是[1,2]

默认值
当未定义值时返回：undefined

const arr = ['a']
const [a,b,c,d] = arr
console.log(a,b,c,d)

这时可以设置默认值

const arr = ['a']
const [a,b = 'b',c = 2,d] = arr
console.log(a,b,c,d)

输出结果：

数组与扩展运算符 “…”

“…” ： 具有将数组对象展开的功能

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [arr1,arr2]
const arr4 = [...arr1,...arr2]
console.log('arr3: ',arr3)
console.log('arr4: ',arr4)

输出结果：

用扩展用算符取剩余参数，会将剩余参数作为数组返回

const arr1 = [1,2,3,4,5,6]
const [a,b,c,...d]= arr1
console.log(d)

输出结果：

（注意：带有扩展运算符 “…”的变量需放在最后一个，否则会报错）

对象的解构赋值

简单的对象结构赋值

const obj = {
	eat: '香蕉',
	animal: '猴子'
}
//变量名要与obj中属性名保持一致
//对象是无序的，需匹配属性名
const { eat,animal } = obj
//只匹配animal ：
const { animal } = obj

稍复杂的对象结构赋值

const obj = {
	eat: '香蕉',
	animal: '猴子',
	skill:[{
		skillName:'爬树'
	},{
		skillName:'摘桃子'
	},{
		skillName:'大闹天宫'
	}]
}
//要取到eat与animal 与之前一样
const { eat,animal } = obj
//要取到skillName: '大闹天宫'，要怎么做
const {skill:[, , {skillName}]} = obj
console.log(skillName)
//要取到'爬树'+'摘桃子'要怎么做
const {skill:[{skillName:a},{skillName:b}]} = obj
console.log(a,b)

利用数组与对象的解构赋值相结合
由于const 不能重复声明变量，所以需用skillName:a ，取出skillName 赋值给a

默认值

当被解构的对象未定义时，可以设置默认值

let obj = {
	eat: '香蕉',
	animal: '猴子',
	skill: undefined
}
let {eat, animal='狗子', slill='爬树',age=2 } = obj
console.log(animal,slill,age)

输出结果

对象与扩展运算符 “…”

将剩余属性作为对象返回

const obj = {
	eat: '香蕉',
	animal: '猴子',
	skill: '爬树'
	}
const {eat, ...animalSkill } = obj
console.log(animalSkill)

输出结果

对象合并

const obj = {
	animal: '猴子',	
	}
const monkey = {
	...obj,
	eat: '香蕉',
	skill: '爬树'
	}
console.log(monkey)

输出结果

字符串解构赋值

字符串结构赋值会将单个字符返回，包括空格

const str = 'hello world'
const [a,b,c,d,e,f,g] = str 
console.log(a,b,c,d,e,f,g)

输出结果

字符串与扩展运算符

分解字符串

const str = 'hello world'
const [ ...str1 ] = str
const str2 = [...str]
//上面的两个扩展运算符用法等同于
const str3 = str.split('')
console.log(str1)

输出结果

个人学习笔记