数组的常用方法总结

最新推荐文章于 2024-02-26 09:19:07 发布

七小天

最新推荐文章于 2024-02-26 09:19:07 发布

阅读量425

点赞数 1

本文链接：https://blog.csdn.net/QXT___/article/details/117262081

版权

数组的常用方法总结

这里写目录标题

数组的常用方法总结
ES5新增的数组方法
ES6新增的数组方法
ES7新增的数组方法

1. push() 向数组中添加数据

 语法： 数组.push(你要添加的数据)
          	直接改变原始数组
          	添加的数据是放在数组的最后一个
      		返回值：添加过后数组的长度
      		
  var arr = [1, 2, 3, 4, 5] //示例数组
  var res = arr.push(6)
  
  console.log(arr)  打印结果： [1, 2, 3, 4, 5, 6] //直接改变原始数组
  console.log(res)  打印结果： 6 //添加过后数组的长度

2. pop() 删除数组中的最后一个数据

 语法： 数组.pop()
           	直接改变原始数组
           	删除数组中的最后一个
         	返回值： 被删除的那一个数据
         	
  var arr = [1, 2, 3, 4, 5] //示例数组
  var res = arr.pop()
  
  console.log(arr)  打印结果： [1, 2, 3, 4] //直接改变原始数组
  console.log(res)  打印结果： 5 //被删除的那一个数据

