解构赋值总结

数组的解构赋值

1、简单的

//let [a, b, c] = [1, 2, 3];
let a, b, c;
[a, b, c] = [1, 2, 3];
console.log(a, b, c);
//a = 1
//b = 2
//c = 3

2、复杂的

// let [a, [[b], c]] = [1, [[2], 3]];

let array = [1, [[2], 3]];
// let a = array[0];
// let b = array[1][0][0];
// let c = array[1][1];
let [a, [[b], c]] = array;

console.log(a, b, c);

3、多个变量

1. 变量少，给的数据多

let [,, third] = [1, 2, 3];
//third = 3

let array = [1, [[2], 3]];
let [, [[b], ]] = array;
//b = 2

let [head, ...tail] = [3, 11, 2, 5];
// head = 3
// tail = [11, 2, 5]

2. 变量多，给的数据少

let [a, b, c] = [1, 2];
// a = 1, b = 2, c = undefined

4、默认值

let [a, b, c = 0] = [1, 2, 3];
// a = 1, b = 2, c = 3
let [a, b, c = 0] = [1, 2, undefined];
// a = 1, b = 2, c = 0
let [a, b, c = 0] = [1, 2, null];
// a = 1, b = 2, c = null

默认值了也可以是函数(懒调用)

function f(){
	console.log('h1');
	return 1;
}
let [a = f()] = []
// a = 1;

5、小心TDS

let [x = 5, y = x] = []
//x = 5, y = 5
let [x = y, y = 5] = []
//引用错误

对象的解构赋值

1、按照key值

let { 匹配:变量 }
let {变量} == let {同名匹配:变量}

let {b, a} = {
    a: 3,
    b: 4
}

// a = 3, b = 4
let {b: b, a: a} = {//{匹配：变量}
    a: 3,
    b: 4
}
// a = 3, b = 4

let {b: b2, a: a1} = {//{匹配：变量}
    a: 3,
    b: 4
}
// a1 = 3, b2= 4

let b;
({b} = {b: 5});  //需要加括号
// b = 5

2、复杂的对象解构赋值

let obj = {
    p: [
        'Hello',
        {y: 'World'}
    ]
}
let {p: [x, {y: y2}]}  = obj;
//p和y是匹配值, x,y2是变量，x = 'Hello', y = 'World'

//可多次匹配
let {p: p, p: [x, {y}]} = obj;
// p = [ 'Hello', { y: 'World' } ], x = 'Hello', y = 'World'

let obj = {x: 5};
let {x: x1, x: x2, x: x3} = obj;
//x1 = 5, x2 = 5, x3 = 5

let obj = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
}
let {loc, loc: {start}, loc: {start: {line}}} = obj;
//以,为分割看匹配的值是什么， 第一个匹配的是loc, 第二个匹配的是start，第三个匹配的是line
// loc = { start: { line: 1, column: 5 } }
// start = { line: 1, column: 5 }
// line = 1

3、默认值

let {x = 3} = {};
// x = 3

把数据当对象

let array = [1, 2, 3];
let {0: a, 0: a2, 1: b, 2: c} = array;
//a = 1, a2 = 1, b = 2, c = 3

字符串的解构赋值

let [a, b, c] = '123';
// let {0:a, 1:b, 2:c} = '123';
//a = 1, b = 2, c = 3 
// a b c均为string类型

包装类 string, number, boolean

let {toString: s} = 123;
//s = Number.prototype.toString 

函数参数的解构赋值

function join([a, b]){
    return a + b;
}
join(['hello', ' world!'])
//hello world!

可使用默认值

function f({a = 0, b = 0} = {}){ //必须不能少={}
    console.log(a, b);
}
function f2({a, b} = {a: 0, b: 0}){
    console.log(a, b);
}
f({a: 3, b: 4});
f({a: 3});
f({});
f();
//3 4
//3 0
//0 0
//0 0

解构赋值常用的应用

1. 交换两个变量

let [x, y] = [1, 2];
[x, y] = [y, x];

2. 接收函数返回值

function f(){
    return [1, 2, 3];
}
let [x, y, z] = f();

3. 给函数传递参数

function f(a, b, c){
    console.log(a, b, c);
}
f({a: 1, b: 2});
//{ a: 1, b: 2 } undefined undefined

function f2([a, b, c]){
    console.log(a, b, c);
}
f2([1,2]);
f2([,2,3]);
// 1 2 undefined
// undefined 2 3

4. JSON文件的处理
   同object
5. 给函数的参数设定默认值

function f({a = 0, b = 0} = {}){
    console.log(a, b);
}

6. 从模块或者API中获得变量或者函数

const {PI, cos, sin} = Math;

const {xxxx, yyyy} = require('moduel-name');