Summary of js array methods (including ES6)

In daily use, most of the data requested are in array format and need to be processed using array methods. The main array methods are as follows:

Initial array for case demonstration:

 var arr = [1,2,3,4]

1. Add before: unshift('new element') adds an element at the beginning of the array, and the return value is the length of the new array.

 arr.unshift(5)
 console.log(arr)

2. Post-add: push('new element') adds an element at the end of the array and returns the length of the new array.

  arr.push('后增')
    console.log(arr)

3. Front deletion: shift() deletes the first element in the array and returns the deleted element

 var x = arr.shift()
    console.log(arr)
    console.log('删除：' + x)

4. Post-deletion: pop() deletes the last element of the array and returns the deleted element.

   arr.pop()
    console.log(arr)
    console.log('删除：'+ arr.pop())

5. Merge arrays: The concat() method creates a new array by merging (connecting) existing arrays, and returns a new array without changing the existing array.

 var arr = [1, 2, 3, 4]
    var arr2 = ['一', '二', '三']
    console.log(arr.concat(arr2))

6. join() concatenates each item of the array with specified characters to form a string. The default connection character is "," comma. The original array remains unchanged

 var arr = [1, 2, 3, 4]
    console.log(arr.join('/'))

7. reverse() , reverse the order of the array. The original array is changed.

  var arr = [1, 2, 3, 4]
    var arr2 = arr.reverse()
    console.log('原数组' + arr)
    console.log('倒序' + arr2)

8. Intercept slice('Parameter 1', 'Parameter 2') and receive two parameters as the index of the array. The first parameter represents the starting position and the second parameter represents the ending position. The intercepted array contains the element pointed to by parameter 1 and does not include the end position . If the second parameter is not specified, all elements from the starting position to the end will be intercepted. The parameter can be a negative number. If it is a negative number, it will be intercepted from the end to the first position . Returns a new array without changing the original array

  var arr = [1, 2, 3, 4]
    var arr2 = arr.slice(1)//从下标为1的元素截取至末尾元素
    var arr3 = arr.slice(0,2)//从下标为0的元素开始截取到下标为3的元素（不包含下标为3）
    var arr4 = arr.slice(-2)//从右向左截取
    console.log('原数组' + arr)
    console.log('一个参数' + arr2)
    console.log('二个参数' + arr3)
    console.log('参数为负数' + arr4)

9. forEch((parameter 1, parameter 2)=>{ }) traverses the array and traverses each item of the array. The parameter is a callback function

 var arr = [1, 2, 3, 4]
    var arr2 = []
    var arr3 = []
    arr.forEach((item, index) => {
        arr2.push(item)//回调参数一为数组的每一项元素
        arr3.push(index)//参数二为索引值
    })
    console.log(arr2)
    console.log(arr3)

10. map(()=>{}) traverses the array

mapThe method is used to execute a provided function on each element in the array and return a new array whose elements are the return values of the callback function.
mapEach element of the array is traversed, each element is passed to the callback function for processing, and the return value of the callback function is used as an element of the new array.
The callback function accepts three parameters: the currently traversed element, the currently traversed index, and the original array itself.
mapThe method does not modify the original array, but returns a new array containing the return value of the callback function.

const array = [1, 2, 3];
const newArray = array.map((element, index, array) => {
  return element * 2;
});
console.log(newArray); // 输出 [2, 4, 6]

11. filter(()=>{}) , filters the elements in the array that meet the conditions and returns a new array.

12. every(function) , judge each item in the array, and return true if they are consistent, otherwise return false.

13. some(function) , judges each item in the array, if it does not match, it returns false, otherwise it returns true.

14. indexOf() detects the position where the current value first appears in the array. Index parameter: array.indexOf(item,start) item: the element being searched for. start: the position in the string where the search begins. Return value: The index found for the first time. If not found, -1 is returned. Do not change the original array

15. includes() determines whether an array contains a specified value. Parameter: specified content. Return value: Boolean value. Whether the original array is changed: not changed.

ES6 partial methods

1. find(function)Method, used to find the first array member that meets the conditions. Return value: array element that meets the criteria, if there is no member that meets the criteria, it is returned undefined.

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

2. findIndex()The usage of the method find()is very similar to the method. It returns the position of the first array member that meets the conditions. If all members do not meet the conditions, it returns-1

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

3. flat() flattens the array. It can flatten the array. It accepts an integer parameter and specifies how many layers to flatten.

[1, 2, [3, [4, 5]]].flat()//默认拉平一层
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)//拉平2层嵌套
// [1, 2, 3, 4, 5]

The above is a personal summary of the basic and commonly used methods. Please criticize and correct any mistakes. It is not easy to organize. If you are satisfied with the content, please like it!

Summary of js array methods (including ES6)

Guess you like