ECMAScript 6

JavaScript 是一门非常有前途的语言,随着时代的发展,JavaScript 的编程规范也在不断地迭代更新, 就如同 JDK 版本从 JDK1.0(1996 年)到现在的 JDK22(2024 年),JavaScript 的规范 ECMAScript 也从 ES1.0(1997 年)到 ES12(2023 年)。前端工程化的普及和浏览器对新特性的支持让前端得 到了飞速发展,前端工程师也逐渐的使用更新的 ES6+语法来编写自己的前端代码,那么作 为新时代的软件工程师,让我们拥抱变化,开始学习 ES6 的语法吧。

ECMAScript 6,简称ES6,是JavaScript语言的一次重大更新。它于2015年发布,是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性,包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等,大大提升了JavaScript的开发体验。由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一
ES6对JavaScript的改进在以下几个方面:

更加简洁:ES6引入了一些新的语法,如箭头函数、类和模板字符串等,使代码更加简洁易懂。
更强大的功能:ES6引入了一些新的API、解构语法和迭代器等功能,从而使得JavaScript更加强大。
更好的适用性:ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式,不仅提高了程序的可维护性,还让JavaScript更方便地应用于大型的应用程序。

总的来说,ES6在提高JavaScript的核心语言特性和功能方面取得了很大的进展。由于ES6已经成为了JavaScript的标准,它的大多数新特性都已被现在浏览器所支持,因此现在可以放心地使用ES6来开发前端应用程序。

1. 变量声明(let 和 const)

  • let
    • 块级作用域:在 ES6 之前,JavaScript 只有全局作用域和函数作用域。let关键字的引入使得变量具有块级作用域,这与其他许多编程语言类似。例如,在一个for循环中使用let声明的变量,其作用域仅限于该for循环块内部。
for (let i = 0; i < 5; i++) {console.log(i);
}
console.log(i); // 会报错,因为i的作用域仅限于for循环块
  • 不存在变量提升:使用var声明变量时会出现变量提升的情况,即变量可以在声明之前使用,其值为undefined。但let声明的变量不会出现这种情况,在声明之前使用会报错。
console.log(a); // 报错:a is not defined
let a = 5;
  • const
    • 常量声明:const用于声明常量,一旦声明,其值就不能再重新赋值。这对于那些在程序运行过程中不应该被修改的值非常有用,比如数学常量PI或者配置对象等。
const PI = 3.14159;
PI = 3; // 报错:Assignment to constant variable.
  • 同样具有块级作用域:和let一样,const声明的常量也具有块级作用域。

2. 箭头函数(Arrow Functions)

  • 简洁的语法:箭头函数提供了一种更简洁的函数定义方式。例如,传统函数定义为function(x) { return x * 2; },用箭头函数可以写成(x) => x * 2。如果函数体只有一条语句,并且这条语句是返回一个值,那么可以省略大括号和return关键字。
  • 词法作用域下的this:在普通函数中,this的值是在函数被调用时确定的,这可能会导致一些难以理解的情况,尤其是在回调函数中。箭头函数没有自己的this,它的this是从定义它的外层作用域中继承而来的。例如:
const obj = {value: 10,method: function() {setTimeout(() => {console.log(this.value); }, 100);}
};
obj.method(); // 10,箭头函数中的this继承自obj

如果使用普通函数作为setTimeout的回调,this的值会指向window(在浏览器环境中)或者global(在 Node.js 环境中),而不是obj

ES6的解构表达式 :

ES6 的解构赋值是一种方便的语法,可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象,方括号 [] 表示数组。通过解构赋值,函数更方便进行参数接受等!

数组解构赋值:

可以通过数组解构将数组中的值赋值给变量,语法为:
let [a, b, c] = [1, 2, 3]; //新增变量名任意合法即可,本质是按照顺序进行初始化变量的值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

该语句将数组 [1, 2, 3] 中的第一个值赋值给 a 变量,第二个值赋值给 b 变量,第三个值赋值给 c 变量。
可以使用默认值为变量提供备选值,在数组中缺失对应位置的值时使用该默认值。例如:

let [a, b, c, d = 4] = [1, 2, 3]; console.log(d); // 4

