变量的解构赋值 · 前端笔记

[TOC] ## 变量的结构赋值 ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 ### 数组的解构赋值只要等号两边的模式相同，左边的变量就会被赋予对应的值。 ``` var [a, b, c] = [1, 2, 3] a // 1 b // 2 c // 3 ``` ``` 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。 ``` var [foo] = [] var [bar, foo] = [1] ``` 等号左边的模式只匹配等号右边数组的一部分，可以解构成功。 ``` let [a, [b], c] = [1, [2, 3], 4] a // 1 b // 2 c // 4 ``` set解构也能使用。 ``` let [x, y, z] = new Set(['a', 'b', 'c']) x // 'a' ``` 只要某种数据结构有Interator接口，都可以用数组形式的解析赋值。 ``` function* fibs() { var a = 0 var b = 1 while (true) { yield a; [a, b] = [b, a+b] } } var [first, second, third] = fibs() third // 2 ``` fibs 是一个Generator函数，原生就有Interator接口。 #### 默认值 ES6用严格等于号（===）判断一个位置是否有值。如果一个数组成员不严格等于undefined，默认值不会生效。 ``` var [foo = true] = [] foo // true ``` ``` [x, y = 'b'] = ['a'] // x = 'a' y = 'b' ``` ``` var [x = 1] = [null] // x = null ``` 如果默认值是一个表达式，那么这个表达式只有在用到时才会去求值。 ``` function f() { console.log(1) } let [x = f()] = [1] //函数f不会执行 ``` 默认值可以引用解构赋值的其他变量，但该变量必须已声明。 ``` let [x = 1, y = x] = [] // x=1, y=2 let [x = 1, y = x] = [2] // x=2, y=2 let [x = y, y = 1] = [] // ReferenceError ``` ### 变量的解构赋值 ``` var {bar, foo} = { foo:'aaa', bar: 'bbb' } bar // 'bbb' foo // 'aaa' ``` 对象的解构赋值是以下形式的简写。其内部机制是先找到同名属性，再赋值给对应的变量。真正被赋值的是后者。 ``` var {foo: foo, bar: bar} = { foo:'aaa', bar: 'bbb' } var { foo:faz } = { foo:'aaa' } baz // 'aaa' foo // error:foo is not defined ``` 对象的解构可以方便地将现有对象的方法赋值到某个变量。 ``` let {log, sin, cos} = Math ``` ### 字符串的解构赋值此时字符串被转换成类似数组的对象 ``` const = [a,b,c] = 'def' a // 'd' b // 'e' c // 'f' ``` 类似数组的对象都有length属性，因此还可以对这个属性解构赋值 ``` let {length: len} = 'hello' len // 5 ``` ### 数值和布尔值的解构赋值解构赋值的规则是，只要等号右边不是对象，就先转为对象。数值和布尔值的包装函数都有toString方法，因此变量s能取到值。 ``` let {toString: s} = 123 s === Number.prototype.toString // true let {toString: s} = true s === Number.prototype.toString // true ``` 因为undefined和null无法转为对象，所以对他们进行解构赋值会报错。 ``` let { prop: x} = undefined //TypeError let { prop: x} = null //TypeError ``` ### 函数参数的解构赋值 ``` function add([x, y]) { return x+y } add([1, 2]) // 3 ``` ``` function move({x = 0, y = 0} = {}) { return [x, y] } move({x: 3, y: 8}) // [3, 8] move({x: 3}) // [3, 0] ``` ### 圆括号问题编译器只有解析（不）到等号才知道一个式子是模式还是表达式。只要有可能，就不要在模式中放圆括号。 #### 不能使用圆括号的情况变量声明语句，模式不能使用圆括号 ``` var [(a)] = [1] var { x:(c)} = {} ``` 函数参数中，模式不能带圆括号 ``` function f([(z)]) = {return z} ``` 不能将整个模式或嵌套模式中的一层放在圆括号 ``` ({p: a}) = {p: 42} ``` #### 可以使用圆括号的情况可以使用圆括号的情况只有一种：赋值语句的非模式部分可以使用圆括号 ``` [(b)] = [3] ({p: (d)} = {}) [(parseInt.prop)] = [3] ``` ### 用途 #### 交换变量的值 ``` [x, y] = [y, x] ``` #### 获取函数返回多个值 ``` // 返回一个数组 function getArray() { return [1,2,3] } var [a, b, c = getArray() // 返回一个对象 function getObject() { return { foo: 1, bar: 2 } } var {foo, bar} = getObject() ``` #### 函数参数的定义解构赋值可以将一组参数与变量名对应起来。 ``` // 参数是一组有次序的值 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: 2, errorCode: 1, data: [21,32] } let {id, errorCode, data} = jsonData ``` #### 函数参数的默认值 ``` jQuery.ajax = function(url, { async = true, beforeSend = function(){}, cache = true, complete = function() {}, crossDomain = false }) { // .... } ``` 无需在函数内再写var foo = config.foo \|\| 'default value'这样的语句 #### 遍历Map解构所以部署了Iterator接口的对象，都可以用for..of循环遍历。Map解构原生提供Iterator接口。 ``` var map = new Map() map.set('first', 'hehe') map.set('second', 'haha') for(let [key, value] of map) { console.log(key + ' is ' + value) } // first is hehe // second is haha ``` ``` //获取键名 for(let [key] of map) {} //获取键值 for(let [, value] of map) {} ``` #### 输入模块的指定方法加载模块时，往往需要指定输入哪些方法，解析赋值使得输入语句非常清晰。 ``` const {SoureceMapConsumer, SourceNode} = require('source-map') ```