3. unshift() 向数组中最前面添加数据

 语法： 数组.unshift(你要添加的数据)
          	直接改变原始数组
          	添加在数组的最前面
          	返回值： 改变后数组的长度
          
  var arr = [1, 2, 3, 4, 5] //示例数组
  var res = arr.unshift('hello')
  
  console.log(arr)  打印结果： ["hello", 1, 2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果： 6 //改变后数组的长度

4. shift() 删除数组中的第 0 个数据

 语法： 数组.shift()
          	直接改变原始数组
          	删除数组中的第 0 个数据
          	返回值： 被删除的那一条数据
          
  var arr = [1, 2, 3, 4, 5] //示例数组
  var res = arr.shift()
  
  console.log(arr)  打印结果： [2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果： 1 //被删除的那一条数据

5. concat() 对数组进行拼接

 语法： 数组.concat(你要拼接的内容)，理论上可以无限传递参数
          	不改变原始数组
          	返回值： 拼接过后的数组
          
  var arr = ['hello']
  var res = arr.concat(['你', '好'], ['欢', '迎'])
  
  console.log(arr)  打印结果： ['hello'] //不改变原始数组
  console.log(res)  打印结果： ["hello", "你", "好", "欢", "迎"] //拼接过后的数组

6. splice() 对数组进行截取

 语法1： 数组.splice(开始的索引， 截取多少个)
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
          
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(1, 1)
  
  console.log(arr)  打印结果： ["hello", "你好", "世界"] //直接改变原始数组
  console.log(res)  打印结果： ["world"] //截取出来的内容
  
  
 语法2： 数组.splice(只传一个参数)
 			当第二个参数不传递的时候，就是从哪个索引开始截取的到数组的末尾
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
          
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(2,1,'新值1','新值2')
  
  console.log(arr)  打印结果： ["hello", "world", "新值1", "新值2", "世界"] //直接改变原始数组
  console.log(res)  打印结果： ['你好'] //截取出来的内容
    
    
 语法3： 数组.splice(开始的索引， 截取多少个，值1，值2)
 			从第三个参数开始，都是替换掉截取的位置
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
          
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(2)
  
  console.log(arr)  打印结果： ['hello', 'world'] //直接改变原始数组
  console.log(res)  打印结果： ['你好', '世界'] //截取出来的内容

7. slice() 截取数组中的值

 语法1： 数组.slice(开始的索引，结束的索引) 💢注：包前不包后
          	不改变原始数组
          	返回值： 以数组的形式返回截取的内容
          
  var arr = ['h', 'e', 'l', 'y', 'o', 'w', 'x']
  var res = arr.slice(1, 5)
  
  console.log(arr)  打印结果： ['h', 'e', 'l', 'y', 'o', 'w', 'x'] //不改变原始数组
  console.log(res)  打印结果： ["e", "l", "y", "o"] //截取出来的内容
  
  
 语法2： 数组.splice(只传一个参数)
 			当第二个参数不传递的时候，就是从哪个索引开始截取的到数组的末尾
          	          	不改变原始数组
          	返回值： 以数组的形式返回截取的内容
          
  var arr = ['h', 'e', 'l', 'y', 'o', 'w', 'x']
  var res = arr.slice(3)
  
  console.log(arr)  打印结果： ['h', 'e', 'l', 'y', 'o', 'w', 'x'] //不改变原始数组
  console.log(res)  打印结果： ["y", "o", "w", "x"] //截取出来的内容

8. sort() 数组排序

 语法1： 数组.sort()
 			排序方式是按照一位一位来看的（先排第一个数据的第一个数字，以此类推）
          	直接改变原始数组
          	返回值： 排序好的数组
          
  var arr = [1, 3, 7, 9, 101, 5]
  var res = arr.sort()
  
  console.log(arr)  打印结果： [1, 101, 3, 5, 7, 9] //直接改变原始数组
  console.log(res)  打印结果： [1, 101, 3, 5, 7, 9] //排序好的数组


 语法2： 数组.sort() //常用语法
 			排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值： 排序好的数组（顺序排列 小-->大）
          
  var arr = [1, 3, 7, 9, 101, 5]
  var res = arr.sort(function (a, b) {
      return a - b
    })
  
  console.log(arr)  打印结果： [1, 3, 5, 7, 9, 101] //直接改变原始数组
  console.log(res)  打印结果： [1, 3, 5, 7, 9, 101] //排序好的数组

9. reverse() 反转数组

 语法： 数组.reverse()
          	直接改变原始数组
          	返回值： 反转后的数组
          
  var arr = ["你", "好", "欢", "迎"]
  var res = arr.reverse()
  
  console.log(arr)  打印结果： ["迎", "欢", "好", "你"] //直接改变原始数组
  console.log(res)  打印结果： ["迎", "欢", "好", "你"] //反转后的数组

10. join() 把数组链接成一个字符串

 语法： 数组.join(以什么字符链接) 参数可以不写，不写是以 , 链接
          	不改变原始数组
          	返回值： 就是用指定字符链接好的字符串（💢注：是字符串）
          
  var arr = [1, 2, 3, 4]
  var res = arr.join('@-@')
  
  console.log(arr)  打印结果： [1, 2, 3, 4] //不改变原始数组
  console.log(res)  打印结果： 1@-@2@-@3@-@4 //链接好的字符串

以上暂且总结数组的10个方法，对于数组中字符的查询以及数组的遍历以及过滤等其他方法，点击数组的常用方法二

总结

数组的常用方法改不改变原始数组很关键

push()
pop()
unshift()
shift()
concat()-----💢不改变原始数组
splice()
slice()------💢不改变原始数组
sort()
reverse()
join()-------💢不改变原始数组

11. indexOf 查找某个元素在数组中出现的位置(第一个)

语法： arr.indexOf(元素,[开始查找的起始下标]);
   	//找不到返回-1
 var arr = [1,2,3,4,5,6];
 var res = arr.indexOf(3); 
 var res1 = arr.indexOf(7); 
 
 console.log(res)  打印结果：2    // 3对应的下标为2
 console.log(res1) 打印结果：-1  // 没找到

12. forEach 遍历数组

 语法： arr.forEach(function(数组的每一项, 对应下标, 当前数组){
			// 代码段
		});
         	
  var arr= [1,2,3,4,5,6];
  arr.forEach(function(value,index,brr){
      console.log(value + "--" + index);
      console.log(brr);
  });

打印结果：
在这里插入图片描述

13. map 将数组中的每个元素都让一个函数去处理，将处理后的每一个新元素组成一个新数组并返回

 语法：arr.map(function(v){
	     // 对v进行处理并返回处理后的每个v组成的数组
	   });
          
 	var arr = [10,20,30,40];
	var arr1 = arr.map(function(value){
		return value + value * 0.3
	});
  
  console.log(arr1);   打印结果：[13, 26, 39, 52] //返回新数组

14. filter 过滤数组元素，让满足条件的所有元素组成一个新数组并返回

 语法： arr.filter(function(数组的每一项, 对应下标, 当前数组){
			// 筛选条件
		});
          
	var arr = [10,20,30,40];
	var arr1 = arr.filter(function(value){return value>20;
	});
	
  console.log(arr1); 打印结果：[30, 40] //返回新数组

15. reduce 归并

其中调用回掉函数，回掉函数中有两个参数，第一个参数是上一次操作的返回值，
第二个参数是从第二个元素开始到最后一个元素

语法： arr.reduce(function(prev,next){
			// 逻辑代码
		});
          
	var arr = [10,20,30,40];
	var res = arr.reduce(function(prev,next){
	document.write("prev----------next<br>");
	document.write(prev + "----------" + next + "<br>");
	return prev + next;
	});
  
  console.log(res); 打印结果： 100 //总和

在这里插入图片描述

16. some 方法先遍历数组，如果至少有一个元素满足条件，则返回true，否则返回false。

语法： arr.some(function(数组的每一项,对应下标){
			// 逻辑代码
		});
          
	var arr = [1,2,3,4,5,6];
	var res = arr.some(function(item,index){
	    if(item>5){
	        return true;
	    }else{
	        return false;
	    }
	});
	
	console.log(res);  打印结果：true //有一个条件满足
	
	再例如：
	var i = 0;
	[1,2,3].some(function(item,idx){
	    i = idx;
	    return item == 5;
	})
	
	console.log(i);  打印结果：2 //遍历完了还没找到5,输出最后一个值的下标（3的下标2）

17. every 方法先遍历数组，判断所有元素是否满足条件，返回布尔值

语法： arr.every(function(数组的每一项,对应下标){
			// 逻辑代码
		});
          
	var arr = [2,3,4,5,6];
	var res = arr.every(function(item){
		return item>1;
	});
	
	console.log(res);  打印结果：true // 所有条件都满足

18. find 方法返回数组中满足条件的第一个值，找不到元素则返回false，找到了就返回这个值

语法： arr.find(function(数组的每一项,对应下标,此数组){
			// 逻辑代码
		});
          
	var arr = [2,4,6,10,15,21];
	var f = arr.find(function(element, index, array){
    	return element > 10;
	});
	
	console.log(res);  打印结果：console.log(f); 15 // 找到了，返回满足条件的第一个值

19. findIndex 方法返回数组中满足条件的第一个值的下标，找不到元素则返回1

 语法： arr.findIndex(function(数组的每一项,对应下标,此数组){
			// 逻辑代码
		});
          
	var arr = [2,4,6,10,15,21];
	var f = arr.findIndex(function(element, index, array){
	    return element > 10;
	});
	
	console.log(res);  打印结果：console.log(f); 4 //找到了，返回满足条件的第一个的下标

20. of 将一组值转换成数组，类似于声明数组

 语法： Array.of(要转换的值);
          
	let str = 'shuzu'
	console.log(Array.of(str))   打印结果: ['11']
	
	等价于
	console.log(new Array('shuzu'))  打印结果: ['shuzu']
	
	// 但是有点区别
	console.log(new Array(2))   // [empty × 2]  是个空数组，但是length是2
	console.log(Array.of(2))    // [2]

总结

数组的常用方法改不改变原始数组很关键

push()
pop()
unshift()
shift()
concat()-----💢不改变原始数组
splice()
slice()------💢不改变原始数组
sort()
reverse()
join()-------💢不改变原始数组

数组的常用方法总结

push()
可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。

pop()
从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。

unshift()
可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。

shift()
从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。

slice()
截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变；两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，但不包括第二个参数对应的索引上值，原数组不改变；最多接受两个参数。

splice()
截取类 没有参数，返回空数组，原数组不变；一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变；两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变；三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。

reverse()
不接受参数，数组翻转。

sort()排序。

arr.sort(function(a,b){
                return a-b; //从小到大排序
                return b-a; //从大到小排序
           });

join()参数来拼接；分隔符。

concat()
将参数放入原数组后返回，原数组本身不变，如果参数是数组，将值提出来。

isArray()
判断是否是数组。

 toString()
 数组转字符串。

ES5新增的数组方法

2个索引方法：indexOf() 和 lastIndexOf()；

indexOf()
从前往后遍历，返回item在数组中的索引位，如果没有返回-1；通常用来判断数组中有没有某个元素。可以接收两个参数，第一个参数是要查找的项，第二个参数是查找起点位置的索引。

lastIndexOf()
与indexOf一样，区别是从后往前找。

5个迭代方法：forEach()、map()、filter()、some()、every()；

forEach()
forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法；forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

map()
将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回；map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

filter()
用于过滤数组成员，满足条件的成员组成一个新数组返回；它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组；可以接受三个参数：当前成员，当前位置和整个数组。

some()
该方法对数组中的每一项运行给定函数，如果该函数对任何一项返回 true，则返回true。（some方法会在数组中任一项执行函数返回true之后，不在进行循环。）

every()
该方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回true。

2个归并方法：reduce()、reduceRight()；

reduce()
依次处理数组的每个成员，最终累计为一个值。reduce是从左到右处理（从第一个成员到最后一个成员）。参数是一个函数,该函数接受以下两个参数：1累积变量，默认为数组的第一个成员；2当前变量，默认为数组的第二个成员。

reduceRight()
从右往左。

ES6新增的数组方法

Array.from()
用于类似数组的对象（即有length属性的对象）和可遍历对象转为真正的数组。

let json ={ 
    '0':'hello', 
    '1':'123', 
    '2':'panda', 
    length:3 
} 
let arr = Array.from(json); console.log(arr);
//打印：["hello", "123", "panda"]

Array.of()

将一组值转变为数组。

let arr1 = Array.of('你好','hello'); console.log(arr1);//["你好", "hello"]

find()和findIndex()

用于找出第一个符合条件的数组成员。参数是个回调函数，所有数组成员依次执行该回调函数，直到找到第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，就返回undefined；可以接收3个参数，依次为当前值、当前位置、原数组。

fill()

使用fill（）方法给定值填充数组。
如：new Array(3).fill(7);//[7,7,7]
可以接收第二个和第三个参数，用于指定填充的起始位置和结束位置（不包括结束位置）。
let arr3 = [0,1,2,3,4,5,6,7]; arr3.fill('error',2,3); 
console.log(arr3);
//[0,1,"error",3,4,5,6,7]

遍历数组的方法：
entries()、values()、keys()

这三个方法都是返回一个遍历器对象，可用for...of循环遍历，唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

for(let item of ['a','b'].keys()){
    consloe.log(item);
    //0
    //1
}
for(let item of ['a','b'].values()){
    consloe.log(item);
    //'a'
    //'b'
}
let arr4 = [0,1];
for(let item of arr4.entries()){
    console.log(item);  
    //  [0, 0]
    //  [1, 1]
}

如果不用for…of进行遍历，可用使用next()方法手动跳到下一个值。

let arr5 =['a','b','c']
let entries = arr5.entries();
console.log(entries.next().value);
//[0, "a"]
console.log(entries.next().value);
//[1, "b"]
console.log(entries.next().value);
//[2, "c"]
console.log(entries.next().value);
//undefined

copyWithin()

在数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)，改变原数组。

该函数有三个参数。target：目的起始位置。start：复制源的起始位置(从0开始)，可以省略，可以是负数。end：复制源的结束位置，可以省略，可以是负数，实际结束位置是end-1。


const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
arr1.copyWithin(1, 3, 6);
//
把第3个元素（从0开始）到第5个元素，复制并覆盖到以第1个位置开始的地方。
console.log('%s', JSON.stringify(arr1))
//
[1,4,5,6,5,6,7,8,9,10,11]

start和end都是可以省略。start省略表示从0开始，end省略表示数组的长度值。目标的位置不够的，能覆盖多少就覆盖多少。

const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr2.copyWithin(3)
console.log('%s', JSON.stringify(arr2))
//[1,2,3,1,2,3,4,5,6,7,8]

start和end都可以是负数，负数表示从右边数过来第几个（从-1开始）。start小于end，两者为负数时也是。

const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr3.copyWithin(3, -3, -2)
console.log('%s', JSON.stringify(arr3))

end永远大于end（取值必须是start右边的），end小于start（取start左边的值）时会返回原数组。

ES7新增的数组方法

includes()

表示某个数组是否包含给定的值，如果包含则返回 true，否则返回false。可以接收两个参数：要搜索的值和搜索的开始索引。当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。

['a', 'b', 'c', 'd'].includes('b')        
// true
['a', 'b', 'c', 'd'].includes('b', 1)      
// true
['a', 'b', 'c', 'd'].includes('b', 2)      
// false
tips：includes与indexOf的区别是：前者返回布尔值（利于if条件判断），后者返回数值。