javascript从ES6到ES12的基础框架知识

一，ECMAScript简介

        ECMA规范由各方组成，包括浏览器供应商，他们会开会推动javascript提案

二，ES6（ES2015）

        1，Class

        Javascript是一种使用原型链的语言

        早期，类似OO的概念是通过原型链做出来的，相当复杂，Class终于在ES6中推出

/***
 * 原型链：__proto__ 每个对象都有__proto属性
 */
    class Animal{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        toString(){
            console.log('name:'+this.name+',age:'+this.age);
        }
    }
    var animal = new Animal('张三','18')//instantiate，实例化对象
    animal.toString();//name:张三，age:18
    //hasOwnProperty表示是否有自己的属性,但不会找自己的原型链
    console.log(animal.hasOwnProperty('age'));//true
    console.log(animal.hasOwnProperty('toString'));//false
    console.log(animal.__proto__.hasOwnProperty('toString')); //true



    class Car extends Animal{
        constructor(teacher){
            super('car','XXX附中')
            this.teacher = teacher;
        }
        toString(){
            console.log(super.toString(),'teacher:'+this.teacher);
        }
    }
    var car = new Car('xxx附中')
    car.toString()
    //instanceof,用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
    console.log(car instanceof Car);//true
    console.log(car instanceof Animal);//true

 2，模块

 每个模块都有自己的命名空间以避免冲突，使用导入和导出来导入导出

  基本上将.js文件视为模块

 3，箭头函数

 （）=>{...}，是函数的缩写，最重要的是，它可以确保这始终指向自己

  不在写var self = this，var that = this等等

   

    const remove = (a,b) => {
        return a - b
    }
    const res = remove(3,2) // 1
    const minus = (a,b) => a + b
    const resOne = minus(2,3)//5

4，函数参数默认值    

      如果函数不传递参数，则使用默认值，更简洁的写法。      

function name(height = 50,width = 100) {
            const newH = height;
            const newW = width;
            return newH + newW
        }
        name()//150

5，模板字符串

        过去，长字符串是通过 + 号链接的。

        它的可读性很差，使模板字符串，他更容易阅读

        const nameOne = '张三'
        const nameTwo = '李四'
        const nameTitle = 'Hellow,name:' + nameOne + '，' + nameTwo

        //使用模板字符串
        const nameTtiles = `Hellow，name:${nameOne},${nameTwo}`

6，解构赋值

        允许javascript轻松地从数组和对象中获取内容

        const num = [1,2,3,4,5]
        const [one,two,three,fore,five] = num
        console.log(one);//1
        console.log(two); //2
        console.log(three); //3
        const [firstNum,,,,lastNum] = num  //1,5

        const teacher = {
            name:'张三',
            age:18,
            major:'语文'
        }
        const {name,age,major} = teacher;
        console.log(name);//张三
        console.log(age); //18
        console.log(major);//语文

7，扩展运算符

        他是用三点{...}表示，Array是可以扩展的，如果是Object，他会按照key-value进行扩展

        const teacher  = ['张三','李四']
        const major = ['赵六',...teacher,'七七七'] //'赵六','张三','李四','七七七'

8，对象属性简写

        如果构成对象的字段名称与前面段落中的变量相同，则可以省略该值，看起来更流线型

        const name = '张三'
        const age = 18
        const mojer = '语文'

        const customer = {
            name : name, 
            age : age ,
            mojer : mojer
        }//age: 18   mojer: "语文" name: "张三"
        //ES6语法
        const newCustomer = {
            name, 
            age,
            mojer
        }//age: 18   mojer: "语文" name: "张三"

9，Promise

        Promise是一种异步 （非同步）写法的解决方案，比原来的回调写法更加优雅。

        使用Promise后，回调hell扁平化

        

        const waitSecond = new Promise((resolve,reject) => {
            setTimeout(resolve,1000)
        })
        waitSecond.then(() => {
            console.log('执行one');
            return waitSecond;
        }).then(() => {
            console.log('执行two')
        })

        并且ES8（ES2017）发布了更完美的async，await直接让异步写得向同步一样

        缺点是当思路落到复杂的业务逻辑时，有时会错过await，在运行时发现错误

10，let，const 替换var 

        let ：通过变量，可以被覆盖

        const ：一旦声明，内容不可以被修改，因为数组和对象都是指标，所以他们的内容可以增加不可以减少，但不改变其指标

        早期，JavcScript的var作用域时全局的。也就是说，变量时在使用后声明的，执行的时候会自动提到顶层，后面会赋值。更容易收到污染。

