Click on the top to pay attention to the front-end technology Jianghu, learn together and make progress every day

As a back-end dish, you should actually write more back-end things. However, students like to watch the front-end articles. There's no way 🙄， Two days ago, I saw a student in the Nuggets group who didn't know where to see the new features of ES and the corresponding relationship between ES specifications and new features. I think my chance has come 🤣， I've been busy for two days. Today I'll take some time to popularize science for you. By the way, I'll talk about the content of ES2016-ES2022. By the way, I'll review it and deepen my impression.

What is ES?

The full name of ES is ECMAScript. The script language specification defined by ECMA international [3] (formerly known as European Computer Manufacturers Association) in standard ECMA-262[4] has been one version every year since 2015, and ES2022 is the thirteenth version. The commonly used JavaScript is the implementation and expansion of ECMA-262[5] standard. Now I'll directly post an address ECMAScript[6] on the official website. For details, you can directly view the introduction of the official website. I can't introduce this thing more. Water word count is not necessary... 🤥

Although ES2022 has not been officially released, the proposal has been completed and is certain. Next, I will list the full name, release year, abbreviation information, etc. of each es version proposal according to the general situation, so that we will not confuse the naming of ES.

Some students may have such questions. Why does ES2015 correspond to ES6 instead of ES5? Let's explain that these two numbers are not the same thing. 2015 represents the release date, and 6 represents the version of ECMAScript language specification. In this way, the students who don't understand may understand. If you look back at the above form, you will be more impressed.

Characteristics of ES2016 - ES2022

Don't say much. Let's start directly. I will divide the content of ES2016 - ES2022 into one example demonstration, and the content will be explained in the order of Github's completed proposal [7]. (PS: without ES2015 / ES6, start directly with ES2016 / ES7)

ES2016 / ES7

Array.prototype.includes whether the array contains an element

This feature must have been used by many small partners. Its main function is to find out whether an element is in the array. Before this method comes out, lazy students may check through the indexOf method of the array

[1, 2, 3].indexOf(1) >= 0

// Result: true
 Copy code

Normally, there is nothing wrong with the indexOf method, but there is a vulnerability in this method. When the element to be viewed is NaN, this indexOf method will not be able to accurately judge whether the element is included in the array

[1, 2, NaN].indexOf(NaN) >= 0

// Result: false
 Copy code

Another problem is that the indexOf method mainly wants to indicate the index position of an element in the array rather than determine whether an element is included in the array. Therefore, diligent students will generally handle this problem by handwriting a circular method, but it is troublesome to quote this method, which is directly set on the prototype? Dare not...

function contains(array, val) {
    for (var i = 0; i < array.length; i++) {
        if (array[i] === val) {
            return true;
        }
    }
    return false;
}
Copy code

Now that we have the include method, the above problems will be solved and made better. Let's test the following code. You can supplement the following results

console.log([1, 2, 3].includes(2) === true);
console.log([1, 2, 3].includes(4) === false);
console.log([1, 2, NaN].includes(NaN) === true);

console.log([1, 2, -0].includes(+0) === true);
console.log([1, 2, +0].includes(-0) === true);

console.log(["a", "b", "c"].includes("a") === true);
console.log(["a", "b", "c"].includes("a", 1) === false);
Copy code

We now publish the answer. The above seven results are true. beyond all doubt...

Exponent operator

There's nothing to say about this. Just look at the code snippet below

let squared = 2 ** 2;
// same as: 2 * 2

let cubed = 2 ** 3;
// same as: 2 * 2 * 2

let a = 2;
a **= 2;
// same as: a = a * a;

let b = 3;
b **= 3;
// same as: b = b * b * b;
Copy code

ES2017 / ES8

Object.values / Object.entries object values, object pairs

There's nothing to say about this. The Object.values method returns an array of all enumerable attribute values of a given object. The order of values is the same as that of using the for...in loop (the difference is that the for in loop enumerates the attributes in the prototype chain). See the code

let point = {x: 12, y: 6};
Object.values(point);

// Results: [12, 6]
Copy code

