This article is part of ES6 to ES12 sharing and will continue to be updated

Es6 is a relatively large version, and there will be a new version every year after that (ES6 was released in 2015, so +1 in the year is the latest ES version)

Cut the crap and start straight away, and the missing parts will be filled in slowly

ES6(2015)

Let and const

Block-level scoped objects are not declared under Window /global, but under ScriptCopy the code

Arrow function

string

Template strings support for of includes(): determine whether the string exists startsWith(): determine the beginning of the string endsWith(): determine the end of the string repeat(): repeat the string several timesCopy the code

The numerical

Number.MIN_SAFE_INTEGER: indicates the minimum safe Number (-2^53) Number.MAX_SAFE_INTEGER: indicates the maximum safe Number (2^53) number.isSafeINTEGER (): Math.sign(): Number type (return value: positive 1, negative -1, zero 0) math.imul (): Two Numbers multipliedCopy the code

object

Object. Is (): the same as "===", except that +0 is not equal to -0. NaN is equal to itself.Copy the code
Object.create(): Create a new object, inherit the prototype chain, Function Parent () {this.name = 'breeze'} function Child () {Parent. Call (this) this.address = 'Shanghai'} Child. The prototype = Object. The create (Parent. The prototype) Child. The prototype. The constructor = Child / / pay attention to the side of the constructor, Parent let breeze = new Child();Copy the code

An array of

Extension operators: Array merge, clone Array, convert String to Array, convert class Array to Array (arguments), convert iterable to Array (Set, Map, String) (has symbol.iterator) array.from (): Of (): Converts a set of values into an Array fill(): fills the Array (returns the original Array)Copy the code

Deconstruction assignment

// Const [x, y] = [y, x] const [x, y = 2] = [1] // Default (undefined) const {a, b: c} = {a: 1, b: 2} / / rename const [a, c] = [1, 2, 3] / / ignore certain value const [a, b]... = [1, 2, 3, 4]. // b: Const [a, b] = [1, 2] const [a, b = 2] = [1] const [a, b, C, d, e, f] = "breeze" Const {toString: breeze} = 666 // Const {toString: breeze} = false // Boolean deconstructionCopy the code

Symbol

