Es6-note3: Expansion of arrays, objects, and functions

One, the expansion of the array, ES6 in the array to expand some of the API to achieve more functionality

1.array.from: You can convert a class array and a data structure that can be traversed to a real array, as shown below

var a = {' 0 ': 1, ' 1 ': 1,length:2};var arr = Array.from (a); Console.log (arr) Array [1, 1]---------------ES5 implementation-----------var arr = [].slice.call (a); Console.log (arr) Array [1, 1]

function Fun () {var arr = array.from (arguments); Console.log (arr);} Fun (2,3,4); Array [2, 3, 4]

If the argument is a real array, it returns the same new array directly, and the parameter is a data structure that implements the iterator interface, such as set, as shown below

var a = new Set ([3,4]), var arr = Array.from (a); Console.log (arr); Array [3, 4]

Array.from also supports the second parameter, a function to process each element, and then puts the processed element back into the array, as shown below

var a = new Set ([3,4]), var arr = array.from (a,x = x+1); Console.log (arr); Array [4, 5]

Therefore, this method can be used to do some convenient operation, as shown below

var arr = Array.from ({length:3}, () = ' a ');//generates an array of 3 elements and initializes

2.array.of: This method can convert a set of numbers into an array, and always return arrays with parameter values, which avoids ambiguity caused by the array constructor, as shown below

var arr = array.of, arr1 = Array.of (1); Console.log (arr); Array [1, 2, 3]console.log (ARR1); Array [1]var arr2 = Array (3), ARR3 = Array (n); Console.log (ARR2); Array [<3 empty storage location >]//The vacancy here is not a value, nor Undefinedconsole.log (ARR3); Array [1, 2]

3. Array instance method find, used to find the first qualifying element in the array, not found returns undefined, the argument is a function, as shown below

var arr = [1,10,9,88];console.log (Arr.find (x=>x>10)); 88console.log (Arr.find (x=>x<1)); undefined

There is also a FindIndex instance method that finds the location of the matching element, returns 1 if it is not found, as shown below

Console.log (Arr.findindex (x=>x>50)); 3console.log (Arr.findindex (x=>x>100));-1

And both of these methods can traverse to Nan, as shown below

var arr = [Nan,1];console.log (Arr.findindex (x=>object.is (nan,x))); 0

The 4.fill instance method populates the array with the given values and overwrites the previous values, as shown below

Console.log (New Array (1,3,4). Fill (' a ')); Array ["A", "a", "a"]---------------can also specify the start position and end position--------------Console.log (new Array (2,5,8,11). Fill (' A ', up to)); Array [2, "a", 8, 11]

5. Return the instance method of the Keys,entries,keys to get the key's walker, entries is the iterator that gets the key value, as shown below

var arr = [1,2,5,7,11,15];for (Let I of Arr.keys ()) {console.log (i);};0 12345for (let [k,v] of arr.entries ()) {Console.log (k + ': ' +v);} 0:11:22:53:74:115:15

Ii. Extension of functions

1. The function parameter allows default values, and the default values that are implemented before ES6 are usually the first to determine whether a parameter is undefined, and then assign the value to the default value. As shown below

var func = function (x=0,y=7) {return x+y;} Console.log (func ()) 7console.log (func)) 3var fun1 = function (x, y) {x = x| | 0; y=y| | 7; return x+y; }//ES6 the previous notation implements the default value Console.log (FUN1 ()) 7console.log (FUN1 (1)) 8

When using the default value, if the default parameter is not at the trailer, the default parameter cannot be skipped, as shown below

var fun2 = function (x=1,y) {return x+y;} Console.log (Fun2 ()) NaNconsole.log (Fun2 (, 2)) syntaxerror:expected expression, got ', ' Console.log (fun2 (null,2)) 2console.log (Fun2 (undefined,2)) 3

The value of the length property of a function that uses the default parameter is inaccurate and does not contain the rest parameter, as shown below

var fun3 = function (a=0,b=1) {return a-B;} Console.log (fun3.length); 0

Rest parameter: The form is "... Variable "parameter, the receive function remaining parameter, with the variable is an array, the rest parameter can no longer have parameters, the usage is as follows

var fun4 = (... arg) = Arg.sort ((a, b) = a<b); Console.log (Fun4 (8,87,1)); Array [87, 8, 1]//will have an error in the rest parameter, var fun5 = (... arg,x) = Arg.sort ((b) and a<b); syntaxerror:expected closing parenthesis, got ', '//The length of the function ignores the rest parameter Console.log (fun4.length) 0

