Skip to main content

ES6 解构赋值

使用数组表达式解构赋值#

E6 之前，我们可以这种形式将数组的内容赋值给多个变量

var newArray = [1, 2, 3];var  x = newArray[0];var  y = newArray[1];var  z = newArray[2];

ES6 中，通过数组解构语法

let newArray = [1, 2, 3];let x, y, z;[x, y, z] = newArray; //array destructuring assignment syntax //简写 let [a, b, c] = [1, 2, 3];

如果左边的数值少于右边数组的项数，左边变量的值只会和右边数组的内容一一对应，多于的内容将会忽略。 展开语法在解构赋值的应用

let [a, ...b] = [1, 2, 3, 4, 5, 6];console.log(a);//1console.log(Array.isArray(b));//trueconsole.log(b);//2,3,4,5,6//如果想跳过数组中的部分值，let [a, , ,...b] = [1, 2, 3, 4, 5, 6];console.log(a);//1console.log(b);//4,5,6

解构赋值中，设置变量的默认值：

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

嵌套数组：多维数组中提取值并分配给变量

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

使用数组解构表达式作为函数参数来提取可迭代数组的值，作为参数传递给函数参数，

function myFunction([a, b, c = 3]) {   console.log(a, b, c); //Output "1 2 3"}myFunction([1, 2]);//函数参数我们可以传递undefined，指定某个具体的参数使用默认值，我们可以使用解构赋值为相关变量提供一组默认值，并传入undefined。function myFunction([a, b, c = 3] = [1, 2, 3]) {   console.log(a, b, c);  //Output "1 2 3"}myFunction(undefined)

使用对象表达式解构赋值#

对象解构赋值将对象属性的值赋给多个变量。ES6 之前我们可以这样把对象的属性赋值给多个变量，如下段代码所示：

var object = {name : "John", age : 23};var name = object.name;var age = object.age;

在 ES6 里，我们可以使用对象解构表达式，在单行里给多个变量赋值，如下段代码所示：

let object = {name : "John", age : 23};let name, age;({name, age} = object);//object destructuring assignment syntax对象解构赋值的左侧为解构赋值表达式，右侧为对应要分配赋值的对象。解构语句的两边千万不要遗漏左右括号（），否则会报错。

解构对象变量的名称一定要和右边对象的属性名称保持一致，否则会提示变量的值为 undefined。如果你想以其它的变量名进行命名，你可以这么做，如下段代码所示：

let object = {name : "John", age : 23};let x, y;({name: x, age: y} = object);//x,y为对应对象属性的值John,23。如果你输出name或age,编译器则会提示ReferenceError: 变量 is not defined。//简写let {name: x, age: y} = {name : "John", age : 23};

在解构对象针对未分配值的变量，我们可以为变量提供默认值，如下段代码所示：

let {a, b, c = 3} = {a: "1", b: "2"};console.log(c); //Output "3”

在解构对象时变量名支持表达式计算，如下段代码所示：

let {["first"+"Name"]: x} = { firstName: "Eden" };console.log(x); //Output "Eden”

嵌套对象：从嵌套对象中提取属性值，即对象中的对象。

let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age:23}};console.log(name, age); //Eden 23

可以使用对象解构赋值作为函数参数，如下段代码所示：

function myFunction({name = 'Eden', age = 23, profession ="Designer"} = {}){    console.log(name, age, profession); // Outputs "John 23 Designer"}myFunction({name: "John", age: 23});//传递一个空对象作为默认参数值，如果将undefined作为函数参数传递，变量将使用默认值。

其他用法#

解构对象的方法#

比如结构 Math 对象的方法，如下段代码所示：

let {floor,pow}=Math;//把Math里的方法提取出来变成一个变量let a=1.1;console.log(floor(a));//1console.log(pow(2,3));//8

获取字符串的长度#

var {length}='lxy';console.log(length);//3

拆分字符串#

var [a,b,c,d]='前端达人';console.log(a,b,c,d) // 输出：前 端 达 人

交换变量#

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

遍历 Map 结构#

var map = new Map();map.set('first', 'hello');map.set('second', 'world');for (let [key, value] of map) {    console.log(key + " is " + value);}

加载指定模块的方法#

const { SourceMapConsumer, SourceNode } = require("source-map");

常用场景介绍#

比如我们经常与后端 API 接口做数据交互，我们需要处理返回的 JSON 对象，使用解构方式大大简化了我们的代码，如下段代码所示

let jsonData = {    id: 42,    status: "OK",    data: [867, 5309]};let { id, status, data: number } = jsonData;console.log(id, status, number);// 42, "OK", [867, 5309]
bookName("ES8 Concepts");//TypeError: bookName is not a functionvar bookName = function (name) {    console.log("I'm reading " + name);}

JavaScript引擎只会先提升函数，在提升变量声明，引擎将会对上述代码这样调整，代码如下：

var bookName; // 变量声明提升至最上面bookName("ES8 Concepts");// bookName is not function// because bookName is undefinedbookName = function (name) { // 变量赋值不会被提升    console.log("I'm reading " + name);}