首页  思维导图  详情

ES6-11新特性总结

2022-02-11 14:04:12   0  举报





仅支持查看

AI智能生成

简单总结es6-11新特性

es6

作者其他创作

大纲/内容

ES8（ES2017）

1. 声明

共享内存和原子操作：由全局对象SharedArrayBuffer和Atomics实现，将数据存储在一块共享内存空间中，这些数据可在JS主线程和web-worker线程之间共享

2. 字符串扩展

padStart()

把指定字符串填充到字符串头部，返回新的字符串

var str = '23';
var newStr = str.padStart(3,'w');
console.log(newStr); // w23

padEnd()

把指定字符串填充到字符串尾部，返回新的字符串

var str = '23';
var newStr = str.padEnd(3,'c');
console.log(newStr); // 23c

3. 对象扩展

Object.values()

返回以值组成的数组

var obj={a:1,b:{c:11}};
Object.values(obj);
// [1,{c:11}]

Object.entries()

返回以键和值组成的数组

var obj={a:1,b:{c:11}};
Object.values(obj);
// [['a'.'1'],['b',{c:11}]]

Object.getOwnPropertyDescriptors()

返回对象所有自身属性（非继承）的描述对象

const object1 = {
property1: 42
}

const descriptors1 = Object.getOwnPropertyDescriptors(object1)

console.log(descriptors1.property1.writable) // true

console.log(descriptors1.property1.value) // 42

4. 函数扩展

函数参数尾逗号，允许函数最后一个参数有尾逗号

// 参数定义
function f(p) {}
function f(p,) {}

// 带有尾后逗号的数组解构
[a, b,] = [1, 2]

// 带有尾后逗号的对象解构
var o = {
p: 42,
q: true,
}
var {p, q,} = o

5. for-await-of

ES9（ES2018）

1. 字符串扩展

2. 对象扩展

扩展运算符 ...

var obj = {a:10, b:20};
var obj1 = {...obj}

3. 正则扩展

4. Promise

finally()

5. Async

for-await-of

循环等待每个Promise对象变为resolved状态才进入下一步

ES10（ES2109）

1. 字符串扩展

trimeStart()

消除字符串头部空格，返回新的字符串

trimeEnd()

消除字符串尾部空格，返回新的字符串

2. 对象扩展

Object.fromEntries()

返回以键和值组成的对象（Object.entries()的逆操作）

3. 数组扩展

sort()稳定性

flat()

扁平化数组，返回新数组

flatMap()

映射且扁平化数组，返回新数组(只能展开一层数组)

4. 函数扩展

toString()改造

返回函数原始代码(与编码一致)

catch()

参数可省略

5. Symbol

返回Symbol值的描述

ES6（ES2015）

1. 声明

Let 和 Const

2. 类 Class

ES6之前声明一个类要调用构造函数

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.information = function () {
    return 'My name is ' + this.name + ', I am ' + this.age
}

ES6之后可以使用类来声明

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    information() {
        return 'My name is ' + this.name + ', I am ' + this.age
    }
}

3. 箭头函数（Arrow Function）

ES6之前

var list = [1,2,3];
var newLIst = list.map(function(item){
return item * item
})

ES6之后

var list = [1,2,3];
var newLIst = list.map((item)=>item*item)

4. 函数参数默认值（Function parameter defaults）

ES6之前

function getData(data){
var obj = data || {}
}
这样会有隐患，比如传入一个false的值

ES6之后

function getData(data={}){
// ...
}

5. 模板字符串（Template string）

ES6之前

var name = 'aaa';
var str = 'this name is' + name;

ES6之后

var name = `aaa`;
var str = `this name is ${name}`

6. 解构赋值（Destructuring assignment）

ES6之前

var a = 1;
var b = 2;
var temp = b;
b = a;
a = temp;

ES6之后

var a = 1;
var b = 2;
[a,b] = [b,a]

7. Module

ES6之前

// add.js
// 输出文件
const ADDVAL = 10;
modules.exports sum = (num)=>{return num + ADDVAL}

// index.js
// 输入文件
const sum = require('./add.js');
console.log(`相加结果是：${sum(10)}`)

