解构赋值

￡神魔★判官ぃ 2022-02-01 13:11 429阅读 0赞

详解解构赋值

什么是解构赋值？

传统做法

  1. var array = ['hello', 'JavaScript', 'ES6'];
  2. var x = array[0];
  3. var y = array[1];
  4. var z = array[2];

ES6中，使用解构赋值，可以直接对多个变量同时赋值

  1. // 如果浏览器支持解构赋值就不会报错:
  2. var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
  3. // x, y, z分别被赋值为数组对应元素:
  4. console.log('x = ' + x + ', y = ' + y + ', z = ' + z);
  5. // x = hello, y = JavaScript, z = ES6

当对数组元素进行解构赋值时，多个变量要用[…]括起来。
如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致

  1. let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
  2. x; // 'hello'
  3. y; // 'JavaScript'
  4. z; // 'ES6'

解构赋值还可以忽略某些元素

  1. let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
  2. z; // 'ES6'

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性

  1. 'use strict';
  3. var person = { 
  4.     name: '小明',
  5.     age: 20,
  6.     gender: 'male',
  7.     passport: 'G-12345678',
  8.     school: 'No.4 middle school'
  9. };
  10. var { name, age, passport} = person;
  12. // name, age, passport分别被赋值为对应属性:
  13. console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);
  15. // name = 小明, age = 20, passport = G-12345678

当一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的

  1. var person = { 
  2.     name: '小明',
  3.     age: 20,
  4.     gender: 'male',
  5.     passport: 'G-12345678',
  6.     school: 'No.4 middle school',
  7.     address: { 
  8.         city: 'Beijing',
  9.         street: 'No.1 Road',
  10.         zipcode: '100001'
  11.     }
  12. };
  13. var { name, address: { city, zip}} = person;
  14. name; // '小明'
  15. city; // 'Beijing'
  16. zip; // undefined, 因为属性名是zipcode而不是zip
  17. // 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
  18. address; // Uncaught ReferenceError: address is not defined

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用心的语法获取

  1. var person = { 
  2.     name: '小明',
  3.     age: 20,
  4.     gender: 'male',
  5.     passport: 'G-12345678',
  6.     school: 'No.4 middle school'
  7. };
  9. // 把passport属性赋值给变量id:
  10. let { name, passport:id} = person;
  11. name; // '小明'
  12. id; // 'G-12345678'
  13. // 注意: passport不是变量，而是为了让变量id获得passport属性:
  14. passport; // Uncaught ReferenceError: passport is not defined

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题

  1. var person = { 
  2.     name: '小明',
  3.     age: 20,
  4.     gender: 'male',
  5.     passport: 'G-12345678'
  6. };
  8. // 如果person对象没有single属性，默认赋值为true:
  9. var { name, single=true} = person;
  10. name; // '小明'
  11. single; // true

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

  1. // 声明变量:
  2. var x, y;
  3. // 解构赋值:
  4. { x, y} = {  name: '小明', x: 100, y: 200};
  5. // 语法错误: Uncaught SyntaxError: Unexpected token =

这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

  1. ({ x, y} = {  name: '小明', x: 100, y: 200});

使用场景

解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：

  1. var x=1, y=2;
  2. [x, y] = [y, x]

快速获取当前页面的域名和路径：

  1. var { hostname:domain, pathname:path} = location;

如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。例如，下面的函数可以快速创建一个Date对象：

  1. function buildDate({ year, month, day, hour=0, minute=0, second=0}) { 
  2.     return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
  3. }

它的方便之处在于传入的对象只需要year、month和day这三个属性：

  1. buildDate({  year: 2017, month: 1, day: 1 });
  2. // Sun Jan 01 2017 00:00:00 GMT+0800 (CST)

也可以传入hour、minute和second属性：

  1. buildDate({  year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
  2. // Sun Jan 01 2017 20:15:00 GMT+0800 (CST)

使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。

发表评论

表情：
评论列表 （有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

    相关 解构赋值原理

    ES6变量的解构赋值本质上是“模式匹配”,只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined ES6中只要某种数据有I

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 118 阅读

    相关 前端解构赋值

    概念 结构赋值是ES6的一种语法规则，旨在允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这种就称之为结构赋值。 从本质上讲这种写法属于“模式匹配”，只要等号两

    短命女短命女/ 0 赞/ 285 阅读

    相关 解构赋值

    [ES 6 : 变量的解构赋值][ES 6 _]   1. 数组的解构赋值 \[ 基本用法 \] 　　按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解

    ゞ 浴缸里的玫瑰ゞ 浴缸里的玫瑰/ 0 赞/ 422 阅读