共计 6706 个字符,预计需要花费 17 分钟才能阅读完成。
前言 (介绍 ECMAScript)
最后 JavaScript
语言有 2 份规范:
ECMA-262
:主规范,由 ECMA 国内组织(Ecma International
)负责管理(为了让最后的JavaScript
与最后的 JScript
能遵循同一套规范倒退而诞生的 ECMAScript
,正好排到了作为 Ecma
的 262
号规范,所以失去 ECMA-262
编号。)
ISO/IEC 16262
:第二规范,由国际标准化组织(ISO
,International Organization for Standardization
)和国内电子技术委员会(IEC
,International Electrotechnical Commission
)负责管理
出于商标版权的起因,标准规范中将这门语言称为 ECMAScript
,所以原则上 JavaScript
与 ECMAScript
指的是同一个货色,但有时也会加以辨别:
JavaScript
:指语言及其实现ECMAScript
:指语言规范及语言版本,比方 ES6 示意语言(规范)的第 6 版
ECMAScript 倒退历史
- ECMAScript 1(1997 年 6 月):标准第一版
- ECMAScript 2(1998 年 6 月):为了同步 ISO 规范,引入了一些小更新
- ECMAScript 3(1999 年 12 月):减少了正则表达式、字符串解决、管制语句(do-while、switch)、异样解决(try-catch)等泛滥外围个性
- ECMAScript 4(2008 年 7 月破除):原本是一次大规模降级(动态类型、模块、命名空间等),但跨度过大,呈现了一致,最终没能推广应用
- ECMAScript 5(2009 年 12 月):变动不大,加了一些规范库个性和严格模式
- ECMAScript-5.1(2011 年 6 月):又一次小更新,为了同步 ISO 规范
- ECMAScript 6(2015 年 6 月):一大波更新,实现了当年 ES4 的许多构想,并正式改为按年份命名标准版本
- ECMAScript 2016(2016 年 6 月):第一个年度版本,与 ES6 相比,公布周期较短,新个性也绝对少些
- ECMAScript 2017(2017 年 6 月):第二个年度版本 …
当前的 ECMAScript 版本(ES2018、ES2019、ES2020 等)都在 6 月正式获准失效
开始(聚焦 ES6)
这里援用 阮一峰
老师的 ES6 规范入门
一书中的总结:ES6 既是一个历史名词,也是一个泛指,含意是 5.1 版本当前的 JavaScript
的下一代规范,涵盖了 ES2015、ES2016、ES2017
等,而 ES2015
则是正式名称,特指当年公布的正式版本的语言规范 市面上提到的 ES6 个别是指 ES2015
规范,但有时也是泛指 下一代 JavaScript
本文次要解说以下内容:
- 块级作用域(Block scoping,ES2015)
- 解构(Destructuring,ES2015)
- 箭头函数(Arrow Functions,ES2015)
- 模板字符串(template string,ES2015)
- 残余参数 / 开展语法(Rest and spread parameters,ES2015)
- 对象字面量简写语法(Object shorthand,ES2015)
- 数组实例的 includes()(ES2016)
- Async/await 异步语法 (ES2017)
块级作用域
为什么须要块级作用域?
ES5 只有全局作用域和函数作用域,没有块级作用域,这导致很多场景不合理。
- 第一种场景,内层变量可能会笼罩外层变量。
var tmp = new Date()
function fn() {console.log(tmp)
if (false) {var tmp = 'hello world'}
}
fn() // undefined
以上代码的原意是,if 代码块的内部应用外层的 tmp 变量,外部应用内层的 tmp 变量。然而,函数 fn
执行后,输入后果为 undefined
,起因在于变量晋升导致内层的 tmp 变量笼罩了外层的 tmp 变量。
- 第二种场景,用来计数的循环变量泄露为全局变量。
var s = 'hello'
for (var i = O; i < s.length; i++) {console.log(s[i])
}
console.log(i) // 5
下面的代码中,变量 i
只用来管制循环,然而循环完结后,它并没有隐没,而是泄露成了全局变量。
let
实际上为 JavaScript
新增了块级作用域。
function fl() {
let n = 5
if (true) {let n = 10}
console.log(n) // 5
}
下面的函数有两个代码块,都申明了变量 n
,运行后输入 5
。这示意外层代码块不受内层代码块的影响。如果应用 var
定义变量,最初输入的值就是 10
那么咱们能利用 块级作用域
做什么呢?
咱们先来做道面试题
for (var i = 0; i < 5; i++) {setTimeout(() => {console.log(i)
}, 1000)
}
// 5 5 5 5 5
改成 ES6
中的 let
for (let i = 0; i < 5; i++) {setTimeout(() => {console.log(i)
}, 1000)
}
// 0 1 2 3 4
看到这,置信聪慧的你曾经了解块级作用域的益处了 O(∩_∩)O
那么 ES5
能不能实现 块级作用域
的成果呢? 能够的,咱们能够利用闭包
for (var i = 0; i < 5; i++) {;(function (index) {setTimeout(() => {console.log(index)
}, 1000)
})(i)
}
// 0 1 2 3 4
解构
解构:是将一个数据结构合成为更小的局部的过程。ES6 中,从数组和对象中提取值,对变量进行赋值。
那么解构有什么用途呢?
- 能够大大的简化变量申明操作。
// ES5
var foo = 1
var bar = 2
var baz = 3
// ES6
let [foo, bar, baz] = [1, 2, 3]
- 变量替换:看起来如同镜像。赋值语句的左侧的解构模式,右侧是长期创立的数组字面量。x 被赋值为数组中的 y,y 被赋值为数组中的 x。
let x = 1
let y = 2
;[x, y] = [y, x]
// x = 2, y = 1
- 对象解构
var obj = {x: 1, y: 2, c: 1}
let {x, y} = obj
// x = 1
// y = 2
- 字符串解构
const [a, b, c, d, e] = 'hello'
// a => h
// b => e
// c => l
// d => l
// e => o
- 函数参数解构
const xueyue = {
name: '雪月',
age: 18,
}
function getAge({name, age}) {return `${name}往年 ${age}岁 `
}
getAge(xueyue) // 雪月往年 18 岁
箭头函数
ES6
容许应用箭头 =>
定义函数
var f = v => v
// 等同于 ES5 的
var f = function (v) {return v}
如果箭头函数不须要参数或须要多个参数,就应用圆括号代表参数局部。
var f = () => 5
// 等同于 ES5 的
var f = function () {return 5}
var sum = (numl, num2) => numl + num2
// 等同于 ES5 的
var sum = function (numl, num2) {return numl + num2}
箭头函数能够与解构联合应用。
canst full = ({first , last}) => first + ' ' + last;
// 等同于 ES5 的
function full(person) {return person.first + ' ' + person.last;}
箭头函数使得表白更加简洁
const isEven = n => n % 2 === 0
const square = n => n * n
var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) {return a - b})
下面代码只用了两行,就定义了两个简略的工具函数。如果不必箭头函数,可能就要占用多行,而且还不如当初这样写醒目。
箭头函数应用留神点
- 函数体内的
this
对象,就是定义时所在的对象,而不是应用时所在的对象。 - 不能够当作构造函数,也就是说,不能够应用
new
命令,否则会抛出一个谬误。 - 不能够应用
arguments
对象,该对象在函数体内不存在。如果要用,能够用rest
参数代替。 - 不能够应用
yield
命令,因而箭头函数不能用作Generator
函数。
下面四点中,第一点尤其值得注意。this
对象的指向是可变的,然而在箭头函数中,它是固定的。
// ES6
function foo() {setTimeout(() => {console.log('id:', this.id)
}, 100)
}
// 转换成 ES5
function foo() {
var _this = this
setTimeout(function () {console.log('id:', _this.id)
}, 100)
}
下面代码中,转换后的 ES5
版本分明地阐明了,箭头函数外面基本没有本人的 this
,而是援用外层的 this
。
模板字符串
模板字符串(template string)是增强版的字符串,用反引号
(
`) ` 标识。它能够当作一般字符串应用,也能够用来定义多行字符串,或者在字符串中嵌入变量。
const {log} = console
const name = '雪月'
const age = 18
// 一般字符串拼接
const result = name + '往年' + age + '岁'
// 应用模板字符串
const result2 = `${name}往年 ${age}岁 `
log(result) // 雪月往年 18 岁
log(result2) // 雪月往年 18 岁
// ${} 大括号能够放入任意的 JavaScript 表达式,能够进行运算
const result3 = `${name}往年 ${age * 2}岁 `
log(result3) // 雪月往年 36 岁
残余参数 / 开展语法
ES6 引入了 rest 参数(模式为... 变量名
),用于获取函数的多余参数,这样就不须要应用 arguments
对象了。rest
参数搭配的变量是一个数组,该变量将多余的参数放入其中。
function sortNumbers() {return Array.prototype.slice.call(arguments).sort()}
// 应用 rest
const sortNumbers = (...numbers) => numbers.sort()
比拟下面的两种写法能够发现,rest
参数的写法更天然也更简洁。
扩大运算符(spread
)是三个点(…)如同 rest
参数的逆运算 将一个数组转为用逗号分隔的参数序列
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
上面是扩大运算符取代 apply
办法的一个理论例子 利用 Math.max
办法简化求出数组中的最大元素。
// ESS 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)
扩大运算符提供了数组合并的新写法。
// ESS
;[1, 2].concat(more)
// ES6
;[1, 2, ...more]
对象的扩大运算符(…)用于取出参数对象的所有可遍历属性,拷贝到以后对象之中。
let z = {a: 3, b: 'bb'}
let n = {...z}
n // {a: 3, b: 'bb'}
n === z // false
特地留神: ...
扩大对象,只能做到当对象属性是 根本数据类型
才是 深拷贝
,如果是 援用数据类型
,那就是浅拷贝。
let z = {a: 3, b: 'bb', c: { name: 'ccc'} }
let n = {...z}
n // {a: 3, b: 'bb', c: { name: 'ccc'} }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个援用地址
对象字面量简写语法
const name = '雪月'
// ES5 写法
const obj = {
name: name,
f: function () {console.log(this.name)
},
}
// ES6 简写
const obj2 = {
name,
f() {console.log(this.name)
},
}
obj.f() // 雪月
obj2.f() // 雪月
应用 vue
的同学是不是感到很相熟
new Vue({
el: '#app',
data() {
return {list: [],
}
},
})
数组实例的 includes()
Array.prototype.includes 办法返回一个布尔值,示意某个数组是否蕴含给定的值,与字符串的 includes 办法相似。ES2016 引入了该办法。
;[1, 2, 3].includes(2) // true
;[1, 2, 3].includes(4) // false
;[1, 2, NaN].includes(NaN) // true
没有该办法之前,咱们通常应用数组的 indexOf 办法,查看是否蕴含某个值。
// ES5
if (arr.indexOf(el) !== -1) {// ...}
// ES6
if (arr.includes(el)) {// ...}
// 那么 indexOf 能不能做到相似于 includes 的写法呢?咱们能够利用 ~ 位运算符
if (~arr.indexOf(el)) {// ...}
indexOf
办法有两个毛病,一是不够语义化,它的含意是找到参数值的第一个呈现地位,所以要去比拟是否不等于 -1,表白起来不够直观。二是,它外部应用严格相等运算符(===)进行判断,这会导致对 NaN
的误判。
;[NaN].indexOf(NaN)
// -1
includes
应用的是不一样的判断算法,就没有这个问题
;[NaN].includes(NaN)
// true
Async/await 异步语法
ES2017
规范引入了 async
函数,使得异步操作变得更加不便。
async
函数是什么?一句话,它就是 Generator
函数的语法糖。
async function getTitle(url) {let response = await fetch(url)
let html = await response.text()
return html.match(/<title>([\s\S]+)<\/title>/i)[1]
}
getTitle('https://tc39.github.io/ecma262/').then((res) => console.log(res))
下面代码中,函数 getTitle
外部有三个操作:抓取网页
、 取出文本
、 匹配页面题目
。只有这三个操作全副实现,才会执行 then
办法外面的 console.log
完结(意犹未尽)
文章介绍了 ES6
罕用的一些语法以及应用场景; 然而 ES6
内容远不止于此,感兴趣的同学能够去 阮一峰老师的
ES6 入门教程 一书中查看具体内容。如果您认可这本书,也能够去正版渠道购买书籍。这样能够使出版社不因出版开源书籍而亏钱,进而激励更多的作者开源本人的书籍。
后记(列举 API)
还有很多 ES6
实用的 API
我就简略提及一下,敌人们看看平时是否有用到
;[1, 4, -5, 10].find(n => n < 0)
// -5
;[1, 5, 10, 15].findIndex((value, index, arr) => value > 9)
// 2
;[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
;[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
// 应用 reduce 求和; reduce 性能及其弱小 ! yyds
;[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){return accumulator + currentValue;});
// 10
// ES2017 引入了跟 Object.keys 配套的 Object.values 和 Object.entries,作为遍历一个对象的补充伎俩,// 供 for...of 循环应用。let {keys, values, entries} = Object;
let obj = {a: 1, b: 2, c: 3};
for (let key of keys(obj)) {console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}