ES6之后

// add.js
// 输出文件
const ADDVAL = 10;
export sum = (num)=>{return num + ADDVAL}

// index.js
// 输入文件
import {sum} from './add.js';
console.log(`相加结果是：${sum(10)}`)

8. 扩展操作符（Spread operator）

ES6之前

var list = [1,2,3];
funciton add(a,b,c){
return a+b+c
}
var sum = add.bind(null, list);

ES6之后

var list = [1,2,3];
funciton add(a,b,c){
return a+b+c
}
var sum = add(...list);

9. 对象属性简写（Object attribute shorthand）

ES6之前

var name = 'lucy';
var age = 20;
var person = {
name: name,
age: age
}

ES6之后

var name = 'lucy';
var age = 20;
var person = {
name,
age
}

10. Promise（异步解决方案）

三种状态

pending（等待中）

resolved（完成了）

rejected（拒绝了）

11. for....of

语法：
for (var value of myArray) {
console.log(value);
}

循环一个数组

var list = [1,2,3];
for(var item of list){
console.log(item)
}

循环一个字符串

var str = 'hello';
for(var item of str){
console.log(item)
}

循环一个类型化的数组

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
console.log(value);
}

循环一个Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
console.log(value);
}

循环一个 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
console.log(value);
}

循环一个 DOM collection

let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}

循环一个拥有enumerable属性的对象

for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}

循环一个生成器(generators)

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

12. Symbol

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');

console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false

13. Iterator

Iterator

14. Generator

生成器函数使用 function*语法编写。

15. Set

Set

WeakSet

16. Map

Map

WeakMap

17. Proxy

18. Reflect

ES7（ES2016）

1. 数组扩展

includes() ，用来判断一个数组是否包含某个指定的值，包含则返回true，反之返回false

const array1 = [1, 2, 3]
console.log(array1.includes(2)) // true

2. 数值扩展

幂运算符 **，相当于Math.pow()

console.log(2**10) // 1024
console.log(Math.pow(2, 10)) // 1024

ES11（ES2020）

1. 声明

globalThis

作为顶层对象，指向全局下的this

2. 数值扩展

BigInt

任何位数的整数(新增的数据类型，使用n结尾)

子主题

3. 对象扩展

链判断操作符（?.）

判断是否存在对象属性，不存在则返回undefined且不往下执行

三种用法

对象属性：obj?.a?.a1

对象属性：obj?[exp]

函数或者对象方法的调用：func?.(...arg)

用例：
var obj = {
a: {
a1: 12
}
}

console.log(obj?.a?.a1);
console.log(obj?.b || 'kong');

Babel插件转换

安装插件：npm i @babel/plugin-syntax-optional-chaining

在babel.config.js中添加plugin

{
"plugins":["@babel/plugin-syntax-optional-chaining"]
}

Null判断操作符

判断值是否为undefined或者null，是则使用默认值

读取对象的属性时，我们需要指定默认值，通常使用 || 运算符来赋默认值。 || 或运算符表达的意思是当左侧为空串，null，undefined，false，0时右侧都会生效。

ES2020引入了??操作符，只有当左侧为undefined或者null时右侧才回生效

var a;
a ?? false;

⚠️注意：与&&等运算符一起使用时需要加括号表明优先级，否则会报错

babel插件转换

安装插件：npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

在babel.config.js中添加plugin

{
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

4. 正则扩展

matchAll()

返回所有匹配的遍历器

5. import()

import()支持动态导入模块，返回Promise

import(`./home.js`)  // home.js中export const export1 = ''; ....
  .then(({export1, export2})=>
    // 加载成功的回调
  })
  .catch(err => {
    // 加载失败的回调
  });

区别：require()是同步加载，import()是异步加载

适用场合

1. 按需加载模块，比如点击时加载某个文件或者模块

2. 条件加载，比如在if判断语句中

3. 动态的模块路径，比如模块路径是实时生成的

babel插件转换

安装插件：npm install --save-dev @babel/plugin-syntax-dynamic-import

在babel.config.js中配置

{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}

6. for in 遍历顺序

7. Promise

Promise.allSettled()