JavaScript6

一、概念

        ES6是JavaScript语言的标准。

        新特性：let和const命令、变量的解构赋值、字符串函数对象数组等扩展。

        环境准备：需要安装NodeJs。

二、新特性

1、let

        let命令用来声明变量。他的用法类似var，但所声明的变量，只在let命令所在的代码块内有效

        var特性：作用域是函数级的、存在变量提升。       

        let特性：作用域是块级的(花括号级)、不存在变量提升。

        例子：       

2、const

        一旦声明，常量的值不可改变。

        const一旦声明时就必须赋值。

        const为块级作用域。

        const声明的常量不能提升。       

3、对象解构赋值       

        解构赋值可以用于对象，对象的属性没有次序，变量名必须与属性同名。

        对象的解构赋值，可以很方便的将现有对象的方法，赋值到，某个变量。                                

4、字符串扩展       

        ES6加强了对Unicode的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码。       

 /**************unicode******************/
    //a
    console.log("\u0061");

        字符串遍历器接口

    /**************遍历器接口******************/
    for(let a of "1bsefewf"){
        console.log(a);
    }

        模板字符串

    /**************模板字符串******************/
    var url="http://www.baidu.com";
    //以前
    var a1="111";
    log(a1)
    //现在
    var a2=`111`;
    log(a2)

        新增方法：includes()、startsWith()、endsWith()。

    var c="asdefdwe";
    //true
    log(c.includes("a"));
    log(c.startsWith("a"));
    log(c.endsWith("e"));
    //带参数 true
    log(c.includes("f",2));
    log(c.startsWith("d",2));
    //第二个参数代表第几个结束
    log(c.endsWith("s",2));

        repeat()：返回一个新字符串，重复字符串N次

    //asdefdweasdefdwe
    log(c.repeat(2));
    //""
    log(c.repeat(0));

        padStart()、padEnd()：自动补全，参数一：字符补全后所处位置，参数二：补全用的字符串

    //ababax
    log("x".padStart(6,"ab"));
    //ax
    log("x".padStart(2,"ab"));
    //xababa
    log("x".padEnd(6,"ab"));
    //xa
    log("x".padEnd(2,"ab"));

        trimStart()、trimEnd()：分别去掉前后空格。都会返回新的字符串。

    //aa
    log(" aa ".trim())
    //aa空格
    log(" aa ".trimStart())
    //空格aa
    log(" aa ".trimEnd())

        at()：接受一个整数作为参数，返回参数指定位置的字符。正数：从下标0开始。负数：倒叙从下标-1开始。

    //b
    log("abc".at(1));
    //b
    log("abc".at(-2));

5、数组扩展

        扩展运算符是三个点组成(...)。将一个数组转为用逗号分隔的参数序列。

    let {log}=console;

    //1 1 2 3 
    log(1,...[1,2,3]);

        替代函数的appply方法。

    let {log}=console;

    var a=[1,2,43,66];
    //66
    log(Math.max.apply(null,a));
    //66
    log(Math.max(...a));

        合并数组

    let {log}=console;

    var a=[1,2,43,66];
    var b=[11,22,432,665];
    var c=a.concat(b);
    var d=[...a,...b];
    //1, 2, 43, 66, 11, 22, 432, 665
    log(c);
    //1, 2, 43, 66, 11, 22, 432, 665
    log(d);

        Array.from()：用于将类数组转为真正的数组。

                                常见类数组：arguments、元素集合、类似数组的对象。

                                类数组只能使用数组的读取方式和length属性。

    
1
    
2
    
3

        Array.of：用于将一组值转换为数组。

6、对象的扩展

        ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

        方法也可简写。

        函数返回值也可用。

    let {log} = console;
    let name="hell"
    var user={
        name,
        age:22,
        //老的
        // getName: function(){
        //     log(this.name);
        // }
        getName(){
            log(this.name);
        }
    }

    log(user.name);
    user.getName();

    /*************函数返回值**************/
    function meth(){
        let x=21;
        let y=22;

        return { x , y}
    }

    log(meth().x)

        属性名表达式

                ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

    let a="abc";
    var b={
        [a]:22,
        name:222
    }
    //{abc: 22, name: 222}
    log(b);

        对象的扩展运算符

    let d={a:1,b:2}
    let f={...d}
    // {a: 1, b: 2}
    log(f);

