数组的常用方法总结

1,872 阅读9分钟

1. push() 向数组最后面添加数据

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

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

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

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

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

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

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

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

 /*语法: 数组.concat(你要拼接的内容),理论上可以无限传递参数
          	不改变原始数组
          	返回值: 拼接过后的数组
 */       
 
  const arr = [666]  //arr为原始数组
  const res = arr.concat([888])  //res为拼接后返回的数组
  
  console.log(arr)  //打印结果: [666] //不改变原始数组
  console.log(res)  //打印结果: [666,888] //拼接过后的数组

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

 /*语法: 数组.join(以什么字符链接) 参数可以不写,不写是以 , 链接
          	不改变原始数组
          	返回值: 就是用指定字符链接好的字符串(注意:是字符串)
 */         
 
  const arr = [1, 2, 3, 4]  //arr为原始数组
  const res = arr.join('')  //res为拼接好的字符串
  
  console.log(arr)  //打印结果: [1, 2, 3, 4] //不改变原始数组
  console.log(res)  //打印结果: 1234 //链接好的字符串

7. splice() 对数组进行删除、截取、替换

 /*语法1删除: 数组.splice(开始的索引, 删除多少个)
          	直接改变原始数组
          	返回值: 以数组的形式返回删除的内容
          	(不管截取多少个内容,都是以数组的形式返回)
  */        
  
  const arr = ['我', '好', '帅', '啊']
  const res = arr.splice(3, 1)
  
  console.log(arr)  //打印结果: ["我", "好", "帅"] //直接改变原始数组
  console.log(res)  //打印结果: ["啊"] //删除的内容
  
  
 /*语法2截取: 数组.splice(只传一个参数)
                当第二个参数不传递的时候,就是从哪个索引开始截取的到数组的末尾
          	直接改变原始数组
          	返回值: 以数组的形式返回截取出来的内容
          	(不管截取多少个内容,都是以数组的形式返回)
  */       
  
  const arr = ['我', '好', '帅', '啊']
  const res = arr.splice(2)
  
  console.log(arr)  //打印结果: ['我', '好'] //直接改变原始数组
  console.log(res)  //打印结果: ['帅', '啊'] //截取出来的内容
    
    
 /*语法3替换: 数组.splice(开始的索引, 替换多少个,值1,值2)
 		从第三个参数开始,都是被替换掉的位置
          	直接改变原始数组
          	返回值: 以数组的形式返回替换的内容
          	(不管截取多少个内容,都是以数组的形式返回)
  */
  
  const arr = ['我', '好', '帅', '啊']
  const res = arr.splice(3,1,'超级帅','特帅')
  
  console.log(arr)  //打印结果: ['我', '好', '帅', '超级帅', '特帅'] //直接改变原始数组
  console.log(res)  //打印结果: ['啊'] //替换的内容
  

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

 /*语法1: 数组.slice(开始的索引,结束的索引) 注意:包前不包后
          	不改变原始数组
          	返回值: 以数组的形式返回截取的内容
 */     
 
  const arr = [1, 2, 3, 4, 5, 6]
  const res = arr.slice(1, 5)
  
  console.log(arr)  //打印结果: [1, 2, 3, 4, 5, 6] //不改变原始数组
  console.log(res)  //打印结果: [2, 3, 4, 5] //截取出来的内容
  
  
 /*语法2: 数组.splice(只传一个参数)
 		当第二个参数不传递的时候,就是从哪个索引开始截取的到数组的末尾
          	不改变原始数组
          	返回值: 以数组的形式返回截取的内容
 */        
 
  const arr = [1, 2, 3, 4, 5, 6]
  const res = arr.slice(3)
  
  console.log(arr)  //打印结果: [1, 2, 3, 4, 5, 6] //不改变原始数组
  console.log(res)  //打印结果: [4, 5, 6] //截取出来的内容
    

