网站首页 > 博客文章 正文
变量定义特征比较
ES5
var x = 0
ES6
let x = 0
常量定义- const
ES6 引入了 const 关键字,该关键字无法重新声明或重新分配,但不是不可变的。
ES6
const CONST_IDENTIFIER = 0 // constants are uppercase by convention
箭头函数-Arrow functions
箭头函数表达式语法是创建函数表达式的较短方法。Arrow 函数没有自己的 this,没有原型,不能用于构造函数,也不应用作对象方法。
ES5
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression
ES6
let func = (a) => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters
模板字符串-Template literals
串联/字符串内插表达式可以嵌入到模板文本字符串中。
ES5
var str = 'Release date: ' + date
ES6
let str = `Release Date: ${date}`
多行字符串-Multi-line strings
使用模板文字语法,JavaScript 字符串可以跨越多行,而无需串联
注意:空格保留在多行模板文本中
ES5
var str = 'This text ' + 'is on ' + 'multiple lines'
ES6
let str = `This text
is on
multiple lines`
隐式返回-Implicit returns
return 关键字是隐含的,如果使用没有块体的箭头函数,则可以省略该关键字。
ES5
function func(a, b, c) {
return a + b + c
}
ES6
let func = (a, b, c) => a + b + c // curly brackets must be omitted
键/属性简略写法-Key/property shorthand
ES6 引入了一种较短的表示法,用于将属性分配给同名变量。
ES5
var obj = {
a: a,
b: b,
}
ES6
let obj = {
a,
b,
}
函数定义简洁写法-Method definition shorthand
在对象上分配方法时,可以省略函数关键字。
ES5
var obj = {
a: function (c, d) {},
b: function (e, f) {},
}
ES6
let obj = {
a(c, d) {},
b(e, f) {},
}
obj.a() // call method a
解析赋值-Destructuring (object matching)
使用大括号将对象的属性分配给其自己的变量。
var obj = {a: 1, b: 2, c: 3}
ES5
var a = obj.a
var b = obj.b
var c = obj.c
ES6
let {a, b, c} = obj
遍历数组-Array iteration (looping)
引入了一种更简洁的语法,用于通过数组和其他可迭代对象的迭代。
var arr = ['a', 'b', 'c']
ES5
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
ES6
for (let i of arr) {
console.log(i)
}
默认参数-Default parameters
函数可以使用默认参数进行初始化,仅当未通过函数调用参数时,才会使用这些参数。
ES5
var func = function (a, b) {
b = b === undefined ? 2 : b
return a + b
}
ES6
let func = (a, b = 2) => {
return a + b
}
func(10) // returns 12
func(10, 5) // returns 15
扩展语法-Spread syntax
扩展语法可用于扩展数组。
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, "a", "b", "c"]
扩展语法可用于扩展函数参数。
let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c
console.log(func(...arr1)) // 6
类/构造函数-Classes/constructor functions
ES6 在基于原型的构造函数之上引入了类语法。
ES5
function Func(a, b) {
this.a = a
this.b = b
}
Func.prototype.getSum = function () {
return this.a + this.b
}
var x = new Func(3, 4)
ES6
class Func {
constructor(a, b) {
this.a = a
this.b = b
}
getSum() {
return this.a + this.b
}
}
let x = new Func(3, 4)
x.getSum() // returns 7
继承-Inheritance
extends 关键字继承父类
ES5
function Inheritance(a, b, c) {
Func.call(this, a, b)
this.c = c
}
Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function () {
return this.a * this.b * this.c
}
var y = new Inheritance(3, 4, 5)
ES6
class Inheritance extends Func {
constructor(a, b, c) {
super(a, b)
this.c = c
}
getProduct() {
return this.a * this.b * this.c
}
}
let y = new Inheritance(3, 4, 5)
y.getProduct() // 60
模块包的导出/引入-Modules - export/import
可以创建模块在文件之间导出和导入代码。
index.html
<script src="export.js"></script>
<script type="module" src="import.js"></script>
export.js
let func = (a) => a + a
let obj = {}
let x = 0
export {func, obj, x}
import.js
import {func, obj, x} from './export.js'
console.log(func(3), obj, x)
承诺/回调-Promises/Callbacks
承诺表示异步函数的完成。它们可以用作链接函数的替代方法。
ES5 callback
function doSecond() {
console.log('Do second.')
}
function doFirst(callback) {
setTimeout(function () {
console.log('Do first.')
callback()
}, 500)
}
doFirst(doSecond)
ES6 Promise
let doSecond = () => {
console.log('Do second.')
}
let doFirst = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Do first.')
resolve()
}, 500)
})
doFirst.then(doSecond)
下面一个使用 XMLHttp 请求的示例,仅用于演示目的(获取 API 将是要使用的正确现代 API)。
ES5 callback
function makeRequest(method, url, callback) {
var request = new XMLHttpRequest()
request.open(method, url)
request.onload = function () {
callback(null, request.response)
}
request.onerror = function () {
callback(request.response)
}
request.send()
}
makeRequest('GET', 'https://url.json', function (err, data) {
if (err) {
throw new Error(err)
} else {
console.log(data)
}
})
ES6 Promise
function makeRequest(method, url) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.open(method, url)
request.onload = resolve
request.onerror = reject
request.send()
})
}
makeRequest('GET', 'https://url.json')
.then((event) => {
console.log(event.target.response)
})
.catch((err) => {
throw new Error(err)
})
猜你喜欢
- 2024-10-27 前端面试大全:手写 Promise(前端手机端面试题)
- 2024-10-27 Javascript ES6中 Generator的?async/await Promise 了解一下?
- 2024-10-27 Promise 中 race 方法的目的是什么
- 2024-10-27 ES6 Promise对象(es6对象操作)
- 2024-10-27 ES6 Promise 的最佳实践(es6 promise作用)
- 2024-10-27 ES6学习(17):彻底搞懂 async 和 await,轻松掌握异步编程!
- 2024-10-27 自己造轮子,超详细、简单的Promise对象原理讲解及代码实现
- 2024-10-27 图解 Promise 实现原理(一):基础实现
- 2024-10-27 可视化的 js:动态图演示 Promises & Async/Await 的过程
- 2024-10-27 前端ES6中Promise原理之进阶篇(二)
你 发表评论:
欢迎- 07-07Xiaomi Enters SUV Market with YU7 Launch, Targeting Tesla with Bold Pricing and High-Tech Features
- 07-07Black Sesame Maps Expansion Into Robotics With New Edge AI Strategy
- 07-07Wuhan's 'Black Tech' Powers China's Cross-Border Push with Niche Electronics and Scientific Firepower
- 07-07Maven 干货 全篇共:28232 字。预计阅读时间:110 分钟。建议收藏!
- 07-07IT运维必会的30个工具(it运维工具软件)
- 07-07开源项目有你需要的吗?(开源项目什么意思)
- 07-07自动化测试早就跑起来了,为什么测试管理还像在走路?
- 07-07Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
- 最近发表
-
- Xiaomi Enters SUV Market with YU7 Launch, Targeting Tesla with Bold Pricing and High-Tech Features
- Black Sesame Maps Expansion Into Robotics With New Edge AI Strategy
- Wuhan's 'Black Tech' Powers China's Cross-Border Push with Niche Electronics and Scientific Firepower
- Maven 干货 全篇共:28232 字。预计阅读时间:110 分钟。建议收藏!
- IT运维必会的30个工具(it运维工具软件)
- 开源项目有你需要的吗?(开源项目什么意思)
- 自动化测试早就跑起来了,为什么测试管理还像在走路?
- Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
- Cursor 太贵?这套「Cline+OpenRouter+Deepseek+Trae」组合拳更香
- 为什么没人真的用好RAG,坑都在哪里? 谈谈RAG技术架构的演进方向
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)