Es11 new methods: dynamic import(), bigint, globalthis, optional chain, and null value merging operator

Catalog

Dynamic Import() Dynamic import

BigInt Represents an integer of any precision

globalThis In the global scope this

Optional chain Optional chaining ?.

Null merge operator ??

---

Dynamic Import() Dynamic import

• Load on demand
• In the use of webpack When packing , The files loaded on demand will be packaged into a small module
• When more components are required to be loaded asynchronously , More individual files will be generated , For front-end performance , Although each file is smaller , But it may mean more network connection setup and shutdown costs , In front-end Optimization Practice , It is often necessary to strike a balance between the number of files and the size of a single file

//  Sample code 
<template>
  <section>
    <button @click="submit"> Submit </button>
  </section>
</template>

<script>
export default {
  name: 'Test',
  methods: {
    submit(){
      //  Load on demand 
      import(/* webpackChunkName: "a" */'@/assets/a.json').then(mod => {
        console.log(mod)
      })
    }
  }
}
</script>

// src/assets/a.json
{
  "a": "a"
}

 

•  vue Dynamic import in the project （ Load on demand ） You can also use the following methods , Such as importing components or routing

const Home = () => import('@/components/home')

BigInt Represents an integer of any precision

• ES10 New original data type , Can represent very long data , Can exceed 2 Of 53 Power

BigInt There are two ways

1） Add... After the number n

const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt) // bigint

console.log(1n == 1) // true
console.log(1n === 1) // false

2） Use BigInt function

const bigIntNum = BigInt(9007199254740993n)
console.log(bigIntNum)

globalThis In the global scope this

• In the global scope this Namely globalThis
• It can be used safely globalThis, Don't worry about its operating environment
• self： Open any web page , The browser will first create a window , This window is a window object , It's also js Run the attached global environment object and global scope object
• self Refers to the window itself , The object it returns follows the window The object is as like as two peas.
• Because of this ,window Object common methods and functions can be used self Instead of window

self.setTimeout(() => {
    console.log(123, self)
}, 1000)

Optional chain Optional chaining ?.

• When querying multi-level objects , There is no need for redundant pre checks
• Choose... In the chain ? Indicates that if the expression to the left of the question mark has a value , Will continue to query the fields after the question mark

const user = {
    address: {
        street: 'xx The street ',
        getNum() {
            return '80 Number '
        }
    }
}

const street2 = user?.address?.street
const num2 = user?.address?.getNum?.()
console.log(street2, num2)

Null merge operator ??

• Null merge operator （??） It's a logical operator
• When the left-hand operands are null or undefined when , It returns the right operand . Otherwise, return the left-hand operand
• When we query a property , Come across , If there is no such attribute, a default value will be set
• Null merge operator ??, Only when the first item is null or undefined when , Setting the default value is valid

// false 0   Invalid 
const b
const a = b ?? 123
console.log(a)