ES6基础知识------变量的解构赋值

变量的结构赋值

提示：本文章针对个人多出文章总结

---

---

前言

在es6允许按照一定写法来进行数组和对象中取值,对变量进行复制,这被称为解构

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、数组的解构赋值

基本用法

示例：在以前,为变量赋值,只能直接指定该变量进行赋值.

let a = 1
let b = 2
let c = 3

而ES6中规定可以将该写法简写为

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

首先这中方法使用的是索引对应,按照数组对应的方法进行取值和赋值.

举个例子

这些是使用嵌套数组进行的解构的例子

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

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

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

解构,有些可能不会成功,所以为此依旧还是我们的老朋友出场 undefined.

let [foo] = []
let [bar, foo] = [1]

以上情况都属于解构不成功, foo的值都会等于undefined
当然还有另一种情况

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

上面两个例子,都属于不完全结构,但是可以成功

默认值

解构赋值允许指定默认值.

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

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

在代码中,如果有一个数组成员时 null 默认值就不会生效, 因为null不严格等于 undefined
如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

二、对象的解构

简介

解构不仅可以用于数组, 还可以用于对象

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

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

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

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