Affect the original array: sort(), reverse(), push, pop, unshift, shift, splice, delete, fill, copyWithin
Does not affect the original array: filter, map, some, every, forEach, for... in, for... of, reduce & reducereight, find, finIndexOf, indexOf, lastIndexOf, flat, includes, from, slice, join, concat.
The writing method is relatively simple. Please refer to other articles of the author for some grammar
1.sort (sort - affect original array)
const arr = [4, 5, 7, 4, 3, 1, 6, 9, 2]
// Default ascending order
arr.sort() //Output [1, 2, 3, 4, 4, 5, 6, 7, 9]
// Descending order
arr.sort((a, b) => b - a) // Output [9, 7, 6, 5, 4, 4, 3, 2, 1]
// Specify the sorting of object attributes. Sort here with 'age'
const arrObj = [{ name: 'Si Cong', age: 38 }, { name: 'Bamboo shoot forest', age: 24 }, { name: 'Old cattle can eat grass', age: 18 }]
arrObj.sort(({ age: age1 }, { age: age2 }) => age1 - age2) // Output [{name: 'old cattle can eat grass', age: 18}, {name:' shoot a forest ', age: 24}, {name:' Sicong ', age: 38}]
// Disorder the array
arr.sort((a, b) => Math.random() - 0.5) // Output [4, 4, 5, 1, 6, 2, 7, 9, 3]
2. reverse (reverse - affect original array)
const arr = [4, 5, 7, 4, 3, 1, 6, 9, 2] const arr1 = ['q', 'w', 'e', 'r'] arr.reverse() //Output [2, 9, 6, 1, 3, 4, 7, 5, 4] arr1.reverse() // Output ['r ',' e ',' W ',' Q ']
3.push, pop, unshift, shift (add and delete the first row of the array)
// 1. push (add at the end of the array - affect the original array - return value)
let arr = ['little darling', 'Lily', 'Ma Rong']
arr.push('Little pig') // Output ['Gillian', 'Lily', 'Ma Rong', 'pig']
// With return value, return the length of the array and add elements at the same time
const re = arr.push('Edison')
console.log(re, arr) // Output 5 ['Gillian', 'Lily', 'Ma Rong', 'pig', 'Edison']
// 2. pop (delete the last element of the array - affect the original array - return value)
let arr1 = ['little darling', 'Lily', 'Ma Rong']
arr1.pop() // Output ['Gillian', 'Lily']
// If there is a return value, return the deleted element and delete the last element of the array
const pre = arr1.pop()
console.log(pre, arr1) // Output Lily ['Gillian']
// 3. unshift (adding the header of the array - affecting the original array - with return value)
let arr2 = ['little darling', 'Lily', 'Ma Rong']
arr2.unshift('Little pig') // Output ['little pig', 'Gillian', 'Lily', 'Ma Rong']
// With return value, return the length of the array and add elements at the same time
const ure = arr2.push('Edison')
console.log(ure, arr2) // Output 5 ['Edison', 'pig', 'Gillian', 'Lily', 'Ma Rong']
// 4. shift (delete the first row of the array - affect the original array - have a return value)
let arr3 = ['little darling', 'Lily', 'Ma Rong']
arr3.shift() // Output ['Lily', 'Ma Rong']
// If there is a return value, return the deleted element and delete the last element of the array
const sre = arr3.shift()
console.log(sre, arr3) // Output Lily ['Ma Rong']
4.filter (filter array - do not affect the original array - return a new array)
// Filter receives a callback function (callback (parameter 1, parameter 2, parameter 3)). The callback function needs return filter condition!!!
// Parameter 1: each item of the traversal array
// Parameter 2: index
// Parameter 3: array itself
const arr = ['5', 6, 2, 4, 'Who repaired the bus',]
const newArr = arr.filter((v, i, arr) => ~~v > 4)
console.log(newArr) //Output ['5', 6]
const newArr1 = arr.filter((v, i, arr) => {
console.log(v) // Output the value of each traversal
console.log(i) // Output current index
console.log(arr) // Output traversal array itself
return typeof v === 'string'
})
console.log(newArr1) //Output ['5', 'who fixes the bus']
// Use filter to remove duplicate
const arr = [1, 1, 3, 4, 4, '1', '1', 3, 4]
const newArr 2 = arr.filter((v, i) => arr.indexOf(v) === i) //Output [1, 3, 4, '1']
⭐ ️ 5. map (map a new array - do not affect the original array - return a new array)
// map receives a callback function (callback (parameter 1, parameter 2, parameter 3)), which must return the operated element
const arr = [1, 2, 3]
newArr = arr.map((v, i) => v + i) //Output [1, 3, 5]
const arr1 = [{ name: 'Sanli', age: '18' }, { name: 'Allen', age: '18' }]
const newArrr1 = arr1.map((v, i, arr) => ({...v, address: 'Maria's wall'}))
// Output [{name: 'Sanli', age: '18', address: 'Maria's wall'}, {name: 'Allen', age: '18', address: 'Maria's wall'}]
⭐ ️ 6. some (find array - do not affect the original array - return Boolean)
// some will exit immediately after finding the first value that meets the condition, and will not loop back // If found, return true, otherwise return false. It also accepts three parameters, just like filter const arr = [1, 3, 5, 7, 9] const B = arr.some((v, i, arr) => v > 5) // Output true const Bo = arr.some((v, i, arr) => v > 9) // Output false
7. every (find array - do not affect the original array - return Boolean value)
// every lookup array has only the elements in the array
// true is returned only when all conditions are met, otherwise false is returned. If an element does not meet the conditions, it immediately jumps out of the loop and accepts three parameters, just like filter
const arr = [1, 2, 3, 4, 5, 'string', 6]
let B = arr.every((v, i, arr) => v + 1 > 0) //Output true
B = arr.every((v, i, arr) => typeof v === 'number') //Output false
B = arr.every((v, i, arr) => typeof v === 'number' || 'string') //Output true
⭐ ️ 8. forEach (traversing the array - does not affect the original array - no return value)
// forEach traverses the array, directly operates on the array, and receives a callback function (callback (parameter 1, parameter 2, parameter 3))
const arr = [1, 2, 3, 4, 5, 6]
arr.forEach((v, i, arr) => {
arr[i] = v + 1
// console.log(v) / / output the value of each traversal
// console.log(i) / / output the current index
//console.log(arr) / / output traversal array itself
})
console.log(arr) //Output [2, 3, 4, 5, 6, 7]
9. for... in (traversing the array | object - does not affect the original array - no return value)
// for...in traverses the index value or key name of (array | object)
const arr = [1, 2, 3, 4, 5, 6]
const obj = { name: 'Timo', address: 'yodel ', sex: '0 | 1'}
// Array usage output index
for (let i in arr) {
console.log(i) // Output each index value of arr
}
// Object usage output key name
for (let v in obj) {
console.log(obj[v]) // Output timoyodel 0 | 1
}
⭐ ️ 10. for... of (traversing the array | object - does not affect the original array - no return value)
const arr = [{name: 'Timo', address: 'yodel '}, {name: 'Galen', address: 'Demacia'}]
// Array usage output value
for (let i of arr) {
console.log(i) // Output each value of arr
}
⭐️ // Use for Of get index value
for (let [i, v] in obj.entries()) {
console.log(i) // Output index value
console.log(v) // Output each value
}
⭐ ️ 11. Reduce & reducereight (accumulator - does not affect the original array - returns a new array)
// The reduce accumulator receives two parameters. The first parameter is the callback function (parameter 1-initialization value, parameter 2-value, parameter 3-index, parameter 4-array itself). The second parameter is the initialization value (if it is not transmitted, the initialization value is the first item of the array)
// General usage
const arr = [1, 2, 3, 4, 5]
const number = arr.reduce((h, v, i, arr) => h + ~~v ) // Output 15
const number1 = arr.reduce((h, v, i, arr) => h + ~~v, 2 ) // Output 17
// Initialization value usage
const arr = [
{name: 'Timo', height: 121, age: 11, job: 'Poison master'},
{name: 'Rambo', height: 125, age: 18, job: 'Arsonist'}
] // Add up all the height and age in the arr and return the object of height and age
const obj = arr.reduce((obj, v, i, arr) => {
console.log(v.name) // Output timorambo
obj.height = ~~obj.height + ~~v.height
obj.age = ~~obj.age + ~~v.age
return obj
}, { height: 0, age: 0})
console.log(obj) // Output {height: 246, age: 29}
// reduceRight is the same as' reduce ', except that' reduceRight 'is accumulated from back to front
⭐ ️ 12. find (query array - does not affect the original array - returns the queried value)
// The find query array returns the first element found and ends the loop. If it is not found, it returns undefined
// The return query condition is required to receive a callback function (callback (parameter 1, parameter 2, parameter 3))
const arr = [
{name: 'Timo', height: 121, age: 11, job: 'Poison master'},
{name: 'Rambo', height: 125, age: 18, job: 'Arsonist'}
]
const value = arr.find((v, i, arr) => v.job === 'Arsonist')
console.log(value) // Output {name: 'Rambo', height: 125, age: 18, job: 'arsonist'}
const value1 = arr.find((v, i, arr) => v.job === 'Arsonist' && i === 2)
console.log(value1) // Output undefined
13. findIndex (query array - do not affect the original array - return the index value queried)
// The findIndex query array returns the index value that meets the criteria and ends the loop // The return query condition is not found for returning - 1 to receive a callback function (callback (parameter 1, parameter 2, parameter 3)) const arr = [1, 5, 6, 7, 9, 3] const index = arr.findIndex((v, i, arr) => v === 6) console.log(index) // Output 2 const index1 = arr.findIndex((v, i, arr) => v === 2) console.log(index1) // Output - 1
14. indexOf (query array - do not affect the original array - return the queried index value)
// The indexOf query array returns the index value that meets the criteria, and ends the cycle. If it is not found, it returns - 1 // Receive two parameters (parameter 1 - the element to find, parameter 2 - where to start the query (index value)) const arr = [1, 5, 6, 7, 9, 3] const index = arr.indexOf(6) console.log(index) // Output 2 const index1 = arr.indexOf(6, 3) console.log(index1) // Output - 1
15. lastIndexOf (query array - do not affect the original array - return the queried index value)
// The usages of lastIndexOf and 'indexOf' are the same, except that 'lastIndexOf' searches from back to front
⭐ ️ 16. flat (flattened array - does not affect the original array - returns the flattened array)
This method requires that the browser is compatible with IE browser and does not support chrome. It requires 69 or above to support it. Other methods can be used
// flat flattens the array. You can pass in a parameter as the number of layers to flatten. If you pass in 'Infinity', it means that no matter how many layers are flattened into one layer const arr = [1, [1,2,3,[4,5,6]], 6, 7, 9, 3] // 3D array const newArr1 = arr.flat(1) console.log(newArr1) // Output [1, 1, 2, 3, [4, 5, 6, [7, 8, 9], 6] const newArr2 = arr.flat(2) console.log(newArr2) // Output [1, 1, 2, 3, 4, 5, 6, [7, 8, 9], 6] const newArr3 = arr.flat(Infinity) console.log(newArr3) // Output [1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 6]
⭐ ️ 17. includes (array query - does not affect the original array - returns a Boolean value)
// The includes query array returns a Boolean value and receives two parameters (parameter 1 - the element to find, parameter 2 - where to start the query (index value)) const arr = [1, 5, 6, 7, 9, 3] const value = arr.includes(6) // Output true const value1 = arr.includes(6, 3) // Output false
18. from (convert class array to true array)
// from converts a class array with length
//Three parameters can be passed in (converted array - parameter 1, each value of the converted array - parameter 3, and this - parameter 3 of mapping parameter 2)
const arr = Array.from('abc') // Output [a, b, c]
const arr1 = Array.from([1,2,3],v => v + 1) // Output [2,3,4]
// De duplication with Set and from
const arr2 = Array.from(new Set([1,2,1,2,3,4,5,3,5,4])) // Output [1, 2, 3, 4, 5]
const arr3 = [...new Set([1,2,1,2,3,4,5,3,5,4])] // Output [1, 2, 3, 4, 5]
⭐ ️ 19. slice (intercepted array - does not affect the original array - returns the intercepted array)
// slice intercept array // Two parameters can be passed in (start interception position - parameter 1, end interception position - parameter 2). If no parameters are passed in, the original array will be copied const arr = [1,2,3,4,5] const arr1 = arr.slice() //Output [1,2,3,4,5] const arr2 = arr.slice(2,4) // Intercept from the element with index value 2 to the element with index value 4 (excluding the element with index value 4) / / output [3, 4]
⭐ ️ 20. splice (delete array element - affect original array)
// splice intercepts the original array with three parameters (the index position to be deleted - parameter 1, the number of deleted - parameter 2, and the value added after deletion) const arr = ['Timo', 'Kailan', 'Rambo'] arr.splice(1) // If only one parameter is passed, all elements following parameter 1 will be deleted. / / output ['Timo'] arr.splice(1,2,'Tristana') // Delete the element with the index value of 1 (including the index value). Delete two bits and fill in parameter 3. / / output ['Timo', 'Tristana']
⭐ ️ 21. join (array to string - does not affect the original array - returns the converted String)
// From join array to string, you can pass in a string parameter. How is the array divided
const arr = ['office worker', 'Working soul', 'Working can be a good person']
const arr1 = arr.join('ah') // Output 'working people, working soul, working can be a master'
const arr2 = arr.join('¥ ') // Export workers ¥ working soul ¥ working can be a person
22. split (string to array - does not affect object - returns array)
// split array to string can pass in a string parameter - the segmentation basis of string to array
const arr = 'Working people, working soul, working can be a man'
const arr1 = arr.split('ah') // Output ['worker', 'worker's soul', 'worker can be a master']
const arr2 = arr.join('¥') // Output ['working people, working soul, working can be a master']
23. concat (spliced array - can be used for shallow copy of array - extension operator is recommended)
// concat splicing array can pass in multiple splicing parameters const arr = [1,2,3] const arr1 = [4,5,6] const arr3 = arr.concat(arr1,[7,8,9]) // Output [1, 2, 3, 4, 5, 6, 7, 8, 9] // Extension operator const arr4 = [...arr,...arr1] // Output [1, 2, 3, 4, 5, 6]
24. delete (delete element value - position after deletion - value is undefined)
const arr = [1, 2, 3, 4] delete arr[1] // Delete the value with arr index 1. Do not delete the location console.log(arr[1]) // Output undefined
25. fill (fill array - affect original array)
// Fill receives three parameters fill (fill value, fill start position and fill end position). If the start position or end position value is negative, it means counting from the end to the front const arr = [1, 2, 3, 4] arr.fill(6) // [6, 6, 6, 6] arr.fill(6, 1) // [1, 6, 6, 6] arr.fill(6, -1) // [6, 6, 6, 4] arr.fill(6, 1, -1) // [1, 6, 6, 4]
26. copyWithin (replace element - affect original array)
// copyWithin has three parameters. copyWithin (the position to start replacement, the position to start intercepting elements, and the position to end intercepting elements) will replace the intercepted elements from the position of the parameter. If the second or third parameter is negative, it will be from back to front let arr = [1,2,3,4,5,6]; // Intercept from index 3 to index 5 (excluding 5) (intercept to [4,5]) and then replace [4,5] from index 1 arr.copyWithin(1,3,5); console.log(arr); // Output [1, 4, 5, 4, 5, 6]
new Array (used to create an array)
const arr = new Array arr[0] = 1 console.log(arr) // Output [1]
Length (get length - truncate array)
const arr = [1,1,4,5,6,7,32,3] console.log(arr.length) // 8 arr.length = 4 // [ 1, 1, 4, 5 ] // Defining an element that exceeds the length of the array will also be redefined arr[99] = 8 console.log(arr.length) // 100
Extension operator (...), deconstruction of array
// Extended operator Used to expand an array const arr = [1,2,3] console.log(...arr) // 1 2 3 // Shallow copy const arr1 = [...arr] arr1[0] = 4 console.log(arr) // [1,2,3] //Splice array const arr2 = [...arr,...arr1,9] // [ 1, 2, 3, 4, 2, 3, 9 ] // Array structure const [a,b,c] = arr console.log(a,b,c) // 1 2 3 // Set defaults const [d,e,f,g = 4] =arr console.log(d,e,f,g) // 1 2 3 4 // const [h,i,j,k] =arr console.log(h,i,j,k) // 1 2 3 undefined