JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

1.解构赋值的定义

在ES6中，允许按照一定模式，从数组和对象中提取值(所谓解构)，然后对变量进行赋值。

var a = 1;
var b = 2;
var c = 3;//等价于var [a, b, c] = [1, 2, 3];

如果解构不成功，对应的变量就会赋值undefined.

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

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

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 [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

function* fibs() {var a = 0;var b = 1;while (true) {yield a;[a, b] = [b, a + b];}
}var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

2. 默认值

解构是允许指定默认值的，例如：

var [foo = true] = [];
foo // true

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

但要注意，在ES6中，使用===来判断一个位置是否有值，如果一个数组成员不严格等于undefined, 默认值是不会生效的。

var [x = 1] = [undefined];
x // 1var [x = 1] = [null];
x // null

如果默认值是一个表达式，则表达式是惰性的，即只有在用到的时候，才会求值。

function f() {console.log('aaa');
}let [x = f()] = [1];

等价于

let x;
if ([1][0] === undefined) {x = f();
} else {x = [1][0];
}

3.对象的解构赋值

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

var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

这个例子中，foo是匹配的模式， baz才是赋值的变量。采用这种写法时，变量的声明和赋值是一体的。

对象的结构同样可以设置默认值，条件书属性严格等于undefined. 如果解构失败，变量的值也是undefined.

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

解构赋值的规则是，只要等号右边的不是对象，就先将其转换为对象。

4. 圆括号问题

解构赋值不能使用圆括号的三种情况：

变量声明语句中，不能带有圆括号
函数参数中，模式不能带有圆括号
赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

// 全部报错

var [(a)] = [1];var {x: (c)} = {};
var ({x: c}) = {};
var {(x: c)} = {};
var {(x): c} = {};var { o: ({ p: p }) } = { o: { p: 2 } };

// 报错
function f([(z)]) { return z; }

({ p: a }) = { p: 42 }; ([a]) = [5];

[({ p: a }), { x: c }] = [{}, {}];

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

5. 变量解构的用途

变量结构可以用于以下用途：

交换变量的值：

[x, y] = [y, x];

从函数返回多个值：

// 返回一个数组function example() {return [1, 2, 3];
}
var [a, b, c] = example();// 返回一个对象function example() {return {foo: 1,bar: 2};
}
var { foo, bar } = example();

函数参数的定义：

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

提取JSON数据

var jsonData = {id: 42,status: "OK",data: [867, 5309]
};let { id, status, data: number } = jsonData;console.log(id, status, number);
// 42, "OK", [867, 5309]

函数参数的默认值

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

遍历Map结构

var 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");

转载于:https://www.cnblogs.com/JacobQiao/p/6219742.html

JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值相关推荐

最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...
ES6基础：变量的解构赋值
ES6基础系列之变量的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.这种方式的出现大大提高了代码的扩展性前言一.数组的解构赋值二.对象的解构赋值三.函 ...
ES6入门：变量的解构赋值
1.数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
ES6学习笔记二新的声明方式和变量的解构赋值！
新的声明方式在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量 ...
ES6学习（二）—变量的解构赋值
ES6学习(二)-变量的解构赋值文章只列举了一部分完整版请看阮一峰ES6入门教程点我查看阮一峰ES6入门教程一.数组的解构赋值二.对象解构赋值三.函数参数的解构赋值
ES6阮一峰-----变量的解构赋值学习
1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
ES6学习之 - 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 1. 数组的解构赋值以前,为变量赋值,只能直接指定值. let a = 1; let b ...
ES6新特性_变量的解构赋值---JavaScript_ECMAScript_ES6-ES11新特性工作笔记006
然后我们再看,变量的解构赋值. 可以看到按照一定的模式,从数组和对象中提取数据,以及对对应的变量进行赋值被称为解构赋值. 可以看到上面 let[xiao,liu,zhao,song]=F4 相当于我 ...

JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值相关推荐

最新文章

热门文章