学习es6第二天之变量解构

变量解构
    1.什么是解构
        es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
    2.数组解构赋值
        语法：
            let[a,b,c]=[1,2,3];
            console.log(a,b,c);
        从数组中取值,按照对应位置,对变量取值,这种写法属于'匹配模式',只要等号两边模式相同,左边的变量就会被赋予相对应的值
        如果解构失败,变量的值就等于undefined
        不完全解构：等号左边的模式只匹配一部分右边的数组,解构依然成功
        如果等号右边不是数组：会报错
        解构赋值允许默认值：只有解构失败也就是严格等(===)undefined,默认值才会生效
        如果默认值是一个表达式,那么这个表达式是惰性求值,即只有在用到时才能执行
        默认值可以引用解构赋值的其他变量,但是被引用的变量必须已经被定义
    3.对象解构赋值
        语法：
            let{a,b}={a:'aaa',b:'bbb'};
            console.log(a,b);//aaa bbb
        顺序：
            数组解构按照对应位置关系,但是对象解构变量的取值没有顺序,变量必须与属性同名,才能解构成功
        变量与属性不同名：
             let{a:c}={a:'aaa',b:'bbb'};
             console.log(c);//aaa
        机制：先找到同名属性,然后再赋值给对应的变量,真正被赋值的是后者,而不是前者
        变量同名：报错
            es6规定了let和const命令定义的变量不能重复定义,解构赋值也是一样的
            如果没有第二个let命令就不会报重复定义的错误,但是编译器会将左边的大括号理解为一个代码块,代码块是不能被赋值的,解决办法：将整个表达式放进小括号中,降级为一个表达式,就不会被认为是代码块了
            eg:
                 let a;
                 ({a}={a:3});//使用小括号,降级为一个表达式
                 console.log(a);
            嵌套：对象解构也可以嵌套
                前提两边的模式一定要一样
		eg：	

			let obj={
    				first:[
        				'hello',
       					 {firstChild:'world'}
    				]
			};
			let {first:[x,{firstChild:y}]}=obj;
			console.log(x,y);//hello world

            嵌套赋值
            对象解构默认值
                默认值生效的条件是：对象的属性严格等undefined	

	对象的解构其实是下边模式的简化版
		a和c是模式,b和d是变量
		let{a:b,c:d}={a:'aaa',c:'ccc'};
		console.log(b,d);//aaa ccc

    4.字符串解构赋值
        字符串在解构时,会将字符串转换为一个类数组
        语法：
            let[a,b,c,d]='hello';
            console.log(a,b,c,d);//h e l l   

	在字符串转换的类数组中有一个属性叫做length,可以对这个属性进行解构赋值
     		let{length:len}='hello';
     		console.log(len);//5

    5.数值和布尔值的解构赋值
        使用对象解构方案
        如果等号右边是数值或布尔,左边是对象,那么数值或布尔会先被转为对象,在解构
        解构的原则：数组解构只要右边不是数组或字符串就会报错,对象解构,右边不是对象就先转为对象,然后解构
        由于null和undefined无法转为对象,所以对他们进行的解构都会报错		

	// 数值与布尔解构
    		let {toString:ts}=123;
    		console.log(ts);
    	//分为两步走
    	//1.将数值转为对象
    		console.dir(new Number(2123));
	//2.将对象与对象进行解构,如果数值对象的模式与左边的模式不对应会去原型对象中查找
    		console.log(ts===Number.prototype.toString);//true

    6.函数的解构赋值
        语法：
            function fun([x,y]) {
                console.log(x+y);
            }
            fun([1,2]);
        fun函数的参数是一个数组,调用fun传入的也是一个数组,在传入的瞬间,实参与形参进行了解构,将x和y两个变量进行了赋值
        函数的解构可以使用默认值
        函数参数是一个对象,通过对象解构,得到x,y的值,如果解构失败使用默认值
    7.解构的用途
        1) 交换变量值		

                eg:

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

        2) 从函数返回多个值
            函数一次只能返回一个值,想要返回多个值只能将返回值放入数组或对象返回,有了解构方法就可以轻松的取出这些值
        3) 函数传参
        4) 提取json数据
            解构对提取json尤其有用
        5) 函数参数默认值
            es6允许函数的参数设置默认值