0

0

JavaScript数组方法总结

大家讲道理

大家讲道理

发布时间:2017-01-23 11:10:54

|

1584人浏览过

|

来源于php中文网

原创

javascript 中的数组本身就很特别,不像 c 或 java,搞了数组、list 一整套东西,js 中的数组就完全可以当作一个栈或队列来使用,四大操作 pop、push、shift、unshift。

对于一个数组方法,最关心的有两个问题, 返回值是什么,会不会对原始数组造成影响 ,典型的例子就是 splice 和 slice 方法。对于那些返回原数组的函数,我们可以直接调用数组的链式调用,很酷( array.filter().sort().reverse() )。

我想带着这两个疑问,来总结下 Array 的数组方法。

Array

Array.length 是数组的长度,每个新建的数组对象都会有 length 对象,可以通过 Array.prototype 修改原型,不过数组的基本使用和操作不是今天的重点,我们来看数组方法。

一般情况下,数组方法在最后都会带有一个 thisArg 的参数,这个参数会指定内部 this 的指向。如果参数中有回掉函数,这个回掉函数一般接受 3 个参数,value、index 和 array,分别代表当前传入的值,当前传入值所在的索引和当前的处理的数组。

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

目录索引:

concat

这个方法可以用于数组的拼接,参数是一个或多个数组,返回的结果是拼接数组。 

concat 方法将创建一个新数组,然后将调用它的对象(this 指向的对象,即原数组)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组。concat 方法并不修改原数组和参数数组,而且对非数组对象同样有效果。

  1. 返回拼接的新数组;

  2. 不修改原数组和参数数组;

  3. 参数可以是非数组。

var a1 = [1, 2, 3],
  a2 = [4, 5, 6],
  a3 = [7, 8, 9];
var newarr = a1.concat(a2, a3);
newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]
a1 //[1, 2, 3]
newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]
newarr = a1.concat('hello');//[1, 2, 3, "hello"]

every

every() 方法测试数组的所有元素是否都通过了指定函数的测试。 

arr.every(callback) 会对每一个元素都执行 callback 方法,直到 callback 返回 false。有时候 every 方法会和 forEach 方法相比较,因为 forEach 无法停止,而 every 方法返回 flase 时可以中途停止。

  1. 若全部通过测试,函数返回值 true,中途退出,返回 false;

  2. 不对原数组产生影响。

function isBigEnough(element, index, array) {
  console.log(index);
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// 0
// 1
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// 0 1 2 3 4
// passed is true

filter

filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

其实这个方法就是一个过滤方法,前面那个 every 方法,只判断不过滤,filter 会过滤掉一些不符合条件的,并返回新数组。

  1. 返回一个满足过滤条件的新数组;

  2. 不会改变原数组。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [19, 22, 6, 2, 44];
var a2 = a1.filter(isBigEnough);
a1 //[19, 22, 6, 2, 44]
a2 //[19, 22, 44]

forEach

forEach() 方法对数组的每个元素执行一次提供的函数(回调函数)。 

  1. 函数没有返回值,即 underfined;

  2. 不对原数组产生影响。

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了,因为在数组的这个位置没有项
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined

indexOf

indexOf()方法返回给定元素能找在数组中找到的第一个索引值,否则返回-1。

  1. 返回值是找到元素的索引值或 -1;

  2. 不对原数组产生影响。

var array = [1, 2, 5];
array.indexOf(5); // 2
array.indexOf(7); // -1

join

join() 方法将数组中的所有元素连接成一个字符串。

其实,对于 join 想到的第一个是字符串的 split 操作,这两个经常搭配用来处理字符串。

  1. 返回拼接的字符串;

  2. 不对原数组产生影响。

var a1 = [1, 2, 3];
var a2 = a1.join();
a1 //[1, 2, 3]
a2 //"1,2,3"
a2 = a1.join("");//"123"
a2 = a1.join("-");//"1-2-3"

lastIndexOf

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。 

其实这个就是 indexOf 的翻版。

  1. 返回找到的第一个元素的索引;

  2. 不对原数组产生影响。

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);

