首页 > web前端 > 前端问答 > javascript数组常用方法有哪些

javascript数组常用方法有哪些

青灯夜游
发布: 2023-01-06 11:17:53
原创
9515 人浏览过

常用方法:1、push();2、unshift();3、pop();4、shift();5、splic();6、slice();7、sort();8、concat();9、reverse();10、join();11、forEach()等。

javascript数组常用方法有哪些

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript数组的常用方法

数组提供了一些常用方法,可实现数组元素的添加、删除、替换以及排序等功能。

1) push(元素1,…,元素n)

push() 方法可把参数指定的元素依次添加到数组的末尾,并返回添加元素后的数组长度(该方法必须至少有一个参数)。示例如下:

var arr = [1,2,3];
alert(arr.push(4));//返回最终数组的长度:4
alert(arr);//返回:1,2,3,4
alert(arr.push(5,6,7));//返回最终数组的长度:7
alert(arr);//返回:1,2,3,4,5,6,7
登录后复制

2) unshift(元素1,…,元素n)

unshift() 方法可把参数指定的元素依次添加到数组的前面,并返回添加元素后的数组长度。该方法必须至少有一个参数。注意:IE6、IE7 不支持方法的返回值。示例如下:

var arr = [1,2,3];
alert(arr.unshift('a'));//返回最终数组的长度:4
alert(arr);//返回:a,1,2,3
alert(arr.unshift('b','c','d'));//返回最终数组的长度:7
alert(arr);//返回:b,c,d,a,1,2,3
登录后复制

3) pop()

pop() 方法可弹出(删除)数组最后一个元素,并返回弹出的元素。示例如下:

var arr = ['A','B','C','D'];
alert(arr.pop());//返回:D
alert(arr);//返回:A,B,C
登录后复制

4) shift()

shift() 方法可删除数组第一个元素,并返回删除的元素。示例如下:

var arr = ['A','B','C','D'];
alert(arr.shift());//返回:A
alert(arr);//返回:B,C,D
登录后复制

5) splice(index,count[,元素1,…,元素n])

splic() 方法功能比较强,它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素。这些不同功能的实现需要结合方法参数来确定:

当参数只有 index 和 count 两个参数时,如果 count 不等于 0,splice() 方法实现删除功能,同时返回所删除的元素:从 index参数指定位置开始删除 count 参数指定个数的元素;

当参数为 3 个以上,且 count 参数不为0时,splice() 方法实现替换功能,同时返回所替换的元素:用第三个及其之后的参数替换 index 参数指定位置开始的 count 参数指定个数的元素;

当参数为 3 个以上,且 count 参数为 0 时,splice() 方法的实现添加功能:用第三个及其之后的参数添加到 index 参数指定位置上。

splice() 方法实现的各个功能示例如下。

① 使用 splice() 从指定位置删除指定个数的元素:

var arr = ['A','B','C','D'];
//2个参数,第二个参数不为 0,实现删除功能
alert(arr.splice(0,2));
alert(arr);  //返回C,D
登录后复制

② 使用 splice() 用指定元素替换从指定位置开始的指定个数的元素:

var arr = ['A','B','C','D'];
//3个参数,第二个参数不为 0,实现替换功能:用 a 替换掉 A,返回:A
alert(arr.splice(0,1,'a'));
alert(arr);  //返回:a,B,C,D
alert(arr.splice(0,2,'a or b'));//用a or b替换掉a和B,返回a,B
alert(arr);  //返回:a or b,C,D
登录后复制

③ 使用 splice() 在指定位置添加指定的元素:

var arr = ['A','B','C','D'];
//4个参数,第二个参数为 0,实现添加功能:在下标为 1 处添加 aaa,bbb,没有返回值
alert(arr.splice(1,0,'aaa','bbb'));
alert(arr);//返回:A,aaa,bbb,B,C,D
登录后复制

【例 1】使用 splice() 方法实现数组去重。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用splice方法实现数组去重</title>
<script>
     var arr = [1,2,2,2,4,2];
     for(var i = 0; i < arr.length; i++){
         for(var j = i + 1; j < arr.length; j++){
              if(arr[i] == arr[j]){
                  arr.splice(j,1);//删除 j 位置处的元素
                  j--;
              }
         }
     }
     alert(arr);//返回1,2,4三个元素
</script>
</head>
<body>
</body>
</html>
登录后复制

上述代码使用了具有两个参数的 splice(),实现了删除指定元素的功能。

6) slice(index1[,index2])

slice() 方法返回包含从数组对象中的第 index1~index2-1 之间的元素的数组。index2 参数可以省略,省略时表示返回从 index1 位置开始一直到最后位置的元素。需要注意的是,该方法只是读取指定的元素,并不会对原数组作任何修改。

示例如下:

