90% 的前端都会使用 ES6 来简化代码,你都用过哪些?
点击上方 前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
前言 (介绍 ECMAScript)
最初 JavaScript
语言有 2 份标准:
ECMA-262
:主标准,由 ECMA 国际组织(Ecma International
)负责管理(为了让最初的JavaScript
与最初的 JScript
能遵循同一套标准发展而诞生的 ECMAScript
,正好排到了作为 Ecma
的 262
号标准,所以得到 ECMA-262
编号。)
ISO/IEC 16262
:第二标准,由国际标准化组织 ISO
(International Standard Organization
)和国际电子技术委员会 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 = 5if (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
}
复制代码
箭头函数可以与解构结合使用。
const full = ({ first , last }) => first + ' ' + last;
// 等同于 ES5 的
function full(person) {return person.first + ' ' + person.last;
}
复制代码
箭头函数使得表达更加简洁
const isEven = n => n % 2 === 0
const square = n => n * nvar 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 = thissetTimeout(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 3console.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 入门教程[1] 一书中查看详细内容。如果您认可这本书,也可以去正版渠道购买书籍。这样可以使出版社不因出版开源书籍而亏钱,进而鼓励更多的作者开源自己的书籍。
后记(列举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];[3, 8, 54, 8, 3, NaN, NaN, 'NaN', 'NaN'].filter((number, index, arr) => arr.indexOf(number) === index)
// [3, 8, 54, "NaN"] 利用filter过滤去重,注意会漏掉NaN;[1, 2, 3, 4].map((item) => item * 2)
// [2, 4, 6, 8] 利用map返回一个新数组,不改变原数组// 使用 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]
}
复制代码
来自:雪月
https://juejin.cn/post/6960868793140641799
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,「在看」是最大的支持
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
90% 的前端都会使用 ES6 来简化代码,你都用过哪些?相关推荐
- 【JS】1162- 90% 的前端都会使用 ES6 来简化代码,你都用过哪些?
前言 (介绍 ECMAScript) 最初 JavaScript 语言有 2 份标准: ECMA-262:主标准,由 ECMA 国际组织(Ecma International)负责管理(为了让最初的J ...
- 90% 前端都会的 ES6 简化代码技巧,你用过哪些
前言 (介绍 ECMAScript) 最初 JavaScript 语言有 2 份标准: ECMA-262:主标准,由 ECMA 国际组织(Ecma International)负责管理(为了让最初的J ...
- 90% 前端都会的 ES6 简化代码技巧,你用过哪些?
点击上方"小生方勤",选择"设为星标" 第一时间关注技术干货! 前言 (介绍 ECMAScript) 最初 JavaScript 语言有 2 份标准: ECMA ...
- 80% 前端都会的 ES6 简化代码技巧,你用过哪些?
点击上方"小生方勤",选择"设为星标" 第一时间关注技术干货! 前言 (介绍 ECMAScript) 最初 JavaScript 语言有 2 份标准: ECMA ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- 前端面试必备ES6全方位总结
掘金/魔王哪吒 大家好,我是魔王哪吒,话不多说,今天带来的是一篇<前端面试必备ES6全方位总结>文章,欢迎大家喜欢. 前言 学习ES6需要掌握的路线,了解什么是ECMAScript概述,了 ...
- [推荐] 前端面试必备 ES6 全方位总结
6.[推荐] 前端面试必备 ES6 全方位总结 掘金/魔王哪吒大家好,我是魔王哪吒,话不多说,今天带来的是一篇前端面试必备ES6全方位总结文章,欢迎大家喜欢.前言 学习ES6需要掌握的路线,了解什么是 ...
- 都 2021 年了还不会连 ES6/ES2015 更新了什么都不知道吧
都 2021 年了还不会连 ES6/ES2015 更新了什么都不知道吧 es6 / es2015 let & const 块级作用域 解构 数组解构 对象解构 模板字符串 Math + Num ...
- 程序员分前端与后端,那么后端程序员都做些什么?看完你就明白了!
我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库,用JSP生成HTML,然后发送给浏览器. 即使后来Java ...
最新文章
- 火焰图(Flame Graphs)的安装和基本用法
- 计算机应用培训资料,计算机应用培训资料.doc
- pxe安装linux dhcp失败,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- Verilog功能模块——符号位扩展
- ansible register 用法
- JDK 14 Rampdown:内部版本27
- C# 特性 Attribute
- 漫谈LiteOS之开发板-GPIO(基于GD32450i-EVAL)
- 初学Oracle的一点心得
- Json学习总结(4)——Json基础知识回顾
- windows批处理执行多条命令
- 系统提示System.Data.OracleClient 需要 Oracle 客户端软件 8.1.7 或更高版本解决办法...
- 谷歌:明年开始对应用内购买抽取 30% 分成;钉钉创始人无招将离任;Java O2OA V5.2.0 发布|极客头条
- 使用正当时!用扩展全面武装Firefox
- Android NFC标签读写 配置 过滤器总结 各类NFC数据类型NfcA NfcB IsoDep MifareClassic读取
- MD5加密工具类--MD5Utils.java
- 带你初步了解生物网络分析
- kubernetes-kube-scheduler进程源码分析
- Tableau如何取消合并单元格【技巧分享】
- 教您用公式编辑器打恒不等于符号
热门文章
- 计算机二级office报名要求,计算机二级MS Office考试须知 这些你都需要知道
- [闻缺陷则喜]编码与实现方式
- Dungeon Master题解bfs
- hortonworks_具有在IBM POWER8上运行的Hortonworks Data Platform(HDP)的SAS软件
- 数字电子技术《优先编码器74LS148》仿真
- matlab拉依达法,基于拉依达准则的奇异数据滤波法.ppt
- 如何把pdf转成excel
- CSS单行省略和多行省略
- 在浏览器中嵌入播放器
- 关于计算机国考知识点,2020国考申论知识点之了解阅卷人 (有课整理版)