ES6解构赋值精讲-优快云博客

核心：按照一定模式，从数组和对象中提取值

数组的解构赋值，根据索引位置进行赋值

// 根据位置进行赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);

let [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail)

// 也可以设置默认值
let [x, y = 'b'] = ['a'];
console.log(x, y)

// 如果解构不成功，值则为undefined
let [x1, y1] = ['a']
console.log(x1, y1)

对象的解构赋值，变量必须与属性同名，才能取到正确的值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo, bar)

// 下面这种解构失败
let { baz } = { foo: "aaa", bar: "bbb" };
// console.log(baz) // undefined

解构函数的用途

1.交换变量的值

let v1 = 1;
let v2 = 2;
[v1, v2] = [v2, v1]
console.log(v1, v2)

2.从函数返回多个值

function foo () {
	return [1, 2, 3]
} 
let [a1, b1, c1] = foo()
console.log(a1, b1, c1)

function _foo () {
	return {
		'_name': 'kobe',
		'_age': 40 
	}
} 
let {_name, _age} = _foo()
console.log(_name, _age)

3.函数参数的定义

// 更直观的方式进行传参
function fooo({name, age, number}) {
	console.log(name, age, number)
}
fooo({name: 'kobe', age: 40, number: 24})

4.提取JSON数据

let data = {
	"kobe": "cjn",
	"championship": [2000, 2001, 2002, 2009, 2010]
}
let {kobe, championship} = data
console.log(kobe, championship)

update...

ES6 解构赋值学习