对象解构赋值

可以通过对象解构将对象中的值赋值给变量,语法为:
let {a, b} = {a: 1, b: 2};
//新增变量名必须和属性名相同,本质是初始化变量的值为对象中同名属性的值
//等价于 let a = 对象.a  let b = 对象.b
  
console.log(a); // 1
console.log(b); // 2

该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量,b 属性值赋值给 b 变量。
可以为标识符分配不同的变量名称,使用 : 操作符指定新的变量名。例如:

let {a: x, b: y} = {a: 1, b: 2}; console.log(x); // 1 console.log(y); // 2

 箭头函数定义语法:

语 法 (参数 1,参数 2,...,参数)=>{函数声明 } (参数 1,参数 2,...,参数 N)=>表达式(单一) //相当于:(参数 1,参数 2,...,参数 N) =>{ return 表达式;} //当只有一个参数时,圆括号是可选的 (单一参数) =>{函数声明} 单一参数 =>{函数声明} //没有参数的函数应该写成一对圆括号 ()=>{函数声明}

 

 

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

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

相关文章

火狐浏览器同源策略禁止解决方案

前言 火狐浏览器同源策略禁止解决方案_同源策略禁止读取远程资源怎么办-CSDN博客 在使用Firefox火狐浏览器进行Web开发时&#xff0c;有时会遇到因为同源策略&#xff08;Same-Origin Policy&#xff09;导致的跨域请求被拦截的问题。例如&#xff0c;控制台可能会显示如下错…

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗&#xff1f; 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的&#xff1f; 一次握手:客户端发送带有 …

解决ImportError: DLL load failed while importing _message: 找不到指定的程序。

C:\software\Anoconda\envs\yolov5_train\python.exe C:\Project\13_yolov5-master\train.py C:\software\Anoconda\envs\yolov5_train\lib\site-packages\torchvision\io\image.py:13: UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序…

AOSP沙盒android 11

这里介绍一下aosp装系统 什么是aosp AOSP&#xff08;Android Open Source Project&#xff09;是Android操作系统的开源版本。 它由Google主导&#xff0c;提供了Android的源代码和相关工具&#xff0c;供开发者使用和修改。 AOSP包含了Android的核心组件和API&#xff0c;使…

git提交冲突的原因及解决方案

一、场景一 1.冲突原因 提交者的版本库 < 远程库 要保障提交者的版本库信息和远程仓库是一致的 2.解决方案 实现本地同步git pull,再提交代码&#xff08;最好每次git push之前都git pull一下&#xff0c;防止这种情况的出现&#xff09; 场景二 1.冲突原因 别人跟你…

第十五届蓝桥杯C/C++B组题解——数字接龙

题目描述 小蓝最近迷上了一款名为《数字接龙》的迷宫游戏&#xff0c;游戏在一个大小为N N 的格子棋盘上展开&#xff0c;其中每一个格子处都有着一个 0 . . . K − 1 之间的整数。游戏规则如下&#xff1a; 从左上角 (0, 0) 处出发&#xff0c;目标是到达右下角 (N − 1, N …

得物多模态大模型在重复商品识别上的应用和架构演进

重复商品治理介绍 根据得物的平台特性&#xff0c;同一个商品在平台上不能出现多个链接&#xff0c;原因是平台需要保证一品一链的特点&#xff0c;以保障商品的集中竞价&#xff0c;所以说一个商品在整个得物平台上只能有一个商详链接&#xff0c;因此我们需要对一品多链的情…

盘点2024年惊艳的10款录屏工具!!

你是否经常需要捕捉电脑屏幕上的精彩瞬间&#xff1f;或者想要记录自己操作某个应用程序的流程&#xff1f;这时候你就需要一款录屏工具啦&#xff01;在学习、工作和娱乐中&#xff0c;录屏工具都能成为你的得力助手。无论你是做教学视频、游戏解说还是分享精彩瞬间&#xff0…

vue+websocket实现即时聊天平台

