【全是干货】js数组的常用方法以及详细解析

222 阅读5分钟

前言

数组(Array)和对象(Object),是前端开发中用到最多的引用数据类型,掌握他们的常用方法,能够让你开发事半功倍,下面就跟我来一起学习数组中的常用方法吧!

干货

首先我们得创建一个数组

字面量方式创建:

let arr = [1,2,3]

构造函数式创建:

let arr = new Array(1,2,3)

两种创建方式都是可以的,但是我更推荐字面量的方式,因为可以少写点代码,手动狗头!

1、转换

    //join 方法将数组转成字符串,按照传入的字符串连接(默认逗号)
    //join 不改变原数组
    let arr = [1,2,3];
    let str1 = arr.join(',');
    let str2 = arr.join('&');
    console.log(arr); // [1,2,3]
    console.log(str1);// 1,2,3
    console.log(str1);// 1&2&3
    
    //Array.from() 方法将类数组转换成真数组 返回值是转换后的真数组
    let arrayLike = {
        0 : 'hello' ,
        1 : 666 ,
        2 : null ,
        3 : {} ,
        length : 4
    };
    let arr = Array.from(arrayLike);
    console.log(arr); // ["hello", 666, null, {...}]

2、检测数组

在日常的开发中,我们通常需要检查一个变量是不是数组,ES3有一个instanceof操作符去检测一个变量是不是某种引用数据类型,在ES5中,为Array构造函数新增了一个isArray的方法:

    // isArray方法会返回一个布尔值,true就是数组,false就不是数组
    Array.isArray(value)

3、插入和移除

   //push 方法:将参数逐个添加到数组末尾,并返回数组长度
   let arr = [1,2,3];
   let count = arr.push(4); //push方法可以传入多个参数,用逗号隔开
   console.log(arr);   //[1,2,3,4]
   console.log(count); //4

   //unshift 方法: 将参数逐个添加到数组前端,并返回数组长度
   let arr = ['hello',null,666];
   let count = arr.unshift('test',[]); //unshift 方法可以传入多个参数,用逗号隔开
   console.log(arr);   //['test',[],'hello',null,666]
   console.log(count); //5
   
   //pop 方法:从数组末尾移除最后一项,并返回移除的项
   let arr = [1,2,3];
   let item = arr.pop(); 
   console.log(arr);   // [1,2]
   console.log(item); // 3
   
   //shift 方法:移除数组的第一项,并返回移除的项
   let arr = [1,2,3];
   let item = arr.shift(); 
   console.log(arr);   // [2,3]
   console.log(item); // 1
   

4、排序

    //reverse 方法会反转数组
    let arr = [1,2,3,4,5,6];
    arr.reverse();
    console.log(arr); // [ 6, 5, 4, 3, 2, 1]
    
    //sort 方法会根据测试的结果去改变原来的顺序
    let arr = [ 5, 8, 66, -1, 46]
    arr.sort(function(a,b){
        return a - b;//升序排序
    });
    console.log(arr); // [ -1, 5, 8, 46, 66 ]
    
    //需要注意,以上两种方法都会改变原数组 ,并且都有返回值 , 返回值是经过排序的数组;

5、拼接和截取、替换

    //concat 方法 可以将传入的参数和指定的数组拼接,并返回拼接后的数组
    //concat 不会改变原数组
    
    let arr = ['A', 'B', 'C'];
    let arr1 = arr.concat('D','E');
    console.log(arr); // ['A', 'B', 'C']
    console.log(arr1);// ['A', 'B', 'C', 'D', 'E']
    
    //slice 方法 接受一个或者两个参数(数组下标),截取并返回对应的项
    //slice 不会改变原数组
    let arr = ['A', 'B', 'C'];
    let arr1 = arr.slice(1); //传递一个参数,则从这个下标开始一直截取到数组末尾
    let arr2 = arr.slice(02);//传递两个参数,则从第一个下标,截取到第二个下标之前,之前,之前!!!
    console.log(arr); // ['A', 'B', 'C']
    console.log(arr1);//  ["B", "C"]
    console.log(arr2);// ["A", "B"]
    
    //splice 方法可以说是最强大的数组方法了,它一共有3种使用方法
    //splice 会改变原数组!!!
    
    //删除:可以删除任意数量的项,接受两个参数:从哪里开始删 ,需要删除几项
    //举个栗子:splice(1,8); //从数组的第一项往后删除8项
      
    //插入:可以向指定的位置插入任意数量的项,接受3个以上参数:起始位置,0(传0是不删除),要插入的项;
    //举个栗子:splice(3, 0, 'hello' , null, 666); //从数组下标3的位置插入'hello' , null, 666
    
    //替换:从指定的位置删除指定数量的项,并插入传入的项
    //举个栗子:splice(1, 2, 'test', 'haha'); //从数组下标1的位置删除2项,并插入'test', 'haha'

6、迭代方法(重点)

    //forEach 为数组的每一项运行给定的函数 ,这个方法没有返回值 , 就相当于for循环,没什么好讲的;
    let arr = [ 1, 2, 3, 4, 5];
    arr.forEach(function(item,index,array){
       // 业务逻辑
    });
    
    //map 为数组的每一项运行给定的函数,并将每次运行的结果组成数组返回
    let arr = [ 1, 2, 3, 4, 5];
    let arr1 = arr.map(function(item,index,array){
       return item * 2 
    });
    console.log(arr);// [1, 2, 3, 4, 5]
    console.log(arr1)// [2, 4, 6, 8, 10]
    
    //filter 为数组的每一项运行给定的函数, 并将返回值为true的项组成数组返回
    let arr = [ 100, 152, 33, 54, 15,99];
    let arr1 = arr.filter(function(item,index,array){
       return item % 2 === 0 //筛选出2的倍数
    });
    console.log(arr);// [100, 152, 33, 54, 15, 99]
    console.log(arr1)// [100, 152, 54]
    
    //every 为数组的每一项运行给定的函数, 如果所以项运行结果都返回true,则该方法返回true;
    let arr = [ 1, 2, 3, 4, 5];
    let flag = arr.every(function(item,index,array){
       return item > 0 //判断数组的每一项是不是都大于0
    });
    console.log(arr);// [1, 2, 3, 4, 5]
    console.log(flag)// true
    
    //some 为数组的每一项运行给定的函数, 如果有一项运行结果返回true,则该方法返回true;
    let arr = [ 1, 2, 3, 4, 5];
    let flag = arr.some(function(item,index,array){
       return item % 2 === 0 //判断数组中有没有2的倍数
    });
    console.log(arr);// [1, 2, 3, 4, 5]
    console.log(flag)// true
    
    //find 为数组的每一项运行给定的函数, 返回第一个符合条件的项,并终止遍历,没有则返回undefined;
    let arr = [ {id:1}, {id:2}, {id:3}, {id:4}];
    let item = arr.find(function(item,index,array){
       return item.id === 2 //查询有没有id为2的项
    });
    console.log(arr);// [ {id:1}, {id:2}, {id:3}, {id:4}];
    console.log(item)// {id:2}
    
    //findIndex 为数组的每一项运行给定的函数, 返回第一个符合条件的项的下标,并终止遍历,没有则返回-1;
    let arr = [ {id:1}, {id:2}, {id:3}, {id:4}];
    let index = arr.findIndex(function(item,index,array){
       return item.id === 2 //查询id为2的项的下标
    });
    console.log(arr);// [ {id:1}, {id:2}, {id:3}, {id:4}];
    console.log(index)//  1
    

结尾

以上就是我们日常开发中常用到数组方法 ,当然还有很多没有写到的方法 ,欢迎大家留言交流!