JavaScript 中最常用的数组方法整理汇总

英文 | https://javascript.plainenglish.io/20-most-used-array-methods-in-javascript-c57276982377

翻译 | 杨小爱

在 JavaScript 中，一个数组实例有 37 个内置方法，常用的方法大约有 20 个。在这篇文章中，我对这些方法进行了总结，并附上了一些图表，希望能帮助你更好地整理相关知识点。

push, pop, shift, unshift

这四种方法非常相似，我们一起来谈谈。

• push(element) ：将一个或多个元素添加到数组的末尾，并返回数组的新长度。
• pop()：从数组中删除最后一个元素并返回该元素。
• shift() ：从数组中移除第一个元素并返回移除的元素。
• unshift() ：将一个或多个元素添加到数组的开头并返回数组的新长度。

以下是一些操作：

以下是一些操作：

测试一下：

push：

const animals = ['pigs', 'goats', 'sheep'];


const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"];

shift：

const myFish = ['angel', 'clown', 'mandarin', 'surgeon'];


console.log('myFish before:', myFish);
// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']


const shifted = myFish.shift();


console.log('myFish after:', myFish);
// myFish after: ['clown', 'mandarin', 'surgeon']


console.log('Removed this element:', shifted);
// Removed this element: angel
;

unshift:

const array1 = [1, 2, 3];


console.log(array1.unshift(4, 5));
// expected output: 5


console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
;

slice

• slice() 方法返回数组一部分的浅拷贝。
• 它返回一个新数组，并且不会修改原始数组。

语法：

array.slice(startIndex, endIndex)

测试一下：

let arr = ['a', 'b', 'c', 'd', 'e', 'f']


console.log('arr.slice(1, 4) : ', arr.slice(1, 4))
console.log('arr.slice(2) : ', arr.slice(2))
console.log('arr.slice() : ', arr.slice());

splice

splice() 方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

语法：

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

• start：开始更改数组的索引。
• deleteCount：一个整数，指示数组中要从开始删除的元素数。
• item1, item2, ...：要添加到数组中的元素，从 start 开始。

测试一下：

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')


console.log('myFish: ', myFish)
console.log('removed: ', removed);

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')


console.log('myFish: ', myFish)
console.log('removed: ', removed);

concat

• concat() 方法用于合并两个或多个数组。
• 此方法不会更改现有数组，而是返回一个新数组。

测试一下：

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);


console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"];

join

join() 方法通过连接数组中的所有元素创建并返回一个新字符串，该数组由逗号或指定的分隔符字符串分隔。

语法：

join(separator)

测试一下：

let arr = ['a', 'b', 'c', 'd'];


console.log(`arr.join(''): `, arr.join(''))
console.log(`arr.join('-'): `, arr.join('-'))
console.log(`arr.join(): `, arr.join())
console.log(`arr.join('

标签：arr,元素,console,log,JavaScript,汇总,myFish,数组	

From： https://blog.51cto.com/u_15809510/5830049