js中数组(Array)最常用的API方法,reduce介绍

原生数组中有很多dom方法,以下我们来列举一些:

1.find :用处查找首次满足条件的值,并返回,没有则返回 undefined

let arr = [2, 4, 6, 9, 7, 8].find(function (item, index, o) {
      // console.log( item, index, o );
      return item > 3;
    });
    console.log(arr)

打印结果:

2.map :用于遍历数组的每个元素执行一遍回调函数,会把所有结果放到新数组返回:

 let arr = [2, 4, 6, 9, 7, 8].map((item, index) => item * item
    );
    console.log(arr);

打印结果:

3.reduce ：对数组中的每个元素升序排列，结果汇总为单个返回值

reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

3.1 下面是一个数组里面所有值的和 测试

reduce方法当中 第一个参数是callback 第二参数是代表起始值,如果没有提供初始值，则将使用数组中的第一个元素

let arr = [1, 2, 3, 7, 8, 9]
    let sum = arr.reduce((acc, cur, index, arr) => {
      console.log('上次返回值', acc)
      console.log('这是被处理的元素', cur)
      console.log('下标', index)
      return acc + cur
    }, 10);
    // reduce方法当中 第一个参数是callback 第二参数是代表起始值,如果没有提供初始值，则将使用数组中的第一个元素
    console.log(arr, sum);

打印结果:

 3.2 累加对象数组里的和

let initialValue = 0; //初始值
    let sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(function (acc, cur) {
      return acc + cur.x;
    }, initialValue)

    console.log(sum) // logs 6

运行打印结果为 : 6

4.forEach : 用于遍历数组每个元素,并带有返回值,不会改变原数组

1. 第一个参数：代表数组的每个元素，当前元素

2. 第二个参数：代表数组的每隔元素的索引值，当前项的索引值

3.  第三个参数：代表当前数组本身

  [2, 4, 6, 9, 7, 8].forEach( function (item, index, arr) {
    	console.log( item, index, arr );
    } );

 5. filter：用于筛选满足条件的元素，把所有满足条件的元素放到新数组返回

 let arr = [2, 4, 6, 9, 7, 8].filter(function (item, index) {
      return item % 2 === 0
    });
    console.log(arr)

 打印结果:

 6.some：用于查找是否有满足条件的值，有就返回true，否则就是false

let arr = [2, 4, 6, 9, 7, 8].some(function (item, index,) {
      // console.log(index);
      return item > 3;
    });
    console.log(arr);

// 返回结果为true

 7.every：用于查找元素满足条件，都满足返回true，没否则就是false

 let arr = [2, 4, 6, 9, 7, 8].every(function (item, index) {
      return item > 3;
    });
    console.log(arr);

//结果为false

 8.findIndex：用于查找首次满足条件的值，并返回索引值, 若没有找到则返回 -1

 let arr = [2, 4, 6, 9, 7, 8].findIndex(function (item, index) {
      return item > 3;
    });
    console.log(arr);

如:查询某个字符,在 数组 或 字符串 中首次书此案的位置

let arr = ['a', 'b', 'c', 'd', 'a', 'b', 'c'];
    // 如果找到就会返回首次出现的位置，找不到就会返回-1
    let res = arr.indexOf('c');
    console.log(res)
//打印结果 2

9.sort：用于排序

9.1,正序排序

 let arr = [23, 123, 6, 9, 7];
    // 正序排列：
   let res = arr.sort(function (a, b) { return a - b; })
   console.log(res)
   

打印结果:

 9.2 倒序排序

   let arr = [23, 123, 6, 9, 7];
    // 倒序排列：
     let res = arr.sort(function (a, b) { return b - a; });
     console.log(res)

打印结果

10 join：用于把数组的每个元素拼接成为字符串

let arr = ['a', 'b', 'c', 'd', 'e', 'f']
    let str = arr.join('--')
    console.log(str)
//打印结果为 a--b--c--d--e--f

打印结果:

 11.concat：连接成为新数组

 let arr = [1, 2, 3]
    let a = ['a', 'b', 'c']
    let b = [11, 22, 33]
    let res = arr.concat(a, b, 'aa', 'bb', 'cc')
    console.log(res)

打印结果:

12. reverse：翻转数组顺序

 let arr = [1, 2, 3];
    let res = arr.reverse();
    console.log(res);
//打印结果为 [3, 2, 1]

13 增删系列

  let arr = [1, 2, 3];
    // pop：删除数组的最后一项，并返回
    // let res = arr.pop();
    // push：往数组最后的位置追加元素,并返回新数组的长度
    // let res = arr.push(4, 5, 6, 'a', 'b', 'c');
    // splice:删除或者替换
    // let res = arr.splice(1, 1, 'aaa');
    // shift：删除数组的第一项并返回
    // let res = arr.shift();
    // unshift：往数组最前面追加，并返回新数组的长度
    let res = arr.unshift('a', 'b', 'c');
    console.log(res);

14. Array.isArray() 是一个静态方法,判断是否为数组

15.Array.from 用于转换为真数组 但注意:要想把伪数组转成真数组，必须有length属性

数组的API方法非常多,记录自己的学习历程,希望也能帮助到你,加油!!!