At the forefront of
Everybody is good! My name is Vially, and I am a front-end engineer who has just started my career. On the premise of improving my learning ability and making friends with front-end engineers, I plan to publish an article about the methods of common operation array. As I have limited ability, I may organize it simply, but I will try my best to write it well.
One of the methods to manipulate arrays is ——-concat
The concat method creates a new array consisting of elements from the called object, each argument in the order of the elements of the argument (if the argument is an array) or the argument itself (if the argument is not an array). It does not recurse into nested array parameters. The concat method does not alter this or any of the arrays supplied as arguments, but returns a shallow copy containing a copy of the same elements combined with the original array.
var arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
var newArr = arr.concat()
console.log(newArr)
//[' Hou Yi ', 'Irene ',' Li Yuanfang ', 'Yu Ji ']
var newArrOne = arr.concat(Dee Renjie."Sun Shangxiang"."Genghis Khan.")
console.log(newArrOne)
//[' Hou Yi ', 'Irene ',' Li Yuanfang ', 'Yu Ji ',' Di Renjie ', 'Sun Shangxiang ',' Genghis Khan ']
var newArrTwo = arr.concat([Dee Renjie."Sun Shangxiang"."Genghis Khan."])
console.log(newArrTwo)
//[' Hou Yi ', 'Irene ',' Li Yuanfang ', 'Yu Ji ',' Di Renjie ', 'Sun Shangxiang ',' Genghis Khan ']
var newArrThree = arr.concat([Dee Renjie."Sun Shangxiang"."Genghis Khan."["Gongsun Li"."Huang zhong"."Lu Ban No.7"]])
console.log(newArrThree)
/ / [' yi ', 'Irene', 'Li Yuanfang', 'concubine', 'production', 'sun shangxiang, genghis khan, Array (3)]
Copy the codeThe second method for manipulating arrays is ——pop
The POP method removes an array and returns the last element. The POP method is intentionally generic. This method, when used with call() or apply(), can be applied to array-like objects. The POP method determines the position of the last element based on the length attribute. If the length attribute is not included or cannot be converted to a value, length is set to 0 and undefined is returned.
If you call pop() on an empty array, it returns undefined.
var arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
arr.pop()
console.log(arr)
//[' Houyi ', 'Irene ',' Li Yuanfang ']
arr.pop()
console.log(arr)
//[' Houyi ', 'Irene ']
Copy the codeThe third method for manipulating arrays is ——shift
The shift method removes the element whose index is 0 (that is, the first element) and returns the removed element, with the index value of the other elements reduced by 1. If the length attribute has a value of 0 (length 0), undefined is returned.
The Shift method is not limited to arrays: it can be applied to array-like objects through call or apply. But it might not make sense to call this method for objects that do not have a length attribute, the last in a series of consecutive numeric attributes starting at 0.
Array.prototype.pop() has similar behavior to shift, but applies to the last element of the Array.
var arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
arr.shift()
console.log(arr)
//[' Eilen ', 'Li Yuanfang ',' Yu Ji ']
arr.shift()
console.log(arr)
//[' Li Yuanfang ', 'Yu Ji ']
arr.shift()
console.log(arr)
/ / / 'concubine'
Copy the codeThe four methods of manipulating arrays are ——unshift
The unshift method inserts the given argument at the beginning of the array-like object on which it is called.
Unshift is purposely designed to be universal; This method can be applied to an array-like object using either the Call or apply methods. However, it might not make sense to call this method for objects that do not have the length attribute, which represents the last of a series of consecutive numeric attributes starting at 0.
let arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
arr.unshift(Dee Renjie); // the new array length is 5
console.log(arr)
// [' Di Renjie ', 'Houyi ',' Irene ', 'Li Yuanfang ',' Yu Ji ']
arr.unshift("Sun Shangxiang"."Genghis Khan."); // the new array length is 7
console.log(arr)
/ / [' sun shangxiang, genghis khan, the 'production', 'his',' Irene ', 'Li Yuanfang', 'concubine]
arr.unshift(["Gongsun Li"."Huang zhong"."Lu Ban No.7"]); // the new array length is 10
console.log(arr)
/ / [Array (3), 'sun shangxiang, "genghis khan", "production", "hou yi", "Irene,' Li Yuanfang ', 'concubine]
Copy the codeThe fifth method of manipulating arrays is ——push
The push method appends the value to the array.
Push method has universality. This method, when used with call() or apply(), can be applied to array-like objects. The push method uses the length attribute to decide where to start inserting a given value. If length cannot be converted to a numeric value, the index of the inserted element is 0, including if length does not exist. Length will be created when it does not exist.
let arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
arr.push("Genghis Khan.")
console.log(arr)
//[' Houyi ', 'Irene ',' Li Yuanfang ', 'Yu Ji ',' Genghis Khan ']
arr.push("Gongsun Li")
console.log(arr)
//[' Hou Yi ', 'Irene ',' Li Yuanfang ', 'Yu Ji ',' Genghis Khan ', 'Gongsun Li ']
arr.push(["Huang zhong"."Lu Ban No.7"])
console.log(arr)
/ / [' yi ', 'Irene', 'Li Yuanfang', 'concubine', 'genghis khan', 'the sun', Array (2)]
Copy the codeMethods of manipulating arrays ——sort
The sort() method sorts the elements of an array using an in-place algorithm and returns the array. The default sort order is built when converting elements to strings and then comparing their UTF-16 code unit value sequences
Because it is implementation-dependent, the temporal and spatial complexity of sorting cannot be guaranteed.
var arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
arr.sort()
console.log(arr.sort())
//[' Hou Yi ', 'Li Yuanfang ',' Irene ', 'Yu Ji ']
var arr = [50.70.40.60]
arr.sort(function (a,b) {
return a-b
})
console.log(arr)
/ / [40, 50, 60, 70]
arr.sort(function (a,b) {
return b-a
})
console.log(arr)
/ / [40] 70, 60, 50,
Copy the codeThe seventh method for manipulating arrays is ——toString
The toString() method returns the string form of the specified object.
console.log([10.20.30].toString())
//10,20,30
console.log(['cherry'.'apple'.'banana'].toString())
//cherry,apple,banana
console.log([10.20[60.70]].toString())
/ / 10,20,60,70
console.log([10[30.60[80.90]].toString())
/ / 10,30,60,80,90
Copy the code——indexOf
The indexOf() method returns the first index in the array where a given element can be found, or -1 if none exists.
var array = [10.20.30.40];
console.log(array.indexOf(20))/ / 1
console.log(array.indexOf(50));// -1
console.log(array.indexOf(30.10));// -1
console.log(array.indexOf(20, -2)); // -1
console.log(array.indexOf(20, -3)); / / 1
Copy the codeThe ninth method for manipulating arrays is ——fill
The fill method takes three arguments, value, and the optional end. Start and end arguments default to 0 and the value of the length attribute of this object, respectively.
If start is negative, the start index is automatically evaluated as length+start, where length is the value of the length attribute of this object. If end is negative, the end index is automatically evaluated as length+end.
The fill method is intentionally generic and does not require this to be an array object.
The fill method is a mutable method that changes the this object on which it was called, and then returns it instead of returning a copy.
When an object is passed to the **fill** method, the array is filled with a reference to the object.
[1.2.3].fill(4); / / (4, 4, 4]
[1.2.3].fill(4.1); / / [1, 4, 4]
[1.2.3].fill(4.1.2); / / [1, 4, 3)
[1.2.3].fill(4.1.1); / / [1, 2, 3]
[1.2.3].fill(4.3.3); / / [1, 2, 3]
[1.2.3].fill(4, -3, -2); / / [4, 2, 3]
[1.2.3].fill(4.NaN.NaN); / / [1, 2, 3]
[1.2.3].fill(4.3.5); / / [1, 2, 3]
Array(3).fill(4); / / (4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
// Objects by reference.
var arr = Array(3).fill({}) / / / {}, {}, {};
// Note that if fill takes a reference type, it will result in a single reference type being executed
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
Copy the codeThe tenth method of manipulating arrays ——find
The find method executes a callback function on each element in the array until a callback returns true. When such an element is found, the method immediately returns the value of the element, otherwise undefined. Note that the callback function is called for every index in the array from 0 to Length-1, not just the assigned indexes, which means that this method is less efficient for sparse arrays than methods that traverse only the indexes with values.
The callback function takes three parameters: the value of the current element, the index of the current element, and the array itself.
If thisArg is provided, it will be this for each callback, if not, undefined will be used.
The find method does not change the array.
The index range of the element is determined the first time the callback function is called, so new elements added to the array after the find method starts executing will not be accessed by the callback function. If the value of an element in the array that has not been accessed by the callback function is changed by the callback function, then the value will be the current value accessed by the callback function based on its index in the array. The deleted element is still accessed, but its value is undefined.
var arr = [1.2.3.4.5.6.7.8.9]
var result = arr.find(function (value) {
return value > 6
})
console.log(result)
/ / 7
Copy the codeMethods of manipulating arrays: ——filter
The filter() method creates a new array containing all the elements of the test implemented through the provided function.
var arr = [6.12.7.1.9.3.0.19]
var new_arr = arr.filter(function (value) {
return value < 6
})
console.log(new_arr)
/ / [1, 3, 0]
var arr = [6.12.7.1.9.3.0.19]
var new_arr = arr.filter(function (value,index) {
return index % 2= = =0
})
console.log(new_arr)
/ / [6, 7, 9, 0]
Copy the codeOperation array method twelve ——every
The every() method tests whether all elements in an array pass the test of a given function. It returns a Boolean value.
var arr = [11.22.33.44.55.66.77.88]
var result = arr.every(function (value) {
return value < 50
})
console.log(result)
//true
Copy the codeArray manipulation method thirteen ——forEach
The forEach() method performs the given function once on each element of the array.
var arr = [10.20.30.40.50.60]
arr.forEach(function (value,index,arr) {
arr[index] = value + 6
})
console.log(arr)
//[16, 26, 36, 46, 56, 66]
var arr = [10.20.30.40.50.60]
var sum = 0
arr.forEach(function(value) {
sum +=value
})
console.log(sum)
/ / 210
Copy the code——join
The join() method joins all the elements of an array (or an array-like object) into a string and returns the string. If the array has only one item, that item is returned without a delimiter.
var arr = [1.2.3.4]
arr.join()
console.log(arr)
// [1, 2, 3, 4]
arr.join(The '-')
console.log(arr.join())
/ / 1, 2, 3, 4
console.log(arr.join(The '-'))
/ / the 1-2-3-4
Copy the codeOperation array method 15 ——map
The map method calls the callback function once, in order, for each element in the array. The return values (including undefined) from each callback are combined to form a new array. Callback is called only on indexes that have values; Indexes that have never been assigned a value or deleted with delete are not called.
Since a map generates a new array, using a map when you don’t intend to use the returned array is against the design. Use forEach or for-of instead. You should not use map: A) you do not intend to use the new array returned, or/and B) you do not return A value from A callback function.
The callback function is automatically passed three parameters: the array element, the element index, and the original array itself.
If thisArg is supplied to map, it will be used as the this value of the callback. Otherwise, undefined will be used as this for the callback function. The final observable value of this relative to the callback function is determined by the usual rules for determining the this seen by a function
The map does not modify the array that calls it (although it can change the array when the callback executes).
The scope of the map method’s handling of array elements is determined before the callback method is first called. The array elements appended after the map method is called are not accessed by the callback. If an existing array element changes, the value passed to the callback is the value at which the map accessed the element. The element cannot be accessed if it is deleted after the map function is called but before it is accessed.
According to the algorithm defined in the specification, if the array called by map is discrete, the new array will also be discrete, leaving the same index empty.
var arr = [1.2.3.4.5]
var new_arr = arr.map(function(value) {
return value * value
})
console.log(new_arr)
//[1, 4, 9, 16, 25]
Copy the codeMethods of manipulating arrays 16 ——reduce
The reduce() method performs a reducer function (in ascending order) that you provide on each element in the array, summarizing its results into a single return value.
var arr = [10.20.30.40.50.60]
var result = arr.reduce(function(x,y) {
return x*y
})
console.log(result)
/ / 720000000
var arr = [10.11.12.13.14]
var result = arr.reduce(function (x,y) {
return x+y
},20)
console.log(result)
/ / 80
Copy the codeOperation array method 17 ——reverse
The reverse() method reverses the position of the elements in the array and returns the array. The first element of the array becomes the last, and the last element of the array becomes the first. This method changes the original array.
var arr = [54.78.12.64]
arr.reverse()
console.log(arr)
/ / [64, 12, 78, 54]
Copy the codeMethod of manipulating arrays 18 ——findIndex
The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.
var result = [3.4.10.8.9.0].findIndex(function (value) {
return value > 9
})
console.log(result)
/ / 2
Copy the codeManipulation of array methods 19 ——includes
The includes() method is used to determine whether an array contains a specified value, returning true if it does and false otherwise.
var arr = ["Hou yi"."Irene"."Li Yuanfang"."Concubine"]
var result = arr.includes('Li Yuanfang')
console.log(result)
//true
var arr = ['chery'.'banana'.'apple'.'watermelon']
var result = arr.includes('banana'.2)
console.log(result)
//false
Copy the codeOperating array methods twenty ——slice
The slice() method returns a new array object that is a shallow copy (including begin, but not end) of the array determined by begin and end. The original array will not be changed.
var arr = [1.2.3.4.5.6.7.8.9]
arr.slice(1.3)
console.log(arr.slice(1.3))
/ / [2, 3]
arr.slice(3)
console.log(arr.slice(3))
//[4, 5, 6, 7, 8, 9]
arr.slice(4, -1)
console.log(arr.slice(4, -1))
/ / [5, 6, 7, 8]
arr.slice(-3)
console.log(arr.slice(-3))
/ / [7, 8, 9]
arr.slice(-3, -2)
console.log(arr.slice(-3, -2))
/ / [7]
Copy the codeMethods of manipulating arrays: twenty-one ——splice
The splice() method modifies an array by deleting or replacing existing elements or adding new ones in place, and returns the modified contents as an array. This method changes the original array.
var arr = [1.2.3.4.5.6.7]
arr = arr.splice(4)
console.log(arr)
/ / [5, 6, 7)
arr = arr.splice(1.2)
console.log(arr)
/ / [6, 7)
arr = arr.splice(1.0.'new1'.'new2')
console.log(arr)
/ / []
Copy the codeOperating array methods 22 ——some
The some() method tests that at least one element in the array passes the provided function test. It returns a Boolean value.
var arr = [3.8.9.45.12]
var resule = arr.some(function (value) {
return value === 12
})
consoleThe log (resule)//true
var arr = [3.8.9.45.66]
var resule = arr.some(function (value) {
return value === 12
})
console.log(resule)
//false
Copy the codeconclusion
There are many ways to operate arrays. The above 20 methods are sorted out by myself. If there are any mistakes, I will correct them in time.