ES6入门详解(二) 解构赋值

关于解构赋值非常简单是一个es6语法糖主要有数组解构赋值对象解构赋值主要的应用是按需解构exports的对象解构函数参数解构JSON等等下面代码简单演示

数组解构赋值

//数组解构模式匹配 按照固定的左右模式进行匹配
let [a,b,c] = [1,2,3]
console.log(a,b,c)

//匹配多维数组也必须做到模式相同
let [a,b,[c,d,[e]]] = [1,2,[3,4,[5,6,[7]]]]
console.log(a)

//可以使用..来匹配所有匹配b后面所有的数据 这里注意c后面再跟变量就会报错
let [a,b,...c] = [1,2,3,4,5,6,7,[8]]
console.log(c)

对象解构赋值

//最常见的模式即赋值
let {obj1,obj2} = {obj1:123,obj2:123}
console.log(obj1)

//第二种模式与赋值分离 这个时候obj1是匹配模式 :a=>将匹配到的数值赋值给a
let {obj1:a,obj2:b} = {obj1:123,obj2:123}
console.log(a)

//第三种对象数组混合解构
//这个例子稍微有些复杂 首先obj1是模式 匹配到了[1,2,{b:3},[4,5]]
//然后a=>1 b=>2 接下来是匹配一个对象 {b:c}这是b就是模式 c赋值 x y 又是数组匹配
let {obj1:[a,b,{b:c},[x,y]]} = {obj1:[1,2,{b:3},[4,5]]}
console.log(a)
console.log(c)
console.log(x)
console.log(y)

//es6语法中存在块作用域
let x;
{x} = {x:10}
console.log(x) //报错 因为解析到{x}后js引擎会将{x}当成一个代码块也就是作用域 一个作用域 而不是解构赋值的模式
// 正确的做法
let x ;
({x} = {x:10}) //将作用域转为表达式就可以了
console.log(x)

//这里格外说一点 数组在进行解构时 解构的数据必须具有Iterator 接口 关于Iterator 之后会详细说
// 在对象解构的过程中 因为万物皆对象的原理 所以无论如何解构都是符合语法规范的
// ({} = function(){})
// ({} = []) //正确
// ([] = {}) //错误
// ({} = 'sdf')
// ({} = 123)

其他解构不常用

//字符串解构 上文说过万物皆对象无论什么在进行对象解构时都转成对象 null undefined除外 
let [a,b,c,d] = 'xlln'
let {length:len} = 'xlln'
console.log(a)
console.log(len)

//通过下面这两个例子也可以看出来
let {toString:s} = 123
console.log(s === Number.prototype.toString)

let {slice}  = '123'
console.log(slice === String.prototype.slice)

//无论数组解构和对象解构都有默认值
//这里注意一点es内部在判断是否等于默认值是 是判断是否===严格等于undefined 如果等于才会使用默认值
let [a = 1,b = 2,c = 3] = []
console.log(a)
let {a = 1,b = 2,c = 3} = {a:undefined,b:null,c:null}
console.log(a) //1
console.log(b) //null
console.log(c) //null

//用法一函数参数解构
function fn1({a,b}){
    console.log(a+b)
}

fn1({a:1,b:2})
//可以给参数指定默认值 同样只有在绝对等于undefined 的情况下默认值生效 即模式所匹配的项 等于undefined 必须是当前模式匹配到的否则无效
function fn2({a = 4,b = 5} = {a:1,b:2}){
    console.log(a+b)
}
fn2()
//不是当前模式匹配到的

fn2({}) //9 当前模式是参数 object {undefined,undefined}

//用法二解构node核心模块 或 JS内置对象
const {push} = [];
console.log(push)
const {join} = require('path')
console.log(join)

//用法三值交换
let x = 1;
let y = 3; //注意这里必须加;要不然会被解析错误
[x , y] = [ y , x]
console.log(x)

ES6入门详解(二) 解构赋值

猜你喜欢