用实例说话:ES6的十大特性
2017-10-12 09:51
344 查看
原文:Top 10 ES6 features by example
作者:Łukasz Kyć
翻译:雁惊寒
摘要:本文通过实例简单介绍了ES6中最有用的10个功能,以鼓励读者尽快深入研究并熟悉ES6。以下是译文。
虽然ES6的规范并不是特别地新,但我认为很多开发人员对其仍然不太熟悉。 主要原因在于Web浏览器的支持可能比较差。目前,该规范发布已经有两年多了,很多浏览器对ES6的支持还算不错。 即使不使用最新版本的Web浏览器,也可以在应用程序的构建过程中使用代码转译工具(如Babel)将ES6的源代码转换为ES5的源代码。 赶快提升自己,学习ES6吧。
本文尽可能简单地介绍了ES6中最有用的功能。 在阅读完本教程之后,你就可以把学到的这些基本技能应用到实际项目中去了。本文并不是指南或说明文档。本文的目标是鼓励读者深入研究并熟悉ES6。
forEach
对数组的每个元素执行所提供的函数,将数组元素作为参数传递进入。
map
创建一个包含相同数量元素的新数组,但是由提供的函数创建输出元素。它只是将数组中的每个元素做了转换。
filter
创建一个包含原始数组子集的新数组。新数组的元素则是那些通过了所提供函数测试的元素,测试函数应返回true或false。
find
找到通过所提供函数测试的第一个元素,测试函数应返回true或false。
every
检查数组的每个元素是否通过所提供函数的测试,测试函数应返回true或false。
some
检查数组中是否有某个元素能够通过所提供函数的测试,测试函数应返回true或false。
reduce
第一个参数是一个函数,该函数的参数为一个累加器以及数组中的每个元素(从左到右),并最终输出单个值。累加器的初始值则由reduce函数的第二个参数提供。
箭头函数也可以内联。它真的让代码更简单了:
箭头函数也可以更复杂:
- 定义具有相同名称的变量赋值字段
- 定义函数
- 定义动态属性
请注意,我们可以将文本写成多行。
重要提示:请使用反引号而不是撇号来将文本包围起来。
它可以将数组或对象内容提取为单个元素。
示例 - 数组的浅拷贝:
示例 - 合并数组:
Rest
要将前几个函数参数绑定到指定变量,而将其他参数作为数组绑定到单个变量上吗?现在你可以很容易地做到这一点。
从数组中提取指定元素并将其赋值给变量。
对于对象
从对象中提取指定的属性,并将其赋值给具有相同名称的变量。
请注意,由于函数调用是随机的,所以,示例每次执行的输出可能是不同的。
https://github.com/lukehoban/es6features
http://exploringjs.com/es6/
作者:Łukasz Kyć
翻译:雁惊寒
摘要:本文通过实例简单介绍了ES6中最有用的10个功能,以鼓励读者尽快深入研究并熟悉ES6。以下是译文。
虽然ES6的规范并不是特别地新,但我认为很多开发人员对其仍然不太熟悉。 主要原因在于Web浏览器的支持可能比较差。目前,该规范发布已经有两年多了,很多浏览器对ES6的支持还算不错。 即使不使用最新版本的Web浏览器,也可以在应用程序的构建过程中使用代码转译工具(如Babel)将ES6的源代码转换为ES5的源代码。 赶快提升自己,学习ES6吧。
本文尽可能简单地介绍了ES6中最有用的功能。 在阅读完本教程之后,你就可以把学到的这些基本技能应用到实际项目中去了。本文并不是指南或说明文档。本文的目标是鼓励读者深入研究并熟悉ES6。
让我们开始吧
1. const和let关键字
const用于定义常量。 let用于定义变量。但是JavaScript中不是已经有变量了吗? 是的,这很正确,但用var声明的变量具有函数作用域,并会被提升到顶部。 这意味着在声明之前就可以使用这个变量。 let变量和常量具有块作用域(用{}包围),在声明之前不能被使用。function f() { var x = 1 let y = 2 const z = 3 { var x = 100 let y = 200 const z = 300 console.log('x in block scope is', x) console.log('y in block scope is', y) console.log('z in block scope is', z) } console.log('x outside of block scope is', x) console.log('y outside of block scope is', y) console.log('z outside of block scope is', z) } f()
x in block scope is 100 y in block scope is 200 z in block scope is 300 x outside of block scope is 100 y outside of block scope is 2 z outside of block scope is 3
2. 数组助手函数
非常酷的助手函数出现了。像这样的逻辑你实现了多少次了:过滤,检查是否有元素满足条件,然后进行元素转换。也许有无数次吧。现在,有一些非常强大的功能可以代替你做这些事情。在我看来,这些是最有价值的功能:forEach
对数组的每个元素执行所提供的函数,将数组元素作为参数传递进入。
var colors = ['red', 'green', 'blue'] function print(val) { console.log(val) } colors.forEach(print)
red green blue
map
创建一个包含相同数量元素的新数组,但是由提供的函数创建输出元素。它只是将数组中的每个元素做了转换。
var colors = ['red', 'green', 'blue'] function capitalize(val) { return val.toUpperCase() } var capitalizedColors = colors.map(capitalize) console.log(capitalizedColors)
["RED","GREEN","BLUE"]
filter
创建一个包含原始数组子集的新数组。新数组的元素则是那些通过了所提供函数测试的元素,测试函数应返回true或false。
var values = [1, 60, 34, 30, 20, 5] function lessThan20(val) { return val < 20 } var valuesLessThan20 = values.filter(lessThan20) console.log(valuesLessThan20)
[1,5]
find
找到通过所提供函数测试的第一个元素,测试函数应返回true或false。
var people = [ {name: 'Jack', age: 50}, {name: 'Michael', age: 9}, {name: 'John', age: 40}, {name: 'Ann', age: 19}, {name: 'Elisabeth', age: 16} ] function teenager(person) { return person.age > 10 && person.age < 20 } var firstTeenager = people.find(teenager) console.log('First found teenager:', firstTeenager.name)
First found teenager: Ann
every
检查数组的每个元素是否通过所提供函数的测试,测试函数应返回true或false。
var people = [ {name: 'Jack', age: 50}, {name: 'Michael', age: 9}, {name: 'John', age: 40}, {name: 'Ann', age: 19}, {name: 'Elisabeth', age: 16} ] function teenager(person) { return person.age > 10 && person.age < 20 } var everyoneIsTeenager = people.every(teenager) console.log('Everyone is teenager: ', everyoneIsTeenager)
Everyone is teenager: false
some
检查数组中是否有某个元素能够通过所提供函数的测试,测试函数应返回true或false。
var people = [ {name: 'Jack', age: 50}, {name: 'Michael', age: 9}, {name: 'John', age: 40}, {name: 'Ann', age: 19}, {name: 'Elisabeth', age: 16} ] function teenager(person) { return person.age > 10 && person.age < 20 } var thereAreTeenagers = people.some(teenager) console.log('There are teenagers:', thereAreTeenagers)
There are teenagers: true
reduce
第一个参数是一个函数,该函数的参数为一个累加器以及数组中的每个元素(从左到右),并最终输出单个值。累加器的初始值则由reduce函数的第二个参数提供。
var array = [1, 2, 3, 4] function sum(acc, value) { return acc + value } function product(acc, value) { return acc * value } var sumOfArrayElements = array.reduce(sum, 0) var productOfArrayElements = array.reduce(product, 1) console.log('Sum of', array, 'is', sumOfArrayElements) console.log('Product of', array, 'is', productOfArrayElements)
Sum of [1,2,3,4] is 10 Product of [1,2,3,4] is 24
3. 箭号函数
有时候,实现一些简单的功能也需要编写大量的重复代码。有什么补救办法吗?有,请尝试一下箭头函数!var array = [1, 2, 3, 4] const sum = (acc, value) => acc + value const product = (acc, value) => acc * value var sumOfArrayElements = array.reduce(sum, 0) var productOfArrayElements = array.reduce(product, 1)
箭头函数也可以内联。它真的让代码更简单了:
var array = [1, 2, 3, 4] var sumOfArrayElements = array.reduce((acc, value) => acc + value, 0) var productOfArrayElements = array.reduce((acc, value) => acc * value, 1)
箭头函数也可以更复杂:
var array = [1, 2, 3, 4] const sum = (acc, value) => { const result = acc + value console.log(acc, ' plus ', value, ' is ', result) return result } var sumOfArrayElements = array.reduce(sum, 0)
4. 类
当转移到JS项目的时候,哪个Java开发人员不会错过类?谁不喜欢像Java语言那样的显式继承?虽然一些JS开发者对此非常抱怨,但ES6实际已经引入了类的概念。它们不改变继承这个概念,它们只是原型继承的语法糖。class Point { constructor(x, y) { this.x = x this.y = y } toString() { return '[X=' + this.x + ', Y=' + this.y + ']' } } class ColorPoint extends Point { static default() { return new ColorPoint(0, 0, 'black') } constructor(x, y, color) { super(x, y) this.color = color } toString() { return '[X=' + this.x + ', Y=' + this.y + ', color=' + this.color + ']' } } console.log('The first point is ' + new Point(2, 10)) console.log('The second point is ' + new ColorPoint(2, 10, 'green')) console.log('The default color point is ' + ColorPoint.default())
The first point is [X=2, Y=10] The second point is [X=2, Y=10, color=green] The default color point is [X=0, Y=0, color=black]
5. 增强的对象字面量
对象字面量已得到了增强。现在我们可以更容易地:- 定义具有相同名称的变量赋值字段
- 定义函数
- 定义动态属性
const color = 'red' const point = { x: 5, y: 10, color, toString() { return 'X=' + this.x + ', Y=' + this.y + ', color=' + this.color }, [ 'prop_' + 42 ]: 42 } console.log('The point is ' + point) console.log('The dynamic property is ' + point.prop_42)
The point is X=5, Y=10, color=red The dynamic property is 42
6. 模板字符串
谁喜欢写一连串的字符串与变量的连接?我相信只有极少数人会喜欢。谁讨厌阅读这样的连接?每个人。幸运的是,ES6引入了非常易于使用的带有占位符的字符串模板。function hello(firstName, lastName) { return `Good morning ${firstName} ${lastName}! How are you?` } console.log(hello('Jan', 'Kowalski'))
Good morning Jan Kowalski! How are you?
请注意,我们可以将文本写成多行。
重要提示:请使用反引号而不是撇号来将文本包围起来。
7. 默认函数参数
你不喜欢提供所有可能的函数参数?请使用默认值。function sort(arr = [], direction = 'ascending') { console.log('I\'m going to sort the array', arr, direction) } sort([1, 2, 3]) sort([1, 2, 3], 'descending')
I'm going to sort the array [1,2,3] ascending I'm going to sort the array [1,2,3] descending
8. Rest和Spread操作符
Spread它可以将数组或对象内容提取为单个元素。
示例 - 数组的浅拷贝:
var array = ['red', 'blue', 'green'] var copyOfArray = [...array] console.log('Copy of', array, 'is', copyOfArray) console.log('Are', array, 'and', copyOfArray, 'same?', array === copyOfArray)
Copy of ["red","blue","green"] is ["red","blue","green"] Are ["red","blue","green"] and ["red","blue","green"] same? false
示例 - 合并数组:
var defaultColors = ['red', 'blue', 'green'] var userDefinedColors = ['yellow', 'orange'] var mergedColors = [...defaultColors, ...userDefinedColors] console.log('Merged colors', mergedColors)
Merged colors ["red","blue","green","yellow","orange"]
Rest
要将前几个函数参数绑定到指定变量,而将其他参数作为数组绑定到单个变量上吗?现在你可以很容易地做到这一点。
function printColors(first, second, third, ...others) { console.log('Top three colors are ' + first + ', ' + second + ' and ' + third + '. Others are: ' + others) } printColors('yellow', 'blue', 'orange', 'white', 'black')
Top three colors are yellow, blue and orange. Others are: white,black
9. 解构
对于数组从数组中提取指定元素并将其赋值给变量。
function printFirstAndSecondElement([first, second]) { console.log('First element is ' + first + ', second is ' + second) } function printSecondAndFourthElement([, second, , fourth]) { console.log('Second element is ' + second + ', fourth is ' + fourth) } var array = [1, 2, 3, 4, 5] printFirstAndSecondElement(array) printSecondAndFourthElement(array)
First element is 1, second is 2 Second element is 2, fourth is 4
对于对象
从对象中提取指定的属性,并将其赋值给具有相同名称的变量。
function printBasicInfo({firstName, secondName, profession}) { console.log(firstName + ' ' + secondName + ' - ' + profession) } var person = { firstName: 'John', secondName: 'Smith', age: 33, children: 3, profession: 'teacher' } printBasicInfo(person)
John Smith - teacher
10. Promises
Promise承诺,你将会得到延时任务或者长期运行任务的未来结果。Promise有两个通道:第一个为结果,第二个为潜在的错误。要获取结果,你要将回调函数作为“then”的函数参数。要处理错误,你要将回调函数作为“catch”的函数参数。请注意,由于函数调用是随机的,所以,示例每次执行的输出可能是不同的。
function asyncFunc() { return new Promise((resolve, reject) => { setTimeout(() => { const result = Math.random(); result > 0.5 ? resolve(result) : reject('Oppps....I cannot calculate') }, 1) }); } for (let i=0; i<10; i++) { asyncFunc() .then(result => console.log('Result is: ' + result)) .catch(result => console.log('Error: ' + result)) }
Result is: 0.7930997430022211 Error: Oppps....I cannot calculate Result is: 0.6412258210597288 Result is: 0.7890325910244533 Error: Oppps....I cannot calculate Error: Oppps....I cannot calculate Result is: 0.8619834683310168 Error: Oppps....I cannot calculate Error: Oppps....I cannot calculate Result is: 0.8258410427354488
总结
我希望你能喜欢这篇文章。如果你想要做一些练习,可以使用沙箱进行学习:https://es6console.com/。如果想要获取更多的信息,可以访问这里:https://github.com/lukehoban/es6features
http://exploringjs.com/es6/
相关文章推荐
- 用实例说话:ES6的十大特性
- 前端开发不得不知的ES6十大新特性
- es6的十大特性
- es6十大新特性
- ES6新特性五:Set与Map的数据结构实例分析
- 前端开发者不得不知的ES6十大特性
- es6的十大特性
- ES6新特性六:promise对象实例详解
- ES6十大常用特性
- 前端开发者不得不知的ES6十大特性
- ES6十大特性
- 总结ES6最有用的的十大特性
- ES6新特性之函数的扩展实例详解
- 前端开发者不得不知的ES6十大特性
- 简单谈谈ES6的十大特性
- ES6新特性之字符串的扩展实例分析
- 使用ES6的新特性Proxy来实现一个数据绑定实例
- es6的十大特性
- 使用ES6的新特性Proxy来实现一个数据绑定实例
- ES6新特性四:变量的解构赋值实例