搞定炫酷网页，关注ES6太有必要-CSDN博客

导语

温故而知新，可以为师矣。及时地复习和总结我们学过的知识，不仅有利于知识的体系化，还有利于知识的深入理解。笔者也是一个前端技术迷，并且之前也系统的学习ES6一段时间，并对此有一些心得感悟。以下，我将深入浅出地与大家谈谈ES6，希望各位不吝点评。

1.let/const

js中作用域分为：全局作用域、局部作用域、块级作用域 es6中的六种变量声明方法：var function let const import class.其声明的变量不会被提升;let不能重复声明；

    console.log(a);//not define
    console.log(b); //undefine
    let a=110 ;//不能重复声明，不然会报错
    var b=220; 
复制代码

let声明的变量的作用域都是块级的,通常以｛｝来化分块级作用域;

   if(true){
       let =10;
   }
   console.log(a);//not define
复制代码

const

const声明的变量的作用域是块级的，声明的变量需赋初始值，且不可改变,也不能提升。

   if(ture){
      console.log(PI);//not define
       const PI=3.14;
       PI=888;  
       console.log(PI);
   }
   console.log(PI);
复制代码

2.箭头函数

普通的函数

        function f(x,y){
         returen x*y;
        }
        console.log(f(2,3));//6
复制代码

箭头函数

        var f=(x,y)=>{
            return x*y;
        }
        console.log(f(2,3));//6
复制代码

如果箭头函数中只有一个形参，那么（）可省略；如果函数体中只有一条语句(非return语句)，｛｝也可省略；如果有return,而且只有一条语句，return和｛｝可省略。如下：

满足条件后，最简形式下的箭头函数

    var f=x=> x*x;
    console.log(f(3));//9
复制代码

3.js中形参可以拥有默认值

    function f(x,y=10){
        console.log(x,y); //1 10
        return x+y
    }
    console.log(f(1));//11
