ECMAScript 6 学习笔记:变量的解构赋值

栏目: JavaScript · 发布时间: 5年前

内容简介:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,即可以从数组中提取值,按照对应位置,对变量赋值,这被称为解构(Destructuring),如果解构不成功,变量的值就等于undefined,另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。是否可解构要看等号右边的值,只要是具备 Iterator 接口,就可以解构,如果不具有,则解构失败。解构赋值允许指定默认值,不过需要注意的是,ES6 内部使用严格相等运算符(===)判断一个位置是否有值。

数组的解构赋值

基本用法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,即可以从数组中提取值,按照对应位置,对变量赋值,这被称为解构(Destructuring),如果解构不成功,变量的值就等于undefined,另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。是否可解构要看等号右边的值,只要是具备 Iterator 接口,就可以解构,如果不具有,则解构失败。

// 基本用法
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3
let [a, b, c] = [1, 2];    // a = 1, b = 2, c = undefined
let [, , c] = [1, 2, 3];   // c = 3
let [a] = [];              // a = undefined

// 配合扩展运算符
let [a, ...b] = [1, 2, 3]; // a = 1, b = [2, 3]

// 具有 Iterator 接口的数据结构
let [a, b, c] = new Set([1, 2, 3]); // a = 1, b = 2, c = 3

默认值

解构赋值允许指定默认值,不过需要注意的是,ES6 内部使用严格相等运算符(===)判断一个位置是否有值。所以,只有当一个数组成员严格等于 undefined 时,默认值才会生效。

let [a = 1] = [undefined]; // a = 1
let [a = 1] = [null];      // a = null

如果默认值是一个表达式,那么这个表达式是惰性求值的。

function f() {return 0;}
let [a = f()] = [1]; // a = 1, 除非赋值为 undefined

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值,如果变量名与属性名不一致,则必须指定变量的属性名。

// 默认情况
let {a, b} = {b: 2, a: 1}; // a = 1, b = 2
let {c} = {b: 2, a: 1};    // c = undefined

// 变量名与属性名不一致
let {foo: c} = {foo: 3};   // c = 3;

与数组一样,解构也可以用于嵌套结构的对象。使用嵌套赋值时需要注意区别实际被赋值的变量和匹配的模式(变量的属性名)。

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
line // 1

如果对一个已声明的变量进行解构赋值,可以利用圆括号来避免 JS 将其解释为代码块。

// 错误的写法
let a;
{a} = {a: 1}; // SyntaxError: syntax error

// 正确的写法
let a;
({a} = {a: 1});

字符串的解构赋值

const [a, b, c, d, e] = 'hello'; // a = 'h', b = 'e', c = 'l', d = 'l', e = 'o'

类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值。

let {length : len} = 'hello'; // len = 5

数值的解构赋值

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。因此对于数值,会先将其转为对象,然后就可以获得该对象的属性。

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

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

function add([a, b]){
  return a + b;
}
add([1, 2]); // 3

[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]

函数参数的解构也可以使用默认值。此时为函数的变量赋予默认值

function move({a = 0, b = 0} = {}) {
  return [a, b];
}
move({a: 3, b: 8}); // [3, 8]
move({a: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

注意,如果为函数的参数赋予默认值,会得到不一样的结果

function move({a, b} = { a: 0, b: 0 }) {
  return [a, b];
}
move({a: 3, b: 8}); // [3, 8]
move({a: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

常见用途

交换变量的值

let a = 1;
let b = 2;
[a, b] = [b, a];

从函数返回多个值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函数参数的定义

// 参数是一组有次序的值
function f([a, b, c]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({a, b, c}) { ... }
f({c: 3, b: 2, a: 1});

函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

提取 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]

遍历 Map 结构

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

输入模块

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pro CSS Techniques

Pro CSS Techniques

Jeff Croft、Ian Lloyd、Dan Rubin / Apress / 2009-5-4 / GBP 31.49

Web Standards Creativity: Innovations in Web Design with CSS, DOM Scripting, and XHTML一起来看看 《Pro CSS Techniques》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具