ES6十大功能，前端开发提高班

运行结果如下：

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'

}