Declaration method: Symbol(") // does not require new, is not a unique value of the reference type, even if the same parameter, cannot be accessed by for in and object.keys, can be used as private property creation Symbol. Iterator: Symbol. Iterator: Symbol. Iterator: Symbol. Iterator (); iterator (); iterator (); iterator (); iterator (); Array 2.Map 3.Set 4.String 5. Arguments 6Copy the code

Set

New Set([]) method: size: length add(): adds a value, returns an instance delete(): deletes a value, returns a Boolean has(): Clear (): clear keys(): returns property values for traversing values(): returns property values for traversing entries(): Return key -> value object forEach(): traversalCopy the code

WeakSet

For of and forEach members are weak references and can be reclaimed by garbage collection methods: add(): add value, return instance delete(): delete value, return Boolean has(): Check for presence and return to BooleanCopy the code

Map

Declaration method: New Map([[], []]) // An Iterator interface whose members are a two-element array of data structures with any key, such as an object, can solve the problem of the same name attribute conflict. Length Get (key): searches for a specific value by key and returns set(key, value): adds, returns the instance delete(key): deletes, returns the Boolean has(key): checks whether there is a value, returns the Boolean clear(): clears all members keys(): Returns key objects Values (): Returns value objects Entries (): returns key->value objects forEach(): traversesCopy the code

WeakMap

Keys can only be reference types and weak references, and the value can be arbitrary; Not traversal; Get () : return value set() : add, return instance delete() : delete, return Boolean has() : check whether exists, return Boolean 3Copy the code

WeakMap, Set, WeakMap, WeakSet comparison and usefulness

Let obj = {name: 'breeze'}; obj = null; Garbage collection mechanism, as long as the address is no longer referenced, it will be automatically cleared. WeakMap constructed instances, the key key corresponding to the reference address is disconnected or does not belong to the same memory address, its corresponding value value will be added to the garbage collection team memory of the same size, map is stored more than Object, When a large amount of data is inserted, Map is still selected. The difference in search speed is very small. When continuous integers are used as attributes, the browser can be called for optimization, and the speed may be higherCopy the code
Use: 1. In the case of not modifying the original object, WeakMap can be used when you want to save some internal values according to the object. Once the object does not exist, Const breeze = new WeakMap() function fun(obj) {// If (breeze.has(obj)) {const breeze = new WeakMap() function fun(obj) {// If (breeze.has(obj)) { Return breeze. Get (obj)} else {// If not, Const count = object.keys (obj).length breeze. Set (obj, count) return count}}Copy the code
2. If you need to associate some data with the DOM node, such as whether to disable it or not, you can use mapping to associate them. However, if there are some operations that may need to delete the DOM node, if you use map, although the DOM node is deleted, it is still referenced in the map, so it consumes memory. At this time, Let breeze = new weakMap () const BTN = document.querySelector('# BTN ') // Add some associated data to the BTN node, etc breeze.set(btn, { disabled: true })Copy the code
Let obj1 = {}; let obj2 = {}; obj1.name = obj2; obj2.name = obj1; let weakMap = new WeakMap(); function deepClone(obj) { if (obj === null) { return obj } if (typeof obj ! == 'object') { return obj } if (obj.constructor === Date) return new Date(obj); if (weakMap.has(obj)) { return weakMap.get(obj) }; let newObj = new obj.constructor(); Weakmap. set(obj, newObj); weakmap. set(obj, newObj); for (key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? DeepClone (obj[key]) : obj[key]}} return newObj; }Copy the code

Function parameter default value

Short for object property

Class (class)

class Breeze { constructor(value) { const key = Symbol(); this.name = value; this[key] = ''; } fun () {console.log(' console.log ')} static staticMethod() {console.log(' console.log ')} set age (value) {this.name = value; } get age () { return this.name; } } class SubBreeze extends Breeze { constructor(value) { super(''); // Call the parent constructor this.title = value; }}Copy the code

modular

promise

Generator

Proxy

new Proxy(target, handler); Let obj = {name: 'breeze'}; // target specifies the object to intercept. let proxy = new Proxy(obj, { get (obj, key, proxy) { return obj[key]; }, set (obj, key, value, proxy) { obj[key] = value; }, has (obj, key) {if (key === name) {return false; } return key in obj; }, ownKeys(obj) {// Return reflect.ownkeys (obj).filter(value => value! == 'name')},}) deleteProperty(item, propKey): Delete proxy[propKey], return a Boolean ownKeys(item): Interceptor operations, such as Object. GetOwnPropertyNames (proxy), Object, getOwnPropertySymbols (proxy), the Object. The keys (proxy), for... In, returns an array. To create a new instance, you must modify the instance to trigger the behavior in the handlerCopy the code
Thirteen interception operations: Set () : block property set, return Boolean 3. Has () : block property check, return Boolean 4. DeleteProperty () : block property delete, return Boolean 5. DefineProperty () : Intercepting property definitions object.defineProperty (), object.defineProperties () and returning Boolean 6.ownKeys() : Intercept property traverse the for - and the Object in. Keys (), Object. GetOwnPropertyNames (), Object. GetOwnPropertySymbols (), Returns an array of 7. GetOwnPropertyDescriptor () : read intercept property description Object. GetOwnPropertyDescriptor (), return objects 8. GetPrototypeOf () : Intercept prototype read instanceof, Object. GetPrototypeOf (), Object. The prototype. __proto__, Object. The prototype. IsPrototypeOf (), Reflect. GetPrototyp EOf (), returns Object 9.setPrototypeof () : intercepts the prototype setting Object.setPrototypeof (), returns Boolean 10.isextensible () : Intercepting whether or not the Object isExtensible reads object.isextensible (), returning Boolean 11.preventExtensions() : intercepting the Object.isextensible () setting, returning Boolean 12.apply() : Construct () : Construct new Proxy () : construct() : construct new Proxy () : construct() : construct new Proxy () : construct() : construct new Proxy ()Copy the code
Object.defineProperty(obj, prop, descriptor) let obj = {}; Let value = 'breeze' object.defineProperty (obj, "name", {value: 'breeze', True, // Can only be changed by the assignment operator if it is true. The default is false. Enumerable: true, // If it is true, it is enumerable, and defaults to false, different: Get () {return value; }, set(newValue) {value = newValue; // newValue is the set value}});Copy the code

Reflect

Reflect is a built-in object that provides methods to intercept JS operations. Reflect is unconstructible and cannot be created by new. All attributes and methods of a Reflect are static. Add an Object method to Reflect and make it behave as a function. Proxy and Reflect work together in a one-to-one way. The former intercepts assignments and the latter completes them: Set (obj, key, value) : Sets object properties and returns a Boolean. 3. Has (obj, key) : checks object properties and returns a Boolean. 4. DefineProperty () : Define object properties, return Boolean 6.ownKeys() : Traverse Object attribute, the returned array (Object. GetOwnPropertyNames () + Object. GetOwnPropertySymbols () 7. GetOwnPropertyDescriptor (obj, key) : 9. SetPrototypeOf (obj, prototype) : Sets the object prototype and returns a BooleanCopy the code
10. The apply (target, thisArgument argumentsList) : ThisArgument is the object that needs to specify this. ArgumentsList is the list of arguments passed in when the object is called. It should be an arraylike object. 'breeze', getName: function () { console.log(this.name) } } let fun = obj.getName; Reflect.apply(fun, obj, {})Copy the code
11. The construct (target, args, newTarget) : Target is the constructor, args is the array or pseudo-array of arguments passed by the constructor, newTarget is a pointer to the new constructor, Function Breeze (name) {this.name = name; function Breeze (name) {this.name = name; } function Wing () {}; Wing.prototype.getName = function () {}; let breeze = new Breeze('breeze'); let breeze = Reflect.construct(Breeze, ['breeze'], Wing); Note: If there is a third argument, then the instance is made up of two parts: the property part of the real column is generated by the first argument constructor, and the methods of the real column are generated by the third argument object.Copy the code
13. PreventExtensions () : Const obj = {}; // determine whether the object isExtensible using reflect.isextensible. IsExtensible (obj); / / true / / using Reflect preventExtensions to stop Reflect the object. The preventExtensions (obj); Reflect.isExtensible(obj); // falseCopy the code
Objective: to simplify the writing Such as: Object. The prototype. The hasOwnProperty. Call (obj, 'name') - > Reflect. OwnKeys certain Object (obj) will the correct method is to return false different writing: try { Object.defineProperty(target, property, attributes); } catch(e) {// fail} if (reflect.defineProperty (target, property, attributes)) {// success} else {// failure}Copy the code

ES7(2016)

includes

Exponential operator

2 * * 10; / / 1024

ES8(2017)

Object.values()

Object.values({a: 1, b: 2, c: 3}); / / [1, 2, 3]

Object.entries()

Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]

String padding (String padding)

// Start string with space 'breeze'. PadStart (10); // End the string with a space 'breeze'.padend (10);Copy the code

Async /await syntactic sugar

Object.getOwnPropertyDescriptors()

Let obj = {name: 'breeze', [Symbol()]: 21, } console.log(Object.getOwnPropertyDescriptors(obj)) // { Symbol(): { configurable: true, enumerable: true, value: 21, writable: true } }Copy the code

SharedArrayBuffer object

Atomics object

ES9(2018)

Asynchronous iterative

Await can be used with for of loops to run asynchronous operations async function breeze(arr) {for await (let I of arr) {// do(I); }}Copy the code

Promise.finally()

  Promise.resolve().then().catch(e => e).finally();
Copy the code

ES10(2019)

Array.flat(deep)

[1, 2, [[3, 4]]]. Flat (1); flat(1); flat(1); // [1, 2, [3, 4]] [1, 2, [[3, 4]]].flat(2); / / [1, 2, 3, 4] / / no matter how deep nesting, will become a one-dimensional array [1, 2, and [[3, 4]]]. Flat (Infinity); / / [1, 2, 3, 4] / / remove a null value is used in [1, 2, 3]. Flat () / / [1, 2, 3]Copy the code

Array.flatMap()

[1, 2, 3, 4]. FlatMap (a => [a*2]); // [2, 4, 6, 8] [1, 2, 3, 4].map(a => [a*2]); [[2], [4], [6], [8]]Copy the code

String. TrimStart () and String. TrimEnd ()

Removes whitespace at the beginning and end of a string

Object.fromEntries()

Const Map = new Map([['a', 1], ['b', 2]]); const Map = new Map([['a', 1], ['b', 2]); console.log(Object.fromEntries(map)); // { a: 1, b: 2 }Copy the code

ES11(2020)

?? A null value processing

?? If the value on the left is undefined or null, the value on the right is returned. Otherwise, the value on the left is returned. let breeze = { a: 0, b: false, c: null, d: undefined, e: 'ceshi', } let a = breeze.a ?? '1' // 0 let b = breeze.b ?? '2' // false let c = breeze.c ?? '3' // 3 let d = breeze.d ?? '4' // 4 let e = breeze.e ?? '5' // 'ceshi'Copy the code

? . Optional chain to determine whether there is

? Let breeze = {} let name = breeze.people.name // TypeError: Cannot read property 'name' of undefined let color = breeze.people?.color // undefinedCopy the code

The basic data type BigInt

BigInt(value) Can represent any large integer with any precisionCopy the code

ES12(2021)

replaceAll

Returns a brand new string, with all characters matching the rules replaced by const breeze = 'breeze'; breeze.replaceAll('e', 'k'); // "brkkek"Copy the code

Numeric separator

Const money = 1_000_000_000; const money = 1_000_000_000; const money = 1_000_000_000; // Const money = 1000000000; 1 _000_000_000 = = = 1000000000; // trueCopy the code

WeakRefs