ES6新增语法

ES6+: ECMA Script 2015;

一、变量的声明 let
- 1. 不能重复声明,可以重复赋值
- 1. 作用范围:let 只在块级作用域内起作用：全局作用域
- 3.let 没有声明前置（hosting）临时性死区 temp dead zone
- 4.不会和window 绑定
二、常量const
- 1.有块级作用域
- 2.不能被重复赋值，也不能重复声明
- 3.不会和window绑定

三、解构赋值

1.数组的解构

var arr = [1,2,3];
let [a,b,c] = arr;

2.对象的解构

//ES6
var obj = {
    name:"张三",
    age:20，
    height："178cm"
}
    // ES5
    let name = obj.name;
    let age = obj.age;
    let height = obj.height;
    console.log(name,age,height);
    // ES6
    let {name,age,height} = obj;
    console.log(name,age,height);

 let obj = {
      name:"张三",
      age:20,
     hobby:{
           hobby1:"篮球",
           hobby2:"足球"
       }
  }
let {name,age,hobby:{hobby1,hobby2}} = obj; 
console.log(name,age,hobby1,hobby2);

四、模板字符串
- 反引号语法：反引号 插值表达式 ${变量}
- 插值表达式接收三元运算符
五、展开运算符：
- 1 合并对象或数组

    //合并对象
    var obj1 = {name:"张三"};var obj2 = {age:20};
    var obj = {...obj1,...obj2};//合并数组 {name:"张三",age:20}

//合并数组
   let arr1  = [1,2,3];
   let arr2 = [4,5];
   let arr =[...a1,...a2]
   console.log(arr)//[1,2,3,4,5]

五、展开运算符：
- 2 转换数组

 var lis = document.querySelectorAll("li");
 [...lis].forEach(function(item){
            console.log(item);//执行 三行<li></li>
        })

五、展开运算符：
- 3 对象的展开

 var obj = {
            name:"张三",
            age:20
}
var obj2 = {
            height:"178cm"
        }
var newObj = {...obj,...obj2};
console.log(newObj);//{name: "张三", age: 20, height: "178cm"}  合并对象

五、展开运算符：
- 4.默认参数

//es6
function fn(a=10){
    console.log(a);
}
fn();

六、对象更新

1键名和键值相同的时候可以简写

    let name="小王"
    let age = 20;
    let obj = {
        name
        age
    }
    console.log(obj);//{name"小王",age: 20}

2 动态下标

var age = 'age';
var obj = {
    [age]:20
}

3对象里的函数

// ES5
let obj = {
        fn:function(){
            console.log("fn");//fn
        }
    }
    obj.fn();

//ES6
let obj = {
    fn(){
        console.log("fn");
    }
}

4箭头函数有return的改为箭头函数更为简单.
- 4.1赋值式函数可以改成箭头函数

 // ES5
        let test = function(){
            console.log("test");
        }
        test();
 // ES6
        let test = ()=>{
            console.log("test");
        }
        test();

4箭头函数有return的改为箭头函数更为简单.
- 4.2 如果只有一个参数那么可以省略括号
- 4.3 箭头语法没有arguments
- 4.4 如果箭头后面没有大括号那么箭头函数自带return
- 4.5箭头函数里的this：箭头函数里没有this 他的this是他上一层的上下文context

//案例1
 let fn = function(a){
            return a
        }
        console.log(fn(1));

        // 第一步 去掉function
        let fn = a=>{
            return a;
        }
        console.log(fn(1));
        // 第二步
            let fn = a=>a;
            console.log(fn(1));
//案例2
            let fn = function(){
                return function(){
                    return 1;
                }
            }
            let fn = ()=>()=>1;
            console.log(fn()());

//this箭头指向
         // console.log(this);
        // var fn = ()=>{
        //     console.log(this);//window
        // }
        // fn();


        // let obj  ={
        //     fn:()=>{
        //         console.log(this);//window
        //     }
        // }
        // obj.fn();

        // document.onclick = function(){
        //     console.log(this);//下面定时器里的this指的就是这里的this，都指向点击的document
        //     setTimeout(()=>{
        //         console.log(this);//点击的
        //     }, 1000);
        // }

七、新增属性
- 1 for of

let arr = ["张三","李四","王五"];
for(let val of arr){
            console.log(val);//张三  李四  王五
        }

八、新增对象方法

 // 1.Object.is
        var a = NaN;
        var b = NaN;
        console.log(typeof a);//number
        console.log( Object.is(a,b));//true
        console.log(0.1+0.2===0.3);//false
        console.log((0.1*10+0.2*10)/10===0.3);//true 精度问题

//2.Object.assign合并对象
var target = {
            name:"张安"
        }
        var obj1 = {
            age:20
        }
        var obj2 ={
            height:"178cm",
            name:"李四"
        }
      var res =   Object.assign(target,obj1,obj2);//有键名的会被更新，没有的会新增
      console.log(res);//{name: "李四", age: 20, height: "178cm"}

 // 3.Object.keys : 获取对象里的键名
        let obj = {
            name:"张三",
            age:20
        }
       var keys =  Object.keys(obj);
       console.log(keys);//(2) ["name", "age"]

 // 4.Object.values : 获取对象的键值
    let obj = {
            name:"张三",
            age:20
        }
      var res =   Object.values(obj);
      console.log(res);//(2) ["张三", 20]

九、新增字符串方法
- 1.repeat :循环生成字符串
  var str = "*"; var res = str.repeat(5);console.log(res);
- 2.startsWith：通过什么开始
- 3.endsWith: 通过什么结尾
- 4.includes ：判断是否包含某个字符,或者某个值
十、新增的数组方法
- 1.Array.from()：把伪数组转换成数组
- 2.Array.of();创建一个数组
- 3.find ：查找数组里符合条件的第一个值
- 4.findIndex：查找符合条件的第一个索引值
- 5.includes ：判断是否包含某个字符,或者某个值
- 6.flat ：扁平化数组：默认是1 只会扁平化一层数组，如果传入指定参数那么就会扁平化指定层数

//1.Array.from()
var lis = document.querySelectorAll("li");
console.log(lis);//NodeList(5) [li, li, li, li, li]伪数组
console.log( Array.from(lis));//(5) [li, li, li, li, li]
//2.Array.of();创建一个数组 
var res =  Array.of(7,8);
console.log(res);//(2) [7, 8]
//3.find ：查找数组里符合条件的第一个值
ar arr = [1,2,3,4,5];
var res = arr.find(function(item){
    return item>3;
})
console.log(res);//4
// 4.findIndex： 查找符合条件的第一个索引值 
var arr = [1,2,3,4,5];
var res =  arr.findIndex(item=>item>3);
console.log(res);//3
//5.includes ：判断是否包含某个字符,或者某个值
var arr = [1,2,3,4];
var res =   arr.includes(5);
console.log(res);
// 6.flat ： 扁平化数组 ：默认是1 只会扁平化一层数组 ，如果传入指定参数 那么就会扁平化指定层数
var arr = [1,2,3,[4,[5]]];  //3维数组

//ES5
var res =  arr.toString();
console.log(res);
var newArr = res.split(",");
console.log(newArr);//(5) ["1", "2", "3", "4", "5"]
console.log( Object.prototype.toString.call(newArr));//[object Array]

//ES6
var res =  arr.flat(2);
console.log(res);//(5) [1, 2, 3, 4, 5]
console.log( Object.prototype.toString.call(res));//[object Array]