运行结果如下:
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
-
解构赋值
数组
从数组中提取所请求的元素并将其分配给变量。
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'
}