An array of ES6, and an expansion example of an object

The instance of this article tells the eS6 based array and the expansion of objects. Share to everyone for reference, specifically as follows:

Extension

1. Expand the operator (‘…’), it is equivalent to REST parameters Inverse operation, used to convert an array to a comma-separated parameter sequence;

Console.log (… [1, 2, 3]) // 1 2 3console.log (1, … [2, 3, 4], 5) // 1 2 3 4 5
  2. If the expansion operator is behind An empty array, no effect;  

[… [], 1] // [1]

  3. Application of common expansion operators:  
// Merge array let Arr1 = [1, 2]; Let Arr2 = [3, 4] Let Arr3 = [5, 6]; Let NEWARR = [… Arr1, … Arr2, … Arr3]; // is equivalent to ES5 [] .concat (Arr1, Arr2, Arr3) // [1 , 2, 3, 4, 5, 6] // Combined with the deconstruction assignment (for generating arrays) const [val, … rest] = [1, 2, 3, 4, 5]; VAL // 1REST / / [2, 3, 4, 5] // turn the string into a true array let str = ‘mine’; [… str] // [“M”, “I”, “n”, “e “] // can convert class array into genuine array let arraylike = {0: ‘div.class1’, 1: ‘div.clASS2 ‘, 2:’ Div.class3 ‘, Length: 3} console.log ([… arraylike]) // [Div.class1 “,” Div.class2 “,” Div.class3 “]

4. Add Array.from
 the method may be similar to the object array (array-like object) and traverse (Iterable) into real objects Array; the method can also accept the second parameter, effect similar to the MAP method of the array, used to process each element, put the processed value into the returned array;   
let arr = [1, 2, 3]; arr.map (x => x * x); // [1, 4, 9] Array.from (arr, (x) => x * x) / / [1, 4, 9]

5. New

Array.Of
method for converting a set of values, conversion array (this method can be used to substantially replace the array ()
 or  new array () , avoid overloading caused by different parameters appears); 

// Traditional ArrayArray () // [] Array (3) // [,,,] Array (1, 2, 3) // [1, 2, 3] // Array. OfArray.Of () // [] array.of (undefined) // [undefined] array.of (1) // [1] array.of (1, 2) // [1, 2] 6.Group instance method Find () is used to find the first eligible array member, the parameter of this method is a callback function, the backup function can receive three parameters, and the current element, current element Index, array itself; if you find success, return the first member of the eligible, return undefined if there is no qualified member, return undefined;

  VAR Arr = [1, 2, 4, 5]; var r = arr.find (Function (Element, Index, Self) {Return Element% 2 == 0;}) R / / 2  

7. Array example method FindIndex () , the parameter of this method is the same as

Find ()
, and the difference is that the method returns to the first eligible array member. Location, if all members do not meet the conditions, they return -1;
   
VAR ARR = [1, 2, 4, 5]; var r = arr.find Function (Element, INDEX, SELF) {RETURN ELEMENT% 2 == 0;}) R / / 1

PS: Find () and FindIndex () two Methods can be found to compensate for the shortcomings of the INDEXOF method of the array. 8. Array instance method include ()

, method returns a Boolean value, indicating whether an array contains a given value, similar to the INCLUDES method of the string; the method receives two Parameters, the first parameter is the member to look for, the second parameter represents the starting position of the search (if a negative number, represents the position of the countdown, if it is greater than the array length, it will be reset to start from 0Started)
  [1, 2, 3] .includes (2) // True [1, 2, 3] .includes (4) // False [1, 2, 3] .includes (3, 3); // False [1, 2, 3] .includes (3, -1); // true  

Object expansion

Allows direct writing variables and functions, as an object of the object (in the object, when writing variables), the attribute name is the variable name, the attribute value is Variable value)
 // Property Shop VAR foo = 'bar'; var obj = {foo}; obj // {foo: "bar"} // variable Shorthand VAR Mine = {FOO, Method () {// to do}}   2. ES6 When the word quantity is allowed, use the expression as an object of the object. Or the method name, that is, put the expression in square brackets; 
