ES7及ES8的新特性

ES7新特性:
在Es6的基础上增加了三项：求幂运算符（**），Array.prototype.includes()方法、函数作用域中严格模式的变更。

（1）Array.prototype.include(). 查找一个值在不在数组里；接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。
与indexOf相比较：
更加简便（从返回值来说一个是下标一个是值）
精确性：两个NaN被认为是相等的，即使在NaN === NaN结果是false的情况下。这一点和indexOf()的行为不同，indexOf()严格使用===判断。
let demo = [1, NaN, 2, 3]

demo.indexOf(NaN) //-1
demo.includes(NaN) //true
includes()只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些，是无法判断的

（2）求幂运算符（**）
3 ** 2 ／／9。等同于 Math.pow(3,2); let a = 3; a **= 2 //9

Es8新特性：
（1）异步函数（Async functions）
由于javascript语言的执行环境是单线程的，一般使用回调函数实现异步编程，假如有多个嵌套的话，代码显得很乱；
Promise,将函数的嵌套改成链式调用；.then(()=>回调方法)；
promise的缺点是：请求任务过多时.then也会相对增加；
Generator:异步编程机制，在dva中effects中就是使用的这种；函数执行时，返回的是一个指向内部状态的指针对象，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}

var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }
缺点：流程管理不方便；
async function asyncFunc(params) {
const result1 = await this.login()
const result2 = await this.getInfo()
}
变体
异步函数存在以下四种使用形式：
* 函数声明： async function foo() {}
* 函数表达式： const foo = async function() {}
* 对象的方式： let obj = { async foo() {} }
* 箭头函数： const foo = async () => {}
并行处理多个异步结果：
async function asyncFunc() {
const [result1, result2] = await Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2()
]);
console.log(result1, result2);
}
async function asyncFunc() {
try {
await otherAsyncFunc();
} catch (err) {
console.error(err);
}
}
（2）Object.entries()和Object.values()
将一个具有键值对的数据结构或是数组，返回一个二维数组；
Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
Object.entries([1, 2]) //[['0', 1], ['1', 2]]注意：键值对中，如果键的值是Symbol，编译时将会被忽略。例如：
Object.entries({ [Symbol()]: 1, two: 2 }) //[['two', 2]]

进行对象属性的遍历：
let obj = { a: 1, b: 2 };
for (let [k,v] of Object.entries(obj)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}

//输出结果如下：
'a': 1
'b': 2

Object.values():工作原理和上面很像，只返回键值对中属性值；返回数组顺序也和上面很像；
Object.values({ one: 1, two: 2 }) //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
（3）字符串填充：padStart和padEnd
padStart函数通过填充字符串的首部来保证字符串达到固定的长度，反之，padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数：字符串目标长度和填充字段，其中第二个参数可以不填，默认情况下使用空格填充。
'Vue'.padStart(10) //' Vue'
React'.padStart(10, 'Hello') //'HelloReact'
填充函数只有在字符长度小于目标长度时才有效，若字符长度已经等于或小于目标长度时，填充字符不会起作用，而且目标长度如果小于字符串本身长度时，字符串也不会做截断处理，只会原样输出。
(4)Object.getOwnProentyDescriptors()指定属性描述符；
该方法会返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的;第二个参数可以是
该方法返回的描述符，会有两种类型：数据描述符、存取器描述符。返回结果中包含的键可能的值有：configurable、enumerable、value、writable、get、set；
使用过Object.assign()的同学都知道，assign方法只能拷贝一个属性的值，而不会拷贝它背后的复制方法和取值方法。Object.getOwnPropertyDescriptors()主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。
http://www.cnblogs.com/zhuanzhuanfe/p/7493433.html。原文地址；

ES7与ES6相比较而言，两者更加贴近，在ES6基础上做修改。而ES8添加更多的新特性，通过他人的博客了解还不够透彻，只是把精华部分摘取出来，自己理解的比较少；

猜你喜欢