ES6-解构赋值解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。当解构赋值后的值为 undefin

解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。
当解构赋值后的值为 undefined 时才会触发默认值。

1. 数组解构赋值，设置解构默认值

let arr= [1,2,3]

let [a,b,c,d=4,e] = arr  
a // 1
b // 2
c // 3
d // 4   解构设置默认值，当 b 没被赋值时，取默认值'11'
e // undefined   解构没赋值到的变量为 undefined

2. 对象解构赋值，设置解构默认值

let person ={uname:'zhangsan',age:18}  // 对象

let {uname,age} = person   // 解构赋值
uname // 'zhangsan'
age // 18

let {uname:a,age:b，c:c，d:d='xxx'} = person  // 解构赋值， 相同的属性名称，将person对象的值赋给对应的值
a // 'zhangsan'
b // 18
c // undefined   // 没有的属性值为 undefined
d // xxx  // 解构赋值为 默认值

import {Button,ButtonGroup} from 'element-ui'  // 解构赋值获取 对应的值

const {log}  = console  // 解构赋值 获取 对象中的方法

3. 字符串解构，字符串会转换为类似数组对象，可以解构出属性和方法

const [a,b,c] = '123'
a // 1
b // 2
c // 3

let {length} = '12345'  
length // 5

4. 数值，布尔值解构，会先转换为包装对象，再赋值。

let a=123,b=true;

let {toString} = a  // Number
toString === Number.prototype.toString // true

let {toString} = b  // Boolean
toString === Boolean.prototype.toString // true

5. undefined，null 被解构时报错，由于他们不能转换成对象。

let u = undefined, n = null;

let {p:u} = u  // TypeError
let {p:n} = n  // TypeError

6. 函数参数的解构赋值,函数参数的默认值

// 变量默认值
function move({x = 0, y = 0} = {}) {
  return [x, y];
}

// 参数默认值
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

7. 解构赋值的作用

(1) 交互变量的值

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

(2) 从函数中返回多个值，函数返回的是数组，对象，取的时候可以解构获取多个值。

function getDataArr(){return []}
let [a,b,c] = getDataArr()  // 获取多个值

function getDataObj(){return {} }
let {uname,age} = getDataObj();  // 获取多个值

（3）函数参数定义

// 参数是数组，有序参数
function f([a,b,c]){}
// 调用
f([1,2,3])   
f('123')   // a=1,b=2,c=3

// 参数是对象，确定值名称
function f({a,b,c}){} 
f({a:'zhangsan',b:'lisi',c:'wangwu'})
f('sss')  // abc 取不到值

（4）定义函数时，设置函数参数的默认值

变量指定默认值 {x=0,y=0}={} 每个变量解构失败就会取默认值。
参数指定默认值 {x,y} = {x=0,y=0} ,当没有传参数时才使用{x=0,y=0}内的值。

写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值。
写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

function f(url,{async=true,global=true,cache=true}={}){
  	// 使用参数时获取不用判断和设置默认值。
    var async = config.async || true   // 以前的写法，现在可以不用这样。
    // 第2个{}中的参数取值直接使用
    console.log(async)  // true
}

// 如果调用时
f('serves/getdata')   // 当没传第二个参数时，取默认值 , 定义函数时必须写 ={}，否则调用时必须带第2个参数

(5) 提取JSON 数据

let jsonData={
	id:12,
    status:"ok",
    data:[12,13]
}

let {id,data} = jsonData
id // 12
data // [12,13]

(6) 遍历 Map 解构：for...of 循环遍历解构获取键名，键值

const map = new Map();
map.set('f','hello');
map.set('s','world')

for(let [key,value] of map){
	// f  hello
    // s  world
}

// 获取键名
for(let [k] of map){
	// f
    // s
}

// 获取键值
for(let [,v] of map ){
	// hello
    // world
}

（7）获取模块的指定方法或者变量

const {getValue} = require("xxx")

import {Button,ButtonGroup} from 'element-ui'

ES6-解构赋值