常用的 JavaScript 数组处理方法

1. `map` 方法

用于创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

let itemNames = items.map(item => item.name);
console.log(itemNames);
// 输出: ['item1', 'item2', 'item3']

2. `filter` 方法

用于筛选数组中的元素。

let items = [
  { id: 1, name: 'item1', active: true },
  { id: 2, name: 'item2', active: false },
  { id: 3, name: 'item3', active: true }
];

let activeItems = items.filter(item => item.active);
console.log(activeItems);
// 输出: [{ id: 1, name: 'item1', active: true }, { id: 3, name: 'item3', active: true }]

3. `reduce` 方法

用于数组的累积处理。

let items = [
  { id: 1, name: 'item1', price: 100 },
  { id: 2, name: 'item2', price: 200 },
  { id: 3, name: 'item3', price: 300 }
];

let totalPrice = items.reduce((sum, item) => sum + item.price, 0);
console.log(totalPrice);
// 输出: 600

4. `forEach` 方法

用于遍历数组，执行给定的函数。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

items.forEach(item => {
  console.log(item.name);
});
// 输出: item1 item2 item3

5. `find` 方法

用于找到第一个符合条件的元素。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

let item = items.find(item => item.id === 2);
console.log(item);
// 输出: { id: 2, name: 'item2' }

6. `findIndex` 方法

用于找到第一个符合条件的元素的索引。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

let index = items.findIndex(item => item.id === 2);
console.log(index);
// 输出: 1

7. `some` 方法

用于检测数组中是否有元素符合条件。

let items = [
  { id: 1, name: 'item1', active: false },
  { id: 2, name: 'item2', active: false },
  { id: 3, name: 'item3', active: true }
];

let hasActive = items.some(item => item.active);
console.log(hasActive);
// 输出: true

8. `every` 方法

用于检测数组中的所有元素是否都符合条件。

let items = [
  { id: 1, name: 'item1', active: true },
  { id: 2, name: 'item2', active: true },
  { id: 3, name: 'item3', active: true }
];

let allActive = items.every(item => item.active);
console.log(allActive);
// 输出: true

9. `sort` 方法

用于数组的排序。

let items = [
  { id: 1, name: 'item1', price: 300 },
  { id: 2, name: 'item2', price: 100 },
  { id: 3, name: 'item3', price: 200 }
];

let sortedItems = items.sort((a, b) => a.price - b.price);
console.log(sortedItems);
// 输出: [{ id: 2, name: 'item2', price: 100 }, { id: 3, name: 'item3', price: 200 }, { id: 1, name: 'item1', price: 300 }]

10. `concat` 方法

用于合并两个或多个数组。

let items1 = [{ id: 1, name: 'item1' }];
let items2 = [{ id: 2, name: 'item2' }];

let combinedItems = items1.concat(items2);
console.log(combinedItems);
// 输出: [{ id: 1, name: 'item1' }, { id: 2, name: 'item2' }]

11. `slice` 方法

用于提取数组的一个部分，返回一个新数组。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

let someItems = items.slice(0, 2);
console.log(someItems);
// 输出: [{ id: 1, name: 'item1' }, { id: 2, name: 'item2' }]

12. `splice` 方法

用于添加或删除数组中的元素。

let items = [
  { id: 1, name: 'item1' },
  { id: 2, name: 'item2' },
  { id: 3, name: 'item3' }
];

items.splice(1, 1, { id: 4, name: 'item4' });
console.log(items);
// 输出: [{ id: 1, name: 'item1' }, { id: 4, name: 'item4' }, { id: 3, name: 'item3' }]

13. `indexOf` 方法

用于查找元素在数组中的索引。

let items = ['item1', 'item2', 'item3'];

let index = items.indexOf('item2');
console.log(index);
// 输出: 1

14. `includes` 方法

用于判断数组是否包含某个元素。

let items = ['item1', 'item2', 'item3'];

let hasItem = items.includes('item2');
console.log(hasItem);
// 输出: true

15. `flat` 方法

用于将嵌套的数组 "拉平"。

let items = [1, [2, [3, 4], 5]];

let flatItems = items.flat(2);
console.log(flatItems);
// 输出: [1, 2, 3, 4, 5]

16. `flatMap` 方法

用于先对数组中的每个元素进行处理，然后将结果 "拉平"。

let items = [1, 2, 3];

let flatMappedItems = items.flatMap(x => [x, x * 2]);
console.log(flatMappedItems);
// 输出: [1, 2, 2, 4, 3, 6]

17. `reverse` 方法

用于将数组中的元素顺序反转。

let items = ['item1', 'item2', 'item3'];

let reversedItems = items.reverse();
console.log(reversedItems);
// 输出: ['item3', 'item2', 'item1']

18. `join` 方法

用于将数组的所有元素连接成一个字符串。

let items = ['item1', 'item2', 'item3'];

let joinedItems = items.join(', ');
console.log(joinedItems);
// 输出: 'item1, item2, item3'

19. `pop` 方法

用于移除数组中的最后一个元素，并返回该元素。

let items = ['item1', 'item2', 'item3'];

let lastItem = items.pop();
console.log(lastItem);
// 输出: 'item3'
console.log(items);
// 输出: ['item1', 'item2']

20. `push` 方法

用于将一个或多个元素添加到数组的末尾，并返回新的长度。

let items = ['item1', 'item2'];

let newLength = items.push('item3');
console.log(newLength);
// 输出: 3
console.log(items);
// 输出: ['item1', 'item2', 'item3']

21. `shift` 方法

用于移除数组中的第一个元素，并返回该元素。

