ES6新标准

1、数据类型var let const

var

函数作用域，如果声名在函数之外，就会是一个全局变量，
可以重复声名，赋值。

let

块级作用域，在同一个作用域里面无法重复声名

const

块级作用域，值无法被直接赋值
常量本身无法被改变，但是其值可以被改变
****
#### 三者之间一个明显区别
在全局作用域下面有一个for循环，定义一个循环变量i,如果使用
var来定义，那么，这个i就是一个全局变量，i因为它不在函数中。如果使用let
来定义，i在for循环结束之后会销毁，在for循环之外也无法访问到这个i了。
如果直接声名let和const变量在全局作用域里，它会是一个全局变量，只要声名在大括号{ }里，他就是一个局部变量
let同样也会提前声名，但是会有临时死区，未付值之前使用会报错

2、箭头函数

箭头函数特性

箭头函数没有自己的this属性，是继承其父作用域的this
其this属性是函数定义时就被指定

    function Person(name,age,sex){
        this.name=name,
        this.age=age,
        this.sex=sex,
        this.hobbies=["girl","leg","stocking"],
        this.printHobbies=function(){
            //输出爱好
            this.hobbies.map(function(hobbie){ //map函数里面的函数是一个独立运行的函数，在该函数作用域内的this指向的是window
                console.log(`${this.name} love ${hobbie}`); //因为this指向的是window，所以名字无法正常输出
            })
        }
    }
    let chen=new Person();

使用箭头函数解决以上问题

    function Person(name,age,sex){
        this.name=name,
        this.age=age,
        this.sex=sex,
        this.hobbies=["girl","leg","stocking"],
        this.printHobbies=function(){
            //输出爱好
            this.hobbies.map((hobbie) => { 
                console.log(`${this.name} love ${hobbie}`); 
            })
        }
    }
    let chen=new Person();

不适合用箭头函数的场景

该函数作为构造函数，或作为一个方法绑定到对象

    function Person(name,age,sex){
        this.name=name,
        this.age=age,
        this.sex=sex
        }
    //给Person的原型对象里添加一个方法
    Person.prototype.sayHello=function()
    {
        consol.log(`${this.name} say Hello`);
    }
    //使用箭头函数添加（错误添加方法）
    Person.prototype.sayHello=() => {
        
        //箭头函数不会绑定this到Person,此时的this是延用最外层的window
        consol.log(`${this.name} say Hello`);
    }
    //实例化一个对象时，里面的this无法绑定到新生成的对象
    const chen=new Person("","","");
    //person里面的this不会绑定到chen

箭头函数的this不会执行绑定，只会继承其父作用域

当一个函数单独运行时，没有被绑定，不是作为对象的方法，其this属性指向window或者Globle,在严格模式下是undefined

箭头函数总结:

当这个函数独立运行，但需要沿用其父作用域的this时，建议使用箭头函数

当这个函数需要通过绑定对象来沿用父对象的this，不适合使用箭头函数

当这个函数里需要获取参数对象arguments时不建议使用箭头函数，因为箭头函数中不包含这个对象

3、模板字符串

使用反引号定义一个模板字符串

    const str=`
        <div class="great">
            <p>模板字符串</p>
        </div>`.trim();         //.trim()去除模板字符串两边的空格
    
    //还可以在其中增加变量
    const str1="模板字符串";
    const str2=`
        <div class="great">
            <p>${str1}</p>
        </div>`

一个例子：

    const peate={
        name:"peate",
        date:"2019-4-23",
        todos:[
            {name:"go to walk",conpleted:false},
            {name:"make a handjob",conpleted:false}
        ]
    }
    //将其计划以无序列表形式打印
    const plan=`
    <ul>
        ${peate.todos.map(todo =>`<li>${todo.name}</li>`).join("")} //转换数组为字符串，将逗号转换为空
    </ul>
    `
    console.log(plan);

