ECMAScript 2016, 2017, 和2018中新增功能的示例

const arr = [ 1, 2, 3, 4, NaN];

// es2016不使用
if(arr.indexOf(3) >= 0){
  console.log(true);
}

//使用
if(arr.includes(3)){
  console.log(true);
}

//ps: 注意 indexOf 是不支持查找NaN的
arr.includes(NaN) // true
arr.indexOf(NaN) // -1 (indexOf 不支持 NaN)

// 不使用
Math.pow(7,2) //49

//使用
7**2 //49

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };

//ES2015
//ES2017 不使用
const vals = Object.keys(cars).map(key => cars[key]);
console.log(vals); //[3, 2, 1]


//ES2017 and 未来
//使用
const values = Object.values(cars);
console.log(values); // [3, 2, 1]

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };
// ES5.1
//而不是提取键然后再循环
Object.keys(cars).forEarch(function(key) {
	console.log('key: ' + key + 'value: ' + cars[key]);
})

//ES2017 (ES8)
//使用 Object.entries 
for(let [key value] of Object.entries(cars)) {
	console.log(`key: ${key} value: ${value}`);
}

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };

//ES2015
//不使用
//获取对象键，然后添加每个项目以在循环中映射

const maps = new Map();
Object.keys(cars).forEarch(key => {
	map1.set(key, cars[key]);
})

console.log(map1) // Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}

//ES2017 and 以后
//使用
const map = new Map(Object.entries(cars));

console.log(map) //Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}

'someString'.padStart(numberOfCharcters [,stringForPadding]); 
'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='

//ES2017
//如果你有一个不同长度的项目列表，并希望格式化它们的显示目的，你可以使用padStart

const formatted = [0, 1, 12, 123, 1234, 12345].map(num => 
	num.toString().padStart(10, '0') // 添加 0 直到长度为 10
);

console.log(formatted);

//打印
// [
// 	'0000000000',
// 	'0000000001',
// 	'0000000012',
// 	'0000000123',
// 	'0000001234',
// 	'0000012345',
// ]

const cars = {
  ':blue_car:BMW': '10',
  ':oncoming_automobile:Tesla': '5',
  ':oncoming_taxi:Lamborghini': '0'
}
Object.entries(cars).map(([name, count]) => {
  //padEnd appends ' -' until the name becomes 20 characters
  //padStart prepends '0' until the count becomes 3 characters.
  console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
});
//打印结果..
// :blue_car:BMW - - - - - - -  Count: 010
// :oncoming_automobile:Tesla - - - - - -  Count: 005
// :oncoming_taxi:Lamborghini - - -  Count: 000

//注意，不是5颗心，只有2颗心和1颗看起来很奇怪的心！

'heart'.padStart(10, ":heart:"); // prints.. ':heart::heart:❤heart'

//之前...
var Car = {
	name: 'BMW',
	price: 1000000,
	set discount(x) {
		this.d = x;
	},
	get discount() {
		return this.d;
	},
};

//打印Car对象的“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(Car, 'discount'));
//打印结果..
// {
// 	get: [Function: get],
// 	set: [Function: set],
// 	enumerable: true,
// 	configurable: true
// }

//使用Object.assign将Car的属性复制到ElectricCar
const ElectricCar = Object.assign({}, Car)；

//打印ElectricCar对象的“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(ElectricCar, 'discount'));

//打印
// {
// 	value: undefined,
// 	writable: true,
// 	enumerable: true,
// 	configurable: true
// }

//:warning: 请注意ElectricCar对象中的“discount”属性中缺少getter和setter！:-1::-1:

//以后...
var Car = {
	name: 'BMW',
	price: 1000000,
	set discount(x) {
		this.d = x;
	},
	get discount() {
		return this.d;
	},
};
//使用Object.defineProperties将Car的属性复制到ElectricCar2
//并使用Object.getOwnPropertyDescriptors提取Car的属性

const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));
//打印ElectricCar2对象“discount”属性的详细信息
console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount'));
//prints..
// { get: [Function: get],  :point_left|type_3::point_left|type_3::point_left|type_3:
//   set: [Function: set],  :point_left|type_3::point_left|type_3::point_left|type_3:
//   enumerable: true,
//   configurable: true 
// }
// 请注意，getter和setter存在于ElectricCar2对象中，用于'discount'属性！