let propkey = ‘foo’; let Obj = {[Propkey]: true, [‘a’ + ‘BC’]: 123, [‘s’ + ‘AY’] () {Console.log (‘Hello World’)}} Obj // {“Foo”: True, “ABC”: 123} Obj.SAY () // ‘Hello World’

3. New Object.is ()

method, is used to compare the strict two values, With strict comparison operators (===The behavior is basically consistent, and the difference is that the +0 is not equal to -0, and the other is NAN equal to itself.

+0 === -0 // truenan === nan // FalseObject.is (+0, -0) // FalseObject.is (nan, nan ) // true
 4. New  Object.Assign  method for the merger of the object, all enumerations of the source object (SOURCE) Attribute, copy it to the target object (Target), the first parameter is the target object, the back parameters are source objects; 

VAR target = {a: 1}; Var Source1 = {B: 2}; var source2 = {C: 3}; Object.Assign (target, source1, source2); target // {a: 1, b: 2, c: 3}
   PS: If the target object has the same name attribute, or multiple source objects have the same name attribute, the later properties overwritten the previous properties. 
VAR Target = {A: 1, B: 1}; var source1 = {B: 2, C: 2}; var source2 = {C: 3}; Object.assign (Target, Source1, Source2); target // {a: 1, b: 2, c: 3}

The method cannot be used for the target object. Undefined and NULL will be reported;

Object.assiThe GN
method is implemented is a shallow copy, not a deep copy. If the value of the source object is an object, then the target object copy gets the reference to this object, and the modification will affect the original object;
   
var Obj1 = { A: {b: 1}}; var obj2 = Object.assign ({}, obj1); obj1.ab = 2; obj2.ab // 2

6

Object.assign
is often used in the following aspects
 to add attributes   
Var _this = {}; object. Assign (_this, {name: ‘mine’); _ this // {name: ‘mine’}

Object Add method
   
Var _this = {}; object.assign (_this, {func () {console.log (‘Hello World’)}}; _ this.func () // Hello World

Var _this = {name: ‘mine’}; object.assign ({}, _this);
 Merge multiple objects   
var _this = {}; var source1 = {name: ‘mine’}Var Source2 = {mail: ‘Your’}; object.assign (_this, source1, source2); _ this // {“name”: “mine”, “mail”: “}

  VAR default = {name: 'mine', mail: 'Your'} {Option ProcessContent (Options) { Options = Object.assign ({}, default, options); // to do}  
7.
Object.SetPrototypeOf

method is used to _ Proto_ is the same, used to set an object’s Prototype object, return to the parameter object itself. It is a method of setting prototype objects in ES6 formally recommended.

Let proto = {}; let Obj = {x: 10}; object.setPrototypeOf (Obj, Proto); proto.ly = 20; proto.ly = 20; proto.ly = 20; proto.ly = 40; proto.ly ; Obj.x // 10obj.y // 20obj.z // 40
  Object.getProtoTypeOf ()  method, this method is 
Object.SetPrototypeOf Method is supported to read the prototype object of an object.
9.

Object.keys ()

,
Object.values ​​() ,
 Object.Entries ()  In addition to the first, two are the new ways of ES6, used to traverse the object, return is an array, the member is the parameter object itself (excluding inheritance ) All keys, values, and key values ​​of the enumerable attribute.  
Let Obj = {A: 1, B: ‘Hello’} Object.keys (obj); // [“A”, “B”] Object.Values (OBJ); // [1, “Hello”] Object.entries (obj); //[[[“A”, 1], [“B”, “Hello”]]

Interested friends can use online HTML / CSS / JavaScript code run tool
: http: //tools.jb51.net/code/htmljsrun Tests the code running effect.   More about JavaScript Related Contents View this Topic: "JavaScript Object-Oriented Telches", "JavaScript Error and Debugging Skill Summary", "JavaScript Data Structure and Algorithm Skills Summary", "JavaScript Travel Algorithm Strike Summary "and" Summary of JavaScript Mathematical Computing "
I hope this article will help you JavaScript programming.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment