ES6-变量的结构赋值-汇总
2017-10-26 10:34
381 查看
圆括号问题
1)不能使用圆括号的情况
a.变量声明语句
b.函数参数
上面代码将整个模式放在圆括号之中,导致报错。
2)可以使用圆括号情况
赋值语句的非模式部分,可以使用圆括号。
7.解构用途
1)交换变量的值
2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
解构赋值可以方便地将一组参数与变量名对应起来。
加载模块时,往往需要指定输入哪些方法,解构赋值使得输入语句非常清晰。
1)不能使用圆括号的情况
a.变量声明语句
// 全部报错 let [(a)] = [1]; let {x: (c)} = {}; let ({x: c}) = {}; let {(x: c)} = {}; let {(x): c} = {}; let { o: ({ p: p }) } = { o: { p: 2 } };变量声明语句,模式不能使用圆括号。
b.函数参数
// 报错 function f([(z)]) { return z; } // 报错 function f([z,(x)]) { return x; }c.赋值语句的模式
// 全部报错 ({ p: a }) = { p: 42 }; ([a]) = [5];
// 报错 [({ p: a }), { x: c }] = [{}, {}];
上面代码将整个模式放在圆括号之中,导致报错。
2)可以使用圆括号情况
赋值语句的非模式部分,可以使用圆括号。
[(b)] = [3]; // 正确 ({ p: (d) } = {}); // 正确 [(parseInt.prop)] = [3]; // 正确上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
7.解构用途
1)交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];上面代码交换变量 x 和 y 的值,这样的写法不仅简洁,而且易读,语义非常清晰。
2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});4)提取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]5)函数参数的默认值
jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff };6)遍历 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如果只想获取键名,或只想获取键值,可以写成这样。
// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }7)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法,解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");注:这是一种解构赋值写法,比如returnObject函数返回了一个对象,只需要其中的a和b,就可以使用这种方法。const { SourceMapConsumer, SourceNode } = require("source-map"); 意思是导入包 “source-map”,但是只使用SourceMapConsumer和SourceNode2个接口函数,因为实际提供的接口远远不只2个,避免全局变量污染。
function returnObject() { return { a: 1, b: 2, c: 3, d: 4 }; } var { a, b } = returnObject();
相关文章推荐
- ES6-变量的结构赋值-数组
- [ES6] 变量的结构赋值
- ES6-变量的结构赋值-对象
- ES6-变量的结构赋值-字符串
- ES6-变量的结构赋值-数值和布尔值
- ES6-变量的结构赋值-函数参数
- ES6中变量的结构赋值作用
- ES6变量的结构赋值
- JS ES6的变量的结构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值
- ES6中的变量解构赋值的书写模式
- ES6_结构赋值
- es6笔记(3) 变量的解构赋值
- ES6 变量声明与赋值:值传递、浅拷贝与深拷贝
- ES6 变量的解构赋值
- ES6学习2(变量的解构赋值)
- 变量的结构赋值
- 【es6】变量解构赋值
- es6系列-变量的解构赋值
- es6 变量的解构赋值