es6,7,8,9特性

ES6

变量的改变,添加了块级作用域的概念

let声明变量(块级作用域)
	let是更完美的var,它声明的全局变量不是全局属性widow的变量,
这便解决了for循环中变量覆盖的问题

const声明常量(块计作用域)

字符串新增方法

let str = 'window';
console.log(str.includes('in')) 
// true 字符串中是否含有in
console.log(str.repeat(3)) 
// 'windowwindowwindow'  拷贝3次字符串
console.log(str.startsWith('wi')); 
// true,参数2为查找的位置   字符串是否再开始位置
console.log(str.endsWith('d', 4)); 
// true,参数2为查找的字符串长度  特定字符长度最后一位是不是 d

函数可以像C/C++那样设置默认参数值,增加数据容错能力

function fn(num=10){
	return num+1;
}

对象

// 键值对重名简写
let name = '我的名字'
let age = 18
let people = {name,age} // {name: '我的名字',age: 18}

// 对象字面量简写
let people = {
	setAge () {} // 省略了 : 和 function 字面量
}

// 提供对象对象合并
let a = {a: 1}
const b = Object.assign({b: 2}, a)
console.log(b); // {b:2,a:1}

// 数据解构和rest参数
Object
	let a = {name: 'aaa', age: 18}
	let {name,age}  = a // name = 'aaa' age = 18
Array
	let a = [1,2,3,4]
	let [b,c,d,e] = a // b = 1 c = 2 d = 3 e = 4
展开操作...
	const obj = {a: 2, b: 3, c: 4, d: 5};
	const {a, ...rest} = obj; // a = 2 rest = { b: 3, c: 4, d: 5 }

// 数据展开
Object
	const obj = {a: 2, b: 3}
	console.log({...obj, c: 5});// {a 2, b: 3, c: 5}
Array
	const arr = [1, 3, 4]
	console.log([...arr, 5]); // [1, 3, 4, 5]

Promise

/*  Promise 有方法 :all、race、resoleve、reject等,
*	原型有方法:catch、then等方法
*	then会作为callback使用
*/
function getPromise() { 
  return new Promise((resolve, reject) => {
	// 方法执行体
  })
}
getPromise()
.then((result) => {
  // then回调
})
.catch((err) => {
  // catch回调
});

// 并行操作  all是以函数中执行最慢的那一个为准,
Promise.all([fun1(), fun2(), fun3()]).then((result) => {
  console.log(result);
}).catch((err) => {
  console.log(err);
}); 
//race是以函数中执行最快的那一个为准。
//race接收一个数组参数,它会把执行最快的那个异步操作的结果传给then
Promise.race([fun1(), fun2(), fun3()]).then((result) => {
 console.log(result);
}).catch((err) => {
 console.log(err);
});

Set
Set作为ES6新的数据解构(类数组),它的成员都是唯一的,因为最直接的使用场景便是去重、并、差、交集的使用。它使用的算法叫做“Same-value-zero equality”,类似精确运算的===,主要是NaN,这里它将两个视为相等。

// Set实例的常用方法和属性add,delete,clear,has、size
const s = new Set(['A', 'B', 'C']);
console.log(s); // Set { 'A', 'B', 'C' }
console.log(s.has('A')) // true,bool值
console.log(s.size) // 3
console.log(s.clear()) // Set {}
console.log(s.delete('A')) // true,bool值

同时Set实例配合常用遍历方法,实现并、交、差集。

const a =[1, 2, 3]
const b = [2, 3, 4];
// 并集
const s = Array.from(new Set([...a, ...b])); // [ 1, 2, 3, 4 ]
// 交集、差集
const bSet = new Set(b);
const interestSet = a.filter(v => bSet.has(v)); // [ 2, 3 ]
const interestSet = a.filter(v => !bSet.has(v)); // [ 1 ]

ES7

ES7在ES6的基础上添加三项内容:求幂运算符(**)、Array.prototype.includes()方法、函数作用域中严格模式的变更。

1.求幂运算符(**),这是一个中缀例子,效仿自Ruby等语法,使用更简洁
Math.pow(3, 2) === 3 ** 2    // 9

2.Array.prototype.includes()
[1, 2, 3].indexOf(3) > -1 // true
等同于:
[1, 2, 3].includes(3) // true

ES8

async、await异步解决方案

提出场景有两个:JS是单线程、优化回调的写法。
async function asyncFunc(params) {
  const result1 = await this.login()
  const result2 = await this.getInfo()
}

Object.entries()
该方法会将某个对象的可枚举属性与值按照二维数组的方式返回。(如果目标对象是数组,则会将数组的下标作为键值返回)

Object.entries({ one: 1, two: 2 })    //[['one', 1], ['two', 2]]
Object.extries([1, 3])    //[['0', 1], ['1', 3]]

