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

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,