原文出自: Top 10 ES6 features by example
尽管ES6不是什么新鲜事物了,我依然认为有很多开发者对它还不是很熟悉。主要的原因可能是ES6发布后浏览器的支持比较差。ES6已经发布2年多,并且大部分浏览器都支持的不错,即使你或者你的客户没有使用最新版本的浏览器,你也可以利用转换工具(例如 Babel
)在构建应用过程中将ES6的代码转换为ES5的代码。也就是说你可以领先一步来学习ES6。
在本文中,我会尝试用最简明的方式来介绍最有用的特性。读完本文后,你可以将这些技巧应用在真实的项目中,不要将本文作为一个指南或者文档,我们的目标是鼓励你去深入熟悉ES6。
开始吧
const 和 let 关键字
const
用来定义一个常量,let
用来定义一个变量。在JavaScript
中不是有var
来定义变量吗?是的,可是var
声明的变量是函数作用域而且会被提升,就是说变量在声明前已经被使用,let
变量和常量拥有块作用域,声明前是不会被使用。
run:
数组辅助函数
新的辅助函数出现,使得数组在很多情况下都可以很好的工作,多少次你执行过滤这样的逻辑,检查所有的元素是否符合条件或者元素转换,可能很频繁,现在有了很好的语言特性是你更好的完成工作,在我看来,是最有价值的函数。
forEach
循环数据内部元素,执行提供的函数,将元素作为参数传入
run:
map
创建一个新数组包含同样的元素个数,只是输出元素通过函数创建,可以转换数组的每个元素到其他的。
run:
filter
创建一个新数组包含原始数组的子集,结果是哪些通过传入函数测试的元素,通常返回true 或者 false
run:
find
查找第一个通过传入函数测试的元素,通过传入函数返回true或者false
run:
every
检测数组中的每个元素是否通过函数测试
run:
some
检测数组中的任意元素是否通过函数测试
run:
reduce
函数传入第一个参数累加,数组中每个元素从左到右,减少到一个值,初始累加值作为第二个参数传入
run:
函数箭头
很多简单的函数需要写很多样板代码,如何改善呢?试试箭头函数吧。
箭头函数也可以作为内联,真正的简洁代码
箭头函数也可以写的复杂
类
当java开发者转向js项目时都不想缺少类,不喜欢显式继承,比如在java语言中,使用原型继承代替魔法代码,尽管有些js开发者反对,但是类依然出现在ES6中,他们没有改变继承的概念,依然使用原型继承的语言糖。
run:
改善对象实现
对象实现得到改善,现在变得更容易
- 定义变量字段赋相同的名字
- 定义函数
- 定义动态属性
|
|
run:
模板字符串
我想大部分人都不喜欢写一大串字符串或者拼接变量,每个人也都不想去读他们,幸运的是在ES6中提供了一个非常易用的带占位符的字符串模板变量。
run:
请注意,我们可以写多行文本,很重要的是用倒引号取代了撇号
函数默认参数
不喜欢为函数提供所有可能的参数,那就用默认的
run:
rest 和 spread 操作符
spread
能够扩展数组或者对象内容作为单一参数
案例–数组浅拷贝
run:
案例–合并数组
run:
rest
是不是喜欢绑定一些参数到变量上,并且剩下的参数会作为独立的变量,现在你可以容易做到
run:
解构
数组
可以扩展请求元素赋值给变量
run:
对象
可以扩展请求对象的属性复制给相同的属性变量
run:
Promises
Promise使你可以获取延迟任务或运行时间较长任务的结果,Promise有两个渠道,第一是结果,第二是潜在错误,为了获取结果,你需要提供一个函数作为then
函数的参数,为了处理错误,你需要提供一个函数作为catch
函数的参数
请你注意案例每次的输结果可能不相同,因为随机函数调用。
run:
总结
我希望你能够喜欢本文,如果你需要更多的实践,你可以在https://es6console.com/进行学习,如果你需要更多帮助,请前往