//问题

//	#1 开发者创建
function Person(
	name, 
	age
	) {
		this.name = name;
		this.age = age;
}

//#2 开发者添加address 
function Person(
	name,
	age, // 添加尾随逗号 	<--------因为逗号，开发人员会被git等工具所警告
	address //添加新的参数
  ) {
		this.name = name;
		this.age = age;
		this.address = address; //添加的这行
}

//ES2017 解决
//允许#1开发者添加尾随逗号
//#1 创建如下
function Person(
	name, 
	ange,  //<------- 由于尾随逗号，#2开发者不需要改变这行
	) {
		this.name = name;
		this.age = age;
}

//不使用
// ES2015 Promise

function getAmount(userId) {
	getUser(userId)
		.then(getBankBalance)
		.then(amount => {
			console.log(amount);
		});
}

//使用...
// ES2017

async function getAmount2(userId) {
	var user = await getUser(userId);
	var amount = await getBankBalance(user);
	console.log(amount);
}

getAmount('1'); //$1,000

getAmount2('1'); //$1,000

function getUser(userId) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve('john')
		}, 1000)
	});
}

function getBankBalance(user) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			if(user == 'john') {
				resolve('$1,000');
			} else {
				reject(unknown user);
			}
		}, 1000)
	});
}

//异步函数本身返回一个Promise
async function doubleAndAdd(a, b) {
	a = await doubleAfterlSec(a);
	b = await doubleAfterlSec(b);
	return a + b;
}

//用法
doubleAndAdd(1, 2).then(console.log);

function doubleAfterlSec(param) {
	return new Promise (resolve => {
		setTimeout(resolve(param * 2), 1000);
	});
}

//异步函数本身返回一个Promise
async function doubleAndAdd(a, b) {
	//注意：这边使用 Promise.all
	//注意到使用数组解构,捕获结果
	[a, b] = await Promise.all([doubleAfterlSec(a), doubleAfterlSec(b)]);
	return a + b;
}

//用法
doubleAndAdd(1, 2).then(console.log);

function doubleAfterlSec(param) {
	return new Promise (resolve => {
		setTimeout(resolve(param * 2), 1000);
	});
}

// 1. 使用 try catch 

async function doubleAndAdd(a, b) {
	try {
		a = await doubleAfterlSec(a);
		b = await doubleAfterlSec(b);
	} catch (e) {
		return NaN; // return something
	}
	return a + b;
}

// 用法 
doubleAndAdd('one', 2).then(console.log) //NaN
doubleAndAdd(1, 2).then(console.log) // 6

function doubleAfterlSec(param) {
	return new Promise((resolve, reject) => {
		setTimeout(function() {
			let val = param * 2;
			isNaN(val) > reject(NaN) : resolve(val);
		}, 1000);
	});
}

//Option 2 - *Catch* 每个等待线上的错误
//因为每个等待表达本身就是一个Promise
async function doubleAndAdd(a, b) {
	a = await doubleAfter1Sec(a).catch(e => console.log('"a" is NaN')); // :point_left:
  b = await doubleAfter1Sec(b).catch(e => console.log('"b" is NaN')); // :point_left:
  if (!a || !b) {
  	return NaN;
  }
	return a + b;
}
//用法:
doubleAndAdd('one', 2).then(console.log); // NaN  and logs:  "a" is NaN
doubleAndAdd(1, 2).then(console.log); // 6
function doubleAfter1Sec(param) {
	return new Promise((resolve, reject) => {
		setTimeout(function() {
			let val = param * 2;
			isNaN(val) ? reject(NaN) : resolve(val);
		}, 1000);
	});
}

//Option 3 - 不要做任何事情，在function外捕获
//因为异步/等待返回一个Promise，我们可以捕捉整个函数的错误
async function doubleAndAdd(a, b) {
 a = await doubleAfter1Sec(a);
 b = await doubleAfter1Sec(b);
 return a + b;
}
//用法
doubleAndAdd('one', 2)
.then(console.log)
.catch(console.log); // :point_left::point_left|type_3:<------- use "catch"
function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}

//标准字符串插值 
const firstName = 'Raja';
const greetings = `Hello ${firstName}!`;
console.log(greetings); // "Hello Raja!"