目录 1 什么是websocket 2 实现步骤 2.1 导入依赖 2.2 编写代码 1 什么是websocket WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它主要用于在客户端和服务器之间建立持久的连接&#xff0c;允许实时数据交换。WebSocket 的设计目的是为了提高 Web 应用程序的…

软件设计师-上午题-15 计算机网络(5分)

计算机网络题号一般为66-70题&#xff0c;分值一般为5分。 目录 1 网络设备 1.1 真题 2 协议簇 2.1 真题 3 TCP和UDP 3.1 真题 4 SMTP和POP3 4.1 真题 5 ARP 5.1 真题 6 DHCP 6.1 真题 7 URL 7.1 真题 8 浏览器 8.1 真题 9 IP地址和子网掩码 9.1 真题 10 I…

C++:map 和 set 的使用

前言 平衡二叉搜索树 ( AVL树 ) 由于二叉搜索树在特殊情况下&#xff0c;其增删查的效率会降低到 O ( N )&#xff0c;因此对二叉搜索树进行改良&#xff0c;通过旋转等方式将其转换为一个左右均衡的二叉树&#xff0c;这样的树就称为平衡二叉搜索树&#xff0c;又称 AVL树。…

Vue 自定义icon组件封装SVG图标

通过自定义子组件CustomIcon.vue使用SVG图标&#xff0c;相比iconfont下载文件、重新替换更节省时间。 子组件包括&#xff1a; 1. Icons.vue 存放所有SVG图标的path 2. CustomIcon.vue 通过icon的id索引对应的图标 使用的时候需要将 <Icons></Icons> 引到使用的…

面相小白的php反序列化漏洞原理剖析

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理反序列化漏洞的一些成因原理 建议学习反序列化之前 先对php基础语法与面向对象有个大体的了解 (我觉得我整理的比较细致&#xff0c;了解这俩是个啥就行) 漏洞实战情况 这个漏洞黑盒几乎不会被发现&am…

ReactPress:深入解析技术方案设计与源码

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;欢迎一起共建&#xff0c;感谢Star。 ReactPress是一个基于React框架开发的开源发布平台&#xff0c;它不仅仅是一个简单的博客系统&#xff0c;更是一个功能全…

canal1.1.7使用canal-adapter进行mysql同步数据

重要的事情说前面&#xff0c;canal1.1.8需要jdk11以上&#xff0c;大家自行选择&#xff0c;我这由于项目原因只能使用1.1.7兼容版的 文章参考地址&#xff1a; canal 使用详解_canal使用-CSDN博客 使用canal.deployer-1.1.7和canal.adapter-1.1.7实现mysql数据同步_mysql更…

SpringBoot之定时任务

1. 前言 本篇博客是个人的经验之谈&#xff0c;不是普适的解决方案。阅读本篇博客的朋友&#xff0c;可以参考这里的写法&#xff0c;如有不同的见解和想法&#xff0c;欢迎评论区交流。如果此篇博客对你有帮助&#xff0c;感谢点个赞~ 2. 场景 我们讨论在单体项目&#xff0c…

绿色能源发展关键:优化风电运维体系

根据QYResearch调研团队最新发布的《全球风电运维市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;全球风电运维市场的规模将攀升至307.8亿美元&#xff0c;并且在接下来的几年里&#xff0c;其年复合增长率&#xff08;CAGR&#xff09;将达到12.5%。 上述图表及…

前端 Canvas 绘画 总结

目录 一、使用案例 1、基础使用案例 2、基本案例改为直接JS实现 二、相关资料 1、API教程文档 2、炫酷案例 一、使用案例 1、基础使用案例 使用Canvas的基本步骤&#xff1a; 1、需要一个canvas标签 2、需要获取 画笔 对象 3、使用canvas提供的api进行绘图 <!--…

力扣排序455题(分发饼干)

假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。 但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i],这是能 让孩子们满足胃口的饼干的最小尺寸;并且每块饼 干j&#xff0c;都有一个尺寸 s[j]。如果 s[j]> g[i]&…

C语言 | Leetcode C语言题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; bool parseComplexNumber(const char * num, int * real, int * image) {char *token strtok(num, "");*real atoi(token);token strtok(NULL, "i");*image atoi(token);return true; };char * complexNumberMulti…