let items = ['item1', 'item2', 'item3'];

let firstItem = items.shift();
console.log(firstItem);
// 输出: 'item1'
console.log(items);
// 输出: ['item2', 'item3']

22. `unshift` 方法

用于将一个或多个元素添加到数组的开头，并返回新的长度。

let items = ['item2', 'item3'];

let newLength = items.unshift('item1');
console.log(newLength);
// 输出: 3
console.log(items);
// 输出: ['item1', 'item2', 'item3']

23. `fill` 方法

用于用一个固定值填充数组中的元素。

let items = new Array(3).fill('item');
console.log(items);
// 输出: ['item', 'item', 'item']

24. `copyWithin` 方法

用于从数组的指定位置拷贝元素到数组的另一个指定位置。

let items = ['item1', 'item2', 'item3', 'item4'];

items.copyWithin(1, 2, 4);
console.log(items);
// 输出: ['item1', 'item3', 'item4', 'item4']

25. `entries` 方法

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。

let items = ['item1', 'item2', 'item3'];

let iterator = items.entries();
for (let entry of iterator) {
  console.log(entry);
}
// 输出: [0, 'item1'], [1, 'item2'], [2, 'item3']

26. `keys` 方法

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。

let items = ['item1', 'item2', 'item3'];

let iterator = items.keys();
for (let key of iterator) {
  console.log(key);
}
// 输出: 0, 1, 2

27. `values` 方法

返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

let items = ['item1', 'item2', 'item3'];

let iterator = items.values();
for (let value of iterator) {
  console.log(value);
}
// 输出: 'item1', 'item2', 'item3'

28. `from` 方法

用于从类数组对象或可迭代对象创建一个新的数组实例。

let str = 'hello';
let chars = Array.from(str);
console.log(chars);
// 输出: ['h', 'e', 'l', 'l', 'o']

29. `isArray` 方法

用于判断一个对象是否为数组。

let items = ['item1', 'item2', 'item3'];
console.log(Array.isArray(items));
// 输出: true

let notArray = { id: 1, name: 'item1' };
console.log(Array.isArray(notArray));
// 输出: false

30. `of` 方法

用于创建一个新的数组实例，其元素是传入的参数。

let items = Array.of(1, 2, 3);
console.log(items);
// 输出: [1, 2, 3]

31. `lastIndexOf` 方法

返回指定元素在数组中的最后一个索引。

let items = ['item1', 'item2', 'item3', 'item2'];

let index = items.lastIndexOf('item2');
console.log(index);
// 输出: 3

32. `reduceRight` 方法

对数组中的每个元素执行一个提供的函数（从右到左），将其结果汇总为单个值。

let items = [1, 2, 3, 4];

let total = items.reduceRight((sum, item) => sum + item, 0);
console.log(total);
// 输出: 10

posted @ 2024-07-17 18:13 沖阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· echarts折线鼠标悬浮时只显示了一条线的数据

· oss文件流展示图片

· JavaScript操作数组常用的方法（包含es6）

· JavaScript数组及方法总结

· JS常用数组方法

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：沖
园龄： 1年
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

前端(7)

hoper-development

常用的 JavaScript 数组处理方法

1. `map` 方法

2. `filter` 方法

3. `reduce` 方法

4. `forEach` 方法

5. `find` 方法

6. `findIndex` 方法

7. `some` 方法

8. `every` 方法

9. `sort` 方法

10. `concat` 方法

11. `slice` 方法

12. `splice` 方法

13. `indexOf` 方法

14. `includes` 方法

15. `flat` 方法

16. `flatMap` 方法

17. `reverse` 方法

18. `join` 方法

19. `pop` 方法

20. `push` 方法

21. `shift` 方法

22. `unshift` 方法

23. `fill` 方法

24. `copyWithin` 方法

25. `entries` 方法

26. `keys` 方法

27. `values` 方法

28. `from` 方法

29. `isArray` 方法

30. `of` 方法

31. `lastIndexOf` 方法

32. `reduceRight` 方法

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

hoper-development

常用的 JavaScript 数组处理方法

1. map 方法

2. filter 方法

3. reduce 方法

4. forEach 方法

5. find 方法

6. findIndex 方法

7. some 方法

8. every 方法

9. sort 方法

10. concat 方法

11. slice 方法

12. splice 方法

13. indexOf 方法

14. includes 方法

15. flat 方法

16. flatMap 方法

17. reverse 方法

18. join 方法

19. pop 方法

20. push 方法

21. shift 方法

22. unshift 方法

23. fill 方法

24. copyWithin 方法

25. entries 方法

26. keys 方法

27. values 方法

28. from 方法

29. isArray 方法

30. of 方法

31. lastIndexOf 方法

32. reduceRight 方法

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

1. `map` 方法

2. `filter` 方法

3. `reduce` 方法

4. `forEach` 方法

5. `find` 方法

6. `findIndex` 方法

7. `some` 方法

8. `every` 方法

9. `sort` 方法

10. `concat` 方法

11. `slice` 方法

12. `splice` 方法

13. `indexOf` 方法

14. `includes` 方法

15. `flat` 方法

16. `flatMap` 方法

17. `reverse` 方法

18. `join` 方法

19. `pop` 方法

20. `push` 方法

21. `shift` 方法

22. `unshift` 方法

23. `fill` 方法

24. `copyWithin` 方法

25. `entries` 方法

26. `keys` 方法

27. `values` 方法

28. `from` 方法

29. `isArray` 方法

30. `of` 方法

31. `lastIndexOf` 方法

32. `reduceRight` 方法