Common JavaScript methods for array type data (enough to know)

I. Preface:

In our learn js array, we will contact with js array in some of the ways, the methods for us, can easily achieve our desired results, but because the method is more, some methods are not commonly used, may be a period of time will forget, so here I compiled 21 array method, for everybody to refer to use.

The method name	Corresponding to the version	function	Whether the original array changes
concat()	ES5-	Merge arrays and return the merged data	no
join()	ES5-	Using a delimiter, turn the array into a string and return it	no
pop()	ES5-	Deletes the last bit and returns the deleted data	yes
shift()	ES5-	Deletes the first digit and returns the deleted data	yes
unshift()	ES5-	To add one or more digits to the first digit, return the length	yes
push()	ES5-	Adds one or more data bits to the last bit, returning the length	yes
reverse()	ES5-	Invert the array and return the result	yes
slice()	ES5-	Intercepts an array at the specified location and returns	no
sort()	ES5-	Sort (character rules) and return results	yes
splice()	ES5-	Deletes a specified location and replaces it, returning the deleted data	yes
toString()	ES5-	Convert directly to a string and return	no
valueOf()	ES5-	Returns the original value of an array object	no
indexOf()	ES5	Query and return an index of the data	no
lastIndexOf()	ES5	Reverse the query and return the index of the data	no
forEach()	ES5	The callback function takes three arguments, value, index, and self, and iterates through all the items in the array. ForEach has no return value	no
map()	ES5	As with forEach, the callback function returns data that forms a new array to be returned by Map	no
filter()	ES5	As with forEach, the callback function returns a Boolean value that is true to form a new array returned by filter	no
every()	ES5	As with forEach, the callback returns booleans, all true, and every returns true	no
some()	ES5	As with forEach, both callback functions return booleans as long as one of them is true and some returns true	no
reduce()	ES5	Merge, with forEach, iterates through all the items in the array and builds a final value that is returned by Reduce	no
reduceRight()	ES5	Reverse merge, with forEach, iterates through all the items of the array and builds a final value, returned by reduceRight	no

Two, method details:

1: concat ();

Function: merge array, can merge one or more arrays, will return the data after the merge array, will not change the original array;

Var str1 = [12, 2, "hello"); var str2 = ["world"]; console.log(str1.concat(str2)); //[12, 2, "hello", "world"] console.log(str1); / / / 12, 2, "hello".Copy the code

2: the join ();

Function: Convert an array to a string and return the converted string data without changing the original array.

Note that :() use double quotation marks to include the desired delimiter. The default is comma

Var str1 = [12, 2, "hello"); var str2 = ["world"]; The console. The log (str1. Join (" - ")); / / 12-2 - hello console. The log (str1); //[12, 2, "hello"]Copy the code

3: the pop ();

Function: Delete the last bit of an array and return the deleted data, changing the original array

