JavaScript Advanced ES7-ES13 New Features Detailed Explanation

1. ES7

1. Array Includes

Before ES7, if we want to determine whether an array contains an element, we need to obtain the result through indexOf and determine whether it is -1

In ES7, we can use include to determine whether an array contains a specified element. According to the situation, if included, it will return true, otherwise it will return false

var arr = [1, 23, 4, 4524, 5]
((3)); //false
((1)); // true

2. Exponential exponentiation operator

Before ES7, the multiplier of the number needs to be calculated through the method

In ES7, the ** operator is added to calculate the multiplier for numbers

(3 ** 2); // 9	
((3, 2)); // 9

2. ES8

1. Object values entries

An array can be obtained through which an array of key-value pairs of enumerable properties will be stored in the array

    const obj = {
      name: "why",
      age: 18,
      height: 1.88,
      address: "Guangzhou City"
    }

    // 1. Get all keys    const keys = (obj)
    (keys)

    // 2.ES8 
    const values = (obj)
    (values)

    // 3.ES8 
    // 3.1. Operation on objects    const entries = (obj)
    (entries)
    for (const entry of entries) {
      const [key, value] = entry
      (key, value)
    }

    // 3.2. Operation on arrays/strings (understand)    ((["abc", "cba"]))
    (("Hello"))

2. String Padding

We need to fill some strings before and after to achieve a certain formatting effect. PadStart and padEnd methods are added in ES8, which are respectively padstart and padEnd.

    // padStart and padEnd    // 1. Application scenario 1: Format the time    // const minute = "15".padStart(2, "0")
    // const second = "6".padStart(2, "0")

    // (`${minute}:${second}`)

    // 2. Application scenario 2: Format some sensitive data    let cardNumber = "132666200001018899"
    const sliceNumber = (-4)
    cardNumber = (, "*")
    const cardEl = (".card")
     = cardNumber

3. Trailing Commas

In ES8, we allow adding an extra comma when function definition and call

    function foo(num1, num2, ) {
      (num1, num2)
    }

    foo(10, 20, )

4. Object Descriptors

5. async、await

3. ES9

1. Async iterators

2. Object spread operators

3. Promise finally

4. ES10

1. flat flatMap

The flat() method recursively traverses the array at a specified depth and merges all elements with the elements in the subarray they traversed into into a new array.

flatMap first performs map operation and then does flat operation. The flat in flatMap is equivalent to a depth of 1

    // Use:    // traverse an array according to the established depth, and form a new array of elements and elements in the sub-arrays, and return    // const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
    // const newNums1 = (1)
    // (newNums1)
    // const newNums2 = (2)
    // (newNums2)

    // Use:    // 1> Apply the function corresponding to the map passed to each element in the array once    const messages = [
      "Hello World aaaaa",
      "Hello ximingx"
    ]

    // The way to loop:    // const newInfos = []
    // for (const item of messages) {
    //   const infos = (" ")
    //   for (const info of infos) {
    //     (info)
    //   }
    // }
    // (newInfos)

    // 2. Map first, then flat operation    // const newMessages = (item =&gt; (" "))
    // const finalMessages = (1)
    // (finalMessages)

    // 
    const finalMessages = (item =&gt; (" "))
    (finalMessages)

2. Object fromEntries

ES10 provides a way to complete the operation of entries to convert it into objects

    // 1. Object    // const obj = {
    //   name: "why",
    //   age: 18,
    //   height: 1.88
    // }

    // const entries = (obj)
    // const info = (entries)
    // (info)

    // 2. Application    const searchString = "?name=why&amp;age=18&amp;height=1.88"
    const params = new URLSearchParams(searchString)
    (("name"))
    (("age"))
    (())

    // for (const item of ()) {
    //   (item)
    // }

    const paramObj = (params)
    (paramObj)

3. trimStart trimEnd

    const message = "   Hello World    "
    (())
    (())
    (())

4. Symbol description

5. Optional catch binding

5. ES11

1. BigInt

The value greater than MAX_SAFE_INTEGER may be incorrect.

    (Number.MAX_SAFE_INTEGER)
    const num1 = 9007199254740992n
    const num2 = 9007199254740993n
    (num1, num2)

    (Number.MAX_SAFE_INTEGER)
    const num1 = 9007199254740992n
    const num2 = 9007199254740993n
    (num1, num2)

In ES11, a new data type BigInt is introduced to represent large integers

The representation method of BitInt is to add n after the value.

2. Nullish Coalescing Operator

    let info = undefined
    // info = info || "Default"    // (info)

    // ??: Null value merge operator    info = info ?? "default value"
    (info)

