ES5到ES6 js的语法更新

news2024/11/24 10:24:42

       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

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

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

相关文章

Promise学习之基本方法

前言 上一篇章我们学习了Promise的概念、基本使用、状态等等,对于Promise也有了基础的了解,那本章就对与Promise的方法作基本学习,去了解了解Promise提供了什么方法。 一、then then处理Promise返回结果,接收两个回调函数 第一…

新建一个基于标准新建一个基于标准固件库的工程模板固件库的工程模板(实现LED单灯闪烁)

实验报告原件在资源可选择性下载 一、实验目的: 1.了解STM32固件库; 2.掌握STM32固件库关键子目录及固件库关键文件; 3.能够新建一个基于标准固件库的工程模板并完成编译 二、实验器材: 笔记本或电脑。 三、实验内容&#…

大投资模型 arxiv 量化论文

郭建与沉向阳 摘要 传统的量化投资研究面临着回报递减以及劳动力和时间成本上升的问题。 为了克服这些挑战,我们引入了大型投资模型(LIM),这是一种新颖的研究范式,旨在大规模提高绩效和效率。 LIM 采用端到端学习和通…

数据结构系列-归并排序

🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 归并排序 递归版本 首先,我们来看一下归并的示意图: 这是归并排序当中分解的过程。 然后便是两个两个进行排序,组合的过程。 归并完美的诠释…

docker镜像,ip,端口映射,持久化

docker 镜像的迁移:导出和导入镜像 查看镜像: [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE centos latest 5d0da3dc9764 2 years ago 231MB 打包 将镜像打包,找到save,可以将…

远程在电脑上玩PS5《黑神话:悟空》?借助极空间实现PS5远程串流攻略

远程在电脑上玩PS5《黑神话:悟空》?借助极空间实现PS5远程串流攻略 哈喽小伙伴们好,我是Stark-C~ 这两天的《黑神话:悟空》可谓是火爆出圈呀!虽说我也是第一时间体验到了这款可以说是划时代意义的首款国产3A大作&…

maven 依赖管理(4)

依赖就是项目里运行的jar 一个项目可以设置多个依赖 这种的 1.依赖传递 直接依赖:就是当前自己的项目pom里的依赖 间接依赖:在自己pom文件引入别人的项目 就能共享到别人项目的依赖 2.依赖传递冲突问题 路径优先:出现相同依赖&#xff0…

华为数通方向HCIP-DataCom H12-821题库(更新单选真题:1-10)

第1题 1、下面是一台路由器的部分配置,关于该配置描述正确的是? [HUAWEllact number 2001 [HUAWEl-acl-basic-2001]rule 0 permit source 1.1.1.1 0 [HUAWEl-acl-basic-2001]rule 1 deny source 1.1.1.0 0 [HUAWEl-acl-basic-2001]rule

SSRF+Redis+Fastcgi

目录 1、打redis 2、打fastcgi 3、SSRF绕过 4、SSRF防御 1、打redis ssrfme靶场实战 页面直接给出了代码,过滤了file: dict ,等等 但是下面我们看到只要有info就能打印phpinfo() 通过phpinfo()打印的信息,发现有内网其他服务器的ip 直接访问 发现…

漏洞挖掘 | 浅谈一次edusrc文件上传成功getshell

0x1 前言 这里记录一下我在微信小程序挖人社局等一些人力资源和社会保障部信息中心漏洞,人社这类漏洞相对于web应用端的漏洞来讲要好挖很多,里面的WAF过滤等一些验证也少。比如你在开始学习src漏洞挖掘,就可以从微信小程序下手。 一般像这类…

Python编码系列—Python CI/CD 实战:构建高效的自动化流程

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

(7)JavaSE:注解与反射

一、注解 1.1什么是注解 Annotation 是从JDK5.0开始引入的新技术 。 作用: (1)不是程序本身 , 可以对程序作出解释.(这一点和注释(comment)没什么区别) (2)可以被其他程序(比如:编译器等)读取.使用范围: &#xff0…

Python进阶(十一)】—— Pandas和Seaborn可视化

🍉CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一|统计学|干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项,参与研究经费10w、40w级横向 文…

数字化与进制转换

1.数字化是什么? 数字化是将事物的属性转化为计算机可处理对象的过程。 2.数字化的好处? 可以让我们的生活,学习和工作更加便捷,大大提升我们学习和工作的效率。 3.如何将采集到的数据进行数字化? 可以通过两种信…

运维的利器–监控–zabbix–第三步:配置zabbix–网络–原理:通过ping实现网络连通性监控

文章目录 通过ping实现网络连通性监控1、参数说明2、建立监控项3、创建图形 通过ping实现网络连通性监控 1、参数说明 ICMPPING[,,,,]通过ICMP ping检查主机是否可以访问。 target-目标IP或者域名 packets-数据包数量 interval-间隔时间(毫秒) size-数…

Windows系统电脑安装多个Tomcat服务教程

文章目录 引言I 下载Tomcat安装包II 安装tomcat多个tomcat服务重命名Tomcat应用程序安装Tomcat服务安装和配置JRE配置服务信息III 知识扩展: windows RDP远程访问资源引言 需求: 基于Tomcat部署多个服务和站点都一台Windows机器 I 下载Tomcat安装包 https://tomcat.apache.o…

LabVIEW高速数据采集关键问题

在LabVIEW进行高速数据采集时,需要关注以下几个关键问题: 数据采集硬件的选择: 高速数据采集需要高性能的数据采集硬件,例如NI PXIe、USB DAQ等模块。硬件的选择应根据采集速率、通道数、精度、以及应用场景的具体需求来确定。 采集速率与带…

认知杂谈22

今天分享 有人说的一段争议性的话 I I 私人空间,成长的温床 咱一说到成长啊,可不能小瞧了外部环境对咱的影响。这环境啊,那可不是无关紧要的事儿,实际上呢,它对咱的成长起着特别关键的作用。你就想想看&#xff0c…

ssrf漏洞复现分析(1)

目录 Web-ssrfme 搭建环境 分析 ssrf攻击本地fastcgi漏洞复现 Web-ssrfme 搭建环境 这里我们使用的是docker环境,只需要把docker压缩包下载到Ubuntu下解压后执行命令即可, docker-compose up -d 但是我的环境中不知道是缺少什么东西,他…

姿态识别 python 效果好,提供多种精准模型

该项目是一款基于Python的AI健身教练系统,它利用先进的姿态识别技术来帮助用户进行正确的运动姿势训练。该系统可以识别并纠正用户在做特定运动时的姿势,比如深蹲、仰卧起坐、步行等。 技术栈: 编程语言:Python深度学习框架&…