Var str1 = [12, 2, "hello"); The console. The log (str1. Pop () / / hello console. The log (str1); / / [12, 2]Copy the code

4: the shift ();

Function: Delete the first digit of an array and return the length of the new array, changing the original array

Var str1 = [12, 2, "hello"); The console. The log (str1. Shift ()); / / 12 console. The log (str1); //[2,"hello"]Copy the code

5: the unshift ();

Function: Add one or more data at the beginning of an array, and return the length of the new array, changing the original array

Note: the unshift() method returns the length of the new array. It can add one or more data, which can be interpreted as adding a string of data.

Var str1 = [12, 2, "hello"); Var str2 = [43, 2, "test"); The console. The log (str1. Unshift (" hello ")); / / 4 console. The log (str2 unshift (" hello ", "world")); / / 5 console. The log (str1); //[" hello", 12, 2, "hello"] console.log(str2); //["hello", "world", 43, 2, "test"]Copy the code

6: push ();

Function: Add one or more data bits to the last bit of an array and return the length of the new array, changing the original array

Note: The push() method returns the length of the new array. It can add one or more data, which can be interpreted as adding a string of data

Var str1 = [12, 2, "hello"); Var str2 = [43, 2, "test"); The console. The log (str1. Push (" hello ")); / / 4 console. The log (str2. Push (" hello ", "world")); / / 5 console. The log (str1); //[12, 2, "hello"," hello"] console.log(str2); //[43, 2, "test","hello", "world"]Copy the code

7: reverse ();

Function: the array of data inversion, and return after the inversion of the array, will change the original array

Var str1 = [12, 2, "hello"); The console. The log (str1. Reverse ()); / / [12] "hello", 2, and the console. The log (str1); //["hello", 2, 12]Copy the code

8: sort ();

Function: Sort the data in an array (ascending by default) and return a new sorted array, changing the original array

Note:

8.1: this sort is for the character sort, first use the array toString() method toString, then bit-by-bit comparison, 3 is greater than 12, because the first 3>1, do not be confused with the Number type data sort

8.2: str2 array added three characters, you can see that when comparing, zoom is the largest, because the first English letter can be converted to the corresponding value through ASCII code, and then compared according to the value

,2,43,5,2,5 var str1 = [12]; Var str2 = [92,2,43, "hello", 5,2,5]; The console. The log (str1. Sort ()); //[12, 2, 2, 43, 5, 5] console.log(str1); //[12, 2, 2, 43, 5, 5] console.log(str2.sort()); / / [43, 2, 2, 5, 5, 92, "ABC", "hello" and "zoom"] the console. The log (str2); //[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]Copy the code

8.3: Sorting problems

Parameter: sort(callback) If you want to sort by value, you need to pass the parameter. Sort (callback), callback is a callback function that should take two arguments, compare the two arguments, and return a number (a-b) specifying the relative order of the two values. The return value is as follows:

If a is less than b, return a value less than 0.

If a is equal to b, 0 is returned.

If a is greater than b, return a value greater than 0.

Var str3 =,2,43,5,2,5 [92]; The console. The log (str3. Sort (fn)); //[2, 2, 5, 5, 43, 92] console.log(str3); //[2, 2, 5, 5, 43, 92] function fn (a,b){return a-b; }Copy the code

9: slice ();

Function: intercepts an array at a specified location, and returns the intercepted array without changing the original array

Parameter: slice(startIndex, endIndex)

Note: Selected elements can be returned from an existing array. The method takes two arguments slice(start,end). Strat is mandatory, indicating the start digit. End is optional, indicating the end digit (excluding the end digit), and omitting indicates the end digit. Both start and end can be negative values. A negative value indicates the start from the last digit. For example, -1 indicates the last digit.

var arr = ["T1","J1","L1","L2","M1"]; The console. The log (arr. Slice (1, 3)); //["J1","L1"] console.log(arr.slice(1)); //["J1","L1","L2","M1"] console.log(arr.slice(-4,-1)); //["J1","L1","L2"] console.log(arr.slice(-2)); //["Lily","M1"] console.log(arr.slice(1,-2)); //["J1","L1"] console.log(arr); //["T1","J1","L1","L2","M1"]Copy the code

10: splice ();

Function: Add to, remove from, or replace an element in an array, and return the removed/replaced element.

Parameters: the splice (start, num, data1, data2,…). ; All parameters are optional.

var arr = ["Tom","Jack","Lucy","Lily","May"]; The console. The log (arr. Splice (2, 0, "a", "b")); //[] console.log(arr); / / / "Tom", "Jack", "a", "b", "Lucy", "Lily", "May"] - change the original arrayCopy the code

11: the toString ();

Function: Converts an array to a string, similar to join() without arguments. This method is called automatically when the data is implicitly cast or, if called manually, directly cast to a string. It doesn’t change the original array

Var STR = [1, 2, 3]; console.log(str.toString()); / / 1, 2, 3. The console log (STR); / / [1, 2, 3]Copy the code

12: the valueOf ();

Function: Returns the original value of an array (usually the array itself), usually called by JS in the background, does not appear explicitly in the code

Var STR = [1, 2, 3]; console.log(str.valueOf()); / / [1, 2, 3]. The console log (STR); //[1,2,3] // to prove that console.log(str.valueof () == STR); //trueCopy the code

13:IndexOf();

Run the following command to query the location of the specified data from left to right. If the specified data does not exist, -1 is returned. If the specified data is found, the index of the specified data is returned

IndexOf (value, start); Value indicates the data to be queried. Start is optional and indicates the starting position of the query. If start is negative, the end of the array is counted forward. If no value exists, the method returns -1

Note: If the data is found, the index of the data is returned immediately without further search

var str = ["h","e","l","l","o"]; console.log(str.indexOf("l")); //2 console.log(str.indexOf("l",3)); //3 console.log(str.indexOf("l",4)); //-1 console.log(str.indexOf("l",-1)); //-1 console.log(str.indexOf("l",-3)); / / 2Copy the code

14:lastIndexOf();

var str = ["h","e","l","l","o"]; console.log(str.indexOf("l")); //2 console.log(str.indexOf("l",3)); //3 console.log(str.indexOf("l",4)); //-1 console.log(str.indexOf("l",-1)); //-1 console.log(str.indexOf("l",-3)); / / 2Copy the code

15:forEach();

Function: ES5 new method, used to iterate over the number group, no return value,

Parameters: forEach (the callback); Callback takes three default arguments: value(the data iterated through the array), index(the corresponding index), and self(the array itself).

var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.forEach(function(value,index,self){ console.log(value + "--" + index + "--" + (arr === self)); }) / / print the results as follows: / / Tom - 0 - true / / Jack - 1 - true / / Lucy - 2 - true / / Lily - 3 - true / / May - 4 - true console. The log (a); //undefined-- forEach returns no value // This method is traversal method, does not modify the original arrayCopy the code

16:map();

Functions: 1. Same as forEach function;

2. Map’s callback function returns the result, and Map returns all the callback values as a new array.

Parameters: the map (the callback); Callback takes three arguments by default: value, index, and self. Same argument as forEach() above

/ / function 1: with the forEach var arr = [" Tom ", "Jack", "Lucy", "Lily", "May"]. Var a = arr.map(function(value,index,self){console.log(value + "--" + index + "--" + (arr === self))}) / / Tom - 0 - true / / Jack - 1 - true / / Lucy - 2 - true / / Lily - 3 - true / / May 2-4 - true / / function: Var arr = ["Tom","Jack","Lucy","Lily","May"]; var arr = ["Tom","Jack","Lucy","Lily","May"]; var a = arr.map(function(value,index,self){ return "hi:"+value; }) console.log(a); //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"] console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]-- The original array is unchangedCopy the code

17: the filter ();

Functions: 1. Same as forEach function; 2. The callback function of filter needs to return a Boolean value. When it is true, the data of this array is returned to Filter.

Parameters: the filter (the callback); Callback takes three arguments by default: value, index, and self.

/ / function 1: with the forEach var arr = [" Tom ", "Jack", "Lucy", "Lily", "May"]. Var a = arr.filter(function(value,index,self){console.log(value + "--" + index + "--" + (arr === self))}) / / Tom - 0 - true / / Jack - 1 - true / / Lucy - 2 - true / / Lily - 3 - true / / May 2-4 - true / / function: Var arr = ["Tom","Jack","Lucy","Lily","May"]; var arr = ["Tom","Jack","Lucy","Lily","May"] var a = arr.filter(function(value,index,self){ return value.length > 3; }) console.log(a); //["Jack", "Lucy", "Lily"] console.log(arr); //["Tom", "Jack", "Lucy", "Lily", "May"]-- The original array is unchangedCopy the code

18:every();

Function: Checks whether each item in the array meets the condition, and returns true only when all items meet the condition.

Argument: every() takes a callback that returns the value every(callback); Callback takes three arguments by default: value, index, and self.

Function 1: When the return value of the callback function is true, similar to the function forEach, traverses all; If false, execution stops, subsequent data is not iterated, and stops at the first location that returns false.

//demo1: var arr = ["Tom","abc","Jack","Lucy","Lily","May"]; Var a = arr.every(function(value,index,self){console.log(value + "--" + index + "--" + (arr == self))}) // Tom--0--true // Because there is no return true in the callback function, default return undefined, equivalent to return false //demo2: var arr = ["Tom","abc","Jack","Lucy","Lily","May"]; var a = arr.every(function(value,index,self){ console.log(value + "--" + index + "--" + (arr == self)) return value.length < 4; }) // Print the result: // Tom--0--true // ABC --1--true // Jack--2--true var arr = ["Tom","abc","Jack","Lucy","Lily","May"]; var a = arr.every(function(value,index,self){ console.log(value + "--" + index + "--" + (arr == self)) return true; }) // Print the result:  // Tom--0--true // abc--1--true // Jack--2--true // Lucy--3--true // Lily--4--true // May--5--true // Because each callback returns true, the array of data is iterated, equivalent to forEachCopy the code

Function 2: Every returns true when every callback function returns true, and every returns false as long as one callback function returns false

  //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);           //false

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.every(function(value,index,self){
        return value.length > 2;
    })
    console.log(a);           //true
Copy the code

19:some();

Function: Checks whether there is an item in the array that meets the condition, and returns true as long as there is one item that meets the condition.

Arguments: some() takes a callback that returns some(callback); Callback takes three arguments by default: value, index, and self.

Function 1: To check each item in the array, as long as there is a callback function that returns true, some will return true, so the exact opposite of every, when encountered a callback function that returns true, we can determine the result, then stop the execution, the following data is not iterated, stop at the first return true position; When the return value of the callback function is false, we need to continue to execute backwards until the final result is determined, so we iterate over all the data and implement a function similar to forEach to iterate over all the data.

//demo1: var arr = ["Tom","abc","Jack","Lucy","Lily","May"]; var a = arr.some(function(value,index,self){ console.log(value + "--" + index + "--" + (arr == self)) return value.length > 3; }) / / print the results as follows: / / Tom - 0 - true / / ABC - 1 - true / / Jack - 2 - true / / demo2: var arr = ["Tom","abc","Jack","Lucy","Lily","May"]; var a = arr.some(function(value,index,self){ console.log(value + "--" + index + "--" + (arr == self)) return true; }) / / print the results as follows: / / Tom - 0 - true / / demo3: var arr = [" Tom ", "ABC", "Jack", "Lucy", "Lily", "May"]. var a = arr.some(function(value,index,self){ console.log(value + "--" + index + "--" + (arr == self)) return false; }) / / print the results as follows: / / Tom - 0 - true / / ABC - 1 - true / / Jack - 2 - true / / Lucy - 3 - true / / Lily - 4 - true / / May - 5 - trueCopy the code

Function 2: As opposed to every, some returns false only if one of the callbacks returns true, and all of the callbacks return false

  //demo1:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);             //true

    //demo2:
    var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
    var a = arr.some(function(value,index,self){
        return value.length > 4;
    })
    console.log(a);             //false
Copy the code

20.reduce();

Function: Start with the first item of the array, iterate through all the items to the end, and then build a final returned value.

Arguments: reduce() takes one or two arguments: the first is a callback function that represents the function called on each item of the array; The second argument (optional) is the initial value of the merge and is received by the first argument when the callback function is first executed. reduce(callback,initial); Callback takes four parameters by default: prev, now, index, and self. Any value returned by callback will be taken as the first argument for the next execution. If the initial argument is omitted, the first iteration occurs on the second item of the array, so the first argument to the callback is the first item of the array, and the second argument is the second item of the array.

Var arr = [10,20,30,40,50]; arr.reduce(function(prev,now,index,self){ console.log(prev + "--" + now + "--" + index + "--" + (arr == self)) }, 2019) // Print the result:  // 2019--10--0--true // undefined--20--1--true // undefined--30--2--true // undefined--40--3--true // Undefined --50--4--true // Undefined --50--4--true Var arr = [10,20,30,40,50]; arr.reduce(function(prev,now,index,self){ console.log(prev + "--" + now + "--" + index + "--" + (arr == self)) }) // The first time, the first argument to the callback is the first item in the array. The second argument is the second item of the array // 10--20--1--true // undefined--30--2--true // undefined--40--3--true // undefined--50--4--true // Var arr = [10,20,30,40,50]; var arr = [10,20,30,40,50]; arr.reduce(function(prev,now,index,self){ console.log(prev + "--" + now + "--" + index + "--" + (arr == self)); return "hello"; }, 2019)  // 2019--10--0--true // hello--20--1--true // hello--30--2--true // hello--40--3--true // hello--50--4--true // Var arr = [10,20,30,40,50]; var arr = [10,20,30,40,50]; var arr = [10,20,30,40,50]; arr.reduce(function(prev,now,index,self){ console.log(prev + "--" + now + "--" + index + "--" + (arr == self)); return "hello"; }) // Prints: The first time, the first argument to the callback is the first item in the array. // 10--20--1--true // hello--30--2--true // hello--40--3--true // hello--50--4--true Var arr = [10,20,30,40,50]; var arr = [10,20,30,40,50]; var sum = arr.reduce(function(prev,now,index,self){ return prev + now; }) console.log(sum); Var arr = [10,20,30,40,50]; var arr = [10,20,30,40,50]; var sum = arr.reduce(function(prev,now,index,self){ return prev + now; }, 8) console.log(sum); // The result of the last return of the callback function is returned to the reduce method // Because reduce has a second parameter initial, which is evaluated on the first execution, the final result is added with 8Copy the code

21.reduceRight()

Function :(similar to reduce) starting from the last item in an array, iterating through the array to the first, then building a final returned value.

Parameter: Same as reduce. Demo: to reduce

Which array methods change the original array

unshift();

Push ();

shift();

pop();

sort();

reverse();

splice();

All seven array methods have been described above, and you can see that when you use these methods again, the original array will be changed.