9 sort() 数组排序

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


 /*2: 数组.sort() //常用语法
 		排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值: 排序好的数组(顺序排列 小-->大)
 */       
 
  const arr = [1, 3, 7, 9, 101, 5]
  const 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] //排序好的数组

10.everse() 反转数组

 /*: 数组.reverse()
          	直接改变原始数组
          	返回值: 反转后的数组
 */
 
  const arr = [1, 2, 3, 4, 5, 6]
  const res = arr.reverse()
  
  console.log(arr)  //打印结果: [6, 5, 4, 3, 2, 1] //直接改变原始数组
  console.log(res)  //打印结果: [6, 5, 4, 3, 2, 1] //反转后的数组

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

 /*语法: arr.indexOf(元素,[开始查找的起始下标])
		//找不到返回-1
*/	

  const arr = [1,2,3,4,5,6]
  const res = arr.indexOf(3) 
  const res1 = arr.indexOf(7)
  
  console.log(res)  //打印结果:2    // 3对应的下标为2
  console.log(res1) //打印结果:-1  // 没找到

12. forEach 遍历数组

 /*语法: arr.forEach(function(数组的每一项, 对应下标, 当前数组){
			// 代码段
		})
 */        	
 
  const arr= [1,2,3,4,5,6]
  arr.forEach(function(value,index,res){
      console.log(value + "--" + index) //打印结果:例:1(数组第一个数据)--0(数组第一个数据的下标)
      console.log(res)  //打印结果:[1,2,3,4,5,6]
  })
  

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

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

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

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

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

 /*语法: arr.reduce(function(prev,next){
			// 逻辑代码
                        //其中调用回掉函数,回掉函数中有两个参数,第一个参数是上一次操作的返回值,
                        //第二个参数是从第二个元素开始到最后一个元素
		})
 */         
 
        const arr = [2,4,2,5,6,6,8]
        const sum = arr.reduce(function(prev, cur){
            return prev + cur
        })
  
        console.log(arr); //打印结果: [2,4,2,5,6,6,8]  //原数组
        console.log(sum); //打印结果:  33  //数组每一项的总和

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

 /*语法: arr.some(function(数组的每一项,对应下标){
			// 逻辑代码
                        //如果有一个元素满足条件,则返回true , 剩余的元素不会再执行检测。
                        //如果没有满足条件的元素,则返回false。
		});
 */
 
	const arr = [1,2,3,4,5,6]
	const res = arr.some(function(item,index){
	    if(item>5){
	        return true
	    }else{
	        return false
	    }
	});
	
	console.log(res);  //打印结果:true //有一个条件满足
	

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

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

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

 /*语法: arr.find(function(当前的数组元素,当前索引值,被查找的数组){
			// 逻辑代码
                        //找到满足的第一个值就不会再往下寻找
                        //找不到返回false
		})
 */
 
	const arr = [2,4,6,10,15,21]
	const res = arr.find(function(value, index, arr){
    	return value > 10
	})
	
        console.log(arr)  //原数组
	console.log(res)  //打印结果: 15 // 找到了,返回满足条件的第一个值

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

 /*语法: arr.findIndex(function(当前的数组元素,当前索引值,被查找的数组){
			// 逻辑代码
                        //找到满足条件的第一个值就不会再往下寻找,并返回该数据的下标
                        //找不到满足条件的返回-1
		})
 */
 
	const arr = [2,4,6,10,15,21]
	const res = arr.findIndex(function(value, index, arr){
    	return value > 10
	})
	
        console.log(arr)  //原数组
	console.log(res)  //打印结果: 15 // 找到了,返回满足条件的第一个值

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

/*
    语法: Array.of(要转换的值)
        //返回值为参数值组成的数组
        //如果没有参数,就返回一个空数组。
*/

    Array.of() // []
    Array.of(3) // [3]
    Array(3, 11, 8) // [3,11,8]
    
   //Array.of()方法可以用下面的代码模拟实现
    
   function ArrayOf(){
      return [].slice.call(arguments)
   }