JavaScript6

约定不等于承诺〃 2024-03-22 16:39 21阅读 0赞

## 一、概念 ##

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="<a href='"+url+"'>111</a>";
        log(a1)
        //现在
        var a2=`<a href='${url}'>111</a>`;
        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属性。

<body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </body>
    <script>
        let {log}=console
    
        //argument
        function acc(){
            //2
            log(arguments[1]);
            //[1, 2, 3]
            log(Array.from(arguments))
        }
        acc(1,2,3)
    
        //元素数组
        let ps=document.getElementsByTagName("p");
        //HTMLCollection(3) [p, p, p]
        log(ps);
        //<p>1</p>
        log(ps[0])
        //[p, p, p]
        log(Array.from(ps));
    
        //对象
        var user={
            "10":1,
            "2":2,
            'name':"22"
        }
        //1
        log(user[10]);
        log(Array.from(user));
    </script>

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"