Javascript数组方法汇总

112 阅读6分钟

some()方法

some()方法会遍历数组中的所有元素,并执行指定的测试函数。如果其中至少有一个元素满足该测试,则返回true;反之返回false。它的常见用途是判断数组中是否包含某个元素或满足某个条件。

const arr = [1, 2, 3];
const result1 = arr.some((item) => item > 2);
console.log(result1); // true

const result2 = arr.some((item) => item < 0);
console.log(result2); // false

every()方法

every()方法与some()方法类似,也会遍历数组中的所有元素,并执行指定的测试函数。不同的是,它要求数组中的所有元素都必须满足该测试,否则返回false。它通常用于校验表单数据等情况。

const arr = [1, 2, 3];
const result1 = arr.every((item) => item > 0);
console.log(result1); // true

const result2 = arr.every((item) => item > 2);
console.log(result2); // false

reduce()方法

reduce()方法会遍历数组中的所有元素,并执行指定的归约函数。该函数接收两个参数:累加器和当前值。如果不传入初始值,则累加器的初始值为数组的第一个元素;否则累加器的初始值为指定的初始值。最终返回累加器的值。

const arr = [1, 2, 3];
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 6

find()方法

find()方法会遍历数组中的所有元素,并执行指定的测试函数。如果某个元素满足该测试,则返回该元素;反之返回undefined。它的常见用途是查找符合条件的第一个元素。

const arr = [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }];
const result = arr.find((item) => item.age > 21);
console.log(result); // { name: 'Bob', age: 25 }

indexOf()和lastIndexOf()方法

indexOf()lastIndexOf()方法可用于查找数组中指定元素的位置。二者的区别在于,indexOf()方法从左往右查找第一个匹配的元素,而lastIndexOf()方法从右往左查找最后一个匹配的元素。

const arr = [1, 2, 3, 1];
console.log(arr.indexOf(1)); // 0
console.log(arr.lastIndexOf(1)); // 3

slice()截取方法

slice()方法用于将数组中的一部分元素复制到一个新数组中。它接收两个参数:起始位置和终止位置(不包括该位置的元素),返回一个新的数组,原有的数组不会受到影响。

const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
console.log(arr); // [1, 2, 3, 4]

filter()过滤数组

使用filter()方法可以过滤出符合指定条件的数组元素,返回一个新的数组。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((item) => item % 2 === 0);
console.log(newArr); // [2, 4]

Array.from()数组去重

使用Array.from()和Set数据结构可以快速地对数组进行去重操作。

const arr = [1, 1, 2, 2, 3, 3];
const newArr = Array.from(new Set(arr));
console.log(newArr); // [1, 2, 3]

concat()连接数组

使用concat()方法可以连接两个或多个数组,返回一个新的数组。

const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]

join() 数组转字符串

把数组中所有元素转换为字符串,然后按照指定的分隔符连接起来。

const arr1 = ['hello', 'world'];
const str = arr1.join(' ');
//str的值为 "hello world"

toString() 数组转字符串

会把数组元素转换为字符串,并返回由这些字符串组成的一个以逗号分隔的字符串。

const arr = [1, 2, 3];
const str = arr.toString(); // 返回 "1,2,3"

**需要注意的是** 如果数组的元素是对象、数组等复杂类型,则转换后的值可能不如预期。因此,建议在处理复杂类型的数组时,采用JSON的相关方法进行序列化和反序列化操作。 数组的join()方法和toString()方法都可以将数组中的元素转换为字符串,但是二者存在一定区别。

toString()方法会把数组所有元素都转换为字符串,并返回由这些字符串组成的一个以逗号分隔的字符串。而join()方法则允许指定一个字符串作为参数,用于连接各个元素,并返回连接后的字符串。

具体来说,join()方法可以在连接元素之间添加自定义的分隔符,而toString()方法不能。默认情况下,join()方法也会使用逗号作为元素的分隔符,但是我们可以通过传入其他字符作为参数,来改变分隔符。另外,当原始数组中某个元素的值为null或undefined时,join()方法会用空字符串替代,而toString()方法会将null和undefined表示为字符串"null"和"undefined"。

const arr = [1, 2, 3];
const str1 = arr.join();   // 返回 "1,2,3"
const str2 = arr.join('-');    // 返回 "1-2-3"
const str3 = arr.toString();   // 返回 "1,2,3"

因此,在使用时需要根据实际需求选择合适的方法。如果只是需要简单地将数组元素连接起来,使用join()方法更加灵活;如果需要获得默认的以逗号分隔的字符串表示形式,或者想要把null和undefined显示出来,则可以使用toString()方法。

sort()数组排序

使用sort()方法可以对数组进行排序,默认按照字母顺序排序;也可以自定义排序规则,传入一个比较函数作为参数。

const arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]

push()方法

在数组末尾添加元素:

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

pop()方法

从数组末尾删除元素:

const arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1, 2]

unshift()方法

在数组开头添加元素:

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

shift()方法

从数组开头删除元素:

const arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

splice()方法

删除/添加指定位置的元素:

const arr = [1, 2, 3, 4];
arr.splice(1, 2);
console.log(arr); // [1, 4]

includes() 方法

includes() 方法会遍历数组中的所有元素,判断数组中是否包含指定的元素。如果包含则返回 true,否则返回 false

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

此外,includes() 方法还接收第二个参数,用于指定要在数组中查找的起始位置。

const arr = [1, 2, 3];
console.log(arr.includes(2, 1)); // true,从索引 1 开始查找
console.log(arr.includes(1, 1)); // false,从索引 1 开始查找时不包括该元素本身

flat() 扁平数组方法

flat() 方法将原有的多维嵌套数组展开为一维数组,可以指定展开的深度,也可以默认展开整个数组,会改变原有的数组。

代码示例:

const arr = [1, [2, 3], [[4]], [[[5]]]];
console.log(arr.flat()); // [1, 2, 3, 4, 5]

const arr2 = [1, [2, [3, [4]]]];
console.log(arr2.flat(2)); // [1, 2, 3, [4]]

在上面的例子中,第一个数组 arr 中包含嵌套不同层级的多维数组。展开时使用了默认深度,即展开整个数组,得到一维数组 [1, 2, 3, 4, 5]

第二个数组 arr2 只是示范了如何指定展开的深度为 2,得到结果为 [1, 2, 3, [4]]

fill() 填充方法

用于向数组中填充元素。它接收两个参数,第一个参数是要填充的值,第二个参数是要填充的起始位置(可以省略,默认为 0),直到结束位置(可以省略,默认为数组长度)。

fill() 方法也会改变原有的数组

const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); // [0, 0, 0]

const arr2 = [1, 2, 3];
arr2.fill(4, 1, 2);
console.log(arr2); // [1, 4, 3]

在上面的例子中,第一个数组 arr 使用 fill(0) 填充了整个数组,得到结果为 [0, 0, 0]

第二个数组 arr2 只在索引 1 的位置填充了数值 4,其他位置不变,最终得到结果为 [1, 4, 3]。这是由于第二个参数指定了起始位置为 1,第三个参数代表结束位置,因此只修改了索引为 1 的位置。

reverse() 翻转方法

const values = [1, 3, 44, 43, 654, 0]; 
values.reverse(); 
console.log(values); // [ 0, 654, 43, 44, 3, 1 ]