JavaScript 数组的方法

最新推荐文章于 2022-03-07 16:50:14 发布

Dark_programmer

最新推荐文章于 2022-03-07 16:50:14 发布

阅读量631

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/Dark_programmer/article/details/104703072

版权

js 专栏收录该内容

48 篇文章 4 订阅

订阅专栏

一、数组的方法

数组在js中经常用于保存数据，是操作频率非常高的数据类型，js也提供了很多方法来对数组进行操作。下面介绍常用的方法。

join()、push()、pop()、shift() 、 unshift()、sort()、reverse()、concat()、slice()、splice()、indexOf()、 lastIndexOf()、forEach() 、map() 、filter() 、every() 、some()

下面详细介绍一下各个方法的基本功能：

1、join() 原数组不会发生改变
join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString(“abc”, 3)); // abcabcabc
console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi

2、push()和pop() 原数组会发生改变
push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);       // 5
console.log(arr);         // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item);       // Sean
console.log(arr);        // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift() 原数组会发生改变
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头，并返回数组的长度 。

这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); 　　　　　　　　// 5
console.log(arr); 　　　　　　　　　//["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); 　　　　　　　　// Jack
console.log(arr); 　　　　　　　　 // ["Sean", "Lily", "lucy", "Tom"]

4、sort() 原数组会发生改变
sort()：对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组。
注意：
4.1：这里的排序是针对字符的排序，先使用数组的toString()方法转为字符串，再逐位比较，3是大于12的，因为首位3>1，不要与Number型的数据排序混淆

4.2：str2数组中增加了三个字符，可以看到，比较的时候，zoom是最大的，因为首位的英文字母通过ASCII码可以转为相应的数值，再根据数值比较

var str1 = [12,2,43,5,2,5];
var str2 = [92,2,43,"hello",5,2,5];
console.log(str1.sort());　　　　　　　　//[12, 2, 2, 43, 5, 5]
console.log(str1);　　　　　　　　　　　　//[12, 2, 2, 43, 5, 5]
console.log(str2.sort());　　　　　　　　//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]
console.log(str2);　　　　　　　　　　　　//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]

4.3：排序问题

参数：sort(callback) 如果需要按照数值排序，需要传参。sort(callback)，callback为回调函数，该函数应该具有两个参数，比较这两个参数，然后返回一个用于说明这两个值的相对顺序的数字（a-b）。其返回值如下：

若 a 小于 b，返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

var str3 = [92,2,43,5,2,5];     
console.log(str3.sort(fn));　　　　　 　　//[2, 2, 5, 5, 43, 92]
console.log(str3);　　　　　　　　　　　　 //[2, 2, 5, 5, 43, 92]
function fn (a,b){
　　　　return a-b;
 }

5、reverse() 原数组会发生改变
reverse()将：数组的数据进行反转，并且返回反转后的数组

var str1 = [12,2,"hello"];
console.log(str1.reverse());　　　　　　//["hello", 2, 12]
console.log(str1);　　　　　　　　　　　　//["hello", 2, 12]

6、concat() 原数组不会发生改变
concat()：合并数组，可以合并一个或多个数组，会返回合并数组之后的数据

var str1 = [12,2,"hello"];var str2 = ["world"];
console.log(str1.concat(str2));　　　　　　　　//[12, 2, "hello", "world"]
console.log(str1);　　　　　　　　　　　　　　　　//[12,2,"hello"];

7、slice() 原数组不会发生改变
slice()：截取指定位置的数组，并且返回截取的数组，不会改变原数组

参数：slice(startIndex, endIndex)

该方法有两个参数start和 end。start为必选，表示从哪里开始；end为可选，表示截取到第几位, (含头不含尾),不写则表示到最后。

start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。

var arr = ["T1","J1","L1","L2","M1"];
    console.log(arr.slice(1,3));        //["J1","L1"]
    console.log(arr.slice(1));          //["J1","L1","L2","M1"]
    console.log(arr.slice(-4,-1));      //["J1","L1","L2"]
    console.log(arr.slice(-2));         //["Lily","M1"]
    console.log(arr.slice(1,-2));       //["J1","L1"]
    console.log(arr);                   //["T1","J1","L1","L2","M1"]

8、splice() 原数组会发生改变
splice()：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。

参数：splice(start,num,data1,data2,…); 所有参数全部可选。

start代表开始的位置，在下标为 start 的地方进行操作；
num为0代表着要在此处插入数据；
非0代表着替换相应长度的数据
data1，data2 ...代表着要插入的数据，或要替换成的数据