The Object.entries method returns an array of key value pairs of enumerable attributes of a given object, which is arranged in the same order as when traversing the object using the for...in loop (the difference is that the for in loop also enumerates attributes in the prototype chain).

It sounds a little windy. Let's look at the code directly

let point = {x: 12, y: 6};
Object.entries(point);

// Result: ["x", 12], ["y", 6]]
Copy code

The string is also ok

Object.entries("hello world");

// Results: ["0", "H"], ["1", "e"], ["2", "L"], ["3", "L"], ["4", "O"], ["5", ""], ["6", "W"], ["7", "O"], ["8", "R"], ["9", "L"], ["10", "d"]]
Copy code

Let's try the order

let object = {
    3: "z",
    1: "x",
    2: "y",
    z: 3,
    x: 1,
    y: 2
};

for (var key in object) {
    console.log(key);
}
// 1
// 2
// 3
// z
// x
// y

Object.entries(object);

// Results: ["1","x"],["2","y"],["3","z"],["z",3],["x",1],["y",2]]
Copy code

We can see that the output result is consistent with our method description above (its arrangement is consistent with the order returned when traversing the object using the for...in loop). At the same time, there is a hidden buff, for...in, which will put the key of the number type in ascending order in front. Students who don't believe in it can also try it by themselves.

String.prototype.padstart/string.prototype.padend fill string

These two methods are quite common. I can specify the maximum width of a character. When the string exceeds the maximum length, the replacement character is truncated and the contents of the left (padStart) or right (padEnd) are retained. When the string width is not reached, the specified character will be filled at the beginning (padStart) or end (padEnd), The padding character is not specified. The default is a space (U+0020). It is mainly used to format strings. Of course, you can also play with it. Let's look at the definition first

interface String {
    /**
     * Fills the current string with the given string (possibly repeated) so that the resulting string reaches the given length. Padding is applied from the beginning (left) of the current string.
     *
     * @param maxLength The length of the string after filling the current string. If this parameter is less than the length of the current string, the current string will be returned as is.
     *
     * @param fillString The string used to populate the current string. If the string is too long, it is truncated and the leftmost part is applied. The default value of the parameter is' '(U+0020).
     */
    padStart(maxLength: number, fillString?: string): string;

    /**
     * Fills the current string with the given string (possibly repeated) so that the resulting string reaches the given length. Applies padding from the end (right) of the current string.
     *
     * @param maxLength The length of the string after filling the current string. If this parameter is less than the length of the current string, the current string will be returned as is.
     *
     * @param fillString The string used to populate the current string. If the string is too long, it is truncated and the leftmost part is applied. The default value of the parameter is' '(U+0020).
     */
    padEnd(maxLength: number, fillString?: string): string;
}
Copy code

Some students may be vague about the meaning of truncation beyond the length above. Let's start directly and see the output

'foo'.padStart(5)
// Result: 'foo'
'foo'.padStart(5, '-')
// Result: '-- foo'
'foo'.padStart(5, 'xyz')
// Result: 'xyfoo' (the length is exceeded, the 'z' character is truncated and removed, and the content of the left part is retained)
'bar'.padEnd(5)
// Result: 'bar'
'bar'.padEnd(5, '-')
// Result: 'bar --'
'bar'.padEnd(5, 'xyz')
// Result: 'barxy' (the length is exceeded, the 'z' character is truncated and removed, and the content of the left part is retained)

// When the original string length exceeds the maximum string length
'foo'.padStart(2, 'xyz')
// Result: 'foo'
'foo'.padStart(2, 'xyz')
// Result: 'foo'
Copy code

Object.getOwnPropertyDescriptors get its own property descriptor

This method can be understood according to the meaning of the method, that is, to obtain the descriptor of its own attribute. It often cooperates with the Object.create() method to copy object attributes / object attribute features and prototypes. Before we understand this method, we need to know what attribute descriptors are. We first define an object, print it first, and directly obtain the descriptor of the object's attribute

