ES5到ES6 js的语法更新

       js是一门弱语言类型，为了实现更有逻辑的代码，需要不断更新语法规范，es就是用来规范js语法的标准。

        09年发布了es5，到15年发布es6，到现在es6泛指es5.1以后的版本es2016，es2017。

 var、let、const 关键字：

        es6新增let、const关键字，用来区分全局和局部的概念。es5的var关键字作用于全局，范围太广模糊不清。

        var和let：

                js代码域中，浏览器运行js解析时会先扫描所有以var关键字声明的变量并创建对象，即使先打印一个事先还不存在的var声明的变量也没有问题。

                代码执行时才会创建let声明的变量

                

---

                var循环和let声明 i 循环：

                        var声明作用全局，对重复声明的 i 后面的var声明覆盖前面的。结果为10

                        let声明仅作用于声明的{ } 内部，重复声明的 i 互不影响。打印结果为 5

---

        let和const:

                const声明的变量和let声明变量作用域范围都在声明的{  }内有效。

                在声明{ }内唯一存在,同名变量仅声明一次。

 

 解构赋值：

... 关键字  展开运算符     

        数组使用  ...

          let  list = [ 1, 2, 3, 4, 5 ] 

                ...list相当于取出其中的内容1,2,3,4,5

 

        对象使用 ...

 

数组下标解构

                let  [ index1, index2 ] = arr      

                        index1对应arr的第一个下标值

                        index2对应arr的第二个下标值

 

对象属性解构 

                let   { property1 , property2 }  =  obj 

                        property1对应obj的第一个属性值

                        property2对应obj的第二个属性值

 

对象方法解构：

           和对象属性一样，因为对象的方法可以看作为一个属性

 

键值对直接映射：

        需要加 ( )

 

字符串：

     字符串拼接 和 模板字符串${ }：

 

         类似java的各种字符串api：

            incloudes()
            startWith()
            endWith()
            repeat()
            padStart()
            padEnd()
            trimStart()
            trimEnd()
            at()

        

 数组：

       Array.from():

                将参数转换数组对象.

 

        arguments对象：

                将传入参数变为数组存储在arguments对象中.

        

  Array.of():

                构建数组对象.

 

数组快速合并：

        

 

 对象：

        es5创建对象 属性赋值：

        es6创建对象 属性赋值：

         动态键名：

 

 

 箭头函数 创建函数：

 

 

 

Promise对象：

        es5使用xmlHttpRequest对象发起异步请求，es6针对异步提供了promise对象。

     resolve()和reject()：

            涉及到promise对象有两个关键函数， 两个函数用于调整promise的状态值，发送异步请求时将promise对象从待触发状态改变成发送成功状态和发送失败状态，然后在判断promise对象的状态值进行成功后的对响应数据的操作或者是出现了异常状态的错误处理。

 

        fetch函数：

                内部实现了resolve()和reject()对promise对象的处理，并返回promise对象

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok'); // 检查响应状态
        }
        return response.json(); // 将响应解析为 JSON
    })
    .then(data => {
        console.log(data); // 处理获取的数据
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error); // 处理错误
    });

      promise对象的链式处理：

                html文件中添加div标签，

                在js代码域中：

function loadImageAsync(url) {
            var promise = new Promise(function (resolve, reject) {
                    const image = new Image();
                    image.onload = function () {
                        resolve(image);
                    };
                    image.onerror = function () {
                        reject(new Error('Couldnot load image at ' + url));
                    };
                    image.src = url;
                });
            return promise;
        }
loadImageAsync("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
            .then(function (res) {
                console.log(res);
                $("div").append(data)
            }, function (error) {
                $("div").html(error)
            })   

 

        

async await 关键字 异步函数变同步 ：

        在js代码域中：

 

Class关键字：

                 类似java

        类创建：

                class  Student{

 

                        consturctor(name,age){

                                this.name = name;

                                this.age = age

                        }

 

                        eat( ) {  }   //对象的方法，对象可以调用

                        static study( ){  //类的静态方法，仅类调用

                                this.run()  //this调用run()方法，this代表当前类.

                         }                     

                        static run( ){     }

                }

 

         类的继承：

                class  Student extends  Person{ 

                        constructor( ){

                                super()  //必须显示声明

                        }

                }

 

 

 import  export 关键字：

        html中调用其他js的部分函数：

                在js 函数或者 属性甚至 对象开头中添加export关键字导入

                html中 import关键字导出对应对象名

                如果导入的是es6的语法，浏览器不识别的话需要用到babel模块的方法进行语法转换为es5的语法。