解构赋值的简单使用

目录

数组解构

对象解构

嵌套解构

---

ES6允许安照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

解构赋值是一种特殊的语法，它使我们可以将数组或者对象“拆包”至一系列变量中。

数组解构

let array= ['ye','ping']//定义一个数组

//相当于
//firstName = array[0]
//lastName = array[1]
let [firstName,lastName]=array

console.log(firstName)//ye
console.log(lastName)//ping

当与 split 函数（或其他返回值为数组的函数）结合使用时，看起来更优（厉）雅（害）

let [firstName,lastName]='ye ping'.split(' ')
console.log(firstName)//ye
console.log(lastName)//ping

split()主要用于对一个字符串进行分割成多个字符串数组。括号里面的就是分割的依据，此处就是依据空格分割。

1.1.解构并不会修改原数组。之所以叫解构赋值，是因为它拆开了数组或者对象，将其中的各元素复制给一些变量。原来的数组或者对象自身没有被修改。

1.2.可以通过添加逗号来忽略数组或者对象中不想要的元素

let [firstName,,lastName]='ye,cai,ping,gou'.split(',')
console.log(firstName)//ye
console.log(lastName)//ping

在上面的代码中，第二个元素被跳过了，第三个元素被赋给了lastName变量。剩下的元素也被跳过了，因为在这没有对应给他们的变量

1.3.等号右侧可以是任何可迭代对象

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

这里的可迭代对象，可以理解为是‘宽泛意义上的数组’，就是说不一定是数组，但是能够被for..of循环遍历。（字符串是可迭代对象）

1.4.赋值给等号左侧的任何内容。我们可以在等号左侧使用任何可以被赋值的东西

let user = {};
[user.name, user.surname] = "ye ping".split(' ');

alert(user.name); // ye
alert(user.surname); // ping

1.5交换变量值的技巧

let firstName = "ping";
let lastName = "ye";

// 让我们来交换变量的值：使得 firstName = ye，lastName = ping
[firstName, lastName] = [lastName, firstName];

console.log(firstName)//ye
console.log(lastName)//ping

1.6 ...的使用

let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
//titles = ["Consul", "of the Roman Republic"]

1.7 默认值

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

对象解构

2.1基本语法：

let {var1, var2} = {var1:…, var2:…

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

变量的顺序并不重要，下面这个代码也是等价的：

// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

2.2如果我们想把一个属性赋值给另一个名字的变量，比如把 options.width 属性赋值给名为 w 的变量，那么我们可以使用冒号来设置变量名称：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

2.3对于可能缺失的属性，我们可以使用 "=" 设置默认值，如下所示：

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

2.4如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 仅提取 title 作为变量
let { title } = options;

alert(title); // Menu

2.5剩余模式...

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;

// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

嵌套解构

如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: { // 把 size 赋值到这里
    width,
    height
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu" // 在对象中不存在（使用默认值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut