细说JS系列(二十四)—ES6

124 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第24天,点击查看活动详情

铃铛说点题外话

一句话前情回顾:上两篇详细的介绍了事件机制的三个过程,包括如何阻止默认行为

一句话介绍今天:说说ES6比之前的ES5都新增了哪些知识

铃铛说正文

image.png

先来说说ES5、ES6和ES2015有什么区别?

ES2015特指在2015年发布的新一代JS语言标准,ES6泛指下一代JS语言标准,是指从E2015开始的。现阶段在绝大部分场景下,ES2015默认等同ES6ES5泛指上一代语言标准。ES2015可以理解为ES5ES6的时间分界线。

针对字符串的升级?

先说说优化的部分:

新增了模板字符串(` `),那么有什么好处呢?模板字符串采用了反斜杠的方式替代了原来字符串相加的方式,能保留所有的空格和换行,使得字符串拼接看起来更加直观,更加优雅,也更加方便。变量直接放入${}中。

`${这里是变量}这里是其他信息`

升级部分:

  • ES6String原型上新增了includes()方法,用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回查找到索引,如果查找不到返回-1includes方法返回Boolean更明确,语义更清晰)。
console.log(arr.indexof("xiaobai"))   
console.log(arr.includes("xiaobai"))
  • 此外还新增了startsWith()endsWith(), padStart(),padEnd(),repeat()等方法,可方便的用于查找,补全字符串。

对数组的优化

  • 优化部分:
  1. 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值,在声明较多变量时,不用再写很多let(var),且映射关系清晰,且支持赋默认值
  2. 扩展运算符。ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化,可以取代arguments对象和apply方法,轻松获取未知参数个数情况下的参数集合。(尤其是在ES5中,arguments并不是一个真正的数组,而是一个类数组的对象,但是扩展运算符的逆运算却可以返回一个真正的数组)。扩展运算符还可以轻松方便的实现数组的复制和解构赋值(let a = [2,3,4]let b = [...a]

跟铃铛说再见

学习的最后一步:放松

今日冷笑话:鲁班是春秋时期著名的发明家,相传他为其母亲制造木马车,他母亲端坐在车上,由木人驾驭,一去不返。他的父亲竖起大拇指直夸她:真是个懂事的好孩子!

放松结束,猜猜明天会说讲些什么吧