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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
6
2. 数组助手函数
非常酷的助手函数出现了。像这样的逻辑你实现了多少次了：过滤，检查是否有元素满足条件，然后进行元素转换。也许有无数次吧。现在，有一些非常强大的功能可以代替你做这些事情。在我看来，这些是最有价值的功能：
forEach
对数组的每个元素执行所提供的函数，将数组元素作为参数传递进入。
var colors = ['red', 'green', 'blue']
function print(val) {
console.log(val)
}
colors.forEach(print)
1
2
3
4
5
6
7
red
green
blue
1
2
3
map
创建一个包含相同数量元素的新数组，但是由提供的函数创建输出元素。它只是将数组中的每个元素做了转换。
var colors = ['red', 'green', 'blue']
function capitalize(val) {
return val.toUpperCase()
}
var capitalizedColors = colors.map(capitalize)
console.log(capitalizedColors)
1
2
3
4
5
6
7
8
9
["RED","GREEN","BLUE"]
1
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
2
3
4
5
6
7
8
9
[1,5]
1
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
First found teenager: Ann
1
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Everyone is teenager: false
1
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
There are teenagers: true
1
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Sum of [1,2,3,4] is 10
Product of [1,2,3,4] is 24
1
2
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)
1
2
3
4
5
6
7
箭头函数也可以内联。它真的让代码更简单了：
var array = [1, 2, 3, 4]
var sumOfArrayElements = array.reduce((acc, value) => acc + value, 0)
var productOfArrayElements = array.reduce((acc, value) => acc * value, 1)
1
2
3
4
箭头函数也可以更复杂：
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)
1
2
3
4
5
6
7
8
9
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())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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]
1
2
3
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
The point is X=5, Y=10, color=red
The dynamic property is 42
1
2
6. 模板字符串
谁喜欢写一连串的字符串与变量的连接？我相信只有极少数人会喜欢。谁讨厌阅读这样的连接？每个人。幸运的是，ES6引入了非常易于使用的带有占位符的字符串模板。
function hello(firstName, lastName) {
return `Good morning ${firstName} ${lastName}!
How are you?`
}
console.log(hello('Jan', 'Kowalski'))
1
2
3
4
5
6
Good morning Jan Kowalski!
How are you?
1
2
请注意，我们可以将文本写成多行。
重要提示：请使用反引号而不是撇号来将文本包围起来。
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')
1
2
3
4
5
6
I'm going to sort the array [1,2,3] ascending
I'm going to sort the array [1,2,3] descending
1
2
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)
1
2
3
4
5
Copy of ["red","blue","green"] is ["red","blue","green"]
Are ["red","blue","green"] and ["red","blue","green"] same? false
1
2
示例 - 合并数组：
var defaultColors = ['red', 'blue', 'green']
var userDefinedColors = ['yellow', 'orange']
var mergedColors = [...defaultColors, ...userDefinedColors]
console.log('Merged colors', mergedColors)
1
2
3
4
5
6
Merged colors ["red","blue","green","yellow","orange"]
1
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')
1
2
3
4
Top three colors are yellow, blue and orange. Others are: white,black
1
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)
1
2
3
4
5
6
7
8
9
10
11
12
First element is 1, second is 2
Second element is 2, fourth is 4
1
2
对于对象
从对象中提取指定的属性，并将其赋值给具有相同名称的变量。
function printBasicInfo({firstName, secondName, profession}) {
console.log(firstName + ' ' + secondName + ' - ' + profession)
}
var person = {
firstName: 'John',
secondName: 'Smith',
age: 33,
children: 3,
profession: 'teacher'
}
printBasicInfo(person)
1
2
3
4
5
6
7
8
9
10
11
12
13
John Smith - teacher
1
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))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
---------------------
作者：钱曙光
来源：CSDN
原文：https://blog.csdn.net/qiansg123/article/details/80132157
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论