JavaScript数组方法

本文详细介绍了ECMAScript 3中定义的一些实用数组方法,包括join、reverse、sort、concat等,以及如何利用这些方法对数组进行操作。此外,还介绍了ES5新增的数组方法,如forEach、map、filter等,帮助开发者更高效地处理数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的。

1.join()

Array.join()是将数组中所有元素化成字符串连接在一起
返回最后生成的字符串
可以指定任意一个可选字符串在生成的字符串中用来分割数组的各个元素。如果不指定字符串。默认为逗号

var a=[1,2,3];
a.join(" ")                =>"1 2 3"
a.join("")                =>"123"
a.join(",")                =>"1,2,3"

var b=new Array(10);
b.join('-')                      =>"---------"

Array.join()是String.split()的逆向操作,String.split()是将字符串分割成若干块来创建一个字符串数组。

var s="hello world thank you"
s.split(" ");         =>["hello,world,thank,you"]
var str="hello/world/how/are/you"
str.split("/")    =>["hello", "world", "how", "are", "you"]

2.reverse

Array.reverse()是将数组中的元素逆序。他采取替换,不会通过将重新排列后的元素创建新的数组。而是在原先的数组中重新排列。
返回逆序后的数组。

var a=[1,2,3];
a.reverse()       =>[3, 2, 1]

3.sort()
Array.sort()将数组中的元素进行排序
返回排序后的原数组
Array.sort()不带参数时,默认以字母表顺序排序。

var a=new Array("banna","cherry","apple");
a.sort()   =>["apple", "banna", "cherry"]

为了按照其他方式排序,必须给sort()传递一个比较函数(决定了此函数的两个参数在排序后数组中的先后顺序)。
假设第一个参数在前,则函数返回一个<0的数
若第一个参数在后,函数返回一个>0的数
两个参数相等,返回0

var a=[33,4,111,885,2,4,5343];
a.sort(function(a,b){
  return a-b
})       =>[2, 4, 4, 33, 111, 885, 5343]
b.sort(function(s,t){
   var a=s.toLowerCase();

})     =>["BUG", "Cherry", "ant", "bubble", "cherrykoo"]

不区分大小写的字母表顺序排序
b.sort(function(s,t){
   var a=s.toLowerCase();
   var b=t.toLowerCase();
   if(a<b)return -1;
   if(a>b)return 1;
   return 0;
})   =>["ant", "bubble", "BUG", "Cherry", "cherrykoo"]

4.concat

Array.concat()创建并返回一个新数组,新数组的元素包括原始数组的元素,和concat()的参数,若果参数本身是数组,则连接的是数组的元素而不是数组本身。concat()不会递归扁平化数组,也不会修改调用的数组

var a=[1,2,3];
var b=[4,5,6,[7,8]];
a.concat(b)  =>[1, 2, 3, 4, 5, 6, Array[2]]
b         =>[4, 5, 6, Array[2]]并没有修改b

5.slice
Array.slice()返回指定数组的一个片段或子数组
不会修改原始数组
slice(form,to)

var a=[1,2,3,4,5];
a.slice(3)     =>[4, 5] 
只有一个参数,则参数是起始位置,一直截取到数组末尾,包括起始位置的元素
a.slice(3,4)   =>[4]   
两个参数,第一个是起始位置,第二个是结束位置,返回的新数组是form-to之间的元素,包括起始位置的元素,但不包括结束位置的元素
a.slice(1,-1)  =>[2, 3, 4]
a.slice(-3,-2) =>[3] 
a              =>[1, 2, 3, 4, 5]不会修改原始数组

5.splice
Array.splice()是在数组中插入,删除,替换元素常用的方法。
返回指定数组的一个片段或子数组
但是它会修改原数组!!
splice(from,num,item1,item2,…)

ar a=[1,2,3,4,5];
a.splice(3)    =>[4, 5] 从第四个开始,删除5个元素
a              =>[1, 2, 3]
a.splice(1,1)  =>[2]从第1个开始,删除1个元素
a              =>[1, 3]

第三个及其以后的参数指定了需要插入到数组中的元素,从第一个参数指定的位置开始插入。

var a=[1,2,3,4,5]
a.splice(2,1,["a","d"],"s")
a   =>[1, 2, Array[2], "s", 4, 5]

6.push()和pop()
Array.push()方法在数组尾部添加一个或多个元素,并返回数组的新长度
Array.pop()方法则相反,它删除数组尾部的最后一个元素,并返回它删除的值
两个方法都是在原始数组的基础上修改并替换原始数组。而不是生成一个新数组。push()和pop()方法允许将数组当做来使用,可实现先进后出的栈。