Object.values()
它的工作原理和Object.entries()方法很像,但是它只返回键值对中的值,结果是一维数组

Object.values({one: 1, two: 2})    // [1, 2]
Object.values({3: 'a', 1: 'b', 2: 'c'}) // ['b', 'c', 'a'] 
Object.extries([1, 3])     //[1, 3]

字符串填充padStart()、padEnd()
ES8提供了新的字符串填充方法,该方法可以使得字符串达到固定长度。它有两个参数,字符串目标长度和填充内容。

'react'.padStart(10, 'm')      //'mmmmmreact'
'react'.padEnd(10, 'm')       //' reactmmmmm'
'react'.padStart(3, 'm')     // 'react'

Object.getOwnPropertyDescriptors()
返回一个对象的所有自身属性的描述符(.value,.writable,.get,.set,.configurable,enumerable)

ES9

异步迭代器
在async/await的某些时刻,你可能尝试在同步循环中调用异步函数。例如:

async function process(array) {   
	for (let i of array) {     
		await doSomething(i);   
	}
 }

这段代码中,循环本身依旧保持同步,并在在内部异步函数之前全部调用完成。

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for…of循环一起使用,以串行的方式运行异步操作。例如:

async function process(array) {   
	for await (let i of array) {     
		doSomething(i);  
	 } 
}

Promise.finally()
一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。

.finally()允许你指定最终的逻辑:

function doSomething() { 
	doSomething1()
	.then(doSomething2)
	.then(doSomething3)
	.catch(err => {     console.log(err);   })
	.finally(() => {     // finish here!   }); 
}

Rest/Spread 属性
ES2015引入了Rest参数和扩展运算符。三个点(…)仅用于数组。Rest参数语法允许我们将一个布丁数量的参数表示为一个数组。

restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {   
 // p1 = 1   // p2 = 2   // p3 = [3, 4, 5] 
}

展开操作符以相反的方式工作,将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值:

const values = [99, 100, -1, 48, 16]; 
console.log( Math.max(...values) ); // 100

ES2018为对象解构提供了和数组一样的Rest参数()和展开操作符,一个简单的例子:

const myObject = {   a: 1,   b: 2,   c: 3 };
const { a, ...x } = myObject; // a = 1 // x = { b: 2, c: 3 }

正则表达式命名捕获组(Regular Expression Named Capture Groups)
JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组,例如:以YYYY-MM-DD的格式解析日期:

const   reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/, 
		match  = reDate.exec('2018-04-30'),
		year   = match[1];
    // 2018   month  = match[2], 
    // 04   day    = match[3]; // 30

这样的代码很难读懂,并且改变正则表达式的结构有可能改变匹配对象的索引。

ES2018允许命名捕获组使用符号?< name >,在打开捕获括号(后立即命名,示例如下:

const   reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/, 
		match  = reDate.exec('2018-04-30'), 
		year   = match.groups.year;
 // 2018   month  = match.groups.month, 
 // 04   day    = match.groups.day;   // 30

任何匹配失败的命名组都将返回undefined。

命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式:

const   reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,   
		d      = '2018-04-30',   
		usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

正则表达式反向断言(lookbehind)
目前JavaScript在正则表达式中支持先行断言(lookahead)。这意味着匹配会发生,但不会有任何捕获,并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号:

const   reLookahead = /\D(?=\d+)/,
		match       = reLookahead.exec('$123.89'); 
		console.log( match[0] ); // $

ES2018引入以相同方式工作但是匹配前面的反向断言(lookbehind),这样我就可以忽略货币符号,单纯的捕获价格的数字:

const   reLookbehind = /(?<=\D)\d+/,
		match        = reLookbehind.exec('$123.89'); 
		console.log( match[0] ); // 123.89

以上是 肯定反向断言,非数字\D必须存在。同样的,还存在 否定反向断言,表示一个值必须不存在,例如:

const   reLookbehindNeg = /(?<!\D)\d+/,   
		match           = reLookbehind.exec('$123.89'); 
		console.log( match[0] ); // null

正则表达式dotAll模式
正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

/hello.world/.test('hello\nworld'); 	// false 
/hello.world/s.test('hello\nworld'); 	// true

正则表达式 Unicode 转义
到目前为止,在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为\p{…}和\P{…},在正则表达式中使用标记 u (unicode) 设置,在\p块儿内,可以以键值对的方式设置需要匹配的属性而非具体内容。例如:

const reGreekSymbol = /\p{Script=Greek}/u;
reGreekSymbol.test('π'); // true

此特性可以避免使用特定 Unicode 区间来进行内容类型判断,提升可读性和可维护性。

非转义序列的模板字符串
最后,ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。

之前,\u开始一个 unicode 转义,\x开始一个十六进制转义,\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能,例如Windows文件路径 C:\uuu\xxx\111。更多细节参考模板字符串。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值