1. 定义
解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。
2. 对象的解构赋值
- 看名字(key)来获取:
let { a, xxx } = { a: 1, b: 2 };
console.log(a, xxx); // 1 undefined
- 原key值:别名（可以给取出的属性起个别名）
let { a: asA } = { a: 1, b: 2 };
// 这里的a是不存在的，是无法打印a的，可以打印别名asA
console.log('别名:', asA); // 别名 1
- ：后面还可以跟数据结构
//第一个：后面跟数据结构，第二个：后面是别名
let { obj: { b, a: aboutA } } = { obj: { a: 1, b: 2 } }
console.log('b:', b, ',aboutA:', aboutA) // b:2, aboutA:1
3. 数组的解构赋值
- 看顺序来获取
let [a, b1, c] = [1, 2, 3];
console.log(a, b1, c) // 1，2，3
- 可以跳着获取元素（不想取的元素可以传个空值）
let [, n2, n3] = [1, 2, 3];
console.log(n2, n3) // 2，3
4. 函数参数解构
let List = [
{ n: 1, _Client: 'A' }, { n: 2, _Client: 'B' }
];
function parseProp({ _Client }) {
return _Client;
}
// let _Clinets = List.map( obj=> parseProp(obj) );
let _Clinets = List.map(parseProp); // 上面一句代码的简写
console.log(_Clinets); // B （取到了List数组的对象中的 _Client的值）
- 也可给参数起别名
function ff({ a: asA }) {
console.log(asA)
}
ff({ a: 777 }) // 777
- 复杂解构时，解构取值时注意结构对应
function ff1({ obj:{a} }) {
console.log(a)
}
ff1({ obj: { a: 88 } }) // 88
参数是数组时，也可以跳着取值
function ff2([,b,c]) {
console.log(b,c)
}
ff2([1,2,3]) // 2，3
5. 函数解构及默认值相关笔试题
// 1. 参数可以解构
// 2. 参数可以默认值
const fun = ({ x = 10, y } = { y: 2 }) => {
// 隐性存在:
// 没有传递参数
// 传递了参数: 以形参为主
console.log(x, y)
}
// 优先以传递进来的为准，没有传递的填充默认值
// fun({x:1,y:2}); // 1,2
// fun({y:2}); // 10 2
fun(); // 10 2 没传：二合一，以默认值为主
// fun({x:1}); // 1 undefined 传了：二合一，以形参为主
