用实例说话：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

Result is: 0.8619834683310168

Error: Oppps....I cannot calculate

Result is: 0.8258410427354488

---------------------

作者：钱曙光

来源：CSDN

原文：https://blog.csdn.net/qiansg123/article/details/80132157

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,686评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,668评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,160评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,736评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,847评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,043评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,129评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,872评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,318评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,645评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,777评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,861评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,589评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,687评论 2赞 351

用实例说话：ES6的十大特性

推荐阅读更多精彩内容