map

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 

map reduce 这两个函数在处理数组上一直都是一把手,带来很大的便捷性。

  1. 返回一个经过回掉函数处理的新数组;

  2. 不对原数组产生影响。

var a1 = [1, 4, 9];
var a2 = a1.map(Math.sqrt);
a1 //[1, 4, 9]
a2 //[1, 2, 3]

reduce

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。 

reduce 是一个合并的过程,从左到右,直到把所有元素合并到一起,并返回最终的结果。它接受两个参数,第一个参数是一个回掉函数,第二个参数是一个初始值,表示处理第一个元素时的前一个值。这个回掉函数接受四个参数,依次是 accumulator(上次处理的结果),currentValue(当前元素的值),index(当前元素索引),array(调用 reduce 的数组)。

  1. 返回最终合并的结果,即回掉函数的输出,可以为字符串,对象,数组等任意结果;

  2. 不对原数组产生影响。

var getAdd = (pre, cur) => pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(getAdd, 0);
a1 //[1, 2, 3]
a2 //6

reduceRight

reduceRight() 方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)

var toStr = (pre, cur) => '' + pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(toStr, '');
a2 //"123"
a2 = a1.reduceRight(toStr, '');
a2 //"321"

push

push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。

如果把数组当作栈,push pop 操作是栈进和出,而往往很多人会忽略函数执行后的返回值。

  1. 返回 push 操作执行之后数组的长度;

  2. 肯定改变。

    crmeb电商系统
    crmeb电商系统

    CRMEB 是基于Thinkphp5基础开发的以会员为中心的电商系统,开源版微信公众号商城和小程序商城数据同步,带积分、优惠券、秒杀、砍价、分销等功能,更是一套方便二次开发的商城框架(后台封装了独有快速创建表单功能,无需写表单页面、快速创建数据搜索和数据列表页、导出表格、系统权限配置控制每一个控制器方法、系统参数配置、数据字典、组合数据等)

    下载
var a1 = [1, 2, 3];
var a2 = a1.push(4);
a1 //[1, 2, 3, 4]
a2 //4

pop

pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。 

  1. 返回删除的这个元素;

  2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.pop();
a1 //[1, 2]
a2 //3

unshift

unshift() 方法在数组的开头添加一个或者多个元素,并返回数组新的 length 值。

  1. 返回 length 值;

  2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.unshift(4);
a1 //[4, 1, 2, 3]
a2 //4

shift

shift() 方法删除数组的 第一个 元素,并返回这个元素。该方法会改变数组的长度。 

shift 方法和 push 方法可以组成一个队列的操作啦。

  1. 返回删除的这个元素;

  2. 肯定改变。

reverse

reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个,最后一个会成为第一个。 

  1. 函数返回值是修改了的原数组;

  2. 原数组会修改。

var a1 = [1, 2, 3];
var a2 = a1.reverse();
a1 //[3, 2, 1]
a1 === a2; //true

slice

slice() 方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。 

slice 的参数包括拷贝的初识位置,结束位置(左闭右开),与 splice 有区别。由于不会改变原数组,这个数组可以用于前拷贝,比如经常看别人使用: arr.slice(0) ,表示拷贝数组。

  1. 返回浅拷贝后的新数组;

  2. 不会改变原数组。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.slice(1, 3);
a1 //[1, 2, 3, 4, 5]
a2 //[2, 3]

splice

splice() 方法用新元素替换旧元素,以此修改数组的内容。 

如其名,分割,会修改原数组的内容,返回一个新数组,而且它的参数也比较多,第一个参数表示初始位置,第二个参数表示分割长度,第三个参数及以后表示分割后在分割处添加新元素。

  1. 返回分割的元素组成的数组;

  2. 会对数组进行修改,原数组会减去分割数组。

var a1 = [1, 2, 3, 4];
var a2 = a1.splice(1, 2);
a1 //[1, 4]
a2 //[2, 3]
a1 = [1, 2, 3, 4];
a2 = a1.splice(1, 2, 5, 6);
a1 //[1, 5, 6, 4]

