JavaScript – ES6-ES2023 大杂烩

前言

一年半没有写 JavaScript 了，今天开始来个大复习，顺便把这么多年零零散散的知识点做成笔记，练练字。

es3, 5, 6, 2017, 2018...

es6 等于 es2015

es7 等于 es2016 

以此类推，年份减一就对了。

通常 es6 以后大家都用年份来称呼了。

es6 是一个大改版，往后的版本都是添加一些特性而已。

目前 2022 年，主流游览器都支持 es2017 所有特性，所以可以放心用。

 

var, let, const (ES6)

参考：阮一峰 – let 和 const 命令

var 是 es6 之前的 variable 声明，es6 之后都改用 let、const。

总之没有必要去理会 var 了。

如果变量声明以后还会被修改，那就用 let。

如果变量声明后不会被修改，那么用 const。

我的经验几乎 80-90% 以上的 variables 声明都是用 const 的。

 

globalThis (es2020)

参考：阮一峰 – globalThis 对象

globalThis 是 es2020 引入的。

它在游览器指向 window 对象

console.log(globalThis === window); // true

它在 Node.js 指向 global 对象

console.log(globalThis === global); // true

如果 JavaScript 需要支持游览器和 Node.js 两种环境，那么就会用得到它了。

 

Template literals / Template string (es6)

参考：阮一峰 – 模板字符串

const firstName = 'Derrick';
const lastName = 'Yam';
const fullName = `${firstName} ${lastName}`;
const oldSchool = firstName + ' ' + lastName;

如果模板内想使用 ` 符号就加一个反斜杠在前面 \` 就可以了。

对付讨人厌的反斜杠，可以使用 String.raw，它类似于 C# 的 @"" 的功能

let v;
v = `a\\b`;
v = String.raw`a\b`;

注意它的写法，raw 是方法，但是没有使用元括弧调用，而是直接拼上 template literals，这个方式叫 tagged template (标签模板)。

Google 的 Lit 也是用这个写法

我们可以理解为 "一个解析 template literals" 的方法调用。它实际上是下面这样的：

tag 函数内就可以写 template 的处理逻辑了。

 

string includes, startsWith, endsWith (es6)

console.log('abc'.includes('b')); // true 包含了 b
console.log('abc'.startsWith('a')); // true 开始值是 a 
console.log('abc'.endsWith('c')); // true 最后一个值是 c

es5 也可以实现，只是有 build-in 肯定更好丫。

 

string padStart, padEnd (es2017)

console.log('123'.padStart(5, 0)); // 00123
console.log('123'.padEnd(5, 0));   // 12300

它的作用是，不够字数就填充。padStart 比较常会用到。

 

string trimStart, trimEnd (es2019)

以前只有 trim for 前后两边，现在可以选择只 trim 其中一边。

 

string repeat (es6)

顾名思义

console.log('a'.repeat(3)); // aaa

 

number seperator (es2021)

100万的写法

const a = 1000000;
const b = 1_000_000; // with separator

b 明显比 a 好看多了。C# 7.0 也是有这个哦。

p.s. 虽然是 es2021 才支持，但是如果你用 TypeScript 或 babel 的话，这类特性都是很早就可以使用多了，因为可以 downleveling（就是用低版本编译出同样效果的 code）。

 

number isNaN, isFinite (es6)

const a = Number.isNaN(Number('abc')); // true
const b = Number.isFinite(100 / 0); // false

JavaScript 的 number 有两种奇葩情况。

1. NaN = not a number。虽然 typeof 是 number 但它又不是 number。常出现在强转一个 string 到 number 的情况。

2. infinite = 无限，比如 100 / 0 C# 会报错，但 JavaScript 不会，它依然是 number 但是 infinite.

综上要判断一个 number 是不是真的 number，除了 typeof 一定要在加上 isNaN 和 isFinite 哦。

Number.isNaN vs isNaN

console.log(isNaN('abc')); // true
console.log(Number.isNaN('abc')); // false

不要在用 global 的 isNaN 了，它会做自动转换。所以 'abc' 返回 true，通常这不是我们期望的。

Number.isNaN 不会自动转换，当然 best practice 是先确保类型是 number 才执行 isNaN。

 

number parseInt, parseFloat (es6)

本来是全局方法, 改成 Number.parseInt 和 Number.parseFloat

用于把 string 转换成 number, 它会把一些多余的 string 去掉哦, 比如

const a = Number.parseInt('4px'); // 4

 

math trunc (es6)

去掉小数点后的数目 (它只是去掉不会 rounding 哦)

const a = Math.trunc(1.5); // 1

 

array from (es6)

它可以把类似 array 的对象转换成 array 类型. 所谓的 ArrayLike

const obj = {
  0: 'a',
  1: 'b',
  length: 2,
};
console.log(Array.from(obj));

对象只要用于号码属性和 length 属性就是 ArrayLike

 

array toReversed、toSorted、toSpliced、with (es2023)

reverse, sort, splice 的 immutable 版本，详情可以看 TypeScript 这篇。

 

array at (es2022)

下面这个是获取 first 和 last item 的方式

const items = ['a', 'b', 'c'];
const firstItem = items[0]; // a
const lastItem = items[items.length - 1]; // c

[0] 还算可以接受, [item.length - 1] 就很丑了。这时就可以使用 .at()

const items = ['a', 'b', 'c'];
const firstItem = items.at(0); // a
const lastItem = items.at(-1) // c

好多了。

注: iPhone IOS Safari 要 v15.4 才支持哦。

 

object is (es6)

它和 === 差不多, 唯一的区别是 NaN 和 +0 -0 的 compare.

const a = +0 === -0;   // true
const b = NaN === NaN; // false
Object.is(+0, -0);     // false
Object.is(NaN, NaN);   // true

 

object fromEntries (es2019)

把 array 变成 object

const keyValuePairs = [
  ['foo', 'bar'],
  ['baz', 42]
]
const obj = Object.fromEntries(keyValuePairs); // { "foo": "bar", "baz": 42 }

 

Optional Chaining (es2020)

参考: 阮一峰 – 链判断运算符

interface Person {
  child?: {
    grandChild?: {
      method?: () => string;
    };
  };
}
const person: Person = {};
const isUndefined = person.child?.grandChild?.method?.() === undefined; // true

虽然 child, grandChild, method 都是 undefined, 但是却可以串联起来写. 这归功于 ?. 符号.

只要其中一个属性或者方法没有定义, 那么一律返回 undefined. 

C# 6.0 也引入了这种写法呢.

 

Nullish Coalescing (es2020)

参考: 阮一峰 – Null 判断运算符

它的主要用途是拿来 set default value, 从前使用 && 利用类型转换并不是安全的做法 (一不小心会掉坑里)

const value1 = undefined ?? 'default value'; // default value
const value2 = null ?? 'default value'; // default value

配合 Optional Chaining 可以写出

const value = person.child?.grandChild?.method?.() ?? 'default value';

C# 8.0 也引入了这种写法呢.

 

Logical Assignment Operators (es2021)

参考: 阮一峰 – 逻辑赋值运算符

这个是熟悉的 +=

let index = 1;
index += 1; // 相等于 index = index + 1;

配合 Nullish Coalescing 也可以这样用

let value = 'existing value';
value ??= 'default value'; // 相等于 value = value ?? 'default value';

如果 value 已经有值, 那么就用当前的值, 没有的话就用 default value. (提醒: ?? 对 null 和 undefined 都有效哦)