JavaScript 常用数组操作方法

下面的这些方法会改变调用它们的原数组的值

push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

// 语法：arr.push(element1, ..., elementN)
let arr = [1, 2, 3];
let count = arr.push(4);
console.log(count); // 4
console.log(arr); // [1, 2, 3, 4]

pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

// 语法：arr.pop()
let arr = [1, 2, 3, 4];
let count = arr.pop();
console.log(count); // 4
console.log(arr); // [1, 2, 3]

shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

// 语法：arr.shift()
let arr = [1, 2, 3, 4];
let count = arr.shift();
console.log(count); // 1
console.log(arr); // [2, 3, 4]

unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

// 语法：arr.unshift(element1, ..., elementN)
let arr = [1, 2, 3, 4];
let count = arr.unshift(0);
console.log(count); // 5
console.log(arr); // [0, 1, 2, 3, 4]

splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

// 语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
let arr = [1, 2, 3, 4];
arr.splice(1, 0, 5);
console.log(arr); // [1, 5, 2, 3, 4]
arr.splice(4, 1, 6);
console.log(arr); // [1, 5, 2, 3, 6]
arr.splice(4, 1, 6, 7, 8);
console.log(arr); // [1, 5, 2, 3, 6, 7, 8]

reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

// 语法：arr.reverse()
let arr1 = [1, 2, 3];
let arr2 = arr1.reverse();
console.log(arr2); // [3, 2, 1]
console.log(arr1); // [3, 2, 1]

fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

// 语法：arr.fill(value[, start[, end]])
let arr = [1, 2, 3, 4];
arr.fill(0, 2, 4)
console.log(arr); // [1, 2, 0, 0];

copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

// 语法：arr.copyWithin(target[, start[, end]])
let arr1 = [1, 2, 3, 4];
let arr2 = arr1.copyWithin(0, 3, 4);
console.log(arr2); // [4, 2, 3, 4]
console.log(arr1); // [4, 2, 3, 4]

下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

concat()

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

// 语法：var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

console.log(arr3); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5, 6]

includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

// 语法：arr.includes(valueToFind[, fromIndex])
const arr = [1, 2, 3, 4, 5];
const bool1 = arr.includes(1);
const bool2 = arr.includes(0);
const bool3 = arr.includes(1, 2);
console.log(bool1); // true
console.log(bool2); // false
console.log(bool3); // false

join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

// 语法：arr.join([separator])
const arr1 = [10, 30, 50];
const time = arr1.join(':');
console.log(time); // 10:30:50

slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

// 语法：arr.slice([begin[, end]])
const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.slice(2);
const arr3 = arr1.slice(1,3);
console.log(arr2); // [3, 4, 5]
console.log(arr3); // [2, 3]
console.log(arr1); // [1, 2, 3, 4, 5]

indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

// 语法：arr.indexOf(searchElement[, fromIndex])
const arr = [1, 2, 3, 4, 5];
const index = arr.indexOf(4);
console.log(index) // 3

lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

// 语法：arr.lastIndexOf(searchElement[, fromIndex])
const arr = [1, 2, 5, 3, 4, 5];
const index1 = arr.lastIndexOf(5);
const index2 = arr.lastIndexOf(5, 4);
console.log(index1) // 5
console.log(index2) // 2

迭代方法

forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

// 语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));
// 1
// 2
// 3

map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

// 语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    
    
 // Return element for new_array 
// }[, thisArg])
const arr1 = [1, 2, 3];
const arr2 = arr1.map(x => x * 2);
console.log(arr2); // [2, 4, 6]

filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

// 语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.filter(x => x > 2);
console.log(arr2); // [3, 4, 5]

every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

// 语法：arr.every(callback(element[, index[, array]])[, thisArg])
const arr1 = [1, 2, 3, 4, 5];
const bool1 = arr1.every(x => x > 2);
const bool2 = arr1.every(x => x < 6);
console.log(bool1); // false
console.log(bool2); // true

some()

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

// 语法：arr.some(callback(element[, index[, array]])[, thisArg])
const arr1 = [1, 2, 3, 4, 5];
const bool1 = arr1.some(x => x > 2);
const bool2 = arr1.some(x => x > 6);
console.log(bool1); // true
console.log(bool2); // false

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 语法：arr.some(callback(element[, index[, array]])[, thisArg])
const arr1 = [1, 2, 3, 4, 5];
const count1 = arr1.find(x => x > 2);
const count2 = arr1.find(x => x > 6);
console.log(count1); // 3
console.log(count2); // undefined。

findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 语法：arr.findIndex(callback[, thisArg])
const arr1 = [1, 2, 3, 4, 5];
const index1 = arr1.findIndex(x => x > 2);
const index2 = arr1.findIndex(x => x > 6);
console.log(index1); // 2
console.log(index2); // -1

reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

// 语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
const arr = [1, 2, 3, 4, 5];
const res = arr.reduce((acc, cur) => acc + cur);
console.log(res); // 15