javascript - 数组常用方法总结(三)

还是接着上一篇...

目录

七. 获取数组索引

八. 遍历方法

 九. 判断是否是数组

十: 扁平化数组

---

七. 获取数组索引

indexOf : 返回元素在数组中的索引

语法: arr.indexOf( target 目标元素, start 开始查找的位置正向查找 )

返回查找到元素的索引, 若没有查找到返回-1

    const arr = [1, 3, 4, 55, 2, 9, 1]
    const threeIndex = arr.indexOf(3) // 1
    const oneIndex = arr.indexOf(1, 3) // 6
    const nIndex = arr.indexOf(999) // -1

lastIndexOf : 返回数组中目标元素的最后一项的索引

语法: arr.lastIndexOf( target 目标元素, start 开始查找的位置逆向查找 )

返回查找到元素的索引, 若没有查找到返回-1

    const arr = [1, 2, 3, 4, 55, 2, 2, 9, 1, 3]
    // 查找数组中为3的最后一项的索引
    const threeIndex = arr.lastIndexOf(3) // 9
    // 从索引为7的位置开始逆向查找目标元素
    const oneIndex = arr.lastIndexOf(2, 7) // 6
    const nIndex = arr.lastIndexOf(999) // -1
    console.log(threeIndex); // 9
    console.log(oneIndex); // 6
    console.log(nIndex); // -1

 findIndex : 返回第一个匹配元素的索引

语法: arr.findIndex( function ( item 每一项, index 每一项的索引, arr 调用findIndex的数组 ) { condition } , this 前一个回调中的this指向 )

返回查找到元素的索引, 若没有查找到返回-1

 注意 : 如果findIndex传入的函数为箭头函数, 参数this将不会生效, 因为箭头函数中的this指向上下文中的this

    const arr = [1, 2, 3, 4, 5, 6, 'a', 'b', 'c']
    const obj = { a: 'a' }
    const index = arr.findIndex(
      function(item, index, arr) {
        console.log(this);  // { a: 'a' }
        return item === this.a
      }, obj)
    console.log(index);  // 6

八. 遍历方法

forEach : 遍历数组中的元素 没有返回值

语法: arr.forEach (function(item 当前值, index 当前值索引, arr 调用forEach的数组 ) {}, this 前一个函数中this的指向)

    const arr = [1, 2, 3]
    const obj = { a: 1 }
    arr.forEach(function(item, index, arr) {
      console.log(item);
      console.log(this);
    }, obj)

输出结果 :  

 

filter : 筛选数组中满足条件的元素, 返回值为数组存放筛选结果

语法: arr.filter(function(item 当前值, index 当前值索引, arr 调用filter的数组 ) {}, this 前一个函数中this的指向)

    const arr = [1, 2, 3, 'a', 'b', 'c']
    const obj = { a: 1 }
    const res = arr.filter(function(item, index, arr) {
      return typeof item === 'string'
    }, obj)
    console.log(res);  // ['a', 'b', 'c']

map : 对数组中的每一项进行加工, 返回加工后的数组

语法: arr.map(function(item 当前值, index 当前值索引, arr 调用map的数组 ) {}, this 前一个函数中this的指向)

 此处我们返回数组每一项的二次方

    const arr = [1, 2, 3]
    const obj = { a: 1 }
    const res = arr.map(function(item, index, arr) {
      return item ** 2
    }, obj)
    console.log(res); // [1, 4, 9]

some : 查找数组中是否有满足的条件元素, 返回布尔值

语法: arr.some(function(item 当前值, index 当前值索引, arr 调用some的数组 ) {}, this 前一个函数中this的指向)

此处我们判断数组中是否有大于3的元素 

    const arr = [1, 2, 3, 4, 5]
    const flag = arr.some(function(item, index, arr) {
      return item > 3
    })
    console.log(flag);  // true

every : 查找数组中是否每一项都满足条件, 返回布尔值

语法: arr.every(function(item 当前值, index 当前值索引, arr 调用every的数组 ) {}, this 前一个函数中this的指向)

 此处我们判断数组中的每一项是否都是数字

    const arr = [1, 2, 3, 4, 5]
    const flag = arr.every(function(item, index, arr) {
      return typeof item === 'number'
    })
    console.log(flag);  // true

find :  查找数组中是否有满足的条件元素, 返回查找到的元素

语法: arr.find(function(item 当前值, index 当前值索引, arr 调用find的数组 ) {}, this 前一个函数中this的指向) 

 此处我们查找年纪大于40的元素

    const arr = [
      { name: 'zs', age: 12 },
      { name: 'ls', age: 40 },
      { name: 'ww', age: 90 }
    ]
    const res = arr.find(function(item, index, arr) {
      return item.age > 40
    })
    console.log(res);  // {name: 'ww', age: 90}

 reduce : 每一项执行传入的函数将最终的结果返回

应用场景 : 数组求和 , 数组扁平化

语法: arr.reduce((res, item 当前值, index 当前值索引, arr 调用reduce的数组 ) => { 执行逻辑 }, res的初始值) 

此处我们进行数组求和

    const arr = [1, 2, 3, 4, 5]
    const res = arr.reduce((res, item, index, arr) => res += item, 0)
    console.log(res); // 15

 reduce实现数组扁平化请查看 https://mp.csdn.net/mp_blog/creation/editor/122113418

 九. 判断是否是数组

Array.isArray 判断传入的值是否是数组

 语法: Array.isArray(target)

    const arr = [1, 2, 3, 4, 5]
    const res = Array.isArray(arr)
    console.log(res); // true

instanceof 判断左侧是否是右侧的实例对象

语法: target instanceof 构造函数

    const arr = [1, 2, 3, 4, 5]
    const res = arr instanceof Array
    console.log(res); // true

十: 扁平化数组

 数组扁平化请查看 https://mp.csdn.net/mp_blog/creation/editor/122113418, 就不重复写了