// "标记”函数返回一个自定义字符串文字.
// 在这个例子中，greet调用timeGreet（）来追加Good
// Morning/Afternoon/Evening 视当天的时间而定.
function greet(hardCodedPartsArray, ...replacementPartsArray) {
 console.log(hardCodedPartsArray); //[ 'Hello ', '!' ]
 console.log(replacementPartsArray); //[ 'Raja' ]
let str = '';
 hardCodedPartsArray.forEach((string, i) => {
  if (i < replacementPartsArray.length) {
   str += `${string} ${replacementPartsArray[i] || ''}`;
  } else {
   str += `${string} ${timeGreet()}`; //<-- 插入 Good morning/afternoon/evening here
  }
 });
 return str;
}

//用法
const firstName = 'Raja';
const greetings = greet`Hello ${firstName}!`; //:point_left|type_3:<-- 标记文字
console.log(greetings); //'Hello  Raja! Good Morning!' :fire:
function timeGreet() {
 const hr = new Date().getHours();
 return hr < 12
  ? 'Good Morning!'
  : hr < 18 ? 'Good Afternoon!' : 'Good Evening!';
}

function myTagFunc(str) { 
 return { "cooked": "undefined", "raw": str.raw[0] }
} 

var str = myTagFunc `hi /ubla123abla`; //调用 myTagFunc

str // { cooked: "undefined", raw: "hi //unicode" }

//之前
/first.second/.test('first/nsecond'); //false

//ECMAScript 2018
/first.second/s.test('first/nsecond'); //true   Notice: /s :point_left|type_3:

const re = /foo.bar/s;
//或者 const re = new RegExp('foo.bar', 's');

re.test('f00/nbar'); //true
re.dotAll // true
re.flags // 's'

//之前
let re1 = /(/d{4})-(/d{2})-(/d{2})/;
let result1 = re1.exec('2015-01-02');
console.log(result1);
//
//["2015-01-02", "2015", "01", "02", index: 0, input: "2015-01-02", groups: undefined]

//以后（ES2018）
let re2 = /(?<year>/d{4})-(?<month>/d{2})-(?<day>/d{2})/u;
let result2 = re2.exec('2015-01-02');
console.log(result2);
//["2015-01-02", "2015", "01", "02", index: 0, input: "2015-01-02", groups: { year: '2015', month: '01', day: '02'}]


//用法：
//你想要知道年份，你可以：

console.log(result2.groups.year) //2015

//下面例子，有个组叫“fruit”
//它既能匹配“apple”又能匹配“orange”.我们可以使用“/k<group name>”来回引用这个组的结果,(/k<fruit>)
//所以它匹配==两侧的同一个单词
let sameWords = /(?<fruit>apple|orange)==/k<fruit>/u;

sameWords.test('apple==apple');  //true
sameWords.test('orange==orange');  //true
sameWords.test('apple==orange');  //false

// 更换“firstName, lastName” ==> “lastName, firstName”

let re = /(?<firstName>[A-Za-z]+) (?<lastName>[A-Za-z]+$)/u;

'Raja Rao'.replace(re, '$<lastName>, $<firstName>'); // "Rao, Raja"

// 提取 firstName 和 age
// 将其余的项存储在“remaining”变量中。

let { fristName, age, ...remaining } = {
	fristName: 'john',
	lastName: 'smith',
	age: 20,
	height: '5.10',
	race: 'martian',
};
firstName; //john
age //20
remaining //{ lastName: 'smith', height: '5.10', race: 'martian' }

//假设我们想要移除SSN，我们不需要遍历整个对象并创建一个新的cleanObj。
// 简单地使用rest解构来提取出SSN，并将其余的保存在cleanObj中。

let { SSN, ...cleanObj } = {
	firstName: 'john',
	lastName: 'smith',
	SSN: '123-45-6789',
	race: 'martian',
}

cleanObj; //{	firstName: 'john', lastName: 'smith', race: 'martian' }

// person 和 account 合并
const person = { fName: 'john', age: 20 };
const account = { name: 'bofa', amount: '$1000' };

// 通过扩展运算符提取person和account的属性，并将其添加到一个新对象中。
const personAndAccount = { ...person, ...account };
personAndAccount; // {fName: 'john', age: 20, name: 'bofa', amount: '$1000' }

