🏆 nuggets technical essay | double festival special articles

1. What is added to ES5 compared with ES3?

  • (1) Get /set memory

Compared to ES3, ES3 needs to repeat the same logic multiple times to achieve the same effect, but ES5’s getter/setter accessors store the repeated logic for reuse.

  • (2) Array iteration

For example, if you want to filter some arrays, in ES3, you need to loop through each element in the array to determine that the ones that meet the conditions are pushed into the new array, while in ES5, you can use the array filter method to filter the array to make the code more concise and improve the readability and maintainability of the code. Other iteration method and indexOf lastIndxOf, forEach, map, some, every, reduce, reduceRight.

  • (3) String. The prototype. The trim ()

In ES3, regex is used to remove whitespace, whereas in ES5, a trim attribute is added

//ES3 console.log(' 123 456 '.replace(/(^\s+)|(\s+$)/g, '')); / / '123 456'Copy the code
//ES5 console.log(' 123 456 '.trim()); / / '123, 456Copy the code
  • (4) the Date. Now ()

In ES3, you need to create an object to obtain the current event, while in ES5, you can directly obtain the current time

//ES3 console.log(new Date().getTime()); / / 1494091196365Copy the code
//ES5
console.log(Date.now())  //1494091196365
Copy the code
  • (5) JSON

JSON serialization and deserialization in ES5 are more convenient and secure than in ES3

//ES3
eval('({"a": 3})')
Copy the code
//ES5
JSON.parse('{"a": 3}')
Copy the code
  • (6) Inheritance

