变量的解构赋值
1:数组的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
以前,为变量赋值,只能直接指定值。
以前,为变量赋值,只能直接指定值。
var a = 1; var b 2var c 3;
ES6允许写成下面这样。
var [a, b] = [] 本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。解构赋值不仅适用于var命令,也适用于let和const命令。let[foo[[bar; foo // 1 bar // 2 baz // 3
解构赋值还有很多其他情况,具体请参看原文。
默认值
解构赋值允许指定默认值。
[foo = true // true [x= 'b'['a'; // x='a',y='b' 对象的解构赋值解构不仅可以用于数组,还可以用于对象。
{foo} : "aaa": "bbb" } // "aaa" bar // "bbb"
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
{ bar // "bbb" { baz ; baz // undefined
上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined
。
如果变量名与属性名不一致,必须写成下面这样。
: baz : 'aaa': 'bbb' // "aaa" let obj { first: 'hello': 'world' : f: l = obj; f // 'hello' l // 'world'
这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。
: foo: bar 也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。解构赋值的用途
变量的解构赋值用途很多。
(1)交换变量的值
[y 上面代码交换变量x
和y
的值,这样的写法不仅简洁,而且易读,语义非常清晰。(2)从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
// 返回一个数组 function example() { return ; } = example); // 返回一个对象 { foo: 2 (3)函数参数的定义解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值function f{ .. } f // 参数是一组无次序的值 {x{z (4)提取JSON数据解构赋值对提取JSON对象中的数据,尤其有用。
varjsonData { id42: "OK": 8675309] ; { id: number = jsonData; console.log(id // 42,"OK",[867,5309](5)函数参数的默认值
jQuery.ajax = function (url{ async ({false // ... more config { // ... do stuff 指定参数的默认值,就避免了在函数体内部再写key + " is " + value} // first is hello // second is worldvar foo = config.foo || 'default foo';
这样的语句。(6)遍历Map结构
任何部署了Iterator接口的对象,都可以用
for...of
循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。varmap new Map; map.set('first''hello'('second''world'for ([key] of map{ console(// 获取键名// ... } // 获取键值 }
(7)输入模块的指定方法
加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer= require("source-map";
原文:变量的解构赋值
原文链接:https://www.f2er.com/react/306043.html