0

0

最全的数组方法汇总

小云云

小云云

发布时间:2017-12-13 15:35:11

|

2198人浏览过

|

来源于php中文网

原创

所谓数组,是无序的元素序列。 若将有限个类型相同的变量的集合命名,那么这个名称为数组名。组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按无序的形式组织起来的一种形式。 这些无序排列的同类数据元素的集合称为数组。本文我们主要和大家分享最全的数组方法汇总,我们将使用原生javascript方法,希望能帮助到大家。

创建数组
var colors = [];
var colors = ['red', 'blue'];
检测数组
if(arr instanceof Array) {}

如果网页中包含多个框架,则需要使用下面的方式检测数组

if(Array.isArray(arr)) {}
arr.valueOf()
var colors = ['red', 'yellow'];
colors.valueOf();
// > ['red', 'yellow']
arr.toString()
var colors = ['red', 'yellow'];
colors.toString();
// > "red,yellow"
arr.push(item)

从数组末尾添加元素,并返回新数组的长度

var colors = ['red', 'yellow'];
colors.push('pink');
// > 3
arr.pop()

从数组末尾删除元素,并返回被删除的元素

var colors = ['red', 'yellow'];
colors.pop();
// > 'yellow'
arr.unshift(item)

从数组头部添加元素,并返回新数组的长度

var colors = ['green', 'pink'];
colors.unshift('pink');
// > 3
arr.shift()

从数组头部删除元素,并返回被删除的元素

var colors = ['yellow', 'orange'];
colors.shift();
// > 'yellow'
arr.reverse()

反转数组的顺序,并返回重新排序之后的数组, 原数组会被改变

[1, 2, 3, 'reer', 'game', 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]
arr.sort(fn)

如果不传参数,默认情况下数组内的元素会被转换为字符串进行比较,因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变

  • 将数组内数值元素从小到大排序。

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]
  • 将数组内数值元素从大到小排序

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]
arr.concat(otherArr)

参数中传入元素或者数组, 会将该参数合并到arr中,返回合并后新的数组,原数组不会改变

var arr = [1, 3, 'jake'];
arr.concat('rose', [2, 'fi']);
// > [1, 3, 'jake', 'rose', 2, 'fi']
arr.slice()

剪切数组,返回剪切之后的数组,元素不会改变

  • 传入一个参数,表示起始位置,结束位置为最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]
  • 传入2个参数,表示起始位置与结束位置,但不包括结束位置所在的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]
arr.splice()

根据参数的不同,可以分别实现删除,插入,替换元素的作用,会改变原始数组

  • 删除

传入2个参数, 分别表示起始位置与要删除元素的个数,返回被删除掉的元素组成的数组

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, 1, "9", "doc"]
  • 插入

传入3个参数, [起始位置 | 要删除的项数 为0 | 要插入的元素], 最终返回删除掉的元素组成的数组,因为这里删除项数为0,因此会返回空数组

var arr = [2, 4, 6];
arr.splice(2, 0, 'red', 'green'); 
// > []
// arr: [2, 4, "red", "green", 6]
  • 替换

传入三个参数, [ 起始位置 | 要删除的项数 为1 | 要插入的元素 ],最终返回被删除掉的元素组成的数组

var arr = [2, 4, 9];
arr.splice(1, 1, ['tim', 'tom']);
// > [4]
// arr: [2, ['tim', 'tom'], 9]
  • 总结 因此,这个方法会因为参数的不同而实现不同的功能,所有的参数从头到尾依次为

[ 起始位置 | 要删除元素的个数 | 要插入元素的值,可以写入多个值 ]

arr.indexOf(item)

验证数组中是否含有某个元素,返回第一个匹配到的元素在数组中所在的位置,如果没有,则返回 -1

云点滴客户关系管理CRM OA系统
云点滴客户关系管理CRM OA系统

云点滴客户解决方案是针对中小企业量身制定的具有简单易用、功能强大、永久免费使用、终身升级维护的智能化客户解决方案。依托功能强大、安全稳定的阿里云平 台,性价比高、扩展性好、安全性高、稳定性好。高内聚低耦合的模块化设计,使得每个模块最大限度的满足需求,相关模块的组合能满足用户的一系列要求。简单 易用的云备份使得用户随时随地简单、安全、可靠的备份客户信息。功能强大的报表统计使得用户大数据分析变的简单,

下载
var arr = [2, 'tim', 4, 5, 2];
arr.indexOf('tim');
// > 1
arr.indexOf('jake');
// > -1
arr.lastIndexOf(item)

验证数组中是否含有某个元素,不过是从数组尾部开始查找,返回第一个匹配到的元素所在的位置,如果没有,则返回-1

var arr = [2, 'tim', 4, 5, 2];
arr.lastIndexOf('tim');
// > 1
arr.indexOf('jake');
// > -1
IE6, 7, 8 不支持indexOf与lastIndexOf方法
arr.every()

对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。会有一个函数作为every的参数,该函数也有3个参数,分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.every(function(item, index, array) {
    return item > 2;
})
// > false
arr.some()

对数组中的每一项运行给定函数,如果该函数对其中一项返回true,则返回true。会有一个函数作为every的参数,该函数也有3个参数,分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true
arr.filter(fn)

过滤方法。返回满足条件的元素组成的数组。fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]
arr.map(fn)

对数组的每一项进行计算等处理,返回处理结果组成的数组,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]
arr.forEach(fn)

遍历数组,没有返回值,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) {
    // do something
})
arr.reduce(fn)

缩减方法。fn的参数为
[ 前一个元素 | 当前元素,从1开始 | 后一个元素的序列,从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15
arr.reduceRight(fn)

与reduce一模一样,只是方向相反。

jQuery相关方法

$.each(arr, fn)

遍历数组或者对象,fn有2个参数,分别为, 比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});
  • 跳过一次循环 return | return true

  • 终止循环 return false

$.grep(arr, fn)

过滤方法,功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变
$.map(arr, fn)

对每项进行处理,返回处理结果组成的数组,此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响
$.inArray(item, array)

检测某一个元素item是否存在与数组之中,返回其所在的位置,如果不在,则返回-1

$.inArray(3, [1, 2, 3]);
// > 2
$.merge(arr1, arr2)

合并数组,会改变第一个参数的数组为合并之后的数组,返回合并之后的数组

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变,可以使用下面的方式来写
$.merge($.merge([], arr), arr2);
$.unique(arr)

过滤DOM数组中重复的元素

$.makeArray(obj)

将类数组对象转换为数组

$(elem).toArray()

将jQuery对象集合恢复成DOM数组

相关推荐:

最实用的JS数组函数整理

PHP常用数组(Array)函数总结整理

PHP 数组排序方法总结

几种PHP数组定义的方法

JavaScript如何创建数组?

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

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

精品课程

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

共18课时 | 4.6万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.3万人学习

Excel 教程
Excel 教程

共162课时 | 12万人学习

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

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