7、箭头函数

        在ES6中允许“箭头”(=>)定义函数

        如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

    let {log}=console
    //参数
    var a=x=>{log(x)};
    //1
    a(1);

    var b=()=>{
        log("111");
    }
    //111
    b();

    var c=(x,y)=>{
        log(x+y);
    }
    //3
    c(1,2);

        如果箭头函数的代码部分多于一条语句，就要使用大括号将他们括起来，并且使用return语句返回。

    var d=(x,y)=>{
        let aa=1;
        log(x+y+aa);
    }
    //4
    d(1,2);

        由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。       

    var e=()=>({X:1,y:2})
    //{X: 1, y: 2}
    log(e());

        箭头函数的一个用处就是简化回调函数。

    var f=[1,2,3]
    //1 2 3
    f.map((element,index)=>{
        log(element);
    })

        对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域总的this。       

    var name="222";
    var user={
        name:"111",
        getName(){
            // setTimeout(function(){
            //     //222
            //     log(this.name)
            // })

            //111
            setTimeout(()=>{
                log(this.name)
            })
        }
    }
    user.getName();

8、set数据结构

        ES6提供了新的数据结构set。他类似数组，但是成员的值都是唯一的。没有重复的值。

        set数组用法：数组去重、字符去重。

                add("值")：添加值
                delete("值")：删除值
                has("值")：判断set里面是否有这个值
                clear()：清除所有成员
                size：属性返回长度

9、Promise

        promise是异步编程的一种解决方案。他是一个对象，从它可以获取异步操作的消息。promise提供统一的API，各种异步操作都可以用同样的方法进行处理
        有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

        用法：promise对象是一个构造函数，用来生成promise实例。promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。       

    const promise=new Promise((resolve,reject)=>{
        if("成功"){
            resolve(true)
        }else{
            reject(false)
        }
    })

10、Async

        async可以将异步操作变为同步操作。

        在函数前面添加Async，是异步的前面添加await

        实际运用：在发请求时，需要另一个请求获取到数据后，在拿着这个数据去发送请求。       

    /*------------------------异步---------------------*/
    function print() {
        //定时器是异步的，
        setTimeout(() => {
            console.log("异步11")
        }, 10);

        //先执行
        console.log("异步222")
    }
    // 先：222，在：11
    print();

    /*------------------------同步---------------------*/
    async function setTimess() {
        //定时器是异步的，
        return new Promise((resolve,reject)=> {
            setTimeout(() => {
                console.log("11")
                //返回一定放着里面！！！！！！！！！！！！！！！
                resolve(true);
            }, 10);
            
        })
       
    }
    async function prints(){
        let res=await setTimess();
        console.log(res);
    }
    // 先：222，在：11
    prints();

11、class       

        ES6提供了接近传统语言的class概念，作为模板对象
        constructor方法是类的默认方法，通过new命令生成对象实例，自动调用该方法。一个类必须有constructor方法，没有定义显式的，就会添加一个空的。
        生成类的实例使用new 对象();

    class User{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }

        getName(){
            console.log(this.name);
        }

        getAge(){
            return this.age
        }
    }

    var user=new User("11",22);
    user.getName();

        

 属性与方法：

          1、实例方法；

    class People{
        say(){
            console.log("say something")
        }

    }
    var people=new People();
    people.say();

        2、实例属性

    class People{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }

        say(){
            console.log(this.name+"say something"+this.age)
        }

    }
    var people=new People("name",22);
    people.say();
    console.log(people.age+people.name)

        3、静态方法

        类相当于实力的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上关键字static，就表示该方法不会被实例继承。
        如果静态方法包含this关键字，这this指的是类，而不是实例。

    class Abc{
        static abc(){
            console.log("静态方法")
        }


        static getSay(){
            this.say();
        }

        static say(){
            console.log("static")
        }

        say(){
            console.log("not static")
        }
    }

    Abc.abc();
    //static
    Abc.getSay();

    var a=new Abc();
    //not static
    a.say();

    //不能，报错
    a.abc();

12、Module

            Js一直没有模块体系，无法将一个大型程序拆分成相互依赖的小文件。ES6模块是通过export命令显示指定输出的代码，在通过import命令输入。

        

//导出
export getName(){
    console.log("name");
}

//引用。name.js是上方方法的文件
import {geName} from "./name.js"