15个你应该知道的JavaScript的重要数组方法

更新日期: 2022-04-28 阅读: 1.1k 标签: 数组

数组方法的重要一点是有些是可变的,有些是不可变的。在决定针对特定问题使用哪种方法时,务必牢记这一点。

此列表中的大多数数组方法都采用类似的回调作为参数。第一个参数是当前项,第二个参数是索引,第三个是整个数组。现在我们已经解决了这个问题,让我们从列表开始:

1、ForEach

循环遍历数组中的每个元素并执行回调函数

const arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// Console: 1, 2, 3

2、Map

循环遍历数组中的每个元素并执行回调函数。使用回调函数的返回值创建一个新数组。

const arr = [1, 2, 3, 4, 5];
const areEven = arr.map(num => num % 2 === 0);
console.log(areEven); // Console: [false, true, false, true, false]

3、Filter

循环遍历数组中的每个元素,并仅选择符合条件的元素。根据所选元素返回一个新数组。

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

4、Find

查找数组中满足条件的第一个元素。如果没有找到,将返回 undefined。

const arr = [1, 2, 3, 4, 5];
const firstEvenNumber = arr.find(num => num % 2 === 0);
console.log(firstEvenNumber); // Console [2]

5、FindIndex

与前面的方法类似,它返回满足给定条件的第一个元素的索引。如果没有找到,则返回 -1。

const arr = [1, 2, 3, 4, 5];
const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);
console.log(firstEvenNumberIdx);

6、Reduce

这是一种高级方法,可用于组合数组的元素。主要区别在于回调将累加器作为第一个参数。回调的返回值成为下一次迭代的累加器。

const arr = [1, 2, 3, 4, 5];
// `acc` is the value of the accumulator
// the acccumulator is return value of the previous callback
// the second argument i.e `0` is the default value
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // Console: 15

7、Every

此方法接受一个返回布尔值的回调。如果条件对数组中的所有元素都有效,那么 Every() 将返回 true。

const arr = [1, 2, 3, 4, 5];
const areAllEven = arr.every(num => num % 2 === 0);
console.log(areAllEven); // Console: false

8、Some

像前面的方法一样,这个方法也接受一个返回布尔值的回调。如果条件对至少一个元素有效,Some() 将返回 true。

const arr = [1, 2, 3, 4, 5];
const isOneEven = arr.some(num % 2 === 0);
console.log(isOneEven); // true

9、 Sort

这是一种用于对数组中的元素进行排序的方法。

默认情况下,它按升序对数组进行排序。它需要一个回调函数,有两个元素——a 和 b。如果 a 小于 b,则返回 -1,否则返回 1。

如果它们相等,则返回 0。

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

请记住,与其他数组方法不同,sort 会改变数组。

10、Flat

Flat 用于将嵌套数组展平为单个数组。您可以指定将数组展平的深度。

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

11、 Reverse

反转数组中元素的顺序。

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

12、Include

如果数组中存在元素,则此方法返回 true。

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

13、Fill

fill 方法将数组的元素设置为给定值。当我想使用 map/forEach 方法特定次数时,我喜欢使用此方法。

const emptyArr = new Array(5);
// The problem with this is that you get `[empty x 10]`
// You need real values to map over it.
const filledArr = emptyArr.fill(3); // Console [3, 3, 3, 3, 3]

14、At

此方法返回给定索引的元素。这与访问(即 arr[1])元素的传统方式之间的区别在于它也支持负索引。

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5
// Important: Negative indices start from `1`, positive indices start from `0`.

15、 Concat

此方法用于组合两个数组。
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr1.concat(arr2)); // Console [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

总结

以上就是我今天跟大家分享的15个关于JavaScript的重要数组的方法。希望对你有帮助,如果你喜欢它的话,请记得分享给你身边做开发的朋友。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/11412

相关推荐

indexOf的三种使用方法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。这里基本用法大家一般都清楚,一般在实际工作中常与数组的方法合用来对数组进行一些操作

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

js数组中改变元素的位置:互换,置顶,上移,下移

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。splice() 方法可删除从 index 处开始的零个或多个元素

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

Js遍历数组时注意 Empty Item 的影响

这两天碰到个问题:从日志中发现一些来自 iOS 10.3 的报错「Cannot read property \\\'xxx\\\' of undefined」,定位到代码的报错位置,发现是遍历某数组时产生的报错,该数组的元素应该全都是 Object,但实际上出现了异常的元素

JS数组扁平化(flat)方法总结

需求:多维数组=>一维数组 ;flat和flatMap方法为ES2019(ES10)方法,目前还未在所有浏览器完全兼容。第四种处理:用 reduce 实现数组的 flat 方法

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

Js数组中所有方法(超详细)

concat()把元素衔接到数组中。 every() 方法使用指定函数检测数组中的所有元素:filter()返回满足断言函数的数组元素。forEach()为数组的每一个元素调用指定函数。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!