ES5 uses Object.create to implement proper inheritance. ES3 lacks object. create, however, and can only write imperfect inheritances (the subclass has not been instantiated yet and the parent class has already instantiated the constructor, which may fail without arguments

//ES3
var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = new Shape();
Copy the code
//ES5
var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
Copy the code
  • (7) Attribute descriptor
  • ES3: configurable enumerable value writable
  • ES5:configurable enumerable get set
  • If the specified property is set to false, no additional control system can be configured, exercising any additional control system
  • Enumerable specifies whether the property is enumerable. Enumerable properties are light when printed in the console, but non-enumerable properties are dark. Enumerable also affects the way other methods behave
  • Value and writable,value is the value of the property, writable is writable, if not writable, then the property is read-only, right
  • Get and set must depend on another variable or property. Get and set are functions, and if you set GET without setting set, the property is read-only, not writable
  • Example 1: Define an empty object to add attributes and specify value
// Value a = {}; Object.defineProperty(a, "foo", { value: "bar" });Copy the code

  • Object.defineproperty takes three arguments, the first is the Object, the second is the Object’s property (key), and the third is the descriptor for that property. The above code changes A, instead of generating a new Object, the modified Object A has a new property foo. And we define its value to be bar
  • Example 2: defineProperty is not about adding attributes, it’s about defining attributes, because the empty object doesn’t have that attribute itself, so when we define it, it looks like adding

  • We can see that with defineProperty, we can change specific attributes of the object while maintaining the original object
  • Example 3: WirTable

  • If we change the writable property of foo, we will not change the value of value because we already have a description of value. Now we set writable to make foo writable unwritable (read-only, so value will always be 1).

  • Conclusion: We can set a property value to a fixed read-only value by setting value and writable
  • Example 4: Enumerable (as shown below, one is true and one is false)

  • As you can see from the figure above, bar, which is set to enumerable, is light, while Foo, which is not enumerable, is dark. What difference does it make if an attribute is enumerable or not? We often loop over objects, such as for(key in obj) or objject.key (obj), and changing the value of a property can cause a difference in loop times. Simply put, if an property is set to non-enumerable, the property will be invisible in the object. Of course, we can get the values of non-enumerable attributes through A. Carey, or some methods are available with or without enumeration. One example of using non-enumerable attributes is json. stringify(converted to JSON string) and Object.assign (extended). Since these two methods only operate on enumerable values, we can put some private intermediate variables on the object and make them non-enumerable, so they will be ignored eventually
  • Example 5: Signals

  • Foo = 1; foo= 1; writable = undefined; We can see that a has no enumerable value

  • Because the 64x is configured with a new false, the property foo of A is no longer definable. If you set a different value and want to enable the definable option, an error is sent, indicating that the 64X is no longer definable

  • Example 5: Get and set

  • Change a.foo and you will find that A. bar also changes

  • Note that the get function uses this, which refers to an object

  • By defining bar, we hope that bar will always be 1 larger than foo, and that a change in bar will cause a change in Foo, essentially changing Foo by set
  • Key: The core of Vue 2 is to hijack the properties of an object through get and set, so that changes to the properties can be known and dependencies can be recorded when the properties are used

The last example used object.defineProperty, a single property set, and a method object.defineProperties, which can set multiple properties

2. What is added to ES6 compared with ES5?

  • (1) Variables and scope of variables
  • ES5 uses var for variables, ES6 uses let for variables, and ES6 uses const for constants
  • Difference 1: Variables declared by var are mounted on Windows, while variables declared by let and const are not
  • Difference 2: Var has a variable promotion, let and const have no promotion
  • Difference 3: Let and const declarations form fast scopes
  • Difference 4: Let and const in the same scope cannot declare variables of the same name, whereas var does
  • The difference between 5:
var a = 100; if(1){ a = 10; // If a is not defined let a = 1; // If a is not defined let a = 1; // If a is not defined let a = 1; }Copy the code
  • Note: let,const: let is used to define variables,const is used to define constants, and the name of the definition is capitalized! Underline words between them
  • (2) Arrow function
  • And ordinary function difference:
    1. Only function expressions, no function declarations
    1. Arrow functions don’t have arguments, you can use ES6’s new extension operator… Rest to collect arguments (REST is an array that holds all the remaining arguments)
  • 3) This in the arrow function, once determined, will never change, the rule that the arrow function follows, the scope in which the arrow function is defined this,(call,apply does not apply)
  • () can be omitted when there is only one parameter. {} and return can be omitted when there is only one code in the function body and the return value is returned
  • The class keyword defines a class
  • The essence of class is function, which can be seen as a syntactic sugar that makes writing object prototypes clearer and more like writing object-oriented programming
class Apple{
     constructor(a){
          this.a = a 
     }
}
Copy the code
  • Class instantiation: let apple = apple (1)
  • Class inheritance: uses extends
  • The constructor method of a class is the default method of a class and is called when an instantiated object of the class is created
  • Class definitions are not promoted and must be defined before access
  • Class contains only static methods, no static properties
  • ES6 introduces modularity, with strict mode automatically enabled for export and import modules
  • promise
  • (4) Deconstructing assignment
/ / array (a, b, c) = [1, 2, 3] / / object let {a, b, c} = {2, a: 1, b: c: 3}Copy the code
  • (5) String
  • In ES6, there is a new way to define strings, the multi-line string var a = ‘ ‘
  • ${} is a fixed syntax, in the multi-line string, {} is a JS execution environment, can call any method, write any JS statement
  • (6) String method
  • StartsWith: Used to determine whether a string begins with another string, returning a Boolean value
  • The first argument determines the string, and the second argument determines the starting position
Var STR = 'asdfGHjkl' console log(str.startsWith("abc",3))Copy the code
  • EndsWith: The opposite of startsWith above
  • Includes: This method determines whether a string contains another string, returning a Boolean value
  • The first argument determines the string, and the second argument determines the starting position
Var STR = 'asdfGHjkl' console log(str.includes("abc"))Copy the code
  • Repeat: Used to copy the string multiple times. The parameter is the number of times it was copied
  • (7) Array methods
  • Array has added two static methods and three normal methods to ES6
  • 1) Static methods are methods called by the function itself, i.e., methods called by Array
  • 2) Ordinary methods are called by array instances, that is, literal-defined arrays
  • The first static method: array. of: defines an Array. This method fixes a BUG where an Array receives parameters
New Array(1,2) //[1,2,3] new Array(3) //[empty * 3] var arr = array.of (3) conso.log(arr)Copy the code
  • The second static method, Array.from, is used to convert an array-like object (formerly known as a collection) into an Array. Prior to ES6, we could convert an array-like object into an Array using [].slice.call(arR)
  • Common method 1: find: used to query the contents of an array, member: value, index: index, element group: arr
  • If true, the loop stops and returns the current member as the find method’s return value. If false, the loop continues. If true still does not return, the find method returns no value and the variable is Undefined
  • Common method 2: findIndex. This method is the same as the find method, and the return value is a qualified subscript. If no condition is met, the return value is -1
  • Normal method 3: used for copying within an array, the first argument: copy position, the second argument: start position, the third argument: end position, not included
  • (8) Object methods (two static)
  • Object. Is is used to compare whether the two are congruent
    1. NaN compared to NaN
