ES6 变量结构及常见用途

变量的解构赋值

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

数组解构

只要等号两边的模式相同，左边的变量就会被赋予对应的值。

// 一一匹配的方式
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c =3

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

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

let [x,...y] = [1, 2, 3, 4]; // x = 1, y = [2, 3, 4]

解构不成功

let [a] = [];
let [a, b] = [1];
// a = undefined

不完全解构

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

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

不可解构

如果等号的右边不是数组或者严格地说，不是可遍历的结构，那么将会报错。

// 报错
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

数组解构默认值

// 解构赋值允许指定默认值。
let [a = true] = []; // a = true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

对象解构

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

let { bar, foo, val} = { foo: 'aaa', bar: 'bbb' };
// foo = "aaa"
// bar = "bbb"
// val = undefined

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
// baz = 'aaa'

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
// x = "Hello"
// y = "World"
// p = ["Hello", {y: "World"}]

对象解构默认值

var {x = 3} = {};
// x = 3

var {x, y = 5} = {x: 1};
// x = 1
// y = 5

var {x: y = 3} = {};
// y = 3

var {x: y = 3} = {x: 5};
// y = 5

var { message: msg = 'Something went wrong' } = {};
// msg = "Something went wrong"

用途

（1）交换变量的值

let a = 1;
let b = 2;

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

（2）从函数返回多个值

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

// 返回一个对象
function fnc2() {
  return {
    x: 1,
    y: 2
  };
}
let { x, y } = fnc2();// x = 1 , y = 2

（3）函数参数的定义

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

// 参数是一组无次序的值
function f({x, y, z}) {}
f({z: 3, y: 2, x: 1});

（4）输入模块的指定方法

const { getInfo, postInfo } = require('request');

参考文献

阮一峰老师的 ECMAScript 6 入门

---

点赞 评论 收藏 ~~ 今天的学习记录暂时到这...... ~~ 点赞 评论 收藏