var arr = [&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;];
alert(arr.slice(0,3));  //返回:A,B,C
alert(arr);   //返回A,B,C,D
alert(arr.slice(0));   //返回数组全部元素:A,B,C,D
alert(arr);   //返回A,B,C,D
登录后复制

7) sort()、sort(compareFunction)

sort() 方法用于按某种规则排序数组:当方法的参数为空时,按字典序(即元素的 Unicode 编码从小到大排序顺序)排序数组元素;当参数为一个匿名函数时,将按匿名函数指定的规则排序数组元素。sort() 排序后将返回排序后的数组,示例如下。

① 按字典序排序数组。

var arr = [&#39;c&#39;,&#39;d&#39;,&#39;a&#39;,&#39;e&#39;];
alert(arr.sort());   //返回排序后的数组:a,c,d,e
alert(arr);   //返回排序后的数组:a,c,d,e
登录后复制

从上述代码,我们可看到没有参数时,sort() 按字典序排列数组中的各个元素。

下面我们再用元素的 sort() 对几个数字排序,看看结果如何:

var arr = [4,3,5,76,2,0,8];
arr.sort();
alert(arr);  //返回排序后的数组:0,2,3,4,5,76,8
登录后复制

我们看到排序后,结果并不是所预期的 76 最大应排在最后,反而是 8 排在最后,似乎 8 在这些元素中是最大的,即元素并没按数字大小进行排序。

为什么会出现这样的结果呢?这是因为 sort() 默认是对每个元素按字符串进行排序,排序时会从左到右按位比较元素的每位字符,对应位的 Unicode 编码大的就意味着这个元素大,此时将不再对后面的字符进行比较;对应位字符相同时才比较后面位置的字符。显然上述数组的排序使用了 sort() 的默认排序规则。此时要让数组中的元素按数字大小进行排序,就必须通过匿名函数参数来修改排序规则。

② 按匿名函数参数指定的规则排序数组。

下面通过定义匿名函数来修改 sort() 的默认排序规则,实现对上面数字元素按数字大小进行排序:

var arr = [4,3,5,76,2,0,8];
arr2.sort(function(a,b){
     return a-b;//从小到大排序
     //return b-a;//从大到小排序
});
alert(arr);//返回排序后的数组:0,2,3,4,5,8,76
登录后复制

说明:匿名函数中返回第一个参数减第二个参数的值,此时将按元素数值从小到大的规则排序各个元素:当两个参数的差为正数时,前后比较的两个元素将调换位置排序;否则元素不调换位置。如果返回第二个参数减第一个参数的值,则按元素数值从大到小的规则排序各个元素,元素调换规则和从小到大类似。

当数组元素的前缀为数字而后缀为字符串时,如果希望这些元素能按数字大小进行排序,此时需对匿名函数中的参数作一些变通处理。因为这些参数代表了数组元素,所以它们也是一个包含数字和字符的字符串,因此要按数字大小来排序它们,就需要将参数解析为一个数字,然后再返回这些解析结果的差。

示例如下:

var arrWidth = [&#39;345px&#39;,&#39;23px&#39;,&#39;10px&#39;,&#39;1000px&#39;];
arrWidth.sort(function(a,b){
     return parseInt(a)-parseInt(b);
});
alert(arrWidth);//排序后的结果为:10px,23px,345px,1000px
登录后复制

此外,我们通过匿名函数,还可以实现随机排序数组元素。示例如下:

var arr = [1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
     return Math.random()-0.5;//random()返回:0~1之间的一个值
});
alert(arr);//排序后的结果为:4,3,1,2,6,5,7,8。注意:每次执行的结果可能会不一样
登录后复制

上述代码中的匿名函数并没有返回两个参数的差值,而是返回 Math 对象中的 random() 随机函数和 0.5 的差值,这就使得元素的排序将不是根据元素大小来排序。由于 random() 的值为 0~1 之间的一个随机值,所以它和 0.5 的差时正时负,这就导致数组元素位置的调换很随机,所以排序后的数组是随机排序的。

8) concat(数组1,…,数组n)

concat() 将参数指定的数组和当前数组连成一个新数组。示例如下:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [7,8,9];
alert(arr1.concat(arr2,arr3));//最终获得连接后的数组:1,2,3,4,5,6,7,8,9
登录后复制

9) reverse()

reverse() 方法可返回当前数组倒序排序形式。示例如下:

var arr = [1,2,3,4,5,6];
alert(arr.reverse());//返回:6,5,4,3,2,1
登录后复制

10) join(分隔符)

join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略,省略参数时,分隔符默认为“逗号”。

11) forEach()

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

语法如下:

array对象.forEach(function(currentValue[,index[,array]])[,thisArg])
登录后复制

forEach() 方法的第一个参数为 array 对象中每个元素需要调用的函数。

forEach() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

forEach() 函数的返回值为 undefined。示例如下:

var fruit = ["苹果","橙子","梨子"];
fruit.forEach(function(item,index){
    console.log("fruit[" + index + "] = " + item);
});
登录后复制

