Interpretation of Javascript array Array method_Basic knowledge

Continuing from the previous article "Basic Introduction to Javascript Array Array", this article introduces all methods of Array in detail.

All array methods are defined on Array.prototype, and Array.prototype itself is also an array.

array.concat()

Shallow copy of the current array and append the received parameters to the end of the new array. The original array is unchanged.

Grammar

array.concat(value1, value2, ..., valueN)
The parameter is an array or non-array value that needs to be merged

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

You can combine array or non-array values, but be aware that if you include an object, the object still refers to the original object.

array.join()

Returns a string concatenated with all elements of the array using delimiters. The default delimiter is comma.

Grammar

array.join(seperator)
The parameter is the separator

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

When assembling a large number of string fragments, the join method is faster than the +element operator.

Using new Array(3) will generate an empty array with a length of three, and combined with the join() method, you can repeat a certain string.

var str = new Array(3).join('-+'); // -+-+

The number of repetitions is the length of the array minus one, because the string is the delimiter.

Since the array itself is an object, it has the toString() method, which can also be used to splice the array into a string, but the separator can only be a comma.

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

In fact, it will first call the toString() method of each element.

array.push()

Append one or more parameters to the end of the array and return the array length. Change the array itself.

Grammar

array.push(value1, value2, ..., valueN);
Example

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

Another method can also be implemented to insert values ​​at the end of the array.

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

Delete the last item in the array and return the deleted item. Change the array itself.

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

If the array is empty, return undefined.

array.unshift()

Insert one or more parameters into the head of the array and return the array length. Change the array itself.

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

Delete the first item of the array and return the deleted item. Change the array itself.

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

If the array is empty, return undefined.

array.sort()

This method sorts according to the value returned by the toString() method of each element, so the expected results are generally not obtained.

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

But the sort() method can receive a custom function for comparison. The comparison function accepts two parameters, especially sort() which defaults to ascending order, so if you want the first parameter to be in front of the second parameter, you must return a negative number, if equal, return 0, and if it is behind, return a positive number.

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

Comparing strings can be used in conjunction with the string.localeCompare() method.

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F'] 

array.reverse()

Reverse the order of array elements and return the array itself.

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

Shallow copy a section of the array without changing the array itself.

array.slice(start, end);
The method accepts two parameters, the last one can be omitted, and the default is the length of the array itself.

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

If a negative number is passed in, the length of the array will be automatically added to try to become a non-negative number.
Passing in a value whose absolute value is less than the length of the array means taking the number of negative absolute value elements from back to front. For example, the last three elements are taken in the example.

array.splice()

This is the most powerful and commonly used method in arrays. It can achieve deletion, insertion, and replacement.

Grammar

array.slice(start, count, item);
This method removes one or more elements and replaces them with new elements. start is the starting position, count is the number of deletions, item is the newly added element (there is more than one item and can be omitted), and the deleted elements are returned in the form of an array.

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

The following introduces some new methods of ECMAScript5, mainly because ie8 does not support them.

indexOf() and lastIndexOf()

Find the index position of the corresponding item in the array. The second parameter indicates the starting position of the corresponding search direction. Return the first matching position. If not found, return -1;
indexOf() searches from front to back, and lastIndexOf() searches from back to front.

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

Iterative method

The following method accepts two parameters, the first is the function to run for each item, and the second is the scope in which the function runs.
The running function has three parameters, namely the current item, the position, and the array itself.

array.every()

Run the given function, and if each item of the iteration returns true, it will eventually return true.

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数，如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数，将迭代中返回的值组成数组，返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数，将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数，不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数，第一个参数是每一个运行的自定义函数，第二项是作为归并基础的初始值。
自定义函数接受四个参数，分别是前一项，当前项，位置，数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题，下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。