W.T.的博客

Every day to be a little better

JavaScript学习笔记11-ES11

发表于 更新于 分类于
本文字数： 3k 阅读时长 ≈ 3 分钟
BigInt大数字，??空值合并符，?可选链，globalThis全局对象，forin标准化

1. BigInt

  • 在早期的JavaScript中，不能正确的表示过大的数字
    • 大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的
  • 在ES11中，引入了新的数据类型BigInt，用于表示大的整数
    • BigInt的表示方法是在数值的后面加上n
1
2
3
4
5
6
7
8
9
10
11
12
13
const m = Number.MAX_SAFE_INTEGER;
// 9007199254740991
console.log(m);
// 9007199254740992
console.log(m+1);
// 9007199254740992
console.log(m+2);

const bigint = 9007199254740991n;
// 9007199254740992n
console.log(bigint+BigInt(1));
// 9007199254740993n
console.log(bigint+BigInt(2));

2. 空值合并操作符 Nullish Coalescing Operator

  • ??：只有当值为undefined时，才会被判断为false；值为0或空时，判断为true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let uname = "";

let getName = uname || "default value";
// default value
console.log(getName);

uname = 0;
getName = uname || "default value";
// default value
console.log(getName);

getName = uname ?? "default value";
// 0
console.log(getName);

uname = "";
getName = uname ?? "default value";
// ""
console.log(getName);

3. 可选链 Optional Chaining

  • 可选链也是ES11中新增一个特性，主要作用是代码在进行null和undefined判断时更加清晰和简洁
  • 当前值判断为undefiend值，后面的操作不会被执行，故不会报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const obj = {
    name: "why",
    friends: {
        girlFriend: {
            name: "test"
        }
    }
}

if(obj&&obj.friends&&obj.friends.girlFriend){
    console.log(obj.friends.girlFriend.name);
}

obj.friends = {}
// undefined
console.log(obj.friends?.girlFriend?.name);

obj.friends.girlFriend = {}
// undefined
console.log(obj.friends?.girlFriend?.name);

4. 全局对象 Global This

  • 在之前获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的

    • 在浏览器中通过this，window来获取
    • 在Node中通过global来获取

  • 那么在ES11中对获取全局对象进行了统一的规范：globalThis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
浏览器下
Window {
    window: Window, 
    self: Window, 
    document: document, 
    name: '', 
    location: Location, …}
 */
console.log(window);

/**
Window {
    window: Window, 
    self: Window, 
    document: document, 
    name: '', 
    location: Location, …}
 */
console.log(this);

/**
 * node 环境下
 <ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  performance: Performance {
    nodeTiming: PerformanceNodeTiming {
      name: 'node',
      entryType: 'node',
      startTime: 0,
      duration: 526.7132239937782,
      nodeStart: 120.72222000360489,
      v8Start: 205.39416700601578,
      bootstrapComplete: 477.97664600610733,
      environment: 301.88765200972557,
      loopStart: -1,
      loopExit: -1,
      idleTime: 0
    },
    timeOrigin: 1684653967536.36
  },
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}
 */
console.log(global);

console.log(globalThis);

5. for..in标准化

  • 在ES11之前，虽然很多浏览器支持for…in来遍历对象类型，但是并没有被ECMA标准化
  • 在ES11中，对其进行了标准化，for…in是用于遍历对象的key
1
2
3
4
5
6
7
8
9
10
const obj = {
    uname: "why",
    age: 18
}

for (const key in obj) {
    // uname
    // age
    console.log(key);
}

6. Module模块化

本文结束  感谢您的阅读