《ES6进修2》 变量的解构赋值

ES6能够从数组和对象中提取值,然后对变量举行赋值。解构赋值的分类:数组解构赋值、对象解构赋值 、字符串解构赋值、数值解构赋值、布尔值解构赋值、 函数参数解构赋值。

1 数组的解构赋值

1.1 基础用法

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

如上所示,只需等号双方的形式雷同,左侧的变量就会被给予右侧对应的值。还能够运用嵌套数组举行构造。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

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

1.2 解构不胜利

假如构造不胜利,变量的值就即是undefined。

let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []

//以下两种状况,foo的值都即是undefined。
let [foo] = [];
let [bar, foo] = [1];

1.3 不完全解构

即等号左侧的形式只婚配一部分等号右侧的数组,依旧能够解构胜利。

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

//嵌套状况
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
c // 4

1.4 默认值

解构赋值许可设置默认值,当数组成员严厉即是undefined,默认值将见效。

let [x = 1] = [undefined];
x // 1
let [y = 1] = [null];
y // null

2 对象的解构赋值

解构一样适用于对象。

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

对象的解构赋值实际上是先找到同名属性,然后再赋值给对应的变量,前者是婚配形式,后者才是真正的变量。

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

let obj = { first: "hello", last: "world" };
let { first: f, last: g } = obj;
f // "hello"
g // "world"
first // first id not undefined

解构也能够用于嵌套构造的对象

let obj = {
  p: [
    "hello",
    { y: "world" }
   ]
};

let { p, p: [x, { y }] } = obj;
x // "hello"
y // "world"
p //  ["hello", { y: "world" }]

对象的解构一样能够指定默认值

let { x = 1 } = {};
x // 1

3 字符串的解构赋值

字符串举行解构赋值时,会被转换成一个类数组对象。

const [a, b, c] = "red";
a // "r"
b // "e"
c // "d"

类数组对象的length属性也能够举行解构赋值

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

4 数值和布尔值的解构赋值

解构赋值时,假如等号右侧不是数组和对象,则会先转为对象,假如是undefined和null则没法转为对象,此时会报错。

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

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

let { prop : x } = undefined; // 报错
let { prop : y } = null; // 报错

5 函数参数的解构赋值

函数的参数也能够运用解构赋值和指定默认值

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

function move({ x = 0, y = 0 } = {}) {
  return [x, y];
};
move({ x: 3, y: 8 }); // [3, 8]
    原文作者:BluesZ
    原文地址: https://segmentfault.com/a/1190000019235944
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