数组常用方法总结!

240 阅读6分钟

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. filter 过滤数组元素,让满足条件的所有元素组成一个新数组并返回

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

13. 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 // 找到了,返回满足条件的第一个值

14. 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)
   }