JS 中的解构赋值

文章来源于 https://juejin.im/post/5b7b95206fb9a019bd2463d8 整理为自己可以理解

解构赋值 : 解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。简单的理解就是????等号的左边等于等号的右边

• 数组的解构赋值

一般情况下的赋值 都是 采用直接从数组中取出每一项在进行赋值

// 一般情况下的赋值
let arr = [1,2,30];
let a = arr[0];
let b = arr[1];
let c = arr[2];

数组的解构赋值

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

但是很多时候，数据并非一一对应的，并且我们希望得到一个默认值
可以在解构赋值的时候传递指定的数据
但是 结构赋值的数据不可以覆盖已经存在的数据

var [a="随便设置的默认值",b,c] = [,2,3];
console.log(a); // "随便设置的默认值"
console.log(b); // 2
console.log(c); // 3

// 但是 结构赋值的数据不可以覆盖已经存在的数据
var [a="随便设置的默认值",b = 888,c] = [,2,3];
console.log(a); // "随便设置的默认值"
console.log(b); // 2
console.log(c); // 3

• 数组的拼接

数组的拼接可以直接使用 [...a,...b]

// 使用 concat() 方法进行拼接
var a = [1,2,3];
var b = [4];
var c = b.concat(a);
console.log(c); // [4,1,2,3];

// 使用解构赋值
var a = [1,2,3];
var b = [4];
var c = [...a, ...b];
console.log(c); // [1,2,3,4];

• 数组的克隆

数组克隆 可以使用 [...a] 相当于一个深拷贝

var a = [1,2,3];
var b = [];
b = a;
b.push(4);
console.log(a);  // [1,2,3,4]
console.log(b);  // [1,2,3,4]
/*
因为这只是简单的把引用地址赋值给b，而不是重新开辟一个内存地址，所以
a和b共享了同一个内存地址，该内存地址的更改，会影响到所有引用该地址的变量
*/ 

var a = [1,2,3];
var b = [];
b = [...a];
b.push(4);
console.log(a);  // [1,2,3]
console.log(b);  // [1,2,3,4]

• 对象的解构赋值

对象的解构赋值和数组的解构赋值其实类似，但是数组的数组成员是有序的
而对象的属性则是无序的，所以对象的解构赋值简单理解是 等号的左边和右边的结构相同

注意 接收参数的名称必须和对象中的键相同
接收参数的名称必须和对象中的键相同
接收参数的名称必须和对象中的键相同

var {name, age} = {name: "dada", age: 20};
console.log(name); // "dada"
console.log(age);  // 20

// 注意  接收参数的名称必须和对象中的键相同
var {name1, age} = {name: "dada", age: 20};
console.log(name1); // undefined
console.log(age);  // 20

对象的解构赋值是根据key 值来的

var {name: Name, age} = {name: "dada", age: 22};
console.log(Name);	// "dada"
console.log(age);	// 22

当变量已经被声明, 需要使用() 将解构赋值的对象包裹起来

var name,age;
({name,age} = {name: "dada", age: 22});
console.log(name);	// "dada"
console.log(age);	// 22

对象的解构赋值也可以设定默认值
这里需要使用= 不可以使用: eg var {name = "dada", age} = {age: 22};

var {name = "dada", age} = {age: 22};
console.log(name);	// "dada"
console.log(age);	// 22 

妙用 可以用来计算字符串的长度

var [a] = [{name: "dada", age: 22}];
console.log(a);	// {name: "dada", age: 22}

// 可以用来计算字符串的长度
var { length } = "dada dada";
console.log(length);	// 9 

可以获取函数的返回值

// 数组
function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();
console.log(a);	// 1
console.log(b);	// 2
console.log(c);	// 3

// 对象
function example() {
  return {
  name: "dada",
  age: 22
  };
}
var {name, age} = example();
console.log(name);	// "dada"
console.log(age);	// 22