The extension operator (...), like the inverse of the rest parameter, converts an array to a comma-separated list of arguments, as shown below

var fun5 = (... arg) = = [... arg];console.log (Fun5 (1,19)); Array [1, 19]//can also be used to replace apply Console.log (Math.max.apply (null,[1,98,7]) in some places, 98console.log (Math.max (... [1,98,7])); 98

2. Arrow functions

The arrow function is a new syntax for ES6, which allows you to define a function using the arrows = =, as shown below

var fun = A=>a+1;console.log (Fun (8)), 9----------------------var fun1 = (A, b) and A*b;console.log (FUN1 (2,8)); 16

The arrow functions have several points of note to use.

(1) The object within the function body this is the object that is defined, not the object that is used, even if the use of call,apply is not changed.

(2) can not be used as a constructor, that is, you can not use new the command, or you will throw an error.

(3) An object cannot be used arguments , and the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

(4) yield commands cannot be used, so an arrow function cannot be used as a generator function.

(function () {return (() =>console.log (THIS.A)). Call ({a:2})}. Call ({a:1}) 1

Nested arrow functions, as shown below

Const PIPEFUN = (... funs) = Initval = Funs.reduce ((F1,F2) = F2 (F1), initval); var testfun = Pipefun (a=>a+1,b =>b+1); Testfun (10); 12

The ES6 also explicitly stipulates that tail recursion optimization is required when implementing ES6 code, and that tail recursion optimization is called at the end of the recursive call itself (the tail call is called in the last step of the function, and there is no other action), so the benefit is not easy to cause stack overflow, as shown below

function Fibonacci (n) {return N<=1?n:fibonacci (n-1) +fibonacci (n-2);} Console.log (Fibonacci (30)); 832040//here the argument to 100 will stack overflow, if changed to tail recursion, you can solve the problem function Fibonacci (N,ACC1,ACC2) {return n<= 1?acc1:fibonacci (N-1,ACC2,ACC1+ACC2);} Console.log (Fibonacci (30,1,1)); 832040console.log (Fibonacci (100,1,1)); 354224848179262000000

Third, the extension of the object

1. Properties and methods can be abbreviated, you can use variables and functions directly as properties and methods of an object, as shown below

var x = 1,    y = 2;var obj = {x,y,show () {console.log (THIS.X,THIS.Y);}}; Console.log (OBJ.X,OBJ.Y) 1 2obj.show () 1 2

The property name of the concise notation is always a string, as shown in no keyword error, as shown below

var obj1 = {       //here equals ' new ': function () {Console.log ("new");} New () {Console.log ("new");}};o Bj1.new () New

There are two ways to access an object's properties or methods before ES6, one is to use a point (.) operator, the other is using the brackets ["PropertyName"], as shown below

var o = {X:1};console.log (o.x); 1console.log (o["x"]); 1

However, in ES6, you can define the properties or methods of an object only by using the property name: the brackets are defined as follows

var name = ' hehe '; var obj2 = {[name]: "Hello"}console.log (obj2[name]); hello

2.object.is This method can be used to determine whether the two values are the same, you can Judge Nan and nan,-0 and +0, using the equivalent algorithm, as shown below

Console.log (+0===-0,nan===nan, "hello" = = = = "Hello", {x:1}==={x:1}); Console.log (Object.is (Nan,nan)); Console.log ( Object.is (+0,-0)); Console.log (Object.is ({x:1},{x:1})); True false True Falsetruefalsefalse

3.object.assign is used to merge objects, with shallow copy and with the same name attribute, which overrides the former, as shown below

var o = {x:1},    O1 = {Y:2},    O2 = {Y:3,x:2};console.log (object.assign (O,o1,o2)); var O3 = {z:4,fun: () = = Console.log ("Hello")};object.assign (O,O3); O.fun (); o3.fun = Null;o.fun (); Object {x:2, Y:3}hello

If only one parameter is given and the object is returned, the object will be converted to an object, not an object, and an error if it cannot be converted to an object, as shown below

Onsole.log (Object.assign (2)); Console.log (object.assign (undefined)); Console.log (object.assign (null)); Number {2}typeerror:can ' t convert undefined to object

And the method cannot copy non-enumerable properties

　

　

　　

　

　　

Es6-note3: Expansion of arrays, objects, and functions