console.log(number);//undefined
var number = 0;

        使用let或者const

 console.log(number);//初始化前无法访问“number”
 var number = 0;

二，ES7（ES2016）

        1，Array.prototype.includes()

        用于判断数组是否包含指定值，如果是，则返回true，否则，返回false

和之前indexOf(）的用法一样，可以认为是返回一个布尔值，语法上更加清晰

        let arr = [1,2,3,4,5]
        console.log(arr.includes(3));//true


        console.log(arr.includes(6));//false
        console.log(arr.includes(6) > -1);//true

        2，幂运算符

        自己封可以装函数来实现，也可以使用 Math.pow() 来完成。

        Math.pow() 函数返回基数（base）的指数（exponent）次幂。    

        console.log(2 ** 10) // 1024
        console.log(Math.pow(2,10));//1024

四，ES8(ES2017)

        1，async，await

            异步函数使用async关键字声明的函数，并且允许在其中使用await关键字。async和await关键词是异步的，基于Promise的行为能够以更简洁的方式编写，避免了显示配置Promise链的需要

        async test(){
            try {
                let res = await Interface();
                console.log(res);
            } catch (error) {
                console.log(e);
            }
        }

        2，Object.values()

        返回对象自身属性的所有值，不包括继承的值

        let objetTest = {a:1,b:2,c:3}
        console.log(Object.values(objetTest));//[1, 2, 3]

        let val = Object.keys(objetTest).map(key =>{
            console.log(objetTest[key]);//循环输出
        })

        3，Object.entries()

         返回可枚举键，既传入对象本身的值

        

        let objetTest = {a:1,b:2,c:3}
        console.log(Object.entries(objetTest));//['a', 1],['b', 2],['c', 3]
        for (const [key,value] of Object.entries(objetTest)) {
            console.log(`key:${key},value:${value}`);
        }
        //key:a,value:1
        //key:b,value:2
        //key:c,value:3

        4,字符串padStart()&padEnd()

  padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串

        console.log( 'x'.padStart(5, '11111') );// '1111x'
        console.log('x'.padStart(4, '111111') );// '111x'
        console.log('x'.padEnd(5, '1') );// 'x1111'
        console.log('x'.padEnd(4, '11111') );// 'x111'

        可以提示字符串格式。

console.log('11'.padStart(10, 'YYYY-MM-DD') );// "YYYY-MM-11"
console.log('2022-11'.padEnd(10, '-DD'));// "2022-11-DD"

        5，尾随逗号

        允许在函数参数列表末尾使用逗号

        

        let a = [
            "num",
            "num1",
            "num2",+
            "num3",
        ]
        console.log(a);// ['num', 'num1', 'num2', NaN]

        6，Object.getOwnPropertyDescriptors()

        获取你自己的描述符，一般的开发页面需求通常用不到

        

            //定义一个空的对象
        var next = {};

        //结合Object.defineProperty方法来定义属性名，以及给值
        Object.defineProperty(next,"name",{
            value:"hellow",
            configurable:false,
            writable:true
        });
        console.log(Object.getOwnPropertyDescriptors(next));
        //name: {value: 'hellow', writable: true, enumerable: false, configurable: false}

        let objetTest = {a:1,b:2,c:3}
        console.log(Object.getOwnPropertyDescriptors(objetTest));
        //a: {value: 1, writable: true, enumerable: true, configurable: true}
        //a: {value: 2, writable: true, enumerable: true, configurable: true}
        //a: {value: 3, writable: true, enumerable: true, configurable: true}
        //[[Prototype]]: Object

        7,共享数组缓冲区

        sharedArrayBuffer（）是一个固定长度的原始二进制数组缓冲区，类似于ArrayBuffer

        可用于在共享内存上创建数组。与ArrayBuffer不同，SharedArrayBuffer不能分离

        // 创建一个1024字节的缓冲
        let sab = new SharedArrayBuffer(1024);

        8，Atimics object

        Atomics对象，它提供了一组静态方法来对付SharedArrayBuffer执行原子操作

        原子的所有属性和函数都是静态的

        如果一个多线程同时在同一个位置读写数据，原子操作保证了正在操作的数据如预期那样即在上一个子操作借宿后执行下一个，操作不中断

        可以说是针对Node.js中多线程Server的开发二加强的功能，在前端开发中使用的机会非常低