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,一经查实,立即删除!

相关文章

MySQL 安装与配置指南

MySQL 是一种广泛使用的关系型数据库管理系统,为各种应用程序提供高效的数据存储和管理解决方案。本文将介绍如何在不同的操作系统中安装 MySQL,以及如何进行基本的配置,以确保数据库系统的最佳性能和稳定性。 一、环境准备 1.1 系统要求 …

【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;六西格玛以其严谨的数据分析、持续的流程优化和卓越的质量提升…

【Kubernetes】k8s集群存储卷(pvc存储卷)

目录 一、PVC存储卷 1.PV 2.PVC 3.StorageClass 4.PV和PVC的生命周期 二、案例 1.创建静态pv 1.1.配置nfs 1.2.创建pv 1.3.创建pvc 1.4.结合pod&#xff0c;将pv、pvc一起运行 2.创建动态pv 2.1.上传 2.2.创建 Service Account&#xff0c;用来管理 NFS Provisio…

一次网络攻击损失170亿元

一次网络攻击能给企业造成多大损失&#xff1f;医疗IT巨头美国联合健康集团给出的答案是——170亿元&#xff01; 今年2月&#xff0c;联合健康集团的子公司、美国最大的商业处方处理商Change Healthcare遭遇网络攻击&#xff0c;导致全美约1/3的医疗机构无法开具处方&#xf…

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

随着智能手机和其他移动设备的广泛应用&#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 …

mysql 彻底重装(删除所有数据)

文章目录 1. 停止 MySQL 服务2. 删除数据库文件a) 先确定数据文件的datadir是在哪里。b) 如果还是没找到&#xff0c;终端中输入命令 3. 重新初始化 MySQL 数据目录4. 启动 MySQL 服务5. 重新设置 root 用户密码 有时候mysql的密码配置错误&#xff0c;连接不上mysql&#xff0…

[802.11e]WMM

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

PyTorch 基础学习

文章索引&#xff1a; PyTorch 基础学习&#xff08;1&#xff09; - 快速入门 PyTorch 基础学习&#xff08;2&#xff09;- 张量 Tensors PyTorch 基础学习&#xff08;3&#xff09; - 张量的数学操作 PyTorch 基础学习&#xff08;4&#xff09;- 张量的类型 PyTorch 基础学…

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

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

axios 上传 和下载 excel 文件

axios 上传 和下载 excel 文件 上传 excel 文件 axios 请求配置 import axios from axios// 导入&#xff08;校验数据&#xff09; export const postFile (data) > {return axios.post({url: 上传地址,data,headers: {Content-Type: multipart/form-data}}) }调用方法处 …

口语笔记——连词

连词 可以 连接主、谓、宾、表、副、介、补语、定语、状语、同位语&#xff08;如下面连词and中的示例&#xff09;。 and I and he went to shanghai. 主语I like basketball and football. 宾语He is kind and friendly. 表语He runs fast and beautifully. 副词I went to …