ES6:变量的解构赋值
2017-06-06 22:35
706 查看
本内容摘自阮一峰先生的《ECMAScript6入门》书中第三章 -- 变量的解构赋值。
变量的解构赋值用途很多。
(1)交换变量的值
上面代码交换变量
(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
(4)提取JSON数据
解构赋值对提取JSON对象中的数据,尤其有用。
上面代码可以快速提取 JSON 数据的值。
(5)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
指定参数的默认值,就避免了在函数体内部再写
(6)遍历Map结构
任何部署了Iterator接口的对象,都可以用
如果只想获取键名,或者只想获取键值,可以写成下面这样。
(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(); //foo = 1,bar = 2
(3)函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
(4)提取JSON数据
解构赋值对提取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]
上面代码可以快速提取 JSON 数据的值。
(5)函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
指定参数的默认值,就避免了在函数体内部再写
var foo = config.foo || 'default foo';这样的语句。
(6)遍历Map结构
任何部署了Iterator接口的对象,都可以用
for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
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
如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }
(7)输入模块的指定方法
加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
以上内容为阮先生书中内容,本人只是摘抄收藏。感兴趣的可以去购书。
相关文章推荐
- es6分享——变量的解构赋值
- 【ES6】变量的解构赋值
- es6学习篇之 let和const命令 、变量的解构赋值
- es6-变量解构赋值
- es6学习之变量的解构赋值
- ES6 变量的解构赋值
- ES6学习——变量的解构赋值
- es6系列-变量的解构赋值
- es6笔记(3) 变量的解构赋值
- 【es6】【变量的解构赋值】【对象解构赋值】
- es6 变量的解构赋值
- ES6--变量的解构赋值
- ES6小实验-变量的解构赋值
- 【ES6学习】— (1)ES6简介、let与const命令以及变量的解构赋值
- ES6(三: 变量的解构赋值)
- ES6变量解构赋值的应用
- ES6(二) Destructuring-变量的解构赋值
- ES6新特性 let、const、变量对象的解构赋值
- ES6第二章 关于“变量的解构赋值”不得不说的事~
- 【ES6】变量的解构赋值