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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/50948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】OJ习题(初阶)

🚀个人主页:奋斗的小羊 🚀所属专栏:C 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 💥1、字符串💥1.1 字符串相加💥1.2 验证回文字符串💥1.3 反转…

电商平台的推荐算法需要备案吗?

答案是肯定的! 政策要求: 根据我国《互联网信息服务算法推荐管理规定》(以下简称《规定》)第六条,具有舆论属性或社会动员能力的互联网信息服务,包括电商平台的推荐算法,需要进行备案。 电商平…

ubuntu24.04安装nginx1.24

ubuntu安装nginx 更新包索引 sudo apt update安装nginx sudo apt install nginx确认安装成功并检查Nginx版本 nginx -v启动Nginx服务 sudo systemctl start nginx设置Nginx开机自启 sudo systemctl enable nginx在浏览器中访问 http://<your_server_IP> 来确认Nginx…

Linux学习记录(十二)————共享内存

文章目录 5.共享内存1.概念2.相关函数共享内存映射共享内存进程间的通信 5.共享内存 1.概念 共享内存&#xff08;Shared Memory&#xff09;就是允许多个进程访问同一个内存空间&#xff0c;是在多个进程之间共享和传递数据最 高效的方式。操作系统将不同进程之间共享内存安排…

HTML5+JavaScript绘制彩虹和云朵

HTML5JavaScript绘制彩虹和云朵 彩虹&#xff0c;简称虹&#xff0c;是气象中的一种光学现象&#xff0c;当太阳光照射到半空中的水滴&#xff0c;光线被折射及反射&#xff0c;在天空上形成拱形的七彩光谱&#xff0c;由外圈至内圈呈红、橙、黄、绿、蓝、靛、紫七种颜色。事实…

【流媒体】RTMPDump—RTMP_ConnectStream(创建流连接)

目录 1. RTMP_ConnectStream函数1.1 读取packet&#xff08;RTMP_ReadPacket&#xff09;1.2 解析packet&#xff08;RTMP_ClientPacket&#xff09;1.2.1 设置Chunk Size&#xff08;HandleChangeChunkSize&#xff09;1.2.2 用户控制信息&#xff08;HandleCtrl&#xff09;1…

嵌入式开发就业方向有哪些?前景未来可期!

在科技日新月异的今天&#xff0c;嵌入式系统几乎渗透到了我们生活的各个角落。从简单的家用电器到复杂的工业自动化设备&#xff0c;再到我们手中的智能手机&#xff0c;无一不体现出嵌入式技术的魅力。因此&#xff0c;嵌入式领域的就业前景广阔&#xff0c;为众多求职者提供…

职场难题怎么破?六西格玛培训给你答案!

在当今追求高效与卓越的职场环境中&#xff0c;六西格玛培训如同一股强劲的东风&#xff0c;为众多职场人士带来了提升自我、突破瓶颈的契机。作为起源于摩托罗拉、在通用电气得到广泛应用的管理方法论&#xff0c;六西格玛以其严谨的数据分析、持续的流程优化和卓越的质量提升…

公认最强充电宝有哪些?盘点四款公认强悍级别充电宝推荐

随着智能手机和其他移动设备的广泛应用&#xff0c;充电宝已经成为我们生活中不可或缺的一部分。然而&#xff0c;市场上众多品牌和型号的充电宝也让消费者面临选择难题&#xff0c;安全隐患也随之浮现。因此&#xff0c;选择一款安全可靠、性能卓越的充电宝显得尤为重要。本文…

[数据集][目标检测]起子检测数据集VOC+YOLO格式1215张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1215 标注数量(xml文件个数)&#xff1a;1215 标注数量(txt文件个数)&#xff1a;1215 标注…

python逻辑控制 学习

if 语句 普通if &#xff0c;与多条件语句 #! /usr/bin/python3 age int(input("请输入你的年龄&#xff1a;")) print("你今年", age, "岁了。") if age < 18:print("你还未成年&#xff0c;请多加努力&#xff01;") elif age …

[802.11e]WMM

WMM概念 WiFi WMM&#xff08;无线多媒体&#xff09;是一种用于无线局域网&#xff08;WLAN&#xff09;的QoS&#xff08;服务质量&#xff09;标准。WMM旨在提供更好的网络性能&#xff0c;特别是在传输多媒体内容&#xff08;如音频和视频&#xff09;时。它通过对不同类型…

Halcon20.11深度学习目标检测模型

1.前言&#xff1a;.Halcon的深度学习标注工具一直在更新&#xff0c;我下载的20.11版本的Deep Learning Tool已经显示过期&#xff0c;无奈只能下载最新版MVTec Deep Learning Tool 24.05。不过最新版的标注工具做的很人性化&#xff0c;分类&#xff0c;目标检测&#xff0c;…

获取阿里云Docker镜像加速器地址

注册并登录阿里云账号&#xff1a;首先&#xff0c;你需要有一个阿里云账号。如果还没有&#xff0c;可以在阿里云官网注册。 访问容器镜像服务&#xff1a;登录后&#xff0c;进入“产品与服务”&#xff0c;找到“容器服务”或“容器镜像服务”。阿里云容器服务 找到镜像加…

iOS开发进阶(二十二):Xcode* 离线安装 iOS Simulator

文章目录 一、前言二、模拟器安装 一、前言 Xcode 15 安装包的大小相比之前更小&#xff0c;因为除了 macOS 的 Components&#xff0c;其他都需要动态下载安装&#xff0c;否则提示 iOS 17 Simulator Not Installed。 如果不安装对应的运行模拟库&#xff0c;真机和模拟器无法…

【UE】关卡实例基本介绍与使用

目录 一、什么是关卡实例 二、创建关卡实例 三、编辑关卡实例 四、破坏关卡实例 五、创建关卡实例蓝图 一、什么是关卡实例 关卡实例本质上是一个已存在关卡的可重复使用的实例化版本。它基于原始关卡&#xff0c;但可以在运行时进行独立的修改和定制&#xff0c;同时保持…

哪个牌子的开放式耳机性价比高?五款地表最强机型推荐!

在我们的日常生活中&#xff0c;街道、地铁车厢或公交车等地方常常充满了噪音&#xff0c;这些杂音不仅可能扰乱心情&#xff0c;还可能对我们的听力造成潜在的伤害。在这样的环境下&#xff0c;如果想要享受音乐或追剧&#xff0c;同时又能保持对周围环境的警觉&#xff0c;开…

【WebSocket】websocket学习【二】

1.需求&#xff1a;通过websocket实现在线聊天室 2.流程分析 3.消息格式 客户端 --> 服务端 {"toName":"张三","message":"你好"}服务端 --> 客户端 系统消息格式&#xff1a;{"system":true,"fromName"…

全自动内衣洗衣机什么牌子好?五款业界高性能内衣洗衣机推荐

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…

google浏览器chrome用户数据(拓展程序,书签等)丢失问题

一、问题背景 我出现这个情况的问题背景是&#xff1a;因为C盘块满了想清理一部分空间&#xff08;具体看这&#xff1a;windows -- C盘清理_c盘softwaredistribution-CSDN博客&#xff09;&#xff0c;于是找到了更改AppDatta这个方法&#xff0c;但因为&#xff0c;当时做迁移…