For detailed study, please see:
The vue array manipulation method
JavaScript Array object reference manual
-
Method: Modifying the original array triggers a view update
push() 、 pop()、shift()、unshift()、 splice() 、sort()、 reverse()、 join()
-
Return New Array, Replace Array: The original array is not altered, but a new array is always returned
filter()、concat() 、 slice()、 map()
The .filter() method
filter creates a new array with elements that meet the specified criteria.
The filter method does not alter the original array and does not detect empty arrays.
Example:
const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr) // [32, 33, 16, 40]
console.log(arr1) // [32, 33, 40] The .map() method
The map() method returns a new array with elements that are the values processed by the original array elements after the function was called.
The map() method processes the elements sequentially in the order of the original array elements.
The filter method does not alter the original array and does not detect empty arrays.
Example:
const arr= [4, 9, 16, 25];
const arr1 = arr.map(item => item+2)
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [6, 11, 18, 27] 【 .forEach() method
The forEach() method is used to call each element of the array and pass the elements to the callback function.
Note: forEach() does not execute callback functions for empty arrays.
Tips: Break (error report) and return (cannot end loop) are not supported in tips: forEach(), regular for loops can be used when needed.
const arr= [4, 9, 16, 25];
const arr1 = [];
arr.forEach(item => arr1.push(item))
console.log(arr) // [4, 9, 16, 25]
console.log(arr1) // [4, 9, 16, 25] Method: Merge arrays
Example:
// 数组直接和参数合并
const array = ['a','b','e'];
console.log(array.concat('h','i')); // "a", "b", "e", "h", "i"
// 2个数组合并
const array = ['a','b','e'];
const b = ['c','d']
console.log(array.concat(b)); // a b e c d
// 3个数组合并
const array = ['a','b','e'];
const b = ['c','d'];
const c = ['f','g'];
console.log(array.concat(c,b)); // "a", "b", "e", "f", "g", "c", "d" 【 .push() method
push adds one element to the end of the array, and can add more than one at a time
Example:
const array = ['a','b','c'];
array.push('d');
console.log(array); // a b c d
array.push('e','f','g');
console.log(array); // a b c d e f g The .join() method
The join() method is used to put all the elements in the array into a string.
Elements are separated by a specified delimiter.
const array = ['a','b','e'];
console.log(array.join('-')); // a-b-e The .pop() method
pop deletes an element at the end of the array
Example:
const array = ['a','b','c','d'];
array.pop();
console.log(array); // a b c 【 .shift() method
shift deletes the first element
Example:
const array = ['a','b','c','d'];
array.shift();
console.log(array); // b c d 【 .unshift() method
unshift adds one element or more to the head of the array
Example:
const array = ['c','d'];
array.unshift('b');
console.log(array); // b c d
array.unshift('e','a');
console.log(array); // e a b c d Method: Set the element based on the index
splice deletes, inserts, or replaces elements. Syntax: this.arr.splice(index, num, value);
Example:
// 删除 index=1的1个元素
const array = ['a','b','c','d'];
array.splice(1, 1)
console.log(array); // a c d
// 插入 在index=1后插入e
const array = ['a','b','c','d'];
array.splice(1, 0, 'e')
console.log(array); // a e b c d
// 替换 index=1的1个元素
const array = ['a','b','c','d'];
array.splice(1, 1, 'e')
console.log(array); // a e c d $set method: Delete, insert, or replace elements.
Syntax: arr.$set(index, num, value); Same syntax as splice().
The .sort() method
Sort the array
Example:
const array = ['a','c','b','d'];
array.sort();
console.log(array); // "a", "b", "c", "d" The .reverse() method
Reverse array inversion
Example:
const array = ['a','c','b','d'];
array.reverse();
console.log(array); // "d", "b", "c", "a" 【 .slice() 】 Method: Returns the selected element from an existing array.
Syntax: arr.slice(start,end);
The two parameters are: the start and end positions of the item to be returned.
- parameter:
start required. Specify where to start. If it is a negative number, then it specifies the position from the end of the array. That is, -1 refers to the last element, -2 refers to the penultimate element, and so on.
end is optional. Specifies where to end the selection. This parameter is the array subscript at the end of the array fragment. If this parameter is not specified, the split array contains all the elements from start to the end of the array. If this parameter is negative, then it specifies the elements starting from the end of the array.
-
The return value
Returns a new array containing elements from the arrayObject from start to end (excluding the element).
-
illustrate
Note that the method does not modify the array, but returns a subarray.
When only one argument is passed to slice(), the method returns all items starting at the position specified by that parameter and ending at the end of the current array.
Example:
const array = ['a','b','c','d'];
console.log(array.slice(1,3)); // b c
console.log(array.slice(1)); // b c d
console.log(array.slice(-3)); // b c d
console.log(array.slice(-1)); // d The .find() method
find returns the first array element that meets the requirements,
When the find method is used, each element in the array executes the function in find:
- When the elements in the array satisfy the function condition, true is returned, find() returns the required value of the array element, and the subsequent value does not call the execution function.
- When an array element does not satisfy the function condition in find, undefined is returned.
note:
find() For empty arrays, the function is not executed. find() does not change the original value of the array.
Example:
const arr= [4, 9, 16, 25];
const b = arr.find(item => item>10)
const c = arr.find(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 16
console.log(c) // undefined The .findIndex() method
findIndex returns an array element subscript that meets the function's criteria, and an empty array is not executed.
The findIndex() method returns the position of the first element of the array that is passed in a test condition (function) that meets the criteria.
The findIndex() method calls the function execution once for each element in the array:
- When an element in an array returns true when testing a condition, findIndex() returns the index position of the element that meets the criteria, and the subsequent value does not call the execution function.
- Returns -1 if no element meets the criteria
note:
findIndex() For empty arrays, functions are not executed. findIndex() does not alter the original value of the array.
Example:
const arr= [4, 9, 16, 25];
const b = arr.findIndex(item => item>10)
const c = arr.findIndex(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // 2
console.log(c) // -1 【 .some() method
The some method detects whether the elements in the array meet the specified conditions (provided by the function).
The some() method executes each element of the array in turn:
- If one element satisfies the condition, the expression returns true, and the remaining elements are no longer instrumented.
- If there are no elements that satisfy the condition, false is returned.
note:
some() does not detect empty arrays. Empty arrays are not executed. some() does not alter the original array.
Example:
const arr= [4, 9, 16, 25];
const b = arr.some(item => item>10)
const c = arr.some(item => item<1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // true
console.log(c) // false 【 .every() method
every detects whether the elements in the array all meet the condition, and if there is one that does not meet the condition, false is returned, and the empty array is not executed.
The every() method is used to detect whether all elements of an array meet the specified criteria (provided by a function).
The every() method detects all elements in the array using the specified function:
- If one element is detected in the array that is not satisfied, the entire expression returns false and the remaining elements are no longer detected.
- Returns true if all elements satisfy the condition.
note:
every() does not detect empty arrays. every() does not alter the original array.
const arr= [4, 9, 16, 25];
const b = arr.every(item => item>10)
const c = arr.every(item => item>1)
console.log(arr) // [4, 9, 16, 25]
console.log(b) // false
console.log(c) // true 1 person liked it
Make a little progress every day~
Author: WYL_99
Link: https://www.jianshu.com/p/253fb9e27e4e
Source: Jian Shu
Copyright belongs to the author. For commercial reproduction, please contact the author for authorization, and for non-commercial reproduction, please indicate the source.