您的位置:首页 > 汽车 > 新车 > ES5到ES6 js的语法更新

ES5到ES6 js的语法更新

2024/12/28 1:37:52 来源:https://blog.csdn.net/weixin_45939821/article/details/141376501  浏览:    关键词: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声明的变量

900909413dc84adbb76c835aa477a31e.png

                


                var循环和let声明 i 循环:

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

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

882101133cb24b27860cf4742a3b8d33.png


        let和const:

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

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

 解构赋值:

... 关键字  展开运算符     

        1)数组使用  ...

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

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

b315f1cffa26454faf5651943fe09b67.png

173b0290ebce49a0b5f8b5623581f245.png

        2)对象使用 ...

dbb56605d5d2436fa1bfab1a8512838a.png

数组下标解构

                let  [ index1, index2 ] = arr      

                        index1对应arr的第一个下标值

                        index2对应arr的第二个下标值

59fa7ab263cb440fadc175cda3deb0d9.png

对象属性解构 

                let   { property1 , property2 }  =  obj 

                        property1对应obj的第一个属性值

                        property2对应obj的第二个属性值

63b538455eb84eadad6b2b52a78ef112.png

对象方法解构:

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

fb05f980d8fe4a0b9f08410f81e60ecf.png

键值对直接映射:

        需要加 ( )

9c28e5b044ae433d99957af44f2f925c.png

字符串:

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

096c01413d83460bb341900f4170a7ae.png

         类似java的各种字符串api:

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

        

 数组:

       Array.from():

                将参数转换数组对象.

af73c668b3f643e5a7a669b23c828c07.png

1b669959bd4744c2b7dc5e074c697f7f.png

        arguments对象:

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

70df4bbae0d94a87a200cff4372665d4.png

        

  Array.of():

                构建数组对象.

8c3c9d4fc2bd48d3bbfa0fa300d01db1.png

数组快速合并:

        c06ff9aa2661489e9521e785524fb492.png

 对象:

        es5创建对象 属性赋值:

7b103332fc624378b141e5191559205d.png

        es6创建对象 属性赋值:

0db1db1c052a4685b109393e83053dbc.png

         动态键名:

6c2b5f789f8248a488a1a1c2da1466fe.png

 箭头函数 创建函数:

7202e9e0a6864943916e55d1a4f43173.png

 2c2ac643530343a789d7225f60d869fd.png

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代码域中:

34e4f4fc77404d9fb104ab5c6edfd7f1.png

Class关键字:

                 类似java和python

        类创建:

                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的语法。

f2059dfcd1e84c17bc57435509fbb612.png

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com