es6: 解构

解构核心：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构

解构一般有三种情况，完全解构，不完全解构，解构不成功,

1.数组的解构赋值

 

2. 默认值

解构赋值允许指定默认值

let [x,y='b'] = ['a'];
console.log(y); //b

let [x,y = 'b'] = ['a',undefined];
console.log(y); //b ,数组成员为undefined时，默认值仍会生效(因为在ES6内部使用严格相等运算符‘===‘，判断一个位置是否有值，所以当一个数组成员严格等于undefined,默认值才会生效)

let [x,y = 'b'] = ['a',null];
console.log(y); //null,如果一个数组成员是null,默认值就不会生效，因为null不严格等于undefined

3. 对象的解构赋值

对象的解构与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 

实际上 对象的解构赋值是以这样的形式简写的

let {a : a , b : b } = {a : 1, b : 2}  简写： let { a, b } = { a: 1, b: 2 };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者，而不是前者，第一个a/b 是匹配的模式，对应的a/b属性值才是变量，真正被赋值的是属性值（也就是第二个a/b)

const node = {
    grand : {
        father : {
            line : 1,
            column : 5
        }
    }
 }

 let {grand,grand : { father},grand : {father : {column}}} = node;
 console.log(father); // {line : 1, column : 5}
 console.log(column); // 5
 // grand、fahter、column 分别对这三个属性解构赋值，grand、father是模式，只有column 是变量

4. 字符串的解构赋值

const [a,b,c,d,e] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
console.log(d); //l
console.log(e); //o

let { length : len} = 'yahooa';
console.log(len); //5,类似数组的对象都有一个length属性，还可以对这个属性解构赋值

5. 数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象，但是等号右边为undefined 和 null时无法转为对象，所以对他们进行解构赋值时，都会报错

let {prop : x } = undefined;
console.log(x); //报错：Uncaught TypeError: Cannot destructure property `prop` of 'undefined' or 'null'

6.函数参数的解构赋值

函数的参数也可以使用解构参数

function move({x = 0,y = 0} = { }){
return [x,y];
}
console.log(move({x : 3,y : 4})); //[3,4]
console.log(move({x : 3})); //[3,0]
console.log(move({})); //[0,0]
console.log(move()); //[0,0]
//move()的参数是一个对象，通过对这个对象进行解构，得到变量x、y的值，如果解构失败，x和y 等于默认值
function move2({x,y} = {x : 1, y : 2 }){
return [x,y];
}
console.log(move2({x : 6,y : 8})); //[6,8]
console.log(move2({})); //[undefined,undefined]
console.log(move2()); //[1,2]
//move2() 是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以与前一种写法的结果不太一样，undefined 就会触发函数的默认值

7. 解构用途

1⃣️   交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(x); //2
console.log(y); //1

2⃣️  从函数返回多个值
函数只能返回一个值，如果要返回多个值的话，只能将它们放在数组或者对象里返回

function example(){
return {
foo : 'a',
bar : 'b'
}
}
let {foo,bar} = example();
console.log(foo); //a
console.log(bar); //b

3⃣️   函数参数的定义

//参数是一组有次序的值
function example([x,y,z]){
return x + y + z;
}
example([1,2,3])
console.log(example([1,2,3])); //6
//参数是一组无次序的值
function f({x,y,z}){
return x + y + z;
}
f({x : 'a', z : 'b', y : 'c' });

console.log(f({x : 'a', z : 'b', y : 'c' })); //acb

4⃣️提取json数据
5⃣️函数参数的默认值
6⃣️输入模块的指定用法

 

原文：https://blog.csdn.net/qq_36846234/article/details/78973402?utm_source=copy