0

0

JavaScript数组常用API方法和遍历方法的小结(附示例)

不言

不言

发布时间:2019-04-11 10:36:00

|

2376人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于javascript数组常用api方法和遍历方法的小结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

数组 (array)

ES5 *

map

语法:[].map(function(item, index, array) {return xxx})
功能:遍历数组,返回回调返回值组成的新数组,不改变原数组,不会对空数组进行检测

forEach

语法:[].forEach(function(item, index, array) {})
功能:无法break,可以用try/catch中throw new Error来停止,不改变原数组

filter

语法:[].filter(function(item, index, array) {})
功能:过滤,返回过滤后的数组,不改变原数组,不会对空数组进行检测

eg:

立即学习Java免费学习笔记(深入)”;

const data = [-8, 9, 5, 3];
const res = data.filter(function(item) {
    if (item > 3) {
      return item
    }
});
console.log(res); // [9, 5]

some

语法:[].some(function(item, index, array) {})
功能:有一项返回true,则整体为true,不改变原数组

every

语法:[].every(function(item, index, array) {})
功能:需要全部符合条件才返回true,有一项返回false,则整体为false,不改变原数组

join

语法:[].join(str)
功能:返回通过指定连接符str把数组连接成字符串,不改变原数组

push / pop

语法:[].push(item)   /  [].pop(item)
功能:数组末尾推入push和弹出pop,返回改变后数组的长度/弹出项,改变原数组

unshift / shift

语法:[].unshift(item)   /  [].shift(item)
功能:数组头部推入unshift和弹出shift,返回改变后数组的长度/弹出项,改变原数组

sort(fn) / reverse

语法:[].sort(fn)   [].reverse()
功能:按规则排序与反转,改变原数组

splice

语法:[].splice(start, number, value1, value2...)
功能:返回删除元素组成的数组,从start处开始删除number个值后插入valueN参数列表到数组中,改变原数组

concat

语法:[].concat([])
功能:连接n(n >= 2)个数组,返回数组连接后的数组副本,浅拷贝,不改变原数组

slice

语法:[].slice(start, end)
功能:返回截断后的新数组,不改变原数组

indexOf / lastIndexOf(value, fromIndex)

语法:[].indexOf(value[, fromIndex])
功能:
查找数组项
indexOf 从fromIndex(默认为0)开始向后查找value
lastIndexOf 从fromIndex(默认为-1)开始向前查找value
返回value对应的下标

reduce / reduceRight

语法:reduce / reduceRight(callback[, initialValue])
功能:两两执行,prev 为上次化简函数的return值,cur 为当前值(从第二项开始)
callback 函数的参数:之前值(previousValue)、当前值(currentValue)、索引值(currentIndex)以及数组本身(array)
initialValue 可选的初始值,作为第一次调用回调函数时传给previousValue的值。也就是,为累加等操作传入起始值(额外的加值)

reduceRight是从数组的末尾开始

isArray *

语法:Array.isArray(value)
功能:用于确定参数value是否是一个Array

ES6

find *

ind(fn)`
功能:返回符合条件的第一个数组元素item

findIndex  *

语法:[].findIndex(fn)
功能:返回符合条件的第一个数组元素的索引

from  *

语法:[].fill(value[, start, end])
功能:将类似数组的对象和可遍历(iterable)的对象转为真正的数组
常用:

百宝箱
百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台,无需任何代码基础,只需三步即可完成AI应用的创建与发布。

下载
const set = new Set(3, 8, 9, 0)
Array.from(set)

entries *

语法:[].entries()
功能:返回迭代器:返回键值对

【注】Object.entries(obj)方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)【MDN】
[].entries()是Array.prototype上的方法
keys/values 类似

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
    console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.entries()) {
    console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.entries()) {
    console.log(v)
}
// ['a', 'a'] ['b', 'b']

keys *

语法:[].keys()
功能:返回迭代器:返回键key(即上面的每个数组中的第一个值)

values

语法:[].values()
功能:返回迭代器:返回值value(即上面的每个数组中的第二个值)

includes *

语法:[].includes(val[, fromIndex])
功能:用于从fromIndex判断数组中是否包含val,可替代ES5中的 indexOf

copyWithin

语法:[].copyWithin(target[, start[, end]])
功能:浅复制数组的一部分(start~end)到同一数组中的另目标位置target,返回改变后的数组,而不修改其大小;start默认为0, end默认为length-1; 改变原数组

of

语法:Array.of()
功能:创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型

Array构造函数 & Array.of() 区别
实例说明

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

fill

语法:[].fill(value[, start, end])
功能:用指定的元素填充数组,可用于初始化数组,返回改变后的数组,改变原数组
填充值(value),填充起始位置(start,默认为0),填充结束位置(end,默认为数组length)。

遍历

数组

map/forEach/some/every/filter 见上

for

for...in

遍历所有可枚举属性,常用于遍历对象Object

for...of

遍历所有可迭代iterable的对象

对象【属性】

for...in

循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)【可枚举 - Symbol】

Object.keys(obj)

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)【自身可枚举 - Symbol】

Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)【自身 - Symbol】

Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有Symbol属性【自身的Symbol】

Reflect.ownKeys(obj)

返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举  【自身所有】

【相关推荐:JavaScript视频教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

409

2023.09.04

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

267

2025.12.04

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

492

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

382

2023.10.25

java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

120

2025.10.15

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

261

2025.10.24

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号