3. Optional Chaining

Optional chain is also a new feature added to ES11. The main function is to make our code clearer and more concise when making null and undefined judgments.

    const obj = {
      name: "why",
      friend: {
        name: "kobe",
        // running: function() {
        //   ("running~")
        // }
      }
    }

    // 1. Direct call: Very dangerous    // ()

    // Judgment: Trouble/not concise enough    // if ( &amp;&amp; ) {
    //   ()
    // }

    // 3. Usage of optional chains: ?.    obj?.friend?.running?.()

4. Global This

In ES11, a unified specification is made to obtain global objects: globalThis

5. for…in standardization

Before ES11, although many browsers supported for...in to traverse object types, they were not standardized by ECMA. In ES11, they were standardized. for...in is used to traverse object keys.

6. Dynamic Import

8. import meta

6. ES12

1. FinalizationRegistry

FinalizationRegistry provides a method whereby an object registered in the registry is recycled, requesting a clean callback to be called at a certain point in time.

You can register any object you want to clean up the callback by calling the register method, pass in the object and the value contained in it

    let obj = { name: "why", age: 18 }
    let info = { name: "kobe", age: 30 }

    const finalRegistry = new FinalizationRegistry((value) =&gt; {
      ("A certain object was recycled:", value)
    })

    (obj, "why")
    (info, "kobe")

    // obj = null
    info = null

2. WeakRefs

If we assign an object to another reference by default, then this reference is a strong reference

WeakRef can be used if we want it to be a weak reference

    let info = { name: "why", age: 18 }
    let obj = new WeakRef(info)
    let obj2 = new WeakRef(info)

    const finalRegistry = new FinalizationRegistry(() =&gt; {
      ("Objects are recycled~")
    })

    (info, "info")

    setTimeout(() =&gt; {
      info = null
    }, 2000)

    setTimeout(() =&gt; {
      (().name, ().age)
    }, 8000)

3. logical assignment operators

    // Assignment operator    // const foo = "foo"
    let counter = 100
    counter = counter + 100
    counter += 50

    // Logical assignment operator    function foo(message) {
      // 1.||Logical assignment operator      // message = message || "Default value"      // message ||= "default value"
      // 2.??Logical assignment operator      // message = message ?? "Default value"      message ??= "default value"

      (message)
    }

    foo("abc")
    foo()

    // 3.&& logical assignment operator    let obj = {
      name: "why",
      running: function() {
        ("running~")
      }
    }

    // 3.1.&&General application scenarios    // obj &amp;&amp;  &amp;&amp; ()
    // obj = obj &amp;&amp; 
    obj &amp;&amp;= 
    (obj)

7. ES13

1. method .at()

    const message = "my name is why, why age is 18"
    const newMessage = ("why", "kobe")
    const newMessage2 = ("why", "kobe")
    (newMessage)
    (newMessage2)

2. (obj, propKey)

This method is used to determine whether an object has its own attribute

    // const obj = {
    //   name: "why",
    //   age: 18,
    // // 1. The difference between hasOwnProperty 1: Prevent the object from having its own hasOwnProperty method    //   hasOwnProperty: function() {
    //     return "abc"
    //   },
    //   __proto__: {
    // address: "Guangzhou City"    //   }
    // }

    // (, )
    // ()

    // (("name"))
    // (("address"))

    // ((obj, "name"))
    // ((obj, "address"))


    // 2. The difference between hasOwnProperty and two:    const info = (null)
     = "why"
    // (("name"))
    ((info, "name"))

3. New members of classes

In ES13, other ways to define member fields (fields) in class class have been added

    class Person {
      // 1. Instance properties      // Object properties: public public -> public instance fields      height = 1.88

      // Object properties: private private: Contract between programmers      // _intro = "name is why"
      
      // ES13 object properties: private private: Contract between programmers      #intro = "name is why"


      // 2. Class attributes (static)      // Class attributes: public      static totalCount = "7 billion"

      // Class attribute: private      static #maleTotalCount = "2 billion"
      constructor(name, age) {
        // Properties in the object: Set in the constructor via this         = name
         = age
         = "Guangzhou City"
      }

      // 3. Static code blocks      static {
        ("Hello World")
        ("Hello Person")
      }
    }

    const p = new Person("why", 18)
    (p)
    // (, , , , p.#intro)

    // (Person.#maleTotalCount)

This is the end of this article about the new features of JavaScript Advanced ES7-ES13. For more related contents of new features of js ES7-ES13, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!