Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

1. String.prototype.matchAll

1.1 introduction

New String ES2020. Prototype. MatchAll for one-time remove all matching. This method returns a traverser with all matching results, capturing groups. Iterator processing a large array is resource-efficient as opposed to an array. The iterator returned by this method is not reusable, and you need to call the method again to get a new iterator when the result is exhausted. Iterators can be combined with for… Of or array. from to facilitate processing.

Before matchAll was born, we used regexp.exec() to get information about all matches.

const reg = RegExp('foo[a-z]*', g)
const string = 'table football, foosball'
let match
 
while((match = reg.exec(string)) ! = =null) {
  console.log(reg)
}
// ["football", index: 6, input: "table football, foosball", groups: undefined]
// ["foosball", index: 16, input: "table football, foosball", groups: undefined]
Copy the code

1.2 Basic use of matchAll

const reg = RegExp('foo[a-z]*'.'g')
const string = 'table football, foosball'
 
const arr = Array.from(string.matchAll(reg), (res) = > res[0]) // ["football", "foosball"]
Copy the code

2. Import.meta

2.1 introduction

When using a module, developers sometimes want to know information about the module itself, such as its path. ES2020 adds a meta-attribute import.meta to the import command, which returns meta-information about the current module.

For example, if you want to know the path of the current module, you can ask for it by calling import.meta.url. Import.meta can only be used within modules.

import.meta.url
<script type="module" src='./index.js'></script>
/ / in the index. In js

import vue from 'vue'
console.log(import.meta) // url
import.meta.scriptElement
<script type="module" src="index.js" data-people="alice"></script>
// execute the following code in index.js

import.meta.scriptElement.dataset.people // "alice"
Copy the code

3. GlobalThis object

3.1 introduction

JavaScript is our most powerful weapon, and it can be used in browsers, servers, native development, etc. And each different environment has its own global object. Such as:

  • In the browser we can passWindow, self, framesAccess global objects.
  • Node.jsCan be used inglobalAccess the top-level object.
  • Web WorkerMedium is passself

Different environments have different global objects, which makes cross-end development more difficult. ES2020’s globalThis feature allows different environments to access top-level objects in a uniform way.

3.2 Basic Usage

if (typeofglobalThis.setImmediate ! = ='function') {
  console.log('setImmediate method does not exist in the current environment.')}Copy the code

4. BigInt

4.1 introduction

Before ES11, JavaScript stored numbers as 64-bit floating-point numbers, causing numbers greater than or equal to 2 to the power of 1024 to return Infinity.

ES11 addresses this problem by introducing a new data type, the BigInt large integer type, which is used to store integers with arbitrary digits.

4.2 Basic Usage

const a = 99999n
const b = BigInt(99999)
 
typeof a // 'bigint'
typeof b // 'bigint'
// Type conversion
Boolean(), Number(), and String(); BigInt can be converted to Boolean, numeric, and String types.

Boolean(0n) // false
Boolean(1n) // true
Number(1n) / / 1
String(1n) / / "1"
!0n // true
!1n // false
BigInt supports +, -, *, %, and most other operators except >>> (unsigned right shift)
const res = a + b // 199998n
 
const res2 = 5n / 2n // The division will round down to 2n
 
const res3 = 3n + 3 // bigInt cannot be mixed with ordinary numbers
Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage