ES6(三) 数组

本节知识点

• 数组的解构赋值
• 对象的解构赋值
• 字符串的解构赋值
• 数值和布尔值的解构赋值
• 函数参数的解构赋值
• 圆括号的问题
• 用途

(1) 数组的解构赋值

基本用法

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.
以前，为变量赋值，现在能直接指定值。

let a = 1
let b = 2
let c = 3

要是 es6 可以写成

let [a, b, c] = [1, 2, 3]

上面代码表示,可以从数组中提取值，按照对应位置，对变量赋值.
本质上，这种写法属于”模式匹配”,只要等号两边的模式相同，左边的变量就会被赋予对应的值，下面是嵌套数组进行解构的例子。

let [foo, [[baz], baz]] = [1, [[2], 3]]
foo //1
bar //2
baz //3
let [, , third] = ['foo', 'bar', 'baz']
third // baz
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

let [foo]  = [];
let [bar,foo] [1];

以上两种情况都属于解构不成功,foo 的值都会等于 undefined
另一种情况是完全机构，即等号左边的模式，只匹配一部分的等号右边的数组，这种情况解构依然可以成功

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] = {}

上面的语句都会报错，因为等号右边的值，和左边的格式不匹配

let [x, y, z] = new Set(['a', 'b', 'c'])
x //"a"

第二种两个值互换位置

let a = 2
let b = 3
;[a, b] = [b, a]
console.log(a)
console.log(b)

默认值

解构赋值允许指定默认值

let [foo = true] = []
foo //true
let [x, y = 'b'] = ['a'] // x='a' ,y='b'
let [x, y = 'b'] = ['a', undefined] //x='a',y = b

undefined 不会改变默认值，但要是 null 则会改变默认值例如

let [x = 1] = [undefined]
x //1
let [x = 1] = [null]
x // null

默认值也可以是函数

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

默认值可以引用解构赋值的其他变量，但是该变量必须已经声明

let [x = 1, y = x] = [] //x=1;y=1
let [x = 1, y = x] = [2] //x=2;y=2
let [x = 1, y = x] = [1, 2] //x=1;y=2
let [x = y, y = 1] = [] //语法错误，因为y没定义

上面最后一个表达式报错，因为 x 用 y 做默认值。y 没有被声明。

(2)对象的解构赋值

解构不仅仅用于数组，还可以用于对象

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
foo //aaa
bar //bbb

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

let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo //"aaa"
bar //"bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' }
baz // undefined

上面的代码，改变次序没关系，但是对于取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值。
如果变量名和属性名不一致那只有采用别名了

let { foo: baz } = { foo: 'aaa', haha: 'bbb' }
baz //aaa
let obj = { first: 'hello', last: 'world' }
let { first: f, last: l } = obj
f // hello
l // world

与数组一样，解构也可以用于嵌套结构的对象

let obj = {
  p: ['Hello', { y: 'world' }],
}
let {
  p: [x, { y }],
} = obj
x //Hello
y //world

此时 P 是模式，不是变量，因此不会被赋值，如果 P 也要作为变量赋值，可以写成下面

let obj = {
  p: ['Hello', { y: 'world' }],
}
let {
  p,
  p: [x, { y }],
} = obj
x //Hello
y //World
p //[Hello,{y:world}]

对象的解构也可以指定默认值

var { x = 3 } = {}
x //3
var { x, y = 5 } = { x: 1 }
x //1
y //5
var { x: y = 3 } = {}
y //3
var { x: y = 3 } = { x: 5 }
y //5
var { message: msg = 'Something went wrong' } = {}
msg //Something went wrong

特别要注意的就是如果要将一个已经声明的变量用于解构赋值，必须非常小心

let x;  //声明
{x} = {x:1};  //语法错误

要是想变成对的只有加圆括号

对象解构只声明没有赋值必须加圆括号

---

let x
;({ x } = { x: 1 })

这样就可以了

####(3)字符串的解构赋值

const [a, b, c, d, e] = 'hello'
a //"h"
b //"e"
c //"l"
d //"l"
e //"o"

类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值

let { length: len } = 'hello'
len //5

(4) 数值和布尔值的解构赋值

解构赋值的时候，如果等号右边是数值和布尔值。则会先转为对象.

let { toString: s } = 123
s === Number.prototype.toString //true
let { toString: s } = true
s === Boolean.prototype.soString //true

上面的代码中，数值和布尔值包装对象都有 toString 属性，因此变量 s 都能取到值

(5)函数参数的解构赋值

函数的参数也可以使用解构赋值.

function add([x, y]) {
  return x + y
}
add([1, 2]) //3

上面代码中函数 add 的参数表面上是一个数组，但是传入参数的那一刻，数组参数就被解构成变量 x 和 y,对于函数内部代码来说。他们能感受到的参数就是 x 和 y
函数参数的解构也可以使用默认值

function move({ x = 0, y = 0 } = {}) {
  return [x, y]
}
move({ x: 3, y: 8 }) //[3,8]
move({ x: 3 }) //[]

但要是换一种写法。为 move 的参数指定默认值，而不是为变量 x 和 y 指定默认值，那么就会得到另外的结果

function move({ x, y } = { x: 0, y: 0 }) {
  return [x, y]
}

move({ x: 3, y: 8 }) // [3, 8]
move({ x: 3 }) // [3, undefined]
move({}) // [undefined, undefined]
move() // [0, 0]

####(6)用途

变量解构赋值用途很多

(i) 交换变量的值

let x = 1
let y = 2
;[x, y] = [y, x]

上面代码交换变量 x 和 y 的值。

(ii) 从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将他们放在数组或者对象里面返回，有了解构赋值，取出这些值就非常方便。

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

(iii) 函数参数的定义

解构赋值可以方便的将一组参数与变量名对应起来

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

(iv)提取 JSON 数据

解构赋值对提取 JSON 数据很有用

let jsonData = {
  id: 42,
  status: 'ok',
  data: [867, 444],
}
let { id, status, data } = jsonData
console.log(id + '||' + status + '||' + data)
//42,"ok",[867,444]

(v) 函数参数的默认值

 jquery.ajax  = function(url,{
       async = true,
       beforesend = function(){},
      cache = true
}={}){ //todo}

指定参数的默认值这样就避免了在参数内部里面写 var foo = config.foo||”defaultfoo”

(vi) 输入模块的指定方法

加载模块时，往往需要指定哪些方法。解构赋值使得输入语句非常清晰

const { SourceMapConsumer, SourceNode } = require('xxxxx')