举例说明了十大ES6功能

虽然ES6规范不是最近才发布，但我认为很多开发人员仍然不太熟悉。主要原因是在规范发布之后，Web浏览器的支持可能很差。目前，规范发布已经超过2年了，现在很多浏览器对ES6支持良好。即使您（或您的客户）不使用最新版本的Web浏览器，也可以使用转换器（如Babel），在应用程序的构建过程中将ES6转换为ES5。这意味着要向前迈出一步，学习ES6。

在本文中，我将尽量简单地介绍最有用的功能。在本教程之后，您将拥有基本技能，并能够将其应用于实际项目中。不要将其视为指南或文件。我的目标是鼓励你深入挖掘并熟悉ES6。

1. const和let关键字

const使您能够定义常量（最终变量！）。 let让你定义变量。这很棒，但是JavaScript中没有变量吗？是有的，但是由var声明的变量具有函数范围，并被提升到顶部。这意味着在声明之前可以使用一个变量。让变量和常量具有块范围（由{}包围），在声明之前不能使用。

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. 数组辅助方法

出现了新的很酷的功能，这有助于在很多情况下使用JS Array。您实现了多少次的逻辑，如：过滤，检查是否有任何或所有元素符合条件，或者元素转换？是不是很多种情景下都有用过？现在语言本身自带这些很好用的功能。在我看来，这是最有价值的功能：

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（每个函数都返回true，则结果为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。(有一个函数返回true，则结果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

方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。累加器的初始值应作为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.箭头函数

执行非常简单的函数（如上述的Sum或Product）需要编写大量的模版。有什么解决办法吗？是的，可以尝试箭头函数！

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. 类

哪个Java开发人员在切换到JS项目时不会错过类？谁不喜欢显式继承，像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'))

运行结果如下：

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参数和扩展运算符

扩展

它可以将数组或对象内容提取为单个元素。

示例 - 制作数组的浅拷贝：

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

Promises承诺（是的，我知道这听起来很奇怪），你将会得到延期或长期运行任务的未来结果。承诺有两个渠道：第一个为结果，第二个为潜在的错误。要获取结果，您将回调函数作为“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/。如果您需要更多信息，可以在这里找到

翻译自Top 10 ES6 features by example

关注我的公众号，更多优质文章定时推送

举例说明了十大ES6功能

1. const和let关键字

2. 数组辅助方法

forEach

map

filter

find

every

some

reduce

3.箭头函数

4. 类

5.对象功能增强

6. 模板字符串

7. 默认函数参数

8. rest参数和扩展运算符

扩展

rest参数

9. 解构赋值

数组

对象

10. Promises

总结

frontoldman

引用和评论

svg插入foreignObject无法响应事件

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具