/(?<=#).*/.test('winning'); // false
/(?<=#).*/.test('#winning'); // true

//之前
'#winning'.match(/#.*/)[0]; // '#wining',包含#

//ES2018后
'#winning'.match(/(?<=#).*/)[0]; // 'wining' 没有#, #是用来验证的。

// 3.00不能匹配，因为符号$在前面

'A gallon of milk is $3.00'.match(/(?</$)/d+/.?/d+/); // null

// 2.43匹配成功，因为前面没有符号$
//当匹配时，不包含符号€
'A gallon of milk is €3.00'.match(/(?</$)/d+/.?/d+/)[0]; //2.43

//他跟随匹配多个印地文字符
/^/p{Script=Devanagari}+$/u.test('हिन्दी'); //true  
//PS：有3个印地文字符h

//以下匹配一个希腊字符
//p{Script_Extensions=Greek}/u.test('π'); // true

// 下面是匹配表情字符
//p{Emoji}/u.test(':heart:'); //true
// 下面的操作失败了，因为黄色的emojis没有Emoji_Modifier!
//p{Emoji}/p{Emoji_Modifier}/u.test(':v:'); //false
//下面的操作是匹配的，/p{Emoji} 紧跟后面是 /p{Emoji_Modifier}
//p{Emoji}/p{Emoji_Modifier}/u.test('✌  '); //true
// 解释:
// 默认情况下，胜利表情是黄色的。如果我们使用相同表情的棕色、黑色或其他，它们被认为是原始表情的变体，并使用两个unicode字符表示。一个是原始表情符号，另一个是颜色的unicode字符。在下面的例子中，虽然我们只看到一个棕色的胜利表情符号，但它实际上使用了两个unicode字符，一个用于表情符号，另一个用于棕色。

//在Unicode数据库中，这些颜色具有Emoji_Modifier属性。因此，我们需要使用/p{Emoji}和/p{Emoji_Modifier}来正确和完全匹配棕色的表情符号。

//p{Emoji}/p{Emoji_Modifier}/u.test('✌  '); //true

// Resolve

let started = true;
let myPromise = new Promise(function(resolve, reject) {
	resolve('all good');
})
	.then(val => {
		console.log(val); //all good
	})
	.catch(e => {
		console.log(e)l // 跳过
	})
	.finally(() => {
		console.log('This function is always executed!');
		started = false; // 清除
	})

// Reject
let started = true;
let myPromise = new Promise(function(resolve, reject) {
	resolve('reject apple');
})
	.then(val => {
		console.log(val); //reject apple
	})
	.catch(e => {
		console.log(e)l //catch被跳过
	})
	.finally(() => {
		//注意这里没有任何值
		console.log('This function is always executed!');
		started = false; //清除
	})

//错误情况1
//Promise 抛出错误


let started = true;
let myPromise = new Promise(function(resolve, reject) {
	throw new Error('Error');
})
	.then(val => {
		console.log(val); // 跳过
	})
	.catch(e => {
		console.log(e)l // 出现错误catch被调用
	})
	.finally(() => {
		// 注意这里没有任何值
		console.log('This function is always executed!');
		started = false; // 清除
	})

// 错误从“catch”事件中抛出

let started = true;
let myPromise = new Promise(function(resolve, reject) {
	throw new Error('something happend');
})
	.then(val => {
		console.log(val); // 跳过
	})
	.catch(e => {
		throw new Error('throw another error')
	})
	.finally(() => {
		// 注意这里没有任何值
		console.log('This function is always executed!');
		started = false; //清除
		// 错误形式的捕获将需要在其他地方调用函数来处理
	})

const promises = [
	new Promise(resolve => resolve(1)),
	new Promise(resolve => resolve(2)),
	new Promise(resolve => resolve(3)),
]
// 之前
// for-of使用常规同步迭代器
// 不等待Promise 去解决

async function test1() {
	for (const obj of promise) {
		console.log(obj) // 记录3 条Promise对象
	}
}

// 以后
// for-wait-of使用异步迭代

async function test2() {
	for await (const obj of promises) {
		console.log(obj); // 1,2, 3
	}
}

test1() // promise, promise, promise
test2() // 1,2,3