// 插入数据
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,0,"a","b"));  //[]
console.log(arr);    //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原数组改变
// 替换数据
var arr = ["Tom","Jack","Lucy","Lily","May"]; 
arr.splice(2,1,'push')
console.log(arr)  //["Tom", "Jack", "push", "Lily", "May"]
// 删除数据
var arr = ["Tom","Jack","Lucy","Lily","May"]; 
arr.splice(2,2)
console.log(arr)    //["Tom", "Jack", "May"]

9、indexOf() 原数组不会发生改变
indexOf()：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

参数：indexOf(value, start);
value为要查询的数据；
start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

注意：如果找到该数据，立即返回该数据的索引，不再往后继续查找

 var str = ["h","e","l","l","o"];
 console.log(str.indexOf("l"));        //2
 console.log(str.indexOf("l",3));      //3
 console.log(str.indexOf("l",4));      //-1
 console.log(str.indexOf("l",-1));     //-1
 console.log(str.indexOf("l",-3));     //2

10、 lastIndexOf() 原数组不会发生改变
lastIndexOf()：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

参数：indexOf(value, start);
value为要查询的数据；
start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

var str = ["h","e","l","l","o"];
console.log(str.lastIndexOf("l"));        //2
console.log(str.lastIndexOf("l",3));      //3
console.log(str.lastIndexOf("l",4));      //-1
console.log(str.lastIndexOf("l",-1));     //-1
console.log(str.lastIndexOf("l",-3));     //2

11、forEach()原数组不会发生改变
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。

参数都是function类型，默认有传参
参数分别为：遍历的数组内容 ( 元素的每一项 item )；item 对应的数组索引;数组本身。

var arr = ["h","e","l","l","o"];
arr.forEach(function(item,index,arr){
    console.log('item:'+item,'index:'+index,'arr:'+arr)
})
//	item:h index:0 arr:h,e,l,l,o
//	item:e index:1 arr:h,e,l,l,o
//	item:l index:2 arr:h,e,l,l,o
//	item:l index:3 arr:h,e,l,l,o
//	item:o index:4 arr:h,e,l,l,o

12、map()原数组不会发生改变
map()：功能同 forEach()一样。

参数：map(callback);
callback默认有三个参数，分别为value，index，self。跟上面的forEach()的参数一样

var arr = ["h","e","l","l","o"];
arr.map(function(item,index,arr){
    console.log('item:'+item,'index:'+index,'arr:'+arr)
})
//	item:h index:0 arr:h,e,l,l,o
//	item:e index:1 arr:h,e,l,l,o
//	item:l index:2 arr:h,e,l,l,o
//	item:l index:3 arr:h,e,l,l,o
//	item:o index:4 arr:h,e,l,l,o

13、filter()原数组不会发生改变
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

参数：filter(callback);callback默认有三个参数，分别为value，index，self。

var arr = [1,2,3,4,5,6,7,8,9]
arr.filter((value,index,self)=>{
  return  value%3!=0
})

//	[1, 2, 4, 5, 7, 8]

var arr = ['ab','ac','ad','ae','abc','abd','abe']
arr.filter((value,index,self)=>{
  return value.indexOf('e')!=-1
})
//["ae", "abe"]

14、every()原数组不会发生改变
every()：判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true,否则返回false。

参数：every(callback);callback默认有三个参数，分别为value，index，self。

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.every((value,index,self)=>{
  return value<10 
})
console.log(bool)  //true

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.every((value,index,self)=>{
  return value>5
})
console.log(bool)  //false

15、some()原数组不会发生改变
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

参数：some(callback);callback默认有三个参数，分别为value，index，self。

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.some((value,index,self)=>{
  return value>5
})
console.log(bool)  //true

16、reduce()原数组不会发生改变
reduce()：从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

reduce(callback,initial);接收一个或两个参数：

第一个是回调函数，表示在数组的每一项上调用的函数；

callback默认有四个参数，分别为prev，now，index，self

第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。

var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
return prev+now
    }, 2019)

//	2019--10--0--true
//	2029--20--1--true
//	2049--30--2--true
//	2079--40--3--true
//	2119--50--4--true
//	2169

17、reduceRight()原数组不会发生改变
reduceRight()：（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。

var arr = [10,20,30,40,50];
    arr.reduceRight(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
return prev+now
    }, 2019)

//	2019--50--4--true
//	2069--40--3--true
//	2109--30--2--true
//	2139--20--1--true
//	2159--10--0--true
//	2169