let point = {
    x: 12,
    y: 16,
    move({x, y}) {
        this.x = x;
        this.y = y;
    }
}
Object.getOwnPropertyDescriptors(point);
// {
//     x: {
//         configurable: true,
//         enumerable: true,
//         value: 12,
//         writable: true,
//         [[Prototype]]: Object
//     }, 
//     y: {
//         configurable: true,
//         enumerable: true,
//         value: 16,
//         writable: true, 
//         [[Prototype]]: Object
//     },
//     move: {
//         configurable: true,
//         enumerable: true,
//         value: f move({x,y}),
//         writable: true, 
//         [[Prototype]]: Object
//     },
//     [[Prototype]]: Object
// }

let c = {}
Object.getOwnPropertyDescriptors(c);
// {}
Copy code

From the above results, we can find that if the object is empty, the obtained description is an empty object. If there are properties or methods, each property will be described, including

• Configurable: if and only if the configurable key value of the attribute is true, the descriptor of the attribute can be changed, and the attribute can also be deleted from the corresponding object. The default is false
• Enumerable: this property appears in the enumeration property of the object only if and only if the enumerable key value of this property is true. The default is false.
• Value: the value corresponding to this attribute. Can be any valid JavaScript value (value, object, function, etc.). The default is undefined.
• Writable: if and only if the writable key value of the attribute is true, the value of the attribute, that is, the above value, can be changed by the assignment operator. The default is false.

We can see the details in Object.defineProperty\(\)[8]. The property descriptor here is actually used for the third parameter of Object.defineProperty\(\)[9]. From the above example, we can see that we directly define an object point and directly set the attribute method. The object attributes are set to true by default.

Now let's revise the above example to deepen our understanding. Let's traverse and print the key of point first

for (var key in point) {
    console.log(key);
}
// x
// y
// move
 Copy code

Next, use the Object.defineProperty\(\)[10] method to modify the descriptor of the move method of point

Object.defineProperty(point, 'move', {
    enumerable: false
});
for (var key in point) {
    console.log(key);
}
// x
// y
 Copy code

We can see that the move method has no print name in for..in. Let's use the old method of Object.getOwnPropertyDescriptor\(\)[11] to look at the property descriptor of move

Object.getOwnPropertyDescriptor(point, 'move');
//{
//    configurable: true,
//    enumerable: false,
//    value: f move({x,y}),
//    writable: true, 
//    [[Prototype]]: Object
//}
Copy code

In line with our expectations. After you understand the attribute descriptor, you can clearly understand the new method

Async functions asynchronous method

There is nothing to write about this feeling. I understand everything. Async and await are equivalent to a syntax sugar. The method marked by async will return a Promise object. We can use await a Promise object in an async marked method, and execute the next statement only after the Promise ends, which allows us to write asynchronous promises in async marked methods. Let's give a simple example

async function a() {
    return "a";
}
function b() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("b");
        }, 3000);
    });
}
async function c() {
    return "c";
}
async function d() {
    let a = await a();
    console.log(a);
    let b = await b();
    console.log(b);
    let c = await c();
    console.log(c);
}
console.log(d())

// result:
// Promise {< pending >} the method marked 'async' returned a 'promise' object
// a
// b wait three seconds and continue to output subsequent content
// c

Copy code

The asynchronous method and synchronous writing look good, but there are still a few problems in practical use. I wrote an article about the elegant use of async await[12] in JS before. If you are interested, you can go and have a look.

Shared memory and atoms

This is a specification for browsers. We can enhance the parallelism of js through sharedaraybuffer and Atomics. Students who want to know can look at sharedaraybuffer [13] and Atomics[14], because there are few scenes, I won't talk about them in detail. Come on, everybody.

summary

This article has come to an end for the time being. I expanded at the beginning. The title at the beginning of the article is an article to quickly understand the new features of ES2016 \- ES2022. However, as far as my explanation is concerned, ES7 and ES8 are already very long, so I plan to split the new features of ES2016 \- ES2022 into multiple articles for the purpose of better understanding these contents (it's not) 😝)， Give everyone and myself some room. Hee hee

About this article

Author: nevertheless, the world is still beautiful

https://juejin.cn/post/7021183043679289352

The End