往期内容
1.数组的解构与赋值
1.1基本用法：
ES6 允许从数组和对象中提取值，对变量进行赋值，这种套路称为解构（Destructuring）。
// 固定值 单个提取
const [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
// 过滤值 间隔提取
const [ , , b] = [1, 2, 3];
console.log(b) // 3
const [a, , b] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 3
// 单个值 数组提取
let [a, ...b] = [1, 2, 3, 4];
console.log(a) // 1
console.log(b) // [2, 3, 4]
let [a, b, ...c] = [1];
console.log(a) // 1
console.log(b) // undefined //如果解构不了，那么变量的值就等于undefined。
console.log(c) // []
let [a, b] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
let [a, [b], d] = [1, [2, 3], 4];
console.log(a) // 1
console.log(b) // 2
// 都是套路你掌握了么
// 只要顺序对，就能搞到手
1.2 默认值
解构赋值允许指定默认值
let [a = 1] = [];
console.log(a) // 1 // true
let [a, b = 'b'] = ['a'];
console.log(a) // a
console.log(b) // b
// 你是否用过这样的套路
function test(count = 1){
console.log(count)
}
test()
2. 对象结构赋值
2.1基本用法：
解构不仅可以用于数组，还可以用于对象。结构对象往往是我们开发中常用的骚操作
const { banana, apple } = { banana: 3.2, apple: 4.5 };
console.log(banana) // 3.2
console.log(apple) // 4.5
console.log(coconut) // undefined
对象的解构与数组有一点不同，数组的取值由它的位置决定；而对象变量必须与属性同名，才能取到正确的值。
对象的解构赋值可以变成别名，可以理解为，对象的解构赋值，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是 ：后者，而不是前者。
const { banana:bigBanana, apple } = { banana: 3.2, apple: 4.5 };
console.log(bigBanana) // 3.2
console.log(banana) //Uncaught ReferenceError: foo is not defined
到这里你可能会有疑问，数组解构可以有默认值，对象有么？ 当然制定ES6标准的人当然想的到。
2.2 对象的解构默认值：
let {a = 1} = {};
console.log(a) // 1
let {a, b = 2} = {a: 1};
console.log(a) // 1
console.log(b) // 3
let {a: b = 1} = {};
console.log(b) // 1
let {x: b = 2} = {x: 1};
console.log(b) // 1
let { message: msg = '都是套路' } = {};
msg // "都是套路"
3. 字符串的解构
字符串同样可以解构赋值。这是因为字符串被转换成了一个类似数组的解构。
const [a, b, c, d, e] = `banana`;
console.log(a, b, c, d, e);
4.函数参数的解构赋值
function test([x, y]){
return x + y;
}
console.log(test([1, 2])); // 3
function test({ banana, apple} = { banana:1, apple:1}){
return banana + apple; // return [banana , apple]; // 换一下你会发现新的套路
}
console.log(test({ banana:3, apple: 2 })); // 5 || [3,2]
console.log(test({ banana:3})); //NaN || [3, undefined]
console.log(test({ })); // NaN || [undefined, undefined]
console.log(test()); // 2 || [1,1]
下面是我工作中常用的套路
下面是我的公众号大家一起写文章呀。
