ES6新特性

• 一、简介
  • es6 : ECMAScript6简称
  • JS : javascript
  • ECMAScript是JavaScript的规范；
    • 咱们学习好多关于JS的语法基本都来源于ECMAScript3;
    • es4
    • es6 是2015年6月正式发布
  • es6作用：让 JS能够开发大型的应用程序
• 二、let 和 const

  • 1.let 声明的变量不进行变量的提升；

  • console.log(a); // undefined
    var  a = 100;
    
    console.log(a); // 报错
    let a = 111;
    

  • 2.let 声明的变量不可以重复声明；

    • 在形成全局的作用域之后，代码正式运行之前，需要把 let进行过滤，如果 let声明的变量冲重复，直接报错，代码停止运行。

  • let class2= 222;
    let class2 = 2222;
    console.log(class1); // 报错
    

  • 3.let 声明的变量只在当前的作用域下生效

  • var num = 10;
    if(![] == false){
    	var num = 9;
    }
    console.log(num); // 9
    
    let n = 10;
    if(![] == false){
    	let n = 9;
    }
    console.log(n); // 10
    

  • 4.let 会让当前for循环形成一个块级作用域；每循环一次，会 形成一个小的子作用域，子作用域存储了每次循环的i的值；

  • for(let i=0;i<10;i++){
    	oLis[i].onclick = function () {
        	console.log(i);
    	}
    }
    console.log(i);// 10
    

  • 5.const : 定义常量；常量不可以修改

  • const summer = "天太热";
    console.log(summer);
    

• 三、全局作用域/私用作用域
  • 作用域作用：
    • 1.提供代码的运行环境
    • 2.储存基本数据类型值
  • ES6 新增块级作用域

/*
	for循环  if-else seitch try catsh{}
*/
	var num = 10;
	if(isNAN(NaN)){
		// 暂时性死区
		console.log(num);
		let num =10;
	}

	foo();
    function foo() {

    }

• 函数在块级作用域中，声明但未定义；一旦进入到块级作用域之中，首先马上对函数进行定义。

  • console.log(fn); // undefined
    if([] == ![]){
    	// 对象==布尔； 先把对象转成字符串，字符串转数字；布尔直接转数字；
    	fn();
    	function fn() {
        	console.log(100); // 100(重复执行2次)
    	}
    }
    fn();
    

• 四、变量的解构赋值
  • 1.解构的值一定是可遍历的；
  • 2.如果解构不成功，存储值是undefined；

  • let [x,y,z] = [1,2];
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // undefined
    
    let [a,[b],c]=[1,[2],3]
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
    

  • 对象的解构
    • 对象的解构按照属性名进行解构，跟顺序无关；
      • 如果key有默认值，那么后面的解构会将默认值覆盖；

    • let {name=1,age}={age:18,name:"zfpx"};
      console.log(name); // "zfpx"
      
      let {length}="helloworld";
      console.log(length); // 10
      
      function fn([x,y]) {
      	console.log(x,y); // 1 3
      }
      fn([1,3])
      

• 五、数组的扩展
  • Array：类
    • 1.Array.from：将类数组转换成一个真正的数组；

    • function sum() {
      	let newAry = Array.from(arguments)；
      	newAry.push(100)；
      	console.log(newAry); // [1,3,4,5,100]
      }
      sum(1,3,4,5)；
      

    • 2.Array.of：将一组数转换成数组；

    • function sum(x,y,z,a) {
      	let newAry = Array.of(x,y,z,a);
      	newAry.push(100);
      	console.log(newAry); // [1, 2, 5, 67,100]
      }
      sum(1, 2, 5, 67)；
      

    • 3.剩余运算符

    • function sum(...ary) {
      	console.log(ary); // [1,2,3,45]
      }
      sum(1,2,3,45)
      

    • 4.扩展运算符：经常用于数组的合并，对象的合并

    • let ary1 = [12,34,5];
      let ary2 = [12,6,8];
      console.log(ary1.concat(ary2)); // [12,34,5,12,6,8]
      console.log([...ary1,...ary2]); // [12,34,5,12,6,8]
      

    • 这两种属于浅拷贝
    • 5.什么是浅克隆和深克隆？
      • 浅克隆
        • 对于基本数据类型而言，把a的值赋值给b后，a的修改，不会影响到b；

        • let a = "hello world";
          let b = a;
          alert( b ); // 'hello world'
          a = "changed";
          alert( b ); // 'hello world'
          

        • 对于引用数据类型而言，把arr1赋值给arr2后，arr1的修改，会影响到arr2对应的值；

        • let arr1 = [1, 2, 3, 4];
          let arr2 = arr1;
          console.log( arr2 );  // [10, 2, 3, 4]
          arr1[0] = 10;
          console.log( arr2 );  // [10, 2, 3, 4]
          

        • 结论：基本数据类型是直接存储在栈内存中的，而引用数据类型，则仅仅是把地址存储在栈内存中,真正的数据是存储在堆内存中的，赋值操作时，仅仅把地址进行了赋值。
      • 深克隆
        • 方法一: 递归

        • function deepClone( obj ){
          	let objClone = Array.isArray(obj) ? [] : {};
          	if( obj && typeof obj === "object"){
          		for(key in obj){
          			if(obj.hasOwnProperty(key)){
          				if(obj[key] && typeof obj[key] === "object"){
          					objClone[key] = deepClone(obj[key]);
          				}else{
          					objClone[key] = obj[key];
          				}
          			}
          		}
          	}
          	return objClone;
          }    
          let a=[1,2,[2, 3],4];
          let b=deepClone(a);
          a[2][0]=10;
          console.log(a);  // [1,2,[10,3],4]
          console.log(b);  // [1,2,[2,3],4]
          

        • 方法二: JSON.stringify 和 JSON.parse

        • function deepClone(obj){
          	let _obj = JSON.stringify(obj);
          	let objClone = JSON.parse(_obj);
          	return objClone
          }    
          let a=[0,1,[2,3],4],
          let b=deepClone(a);
          a[0]=1;
          a[2][0]=1;
          console.log(a); // [1,1,[1,3],4]
          console.log(b); // [0,1,[2,3],4]
          

• 六、对象的扩展
  • 比较简洁的写法
  • 可枚举属性：私有属性和原型上新增的自定义的属性都是可枚举属性；
  • Object.assign : 合并对象；第一个参数是目标源；当合并时，使用了tar1的空间地址，导致目标对象跟着发生改变；

  • let sum = 10;
    let obj = {sum:sum};
    for(let key in obj){
    	console.log(key); // sum
    }
    let tar1 = {a:1};
    let tar2 = {b:1};
    console.log(tar1); // {a: 1}
    console.log(tar2); // {b: 1}
    console.log(Object.assign(tar1, tar2)); // {a: 1, b: 1}