上述示例的运行后将在控制台中分别显示:fruit[0]=苹果、fruit[1]=橙子和fruit[2]=梨子。

12) filter()

filter() 方法用于创建一个新的数组,其中的元素是指定数组中所有符合指定函数要求的元素。

语法如下:

array对象.filter(function(currentValue[,index[,array]])[,thisArg])
登录后复制

filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

filter() 函数返回一个新数组,其中包含了指定数组中的所有符合条件的元素。如果没有符合条件的元素则返回空数组。

示例如下:

var names1 = ["张山","张小天","李四","张萌萌","王宁","陈浩"];//原数组
function checkName(name){ //定义回调函数,判断名字是否姓“张”
     if(name.indexOf("张") != -1){
              return true;
         }else{
              return false;
         }
}
var names2 = names1.filter(checkName);//对names1执行回调用函数,返回所有姓张的名字
names2.forEach(function(item,index){//遍历names2数组中的每个元素
          console.log("names2[" + index + "] = " + item);
});
登录后复制

上述示例运行后将在控制台中分别显示:names2[0]=张山、names2[1]=张小天和names2[2]=张萌萌。

13) map()

map() 方法用于创建一个新的数组,其中的每个元素是指定数组的对应元素调用指定函数处理后的值。

语法如下:

array对象.map(function(currentValue[,index[,array]])[,thisArg])
登录后复制

map() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数。

map() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

map() 函数返回一个新数组,其中的元素为原始数组元素调用回调函数处理后的值。示例如下:

var number = [1,2,3];//原数组
var num=number.map(function(item){//对原数组中的每个元素*2,将值分别存储在num数组中
          return item * 2;
});
num.forEach(function(item,index){//遍历num中的每个元素
          console.log("num[" + index + "]=" + item);
});
登录后复制

上述示例运行后将在控制台中分别显示:num[0]=2、num[1]=4和num[2]=6。

14) reduce()

reduce() 用于使用回调函数对数组中的每个元素进行处理,并将处理进行汇总返回。语法如下:

array对象.reduce(function(result,currentValue[,index[,array]])[,initialValue])
登录后复制

reduce() 方法的第一个参数为回调函数。

reduce() 方法中的各个参数说明如下。

  • result 参数:必需参数,表示初始值或回调函数执行后的返回值。在第一次调用回调函数前,result 参数表示初始值;在调用回调函数之后,result 参数表示回调函数执行后的返回值。

    需要注意的是,如果指定了 initialValue 参数,则初始值就是 initialValue 参数值,否则初始值为数组的第一个元素。

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素)。

    需要注意的是,如果指定了 initialValue 参数,则第一次执行回调函数时的 currentValue 为数组的第一个元素,否则为第二个元素。

  • index 参数:可选参数,表示正在处理的当前元素的索引。

  • array 参数:可选参数,表示方法正在操作的数组。

  • initialValue 参数,可选参数,作为第一次调用回调函数时的第一个参数的值。如果没有提供该参数,第一次调用回调函数时的第一个参数将使用数组中的第一个元素。

    需要注意的是:对一个空数组调用 reduce() 方法时,如果没有指定 initialValue 参数此时将会报错。

reduce() 的使用示例如下:

var num1 = [1,3,6,9];
//reduce()没有initialValue参数
var num2 = num1.reduce(function(v1,v2){ //①
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
});
console.log("num2=" + num2);//输出:num2=37
//reduce()提供了initialValue参数
var num3 = num1.reduce(function(v1,v2){ //②
     return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加
},2);
console.log("num3=" + num3); //输出:num3=40
登录后复制

上述示例中,① 处调用的 reduce() 没有指定 initialValue 参数,因而初始值为数组的第一个元素,即 1,此时 reduce() 的执行过程等效于:1+2*3+2*6+2*9 运算表达式的执行,结果返回 37。② 处调用的 reduce() 指定了值为 2 的 initialValue 参数,因而初始值为 2,此时 reduce() 的执行过程等效于:2+2*1+2*3+2*6+2*9 运算表达式的执行,结果返回 40。

15) find()

find() 用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素,将返回 undefined。

语法如下:

array对象.find(function(currentValue[,index[,array]])[,thisArg])
登录后复制

filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。

filter() 方法中的各个参数说明如下:

  • currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);

  • index 参数:可选参数,表示正在处理的当前元素的索引;

  • array 参数:可选参数,表示方法正在操作的数组;

  • thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。

find() 函数使用示例如下:

var names = ["Tom","Jane","Marry","John","Marissa"];
//定义回调函数
function checkLength(item){
     return item.length >= 4;
}
var name = names.find(checkLength);//返回名字数组中名字长度大于或等于4的第一个名字
console.log("name: " + name);
登录后复制

上述示例运行后将在控制台中输出 name:Jane。

【相关推荐:javascript学习教程

以上是javascript数组常用方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板