小陈同学的前端笔记 | 数组常用方法整理（二）不会改变数组自身的方法

2023-10-10 13:02:13

好的，我来为您创作一篇关于不会改变数组自身的一些方法的文章。

在上一期，我们探讨了会改变数组自身的 Javascript 方法，希望读者已经对此有了较为全面的理解。今天，我们将继续关注 JavaScript 数组的其他常用方法。让我们开始吧！

slice

slice() 方法从数组中提取一定范围的元素，这些元素不会改变数组自身。它接受两个参数：

startIndex：要提取元素的起始位置，为负数时从数组末尾开始计数
endIndex：要提取元素的结束位置，不包括此位置上的元素，为负数时从数组末尾开始计数

const numbers = [1, 2, 3, 4, 5, 6];

const extracted = numbers.slice(2); // [3, 4, 5, 6]
const extracted2 = numbers.slice(2, 4); // [3, 4]
const extracted3 = numbers.slice(-3, -1); // [4, 5]

concat

concat() 方法将一个或多个数组组合成一个新的数组，这些数组不会改变数组自身。它接受一个或多个数组参数，并将它们连接起来形成一个新的数组。

const numbers = [1, 2, 3];
const letters = ['a', 'b', 'c'];

const combined = numbers.concat(letters); // [1, 2, 3, 'a', 'b', 'c']
const combined2 = numbers.concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7]

join

join() 方法将数组中的所有元素连接成一个字符串，这些数组不会改变数组自身。它接受一个参数，该参数是一个分隔符，用于将元素连接起来。

const numbers = [1, 2, 3];

const joined = numbers.join(); // "1,2,3"
const joined2 = numbers.join(' '); // "1 2 3"
const joined3 = numbers.join('-'); // "1-2-3"

filter

filter() 方法创建一个新的数组，其中包含通过指定测试函数的元素，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行测试，如果测试通过，则将该元素包含在新数组中。

const numbers = [1, 2, 3, 4, 5, 6];

const filtered = numbers.filter(n => n % 2 === 0); // [2, 4, 6]
const filtered2 = numbers.filter(n => n > 3); // [4, 5, 6]

map

map() 方法创建一个新的数组，其中包含对数组中每个元素应用指定函数的结果，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行操作，并将结果包含在新数组中。

const numbers = [1, 2, 3, 4, 5, 6];

const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10, 12]
const strings = numbers.map(n => n.toString()); // ['1', '2', '3', '4', '5', '6']

some

some() 方法测试数组中是否有至少一个元素通过指定测试函数，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行测试，如果至少有一个元素测试通过，则返回 true，否则返回 false。

const numbers = [1, 2, 3, 4, 5, 6];

const someEven = numbers.some(n => n % 2 === 0); // true
const someGreaterThan5 = numbers.some(n => n > 5); // true
const someGreaterThan10 = numbers.some(n => n > 10); // false

every

every() 方法测试数组中是否所有元素都通过指定测试函数，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行测试，如果所有元素都测试通过，则返回 true，否则返回 false。

const numbers = [1, 2, 3, 4, 5, 6];

const everyEven = numbers.every(n => n % 2 === 0); // false
const everyGreaterThan0 = numbers.every(n => n > 0); // true
const everyGreaterThan5 = numbers.every(n => n > 5); // false

find

find() 方法返回数组中第一个通过指定测试函数的元素，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行测试，如果找到一个元素测试通过，则返回该元素，否则返回 undefined。

const numbers = [1, 2, 3, 4, 5, 6];

const firstEven = numbers.find(n => n % 2 === 0); // 2
const firstGreaterThan5 = numbers.find(n => n > 5); // 6
const firstGreaterThan10 = numbers.find(n => n > 10); // undefined

findIndex

findIndex() 方法返回数组中第一个通过指定测试函数的元素的索引，这些数组不会改变数组自身。它接受一个函数参数，该函数对每个元素进行测试，如果找到一个元素测试通过，则返回该元素的索引，否则返回 -1。

const numbers = [1, 2, 3, 4, 5, 6];

const firstEvenIndex = numbers.findIndex(n => n % 2 === 0); // 1
const firstGreaterThan5Index = numbers.findIndex(n => n > 5); // 5
const firstGreaterThan10Index = numbers.findIndex(n => n > 10); // -1