JavaScript – ES6-ES2020 大杂烩

前言

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

ES 3, 5, 6, 2017, 2018...

ES 6 等于 ES2015

ES 7 等于 ES2016 

以此类推, 年份减一就对了.

通常 ES 6 以后大家都用年份来称呼了.

ES6 是一个大改版, 往后的版本都是添加一些特性而已.

目前 2022 年, 主流游览器都支持 ES 2017 所有特性. 所以可以放心用.

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

如果 JS 需要支持 2 个不同环境, 那么就会用到它了.

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 (标签模板).

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 前后 2 边, 现在可以选择只 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 有 2 中奇葩情况.

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

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

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

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

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
(新)JavaScript

相关

标签