JavaScript之ES6+的常用新特性

2023-07-25 16:40:16

本文转载自：微信公众号Vue中文社区https://mp.weixin.qq.com/s/BXw4Bz7S-2yUV8oL2JSHTA

ES6(2015)

1. 类(class)

class Person {
  constructor(name) {
    this.name = name;
  }
  showName() {
    console.log(this.name);
  }
}
const me = new Person('Lucky');
me.showName(); // lucky

2. 模块化(ES Module)

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

3. 箭头函数(Arrow Function)

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

4. 函数参数默认值

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

5. 模板字符串

const name = 'Lucky';
const str = `Your name is ${name}`;

6. 解构赋值

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

7. 扩展运算符

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
const arr1 = [1, 2, 3];
const arr2 = [4, 5 ,6];
let arr3 = [arr1, arr2]; // [1, 2, 3, 4, 5, 6]

8. 对象属性简写

const name='Lucky',
const obj = { name }; // { name: 'Lucky' }

9. Promise

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

10. let和const

let name = 'Lucky'；
const arr = [];

11. Array.prototype.includes()

const arr = [1, 'lucky', 2]
arr.includes(1) // true
arr.includes(10) // false
arr.includes('lucky') // true

12. 指数操作符

2**5; // 32 2的5次方

13. async/await

异步终极解决方案

const api = new Promise((resolve, reject) => {
	setTimeout(function(){
  		resolve('lucky')
	}, 2000)
})
async function fn() {
  const res = await api
  console.log(res)
  console.log('haha')
}
fn()
// 打印结果
// lucky
// haha

14. Object.values()

const arr = Object.values({a: 1, b: 2, c: 3})
console.log(arr) // [1, 2, 3]

15. Object.entries()

const arr = Object.entries({a: 1, b: 2, c: 3})
console.log(arr) // [["a", 1], ["b", 2], ["c", 3]]

16. String padding

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

17. 异步迭代

await可以和for…of循环一起使用，以串行的方式运行异步操作

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

18. Array.flat()和Array.flatMap()

flat(): 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap(): 对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法

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

19. String.trimStart()和String.trimEnd()

去除字符串首尾空白字符

20. 数字分隔符

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性

21. Symbol

symbol 是一种基本数据类型（primitive data type）。Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法：“new Symbol()”。
每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

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

console.log(typeof symbol1);
// expected output: "symbol"

console.log(symbol2 === 42);
// expected output: false

console.log(symbol3.toString());
// expected output: "Symbol(foo)"

console.log(Symbol('foo') === Symbol('foo'));
// expected output: false

22. BigInt

新基本数据类型，表任意精度的整数

23. replaceAll

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉

const str = 'hello world';
str.replaceAll('l', 'q'); // "heqqo word"

24. 逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的复合赋值运算符有：

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)

以上就是ES6之后js常用新特性，当然以上的内容并不全，新特性远远不止这些
本文转载自：微信公众号Vue中文社区https://mp.weixin.qq.com/s/BXw4Bz7S-2yUV8oL2JSHTA

码农公寓