ES6及其之后的新特性

最新推荐文章于 2024-06-22 22:30:42 发布

白衣青山*

最新推荐文章于 2024-06-22 22:30:42 发布

阅读量1k

点赞数 23

文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_61164359/article/details/138223219

版权

ES6（2015）

let和const（声明变量）

let、const和var的区别：

块级作用域：let和const有块级作用域，var没有。
变量提升：var有变量提升，let和const没有，即变量只能在声明后才能使用，否则会报错。
给全局对象添加属性：var声明的变量为全局变量，并且会将该变量添加为全局对象属性。但是let和const不会。
重复声明：var可以重复声明变量，后声明的变量会覆盖前面的同名变量，const和let不允许重复声明变量。
暂时性死区：在使用let、const声明变量之前，该变量不可使用，在语法上称为暂时性死区。但var声明的变量不存在。
初始值设置：let和var可以不用设置初始值，但是const必须为变量设置初始值。
指针指向：let和const都是ES6新增的创建变量的语法。let和var可以更改指针指向（可以重新赋值），但const声明的变量不允许改变指针指向。

类（class）

class People{
  constructor(name) {
    this.name = '小明';
  }
  console() {
    console.log(this.name);
  }
}
const man = new People('小明');
man.console();

模块化（ES Module）

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

箭头函数

const func = (a, b) => a + b;
func(1, 2); // 3

函数参数默认值

function foo(age = 2,){ // ...}

模板字符串

const name = '小明';
console.log(`我的名字叫${name}`);

解构赋值

let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1

扩展操作符

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

（1）对象扩展运算符

对象的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

注意：扩展运算符对对象实例的拷贝属于浅拷贝

（2）数组扩展运算符

将数组转换为参数序列

复制数组

合并数组

扩展运算符与解构赋值结合，用于生成数组（注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。）

将字符串转为真正的数组

任何iterator接口的对象，都可以使用扩展运算符转为真正的数组

使用Math函数获取数组中特定的值

Promise

Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ，再打印 2

ES7 （2016）

Array.prototype.includes()
```
[1].includes(1); // true
```
指数操作符

例如： 2**10; //1024

ES8（2017）

async/await
Object.values()

Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]

Object.entries()

Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]

String padding()

// padStart
'hello'.padStart(10); // "     hello"
// padEnd
'hello'.padEnd(10) "hello     "

Object.getOwnPropertyDescriptors()

获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。

SharedArrayBuffer对象

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区.

/**
 * 
 * @param {*} length 所创建的数组缓冲区的大小，以字节(byte)为单位。  
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
new SharedArrayBuffer(10)

Atomics对象

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

ES9（2018）

Promise.finally()
异步迭代

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

Rest/Spread 属性（扩展了用法）

const values = [1, 2, 3, 5, 6];
console.log( Math.max(...values) ); // 6

正则表达式命名捕获组

const reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
const match = reg.exec('2021-02-23');

正则表达式反向断言

(?=p)、(?<=p)  p 前面(位置)、p 后面(位置)
(?!p)、(?<!p>) 除了 p 前面(位置)、除了 p 后面(位置)

正则表达式dotAll模式

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

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

ES10（2019）

Array.flat()和Array.flatMap()

[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]

[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]

String.trimStart()和String.trimEnd()：去掉字符串收尾空白字符。
String.prototype.matchAll：为所有匹配的匹配对象返回一个迭代器。
Symbol.prototype.description：只读属性，Symbol对象的可选描述的字符串。
Object.fromEntries()：返回一个给定对象自身可枚举属性的键值对数组。
catch

try {
  // ···
} catch {
  // ···
}

JSON.stringify和JSON.parse
Array.prototype.sort()

ES11（2020）

可选链

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。在引用为空 (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

const data = response?.data;
// 等价于
const data = response != null ? response.data : undefined;

空值合并运算符

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const data = response?.data ?? defaultData;
// 等价于
const data = response != null ? response.data : defaultData;

Promise.allSettled

Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。