What are the differences between JavaScript's methods for arrays?

In JavaScript, there are many methods for adding, removing, and replacing array elements. Many methods can achieve the same function, but they are very different. Today we will compare them. In JavaScript What is the secret of the array method?

JavaScript provides a variety of methods for adding, removing, and replacing array elements, but some will affect the original array; some will not, and they will create a new array.

Note: Distinguish the difference between the following two methods:

array.splice() affects the original array

array.slice() does not affect the original array

I. New addition: affecting the original array

Using array.push() and array.ushift() to add new elements will affect the original array.

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

II. New addition: does not affect the original array

There are two ways to add elements that will not affect the original array. The first is array.concat().

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有误，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

The second method is to use JavaScript's spread operator. The spread operator is three dots (...)

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

The spread operator will copy the original array, starting from the original array. All elements are taken out of the array and stored in the new environment.

III. Removal: Affects the original array

When array.pop() and array.shift() are used to remove array elements, the original array will be affected. array.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() and array.shift() return the removed element, you can get the removed element through a variable.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice() can also delete elements of an array.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

Like array.pop() and array.shift(), array.splice() also returns the removed elements.

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. Removal: Does not affect the original array

JavaScript 的 array.filter() 方法基于原数组创建一个新数组，新数组仅包含匹配特定条件的元素。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）

The condition of the above code is "not equal to 'e'", so the new array (arr2) does not contain 'e'.

The uniqueness of the arrow function:

Single-line arrow function, the 'return' keyword comes by default and does not need to be written manually.

However, multi-line arrow functions need to return a value explicitly.

Another way that does not affect the original array is array.slice() (not to be confused with array.splice()).

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. Replacement: affecting the original array

If you know which element to replace, you can use array.splice().

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

VI. Replacement: Does not affect the original array

You can use array.map() to create a new array, and you can check each element and replace them according to specific conditions.

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

Use array.map() to convert data

array.map() is a powerful method that can be used to convert data without polluting the original data source.

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

There are so many method comparisons about arrays. I hope it can help everyone understand and use arrays in JS.

Related reading:

About JS array Array method summary

js array deduplication method Summary

Parsing the parameter passing method of angularjs array

The above is the detailed content of What are the differences between JavaScript's methods for arrays?. For more information, please follow other related articles on the PHP Chinese website!