ES5到ES6 js的语法更新

2024-08-22 16:20
文章标签 语法 更新 js frontend es6 es5

本文主要是介绍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声明变量作用域范围都在声明的{  }内有效。

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

 

 解构赋值:

... 关键字  展开运算符     

        数组使用  ...

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

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

b315f1cffa26454faf5651943fe09b67.png

 

173b0290ebce49a0b5f8b5623581f245.png

        对象使用 ...

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

        类创建:

                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

 

 

这篇关于ES5到ES6 js的语法更新的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1096779

相关文章

Springboot配置文件相关语法及读取方式详解

《Springboot配置文件相关语法及读取方式详解》本文主要介绍了SpringBoot中的两种配置文件形式,即.properties文件和.yml/.yaml文件,详细讲解了这两种文件的语法和读取方... 目录配置文件的形式语法1、key-value形式2、数组形式读取方式1、通过@value注解2、通过

Nginx更新SSL证书的实现步骤

《Nginx更新SSL证书的实现步骤》本文主要介绍了Nginx更新SSL证书的实现步骤,包括下载新证书、备份旧证书、配置新证书、验证配置及遇到问题时的解决方法,感兴趣的了解一下... 目录1 下载最新的SSL证书文件2 备份旧的SSL证书文件3 配置新证书4 验证配置5 遇到的http://www.cppc

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》:本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表(直接全局替换)实际转换示例(JFramejs → JavaFX)迁移建

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

MyBatis常用XML语法详解

《MyBatis常用XML语法详解》文章介绍了MyBatis常用XML语法,包括结果映射、查询语句、插入语句、更新语句、删除语句、动态SQL标签以及ehcache.xml文件的使用,感兴趣的朋友跟随小... 目录1、定义结果映射2、查询语句3、插入语句4、更新语句5、删除语句6、动态 SQL 标签7、ehc

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多