var a=[];
a.push(1,2,3);    =>3
a                 =>[1, 2, 3]
a.pop()           =>3
a                 =>[1, 2]

7.unshift()和shift()
unshift()和shift()与push()和pop()用法类似。不过unshift()和shift()是对数组头部的元素进行处理。
unshift()头部插入,返回数组的新长度。
shift()头部删除,返回删除元素。
8.toString和toLocalString
数组的toString()方法将每个元素专程字符串。与不带任何参数的join()是一样的

[1,2,[3,4,'c']].join(" ")    =>"1 2 3,4,c"
[1,2,[3,4,'c']].join()       =>"1,2,3,4,5"
[1,2,[3,4,'c']].toString(" ") =>"1,2,3,4,c"

ES5中,定义了9个新的数组方法来遍历,映射,过滤,检测,简化和搜索数组。

es5中,大多数数组方法的第一个参数接受一个函数,并对数组的每个元素调用一次该方法。如果有第二个参数,则调用的函数看作第二个参数的方法。
作为第一个参数的函数通常有三个参数function(v,i,a),但是更经常只使用第一个参数。
v:数组元素
i:元素索引
a:数组本身

1.forEach()从头至尾遍历数组。

var a=[1,2,3,4,5]
var sum=0;
a.forEach(function(v){      //函数只有一个参数
        sum+=v
    }
)

a        =>[1, 2, 3, 4, 5]
sum      =>15
var a=[1,2,3,4,5];
a.forEach(function(v,i,a){
    a[i]=v+1
})

a          =>[2, 3, 4, 5, 6]

forEach()无法在所有元素都传递给调用函数之前终止遍历。如果要提前终止,必须把forEach()方法放在一个try块中,并能抛出一个异常。若forEach()调用的函数抛出foreach.break异常,循环会提前终止。
2.map()方法
将调用的数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值。map()函数返回的是新数组,不会修改调用的数组。传递给map()的函数应该有返回值

var a=[1,2,3,4,5];
a.map(function(v){return v*v})  =>[1, 4, 9, 16, 25]

3.filter()方法返回的数组元素是调用的数组元素的一个子集
filter()传递的函数参数是用来逻辑判定的,该函数返回true或false。若返回true,那么这个元素就会成为子集的成员,被添加到作为一个返回值的数组中。

var a=[1,2,3,4,5]
a.filter(function(x){return x<3})   =>[1, 2]
a.filter(function(x,i){return i%2==0})  =>[1, 3, 5](i:0,2,4)

filter()方法返回的数组总是稠密的。

4.every()和some()方法是数组的逻辑判定,返回true或false

every()类似数学中”针对所有”的量词,当且仅当调用数组中所有元素都满足条件才会返回true
some()类似数学中”存在量词”,当数组中有一个元素满足条件就会返回true。当找到一个符合条件的元素就会终止遍历。

5.reduce()和reduceRight()使用指定的函数将数组元素进行组合,生成单个值

var a=[1,2,3,4,5]

var sum=a.reduce(function(x,v){return x+v},0)
sum     =>15

var product=a.reduce(function(x,v){return x*v},1)
product    =>120

var max=a.reduce(function(x,v){return (x>v)?x:v})
max      =>5         //当reduce()没有第二个参数,既没有初始值时,V的第一个值作为初始值。

reduce(function(x,v){},init)有两个参数,第一个是用于化简的函数(把两个值化简或组合成一个值),第二个是传递给函数的初始值。
init=v 即 init就是传递给函数的第一个参数x,v是数组元素。接下来调用中,v就是上一次操作化简得到的值。
reduceRight()工作原理与reduce()一样,不同的是它是按照数组索引由高到低处理数组。

6.indexOf()和lastIndexOf()搜索整个数组中具有指定值的元素。

返回找到的第一个元素的索引,没找到返回-1
indexOf(v,s) 第一个参数是要搜索的值,第二个参数是从哪里开始搜索。

var a=[2,4,7,1,7,3,63,7,1];

a.indexOf(7)       =>2

a.indexOf(7,4)     =>4

a.indexOf(7,5)     =>7

lastIndexOf()是从尾部开始搜索。

7.Array.isArray()

Array.isArray([])       =>true
Array.isArray({})       =>false
var a=[1,2,3]
Array.isArray(a)      =>true
typeof a              =>"object"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值