console.log(NaN === NaN) //false
console.log(Object.is(NaN,NaN) //true
Copy the code
  • 2) Comparison of 0 and -0
console.log(0 === -0) //true
console.log(Object.is(0,-0) //false
Copy the code

Object.assign Copies of Object attributes (shallow copies)

Var obj2 ={sex :' female '} object. assign(obj,obj1,obj2} // If there are identical attributes, the attributes will be overriddenCopy the code
  • (9)… The first function is to collect parameters in the function, the second is to deconstruct the array when it can be used, and the third is to pass parameters
  • (10) Symbol, a new data type in ES6, belongs to the value type and represents a unique Symbol. The way to define a Symbol data is through Symbol(). This data type is mainly used to solve the problem that the attributes of the object cannot be repeated
  • (11) Proxy object: ES6 has added a Proxy class, which can intercept the access operation and modification operation of the specified object.
Var proxy=new proxy (getproxy, getproxy){}, set:function(getproxy, getproxy, getproxy, getproxy, getproxy){},Copy the code
  • (12)Set is a new data structure in ES6. It can be considered as an unrepeatable array, but unlike array, its contents are both indexes and members
  • . You can deconstruct an array Set
  • Array deduplicating… new Set()
  • The Set object has the following methods:
    1. Set.add (): Used to add a new member to the collection, but not an existing member
  • 2) set.delete(): Used to delete a member
    1. Set.hs (): Checks whether a set has a member and returns a Boolean value
    1. Set. The clear () : empty
    1. Set. The forEach: circulation
  • (13) Map can be considered as a superobject. Its attribute name key and attribute value value can be any content. The key of an ordinary object must be a string
  • Methods:
  • map.set()
  • map.get()
  • map.delete()
  • map.clear()
  • map.has()
  • map.forEach()

3. What is added to ES7 compared with ES6?

  • (1) The power operator
Math.pow(3,2) === 3 ** 2 //9
Copy the code
  • (2) Array. The prototype. Includes ()

4. What is added to ES8 compared with ES7?

  • (1) Async,await asynchronous solution: optimize callback hell, ES6 promise solved callback hell, but to continuously call then, it will be unclear, so introduced async function, AWIAT expression
  • (2) the Object. Entries (), the Object. The values ()
  • Iterators are keys,values and entries. These are all methods on object, and since arrays are themselves objects, we have added these methods to the list. All these methods return iterators (which may or may not be arrays). Of is iterated over, or converted to a real Array with array.from ()
  • Keys return an iterator for the key set and values return an iterator for the value set. In an object, key is the index and value is the item, and entries return both key and value, each of which is an array. [key,value], so it returns an iterator of the set [key,value], which ends up being a two-dimensional array
Array.from(["a","b","c"]).entries())
Copy the code
  • And that’s why flat comes in, falt can turn a two-dimensional array back into a one-dimensional array. In ES10, you can only use one layer to transmit a parameter. In ES10, you can only use one layer to transmit a parameter. In ES10, you can use one layer to transmit a parameter.
  • String padding padStart().padend ()
  • Usage scenario: We want to display a date in 0000-00-00 mode. In the past, we might need to determine the size of the month and then consider whether to complete 0
  • We can now use padStart to swallow, String. Prototype. PadStart. Call (3, 2, “0”) is equivalent to “3”. PadStart (2, “0”), completion two, to fill with zeros

5. What is added to ES9 compared with ES8?

  • Juejin. Cn/post / 684490…

6. What is added to ES10 compared with ES9?

  • (1)Object.fromEntries()
  • (2) trimStart () and trimEnd ()
  • (3) flat and flatMap ()
  • (4) Description attribute of Symbol object
  • (5) Optional catch
  • Segmentfault.com/a/119000001…

7. What is added to ES11 compared with ES10?

  • Blog.csdn.net/weixin_4184…

Some sources of this article:

  • 1. www.cnblogs.com/smalllong-g…
  • 2. www.cnblogs.com/zhaoxiaoyin…
  • 3. www.jianshu.com/p/9da4aa1c9…