ECMAScript 2015,也被称为ES6,对JavaScript进行了许多修改。下面是一些最常见的特性和语法差异的概述,并在适用的情况下与ES5进行比较
注意:
一个普遍接受的做法是使用const,除非在循环和重赋值的情况下。然而,在此资源中,我将使用let代替所有ES6示例中的var
变量和常量特性比较, 该表提供了一个简要概述。
区别 | |
---|---|
var | var声明的变量全局有效;var有变量提升,在声明之前也可以使用;var可以重复声明变量;var声明的变量可改。 |
let | let只在声明的作用域内有效 ;let不可以在声明之前使用,有暂时性死区;let不可以重复声明变量;let声明的变量可改 |
const | const只在声明的作用域内有效;const不可以在声明之前使用,有暂时性死区;const不可以重复声明变量;const声明的是只读的常量(变量指向的内存地址不变) |
这里不一一对比举例 主要针对语法相比ES5对比下
① 箭头功能
箭头函数表达式语法是创建函数表达式的一种更短的方法。箭头函数没有原型,不能用于构造函数,也不应该用作对象方法。
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression
let func = (a) => {} // 带一个参数的可选括号
let func = (a, b, c) => {} // 需要多个参数的可选括号
② 模板文字
表达式可以嵌入到模板字面值字符串中。
var str = 'Release date: ' + date
let str = `Release Date: ${date}`
③ 多行字符串
使用模板字面量语法,JavaScript字符串可以跨越多行,而不需要连接。
var str = 'This text ' + 'is on ' + 'multiple lines'
let str = `This text
is on
multiple lines`
注意:在多行模板字面值中保留空白。参见删除ES6模板字符串的前导空格。
④ 隐式返回
return关键字是隐含的,如果使用不带块体的箭头函数,可以省略。
function func(a, b, c) {
return a + b + c
}
let func = (a, b, c) => a + b + c // 必须省略花括号
⑤ 属性简写(Key/property shorthand)
ES6引入了一种更短的符号,用于为同名变量赋值属性。
var obj = {
a: a,
b: b,
}
let obj = {
a,
b,
}
⑥ 方法定义
在给对象赋值方法时,可以省略function关键字。
var obj = {
a: function (c, d) {},
b: function (e, f) {},
}
let obj = {
a(c, d) {},
b(e, f) {},
}
obj.a() // call method a(调用方法a)
⑦ 解构(对象匹配)
使用花括号将对象的属性赋给它们自己的变量。
var obj = {a: 1, b: 2, c: 3}
var a = obj.a
var b = obj.b
var c = obj.c
let {a, b, c} = obj
⑧ 数组的迭代(循环)
对于数组和其他可迭代对象的迭代,引入了更简洁的语法
var arr = ['a', 'b', 'c']
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
for (let i of arr) {
console.log(i)
}
⑨ 默认参数
函数可以使用默认形参进行初始化,只有在不通过函数调用实参的情况下才会使用默认形参
var func = function (a, b) {
b = b === undefined ? 2 : b
return a + b
}
let func = (a, b = 2) => {
return a + b
}
func(10) // returns 12
func(10, 5) // returns 15
⑩ 扩展的语法
扩展语法可用于扩展数组
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
⑪(class) 类构造函数/函数
ES6在基于原型的构造函数上引入了类语法。
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)
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
⑫ 继承
extends关键字创建一个子类。
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)
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)
⑬ Modules-export /import(导入)
可以创建模块来在文件之间导出和导入代码。
<script src="export.js"></script>
<script type="module" src="import.js"></script>
let func = (a) => a + a
let obj = {}
let x = 0
export {func, obj, x}
import {func, obj, x} from './export.js'
console.log(func(3), obj, x)
⑭ Promises/Callbacks(回调)
promise表示异步函数的完成。它们可以作为链接函数的替代。
function doSecond() {
console.log('Do second.')
}
function doFirst(callback) {
setTimeout(function () {
console.log('Do first.')
callback()
}, 500)
}
doFirst(doSecond)
let doSecond = () => {
console.log('Do second.')
}
let doFirst = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Do first.')
resolve()
}, 500)
})
doFirst.then(doSecond)
下面是一个使用xMIHttpRequest的示例,仅用于演示目的(Fetch APl将是合适的现代API)。
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)
}
})
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)
})
以上若有帮到您 点个赞哦~