复制代码

    function f(x=10,y){
        console.log(x,y);//1 undefine
        return x*y;
    }
    console.log(f(1);//NaN
复制代码

4.变量的结构赋值

结构：从数组或对象中提取值，对变量进行赋值.如果左右结构不一样，具体对应细节看如下代码中所阐述的。

    let [a,b,c,,d,e,f=12,g,[h]]=[1,2,3,4,5,6,[7],[8]]
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
    console.log(d);//5
    console.log(e);//undefine
    console.log(f);//6
    console.log(g);//[7]
    console.log(h);//8
    
复制代码

    let [a,b,c,,d,e,f=12]=[]
    console.log(a);//undefine
    console.log(b);//undefine
    console.log(c);//undefine
    console.log(d);//undefine
    console.log(e);//undefine
    console.log(f);//undefine
    console.log(g);//12
复制代码

5.数组扩展

Array.from()可以将伪数组转化为真正的数组：类似数组和可遍历的对（包括ES6新增的数据结构Set和Map）,是该构造器的静态方法。 Array.from(类数组对象) or Array.from(类数组对象，function(item,index){return})

    var lis=document.getElementsByTagName("li");
    var rs=Array.from(lis);
    console.log(Array.isArray(rs));//true;
复制代码

Array.of()将一组值转换为数组,弥补构造器 Array（）的不足

    var arr1=Array.of(3);
    var arr2=Array.of("3");
    console.log(arr1,arr2);//[3] ['3']
复制代码

Array.find():用于找出第一个符合条件的数组元素,找不到则是undefined。格式：Array.find(function(item,index){return 条件;})

   let arr=[{name:"zs1",score:90},
   {name:"zs2",score:80},
   {name:"zs3",score:100}
   ];
   let rs1=arr.find(item=>item.name=="zs1");
   let rs2=arr.find(item=>item.name=="zs4");
   let rs3=arr.findIndex(item=>item.name=="zs3");
   let rs4=arr.findIndex(item=>item.name=="zs4");
   console.log(rs1,rs2);//{name:"zs1",score:90} undefined
   console.log(rs3,rs4);//2 -1
复制代码

Array.findIndex()第一个符合条件的数组元素的索引。找不到则是-1
Array.includes()判断元素是否在数组中存在,返回值是 true|false

    let a=[1,2,3];
    a.includes(1);//true
    a.includes("a");//false
复制代码

Array.fill()给数组填充指定值. Array.fill(值) ;Arr.fill(值，起点，终点),填充时不包含终点。

    let arr=new Array(5);
    arr.fill("*");
    let arr1=[1,2,4,5,7]
    arr1.fill("hello",0,4)
    console.log(arr);//['*','*','*','*','*']
    console.log(arr1);//["hello", "hello", "hello", "hello", 7]
复制代码

数组的扩展运算符

    var arr=[1,2,3];
    var str="hello";
    var arr2=[...str]
    var arr1=[...arr]
    console.log(arr1);//[1,2,3]
    console.log(arr2);//["h", "e", "l", "l", "o"]
复制代码

6.字符串扩展

1. 模版字符串

    var age=10;
    var name="Rose";
    console.log(`${name} is my friend ,she is ${age} years old.`)//Rose is my friend ,she is 10 years old.
复制代码

1. trim() 左右空格都是去掉 ;trimLeft 左空格去掉;trimRight 右空格去掉
1. repeat(次数)重复字符串
1. includes()是否包含某个元素，返回值为true or false
1. startWith() 、endWith()分别为以哪些开始和结束,返回值为true or false

    var str=" I am a student. ";
    console.log(str.trim());//I am a student.
    console.log(str.trimLeft());//I am a student. 
    console.log(str.trimRight());//I am a student.
    console.log(str.repeat(5));// I am a student.  I am a student.  I am a student.  I am a student.  I am a student.
    console.log(str.includes("am"));//true
    console.log(str.startsWith(""),str.endsWith(""));//true true
    console.log(str.padStart(20,2),str.padEnd(20,2));//222 I am a student.   I am a student. 222
复制代码

7.set和map的数据结构

set类似于对象的数组，但是成员的值都是唯一的，没有重复的值;
set构造方法可以接收数组为参数，也可以转化为数组，可用于去除数组中重复值;
用foreach遍历set数组,for of也可对其遍历。
删除数组中的元素用Set.delete()。

    var s1=new Set([1,2,3,"true"]);
    console.log(s1);// {1, 2, 3, "true"}
    s1.add(5);
    console.log(s1);//{1, 2, 3, "true", 5}
    s1.add(3);
    console.log(s1);//{1, 2, 3, "true", 5}
    s1.forEach(item=>console.log(item));//1 2 3 true 5
    for(var p of s1){
        console.log(p);
    }1 2 3 true 5
     console.log(Array.isArray(s1));//false
     console.log(Array.isArray(Array.from(s1)));//true
     s1.delete("true");
     console.log(s1);//{1, 2, 3, 5}
     //数组去重
     var arr1=[1,1,2,4,5,6,6,8];
     arr2=[...(new Set(arr))];
     console.log(arr2);//[1, 2, 4, 5, 6, 8]
     

复制代码

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
可以使用set方法添加元素。
通过get(键)获取键值,然而当键时引用数据类型时，要比较栈区中的地址
重复的键会覆盖

    //创建Map
    var m=new Map([
        ["a","hello"],
        [1,123],
        [[1,2,3],123]
    ]
    );
    //添加元素
    m.set("false",false);
    m.set("know",{true:"true"});
    console.log(m);//{"a" => "hello", 1 => 123, Array(3) => 123, "false" => false, "know" => {…}}
    //get()获取键值 然而当键时引用数据类型时
    console.log(m.get("know"),m.get([1,2,3]));//{true: "true"} undefined
    let a=[1,2,3];
    m.set(a,{name:"wangcai"});
    console.log(m.get(a));//{name: "wangcai"}
    当键名重复时，会覆盖。
    m.set("a",000);
    console.log(m);//{"a" => 0, 1 => 123, Array(3) => 123, "false" => false, "know" => {…}, …}
复制代码

8.Class类

格式：class 类名｛constructor(参数)｛ this.属性=参数；｝ method(){//对象中方法的简写，省略了function.} ｝
书写注意事项：class 是关键字，后面紧跟类名，类名首字母大写，采取的是大驼峰命名法则：类名之后是{}；在{}中，不能直接写语句，只能写方法，方法不需要使用关键字，方法和方法之间没有逗号。不是键值对。
直接通过类名来访问的方法就是静态方法。如：Math.abs();这里的 abs()是静态方法。Array.isArray();isArray()是静态方法. 在方法名前加 static

    class people{
        constructor(name,age,height){
            this.name=name;
            this.age=age;
            this.height=height;
        }
        static jump(){
            console.log("我能跳100米");
        }
        say(){
            console.log(`我是${this.name},年龄${this.age}岁,身高为${this.height}cm`);
        }
    }
    var person=new people("Jack",40,180);
     people.jump();//我能跳100米 【类的静态方法】
    console.log(person.say());
复制代码

10.严格模式

1. 严格模式的目的：规则，提高编译效率。
1. 严格模式和非严格模式区别
1. 在严格模式下不能使用没有var的变量
1. 在严格模式下不能8进制的数字
1. 在严格模式下不能把函数定义在if语句中
1. 在严格模式下函数不能有重名的形参
1. 在严格模式下不能arguments不再跟踪形参的变化
1. 在严格模式下function中的this不指window,调用函数为undefined
1. 在整个代码段中启动严格模式，还可以在一个函数中启动严格模式：

    "use strict"
    function f(a,b){
    console.log(a,b);//66 666
    console.log(arguments[0],arguments[1]);//66 666
    arguments[0]=1111;
    arguments[1]=2222;
    console.log(a,b);//66 666
    console.log( arguments[0],arguments[1]);//1111 2222
    }
    f(66,666);


复制代码