js数组的各种方法

302 阅读4分钟

原生JS forEach()和map()遍历

关于for循环

1理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;
2参数:item数组中的当前项, index当前项的索引, array原始数组;

关于map循环

1区别map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
2参数:value数组中的当前项,index当前项的索引,array原始数组;

共同点

  • 1.都是循环遍历数组中的每一项。

  • 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

  • 3.匿名函数中的this都是指Window。

  • 4.只能遍历数组。

不同点

  • map循环有返回值 forEach无返回值
   let arr = [12, 23, 24, 42, 1];
    /**
    * @param item 数组当前项
    * @param index 索引
    * @param input 原数组
    */
    let res = arr.forEach(function (item, index, input) {
    console.log(item == input[index]); //打印true
    input[index] = item * 10;
    console.log(input)

    });
    console.log(res);//--> undefined(因为forEach循环没有return);
    console.log(arr);//--> 通过数组索引改变了原数组 打印结果[ 120, 230, 240, 420, 10 ] ;

关于map循环 一定是把原数组复制一份,在进行遍历。

    let ary = [12, 23, 24, 42, 1];
    let res = ary.map(function (item, index, input) {
    input[index] = item * 100;
    console.log('==', input);
    return item * 10;
    });
    console.log("map返回结果的值",res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改 修改input时候 并不会影响的map的结果
    console.log("通过修改input改变的原数组的值",ary);//-->[ 1200, 2300, 2400, 4200, 100 ];  
    //当map循环没有return时候,会默认返回underfind
    res 但因结果 [undefined,undefined,undefined,undefined,undefined]
    

some 和every的区别和用法

相同点:

  • 1.每一项的遍历数组
  • 2.三个参数相同
  • 3.返回的值都是布尔值

不同点:

  • 1.some 循环比较 有个一个比较结果为true,some返回true
  • 2.every 循环比较 所有有一个比较结果为false, every返回false
    let ary = [12, 23, 24, 42, 9];
    let res1 = ary.every(function (item, index, input) {
        return item > 10;
    });

    let res2 = ary.some(function (item, index, input) {
        return item > 10;
    });

    console.log('every的返回结果',res1);//false
    console.log('some的返回结果',res2);//true

数据操作常用的方法

  • push(item) 在数组队尾插入元素item
  • pop() 在数组队尾删除元素
  • shift() 在数组队头删除
  • unshift(item)在数组队头插入item

检索数组的方法indexOf

indeoOf检索数组,如果找到值返回值对应的坐标,若未找到值返回-1 array.indexOf(item,start)

  • item代表 查找的元素。
  • start代表 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。
    let arr = [10, 20, 30, 40];
    let number = arr.indexOf(11);
    console.log(number);//未找到返回-1,模式从坐标0开始找
    
    let arr = [10, 20, 30, 40];
    let number = arr.indexOf(30,1);从数组第一个元素之后找值为30的坐标。
    console.log(number);//打印结果2 ,


splice() 方法

向/从数组中添加/删除项目,然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)
  • 1.index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • 2.howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • 3.item1, ..., itemX 可选。向数组添加的新项目。
    let arr = [1, 2, 3, 4];
    arr.splice(2, 0, 5); //从数组第二个元素开始 删除0 个元素 插入元素5
    console.log(arr);// 打印结果 [1,2,5,3,4]
    
    
    let arr = [1, 2, 3, 4];
    arr.splice(2, 2, 5); //从数组第二个元素开始 删除2个元素 个元素 插入元素5
    console.log(arr);// 打印结果 [1,2,5]
    
    let arr = [1, 2, 3, 4];
    arr.splice(0, 2, 5); //从数组头元素开始 删除2个元素 个元素 插入元素5
    console.log(arr);// 打印结果 [5,3,4]


filter方法

 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
 filter() 不会对空数组进行检测
 filter() 不会改变原始数组。
        // filter只会把符合条件的返回回来
        let arr = [10, 20, 30, 40];
        let numbers = arr.filter(function (item, index, input) {
            return item > 18;
        });
        console.log(numbers); //打印结果 [ 20, 30, 40 ]
        
        

数组sort排序

    //数组从大往小排序
    var list = [{a:1,b:6},{a:4,b:5},{a:2,b:8}]
    list.sort(function (a,b) {
            return b.a  - a.a //数组从大到小排
            retrun a.a - b.a //数组从小往大排
    })
    console.log(list)
    //[ { a: 4, b: 5 }, { a: 2, b: 8 }, { a: 1, b: 6 } ]
    

reduce的使用,主要用作聚合

reduce作用

  • 将数组转换为字符串或者数字
  • 将数组转换为对象
  • 展开更大的数组
  • 在一次遍历中进行两次计算
  • 将映射和过滤函数组合
  • 按顺序运行异步函数