ES6-4【解构赋值、函数默认值、数组解构、对象解构】

一.函数默认值

(1).补充

var x = 1;
{
    let x = x;
    log(x) 
}//是报错x is not defined

暂时性死区

TDZ(Temporal Dead Zone)

(2).函数默认值

虚值解决

function foo(x,y){
    x = x || 1;
    y = y || 2;
    console.log(x+y);
}
foo(); //3
foo(5,6); //11
foo(5); //7
foo(null,6);//7
foo(0,5);//6 这里就会出问题这是falsy(虚值Boolean为假的值)，我赋值的是0
//es5解决方案
function foo(x,y){
    var a = typeof(argument[0]!=='undefined' ? arguments[0]:1);
    var b = typeof(argument[1]!=='undefined' ? arguments[1]:2);
     console.log(a+b);
}
foo(); //3
foo(5,6); //11
foo(5); //7
foo(null,6);//6
foo(0,5);//5

//es6
function foo(x=1,y=2){
    console.log(x+y);
}
//调用与上方结果一致

深入了解

let x =1;
function foo(y=x){
    let x =2;
    console.log(y);
}
foo();//输出1 取父级作用域

let x =1;
function foo(x=2){
    let x = 2;
    console.log(x);
}
foo();//报错，因为可以理解为()和{}在一个作用域下

function foo(x = 2){
    let x = 2;
    console.log(x);
}//同一作用域报错

let x = 1;
function foo(x = x){
    console.log(x);
}
foo();//报错，xis not defined

let x = 1;
function foo(x=x){
    log(x);
}
foo(11);//输出11

作用域深入

let x = 1;
function foo(y=x){
    let x = 2
    console.log(y);
}
foo()//输出1

function foo(x=2){
    var x = 2
    console.log(x)
}
foo()//不会报错
function foo(x=2){
    let x = 2
    console.log(x)
}
foo()//这样又会报错，所以老师建议理解为同一个作用域

默认值运算

var w = 1, z = 2;
function foo(x = w + 1, y = x + 1, z = z + 1){
    console.log(x, y, z)
}
foo()//会报错，最后一步死区了

var w = 1, y = 2;
function foo(x = w + 1, y = x + 1){
    console.log(x,y,z)
}
foo();//2,3

惰性求值

let a = 99;
function foo(b = a + 1){
    console.log(b);
}
foo(); 
a = 100;
foo();//输出100，101 惰性求值 每一次都需要重新计算表达式

二.解构赋值

(1).数组解构

模式匹配结构化赋值

let [a, b, c] = [1, 2, 3];
console.log(a,b,c) // 123

嵌套匹配

let [d,[e],[f]] = [1,[2],[3]];
console.log(d, e, f)//123
let [a, [b,c], [d, [e, f, 1]]]=[1, [2,3],[4, [5, 6, [7]]]
console.log(a,b,c,d, e,f,g);//1234567

解构失败

 变量多了

let [a,[b,c],[d,[e,f,[g]]]] = [1,[2,3],[,[,,[7]]]]
123 un un un 7

不完全解构

值多了

let [a,[b,c],[,[,,[g]]]] = [1,[2,3],[4,[5,6,[7]]]]
123 7

解构默认值

let [a=6] = []
console.log(a)//6

let[a,b = 2] = [1,null]
console.log(a,b)//1 null 如果是un则就是默认值，其余的都是传入的值

function test(){}
let [x = test()] = [1]
console.log(x);//1

function test(){}
let [x = test()] = []
console.log(x);//un 因为函数默认返回值是undefined

let [x = 1, y = x] = [];
console.log(x, y);//输出1，1

let x = 5;
let [x = 1, y = x] = [];
console.log(x,y);//报错 违法

let [x=1,y=x] = [2];
console.log(x,y);//2,2

let [x=1,y=x] = [1,2];
console.log(x,y)//1,2

(2).对象解构

定义对象的三种方式

let obj = {}
let obj1 = new Object();
let obj2 = Object.create(null);

属性名和变量名一致可以省略

var name = 'zhangsan';
var age = 14
var person = {
    name,
    age,
    sex:'x'
}
console.log(person) //输出{name:'zhangsan',age:14}

函数省略

var name = 'zhangsan';
var age = 14
var person = {
    name,
    age,
    sex: 'male',
    eat(){
        console.log(1);
    }
}

对象解构

let name = 'ai xiao ye'
let person = {
    ['xiaoye']:name
}
log(person)//xiaoye :'ai xiao ye'

let {a:a,b:b,c:c} = {a:1,b:2,c:3};
console.log(a,b,c);//1,2,3

简写
let {a,b,c} = {a:1,b:2,c:3};
console.log(a,b,c);//1,2,3

不完全结构

let {a = 2,b,c} = {b:2,c:3,e:4,f:5};
console.log(a, b, c) //2 2 3

结构失败

let {a=2,b,c,d,e,f,g,h} = {b:2,c:3,e:4,f:5}
console.log(a,b,c,d,e,f,g) //2 2 3 un un 4 5 un un 

数组得解构存在顺序问题，对象得解构不存在顺序问题

实战

通过这种方式拿JSON数据

let[{'course':course1},{'course':course2}] = data
console.log(course1,course2)

嵌入解构

var person = {
    name: 'zhangsan',
    son:{
        name: 'lisi'
        son:{
            name:'wangwu'
        }
    }
}
var {son:{son}} = person

node常用

const {son} = require(person);