标签模板字符串

    let st="你好";
    let st1="peatechen"

    function temp1(strings, ...values)      //参数1：被变量分隔的字符串  参数2：各变量
    {
        let high=values.map(value => `${value}`);
        console.log(strings);
        let result="";
        strings.forEach(function(string,i){
            result+= `${string}${high[i] || ''}`
            console.log(result);
        });
        return result; //可对原字符串进行操作
    }
    let st3=temp1`${st} 呦呦呦 嘿嘿嘿${st1} 结束`;
    let st4=`${st} 呦呦呦 嘿嘿嘿${st1} 结束`;
    console.log(st3===st4);     //拼串后结果相等
    
    //过滤用户不合法输入
    let st7=`<div class="temp" onload="alert('av')"> ${st1} </div>`  //假如这个字符串是用户输入的内容，里面有一个onload事件
    let st8=DOMPurify.sanitize(st7); //过滤不规范输入

4、字符串操作

.startsWith("str",index)

    let id="4211231996";
    console,log(id.startsWith("1996",6))

.endsWith("str",index)

    let id="4211231996";
    console.log(id.endsWith("1996",10));

.includes()

    let id="4211231996";
    console.log(id.includes("1996",10)); //10以后有没有

.repeat()

    let id="4211231996";
    console.log(id.repeat("1996",10));  //重复10次

5、对象(数组)解构

如果我们要获取对象中的多个属性，之前的做法是：

    const PeateChen={name:"Peate",sex:"man",age:"18"};
    //获取对象中的值
    let name=PeateChen.name;
    let sex=PeateChen.sex;
    ...... //非常繁琐

可以看到及其繁琐，这时就可以使用对象解构：

    const PeateChen={name:"Peate",sex:"man",age:"18"};
    let {name,age}=PeateChen; //大括号内变量名称需要与对象属性名相同
    console,log(name,age);   //输出结果：Peate 18

数组解构相同

    const PeateChen=["Peate","man","18"];
    let [value1, ,value3]=PeateChen;
    console.log(value1,value3);  //输出值：Peate 18

如果我们在解构里面定义了一个对象里面没有的属性，可以给他一个值：

    const PeateChen={name:"Peate",sex:"man",age:"18"};
    let {name,age,sex="wman",hobbite="girl"}=PeateChen; //大括号内包含了对象里没有的属性
    console,log(name,age,sex,hobbite);   //Peate 18 man girl
    //可以初始给他一个值，通过传入对象，去覆盖初始值

6、for of循环

forEach方法循环无法终止跳过循环
for....in循环会去除循环对象可枚举属性，不适合遍历数组
for....of循环只会遍历值，适合遍历数组

    let names=["peate","chen","ayoung"];
    for(let value of names)
    {
        console.log(value);
    }
    //可以发现，没有获取到索引值
    //如果要获取索引的话可以这样操作：
    for(let [i,value] of names.entries()){
        console.log(i,value);
    }

7、数组的其他方法Arry.from()和Arry.of(),将类数组转换成数组

通过document.querySelectorAll()得到的并不是一个数组，
而是一个类数组对象，所以他不能使用数组的方法

将类数组对象转换为数组

    const vs =document.querySelectorAll("")
    const v_array=Array.from(vs);
    console.log(v_array);

Array.of()

输入参数，返回数组

    return Array.of(1,2); //返回[1,2]

8、ES6数组新方法

查找数组元素find

    let names=["peate","chen","ayoung"];
    let biuty=names.find((name,i)=>{
        if(i==2)
        return true;
    });
    //biuty结果为ayoung

查找数组元素索引findIdex

    let names=["peate","chen","ayoung"];
    let biuty=names.findIndex((name,i)=>{
        if(name=="ayoung")
        return true;
    });
    //biuty结果为2

some()如果数组某一个元素满足条件则返回true

    let names=["peate","chen","ayoung"];
    let biuty=names.some(name => name=="ayoung");
    console.log(biuty);  //true

every()如果数组每一个元素满足条件则返回true

    let names=["peate","chen","ayoung"];
    let biuty=names.every(name => name!="");
    console.log(biuty);  //true

9、扩展运算符（超好用）

可以将可遍历对象扩展到一个数组中

拼接数组

    let array=["peate","chen","ayoung"];
    let others=["fa","mi","ly"];
    //将第二个数组拼接到第一个中
    array=[...array,...others];
    console.log(array);
    //结果：["peate", "chen", "ayoung", "fa", "mi", "ly"]