some

some() 方法测试数组中的某些元素是否通过了指定函数的测试。 

sort

sort() 方法对数组的元素做原地的排序,并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点(code point)排序。 

sort 函数用于排序,比较常用,若没有制定排序函数,则按照 unicode 位点进行排序,而且数字会被转成字符串,所以 ‘123’ 要排在 ‘11’ 的后面。

我们会用 sort 做一些有意思的排序,比如汉字按照拼音排序。

  1. 返回排序后的原数组;

  2. 会对数组进行修改。

var big = function(a, b){
  return a - b;
}
var a1 = [2, 4, 77, 1];
var a2 = a1.sort(big);
a1 //[1, 2, 4, 77]
a1 === a2; //true

localeCompare 可以对汉字进行排序,当同时出现汉字和字母的时候会有 bug:

var sort_py = function(a, b){
  return a.localeCompare(b);
}
var a1 = ["北京", "上海", "南京", "合肥"];
a1.sort(sort_py);
//["北京", "合肥", "南京", "上海"]

toString

toString() 返回一个字符串,表示指定的数组及其元素。 

显然,这个方法和 join 方法比较一下。

  1. 返回拼接的字符串;

  2. 不会改变原数组。

var a1 = [1, 2, 3];
var a2 = a1.toString();
a2 //"1,2,3"

ES6 中新添的数组方法

上面的这些方法都是 ES5 的,来看看 ES6 添加了哪些新方法。

copyWithin

copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的大小,返回该数组。 

接受三个参数,分别是要拷贝到的位置 target,拷贝开始位置 start 和结束位置 end。

  1. 返回修改了的原数组;

  2. 会对数组进行修改,且是浅拷贝;

  3. 参数可负,负值时倒推,且 end 为空表示数组长度。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.copyWithin(0, 2, 4);
a1 //[3, 4, 3, 4, 5]
a2 //[3, 4, 3, 4, 5]
a1 === a2; //true

find

如果数组中某个元素满足测试条件,find() 方法就会返回满足条件的第一个元素,如果没有满足条件的元素,则返回 undefined。 MDN array.find

  1. 返回找到的那个元素,若未找到,返回 underfined

  2. 不对原数组产生影响。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [8, 18, 14];
var num = a1.find(isBigEnough); //18

findIndex

findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 

这个方法可以参考 find 方法,只是返回值是元素的索引而非元素本身。

fill

使用 fill() 方法,可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 

fill 方法接受三个参数,第一个参数 value 表示要填充到值,后面两个 start 和 end 表示开始和结束位置,可选,且左闭右开。

  1. 函数返回值是修改了的原数组;

  2. 可对数组产生影响。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.fill(6, 1, 4);
a1 //[1, 6, 6, 6, 5]
a2 //[1, 6, 6, 6, 5]
a1 === a2; //true

keys

数组的 keys() 方法返回一个数组索引的迭代器。 

这个方法会返回一个数组索引的迭代器,迭代器在 ES6 中有特殊的用途。

  1. 函数返回一个迭代器对象;

  2. 不会改变原数组。

var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

entries

entries() 方法返回一个 Array Iterator 对象,该对象包含数组中每一个索引的键值对。 

var arr = ["a", "b", "c"];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, "a"]
console.log(eArr.next().value); // [1, "b"]
console.log(eArr.next().value); // [2, "c"]

includes

includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。 

该函数接受两个参数,第二个参数表示开始查找位置,起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引,一个是布尔值,indexOf 方法使用的是 === 来判断,无法判断 NaN 情况,而 includes 可以判断。

  1. 返回 true 或 false;

  2. 不会改变原数组。

var a1 = [1, NaN];
a1.indexOf(NaN);//-1
a1.includes(NaN);//true

 

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

58

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.2万人学习

【李炎恢】ThinkPHP8.x 后端框架课程
【李炎恢】ThinkPHP8.x 后端框架课程

共50课时 | 4.4万人学习

nginx浅谈
nginx浅谈

共15课时 | 0.8万人学习

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

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