首页 > 编程语言 >常用的 JavaScript 数组处理方法

常用的 JavaScript 数组处理方法

时间：2024-07-17 18:19:09浏览次数：19  
标签：常用 item1 name item2 items JavaScript let 数组 id

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

标签：常用,item1,name,item2,items,JavaScript,let,数组,id
From： https://www.cnblogs.com/hoper-development/p/18308054

相关文章

  • css常用属性
    一、边框的属性border-width：简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color：设置边框颜色。border-style：设置边框类型。属性值：  none    定义无边框。  hidden   与"none"相同。不过应用于表时除外，对于表，hidden用......
  • 【Linux网络】Linux网络协议栈常用代码片段
    1.读取网卡mac地址可以通过ioctl(sock,SIOCGIFHHWADDR，&ifr)读取mac地址，对任意类型的socket都适用，只需指定第三参数structifreqifr的ifr.ifr_name,这个ifr_name就是网络设备的名字，如eth0,eth1,lo等，在/proc/net/dev可找到，ioctl通过ifr_name获取设备信息。structifreqifr;strn......
  • Javascript: Blob, File/FileReader, ArrayBuffer, ReadableStream, Response 转换方
    目录先上图各个ObjectArrayBuffer:Blob:File:FileReader:ReadableStream:Response用法举例ArrayBufferBlob,File,FileReaderReadableStream关于ReadableStream的一点总结Response构造函数Parametersblob()先上图各个ObjectArrayBuffer:1.ArrayBuffer是JavaScript......
  • vue请求接口常用写法(axios)
    1.项目根目录下新建一个utils文件夹，并新建一个request.js文件(注意：是以axios方法请求的，所以需要先安装axios或cdn引入)安装:npmnpminstallaxios-Syarnyarnaddaxios-Scdn<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>&&配置代码imp......
  • NC275631 嘤嘤不想求异或喵，NC274492 76与61，NC273546 小红的数组移动
    目录NC275631嘤嘤不想求异或喵题目描述运行代码代码思路ff 函数解释：主函数解释：NC27449276与61题目描述运行代码代码思路函数 countSubsequences 的工作原理：举例说明：NC273546小红的数组移动题目描述运行代码代码思路嘤嘤不想求异或喵题目描述登录—专......
  • 2024-07-17：用go语言，给定一个整数数组nums， 我们可以重复执行以下操作： 选择数组中的前两
    2024-07-17：用go语言，给定一个整数数组nums，我们可以重复执行以下操作：选择数组中的前两个元素并删除它们，每次操作得到的分数是被删除元素的和。在保持所有操作的分数相同的前提下，请计算最多能执行多少次操作。返回可以进行的最大操作次数。输入：nums=[3,2,1,4,5]。输出：2。......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • Java开发手册中为什么要求集合转数组toArray时禁止使用无参方法，而使用传参长度为0的空
    场景Java中使用JMH(JavaMicrobenchmarkHarness微基准测试框架)进行性能测试和优化：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/131723751参考以上性能测试工具的使用。阿里巴巴《java开发手册》泰山版关于集合转数组时规范声明：【强制】使⽤集合转数组的⽅......
  • docker常用命令
    1.Docker的安装和配置（centos下）1)卸载旧版Docker:yumremovedocker\   docker-client\   docker-client-latest\   docker-common\   docker-latest\   docker-latest-logrotate\   ......
  • python 常用的100个小功能，你知道几个？
    这本书牛,适合Python已入门,看看各种一行代码能干的事情,绝对提神。本书一共150页,包括各种一行代码所能做的事情,具体有Python小技巧、数据科学、机器学习、正则表达式和算法六大章节：img此书可谓前无古人,后无来者,我非常喜爱它,今天发出pdf版本与你共享。这是章节......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99