运用场景

将获取到的DOM对象类数组转换为数组

    let lis=document.querySelectorAll(".Menu>div a");
    //采用扩展运算符得到真正的数组
    let lis=[...document.querySelectorAll("ul>li")];
    //这时就可以调用数组方法处理它
    console.log(lis.map(value => lalue.innerHTML));

可将字符转转换为数组

 const str="Hello";
 const arr=[...str];

使用扩展运算符传参

 const str=[1997,2015,1320];
 funct(...str); //分别传入str中的值

10、promies 异步处理

通常用于调用API、JSON数据、ajax结果的一种反馈、承诺

Promies作用
官方推荐使用axios这个Promies库，为了加深理解，编写自己的promies
Promies用法:

    const P=new Promies(function(resolve,reject){
        //异步处理（API、JSON数据、ajax请求）
        {
            resolve(数据) //请求成功
        }
        
        {
            reject(erro) //请求失败
        }
    });
    
    P.then(function(数据){
        //成功后操作
    },function(erro){
        //失败后操作
    })

//输入id找到你年龄
    function getDetail(Id){
        return new Promise((reslove,reject) =>{
            let owner=owners.find(value=>value.id===Id);
            if(owner){
                reslove(owner.name);
            }else{
                reject(Error("No found"));
            }
        }).then(data=>{
                getAge(data);
            },erro=>{
                console.log(erro);
            });
    }

Promies.all用法

    Promies.all([Promies对象1,Promies对象2.....])
    .then(function(results){
        let [data1,data2]=results;  //所有数据组成的数组，解构到data中
        //操作
    },function(){
        //失败
    })
    .catch(erro=>{
        consol.error(erro);
    })

Promies.race用法

与Promies.all用法相同，不过其是否执行成功操作，由第一个promies决定

11、symbol类型

生成一个symbol类型变量

    const peate=Symbol("peate");  //生成唯一标识
    const person={
        [Symbol("chen")]:{name:"chen",age:"15"},
        [Symbol("chen")]:{name:"chen",age:"20"},
        [Symbol("ayoung")]:{name:"ayoung",age:"20"}
    }

Symbol类型无法用常规方式遍历，遍历和获取方式如下

    const sym=Object.getOwnPropertySymbols(person); //得到三个person
    const sym_value=Object.getOwnPropertySymbols(person).map(value=>person[value]);
         //得到三个属性的值

12、模块化

13、类Class

语法

    class Persons{
        constructor(name,age,sex) {
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        
        sayHello(){
            console.log(`Hello my name is ${this.name}`);
        }
        
        static Hello(){
            console.log("Nice to meet you");  //静态方法，由Persons调用
        }
    }
    let chen6=new Persons("peate",25,"男"); //实例化
    chen6.sayHello();
    Persons.Hello();

类的继承

    class Persons{
        constructor(name,age,sex) {
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        
        sayHello(){
            console.log(`Hello my name is ${this.name}`);
        }
        
        static Hello(){
            console.log("Nice to meet you");  //静态方法，由Persons调用
        }
    }
    
    // 继承自基类Persons
    class Chen6 extends Persons {
        constructor(name,age,sex,girlfrend) {
            super(name,age,sex);
            this.girlfrend=girlfrend;
        }
        mygirl(){
            console.log(`my girlfrend is ${this.girlfrend}`);
        }
    }
    
    let peateChen=new Chen6("peateChen",18,"男","ayoung");
    peateChen.sayHello();
    peateChen.mygirl();

14、生成器函数

语法

    function* functionName(){
        yield 'result1'; //函数本次执行的返回值
        yield 'result2'; //第二次执行的返回值
        。。。
    }
    
    //调用
    functionName.next();//

应用场景:ajax工作流

15、对象扩展

Object.assign(target,source1,source2..)将原对象属性赋值到目标对象

    let obj={na:"af"};
    let obj1={sex:"nan"};
    let obj2={};
    Object.assign(obj2,obj,obj1);

原文地址：https://www.cnblogs.com/peatechen/p/11373191.html

es6笔记