数组Array常用的几种方法

336 阅读4分钟

纪录数组中经常使用的几种方法

1. forEach()
含义:forEach() 方法对数组的每个元素执行一次提供的函数。
语法:arr.forEach(callback(item, index, array), thisArg[可选参数])
参数:callback()

  • item 数组中正在处理的当前元素
  • index 数组中正在处理的当前元素的索引
  • array 正在操作的数组

应用:

var arr = [
  { id: 1, title: '吃饭', status: false },
  { id: 2, title: '睡觉', status: true },
  { id: 3, title: '打豆豆', status: false }
]
arr.forEach(( item, index, arr) => {
  console.log(item)  // {id: 1, title: "吃饭", status: false} {id: 2, title: "睡觉", status: true} {id: 3, title: "大豆豆", status: false}
})

注意:

  • 没有返回值
  • 循环无法停止,如果要停止可以使用for循环

2. find()
含义:find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法:arr.find(callback(item, index, array), thisArg[可选参数])
参数:callback()

  • 三个参数
    • element
    • index
    • arr

应用:

var arr = [
  { id: 1, title: '吃饭', status: false },
  { id: 2, title: '睡觉', status: true },
  { id: 3, title: '打豆豆', status: false }
]
const findArr = arr.find(( item, index, arr) => {
  return item.id > 1
})
console.log(findArr) //{id: 2, title: "睡觉", status: true}

注意:

  • 遍历数组,找到符合条件的元素,找到第一个满足符合条件的元素并停止遍历立即返回
  • 每遍历一次,就执行一次回调函数function (item, index) { ... },如果该函数返回true就停止遍历,返回满足该条件的元素;如果直到遍历结束都没有符合该条件的元素,则返回undefined

实际作用:经常用来判断一个数组中有没有某个元素

3. findIndex()
含义:findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
语法:arr.findIndex(callback, thisArg)
参数:callback()

  • 三个参数
    • element
    • index
    • arr

应用:

 var newArr = [1, 2, 3, 4]
 console.log(newArr.findIndex(n => n % 3 == 0)) // 2

4.some()
含义:some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。
语法:arr.some(callback, thisArg)
参数:同上
应用:

 var arr = [
  { id: 1, title: '吃饭', status: false },
  { id: 2, title: '睡觉', status: true },
  { id: 3, title: '打豆豆', status: false }
]
console.log(arr.some(item => item.id == 1 ))  // true
console.log(arr.some(item => item.id > 3 ))  // false

5.every()
含义:every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
语法:arr.every(callback, thisArg)
参数:同上
应用:

  var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: true },
  { id: 3, title: '打豆豆', status: true }
]
console.log(arr.every(item => item.status))  // true
var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: false },
  { id: 3, title: '打豆豆', status: true }
]
console.log(arr.every(item => item.status))  // false

作用: 和some正好相反,用于判断【所有元素】是否满足指定条件
6.filter()
含义:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法: arr.filter(callback, thisArg)
参数:同上
应用:

 var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: false },
  { id: 3, title: '打豆豆', status: true }
]
const newFilter = arr.filter(item => {
  return item.status  // 箭头函数可以省略后面的{}
})
console.log(newFilter)  //{id: 1, title: "吃饭", status: true}1: {id: 3, title: "打豆豆", status: true}

注意:

  • filter会在内部创建一个新的数组,然后遍历你的数组
  • 之后把所有满足条件的元素放到这个新数组中
  • 遍历结束,返回这个新的数组

7.map()
含义: map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法: arr.map(callback, thisArg)
参数:同上
应用:

var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: false },
  { id: 3, title: '打豆豆', status: true }
]
const newMap = arr.map(item => item.status)
console.dir(newMap)  // [0: true 1: false 2: true]
var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: false },
  { id: 3, title: '打豆豆', status: true }
]
const newMap = arr.map(item => {
  if (item.id > 1) {
    return item.status  
  }
})
console.dir(newMap)  // [0: undefined 1: false 2: true] 此时推荐使用filter()方法

8.includes()
含义:includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
语法:arr.includes(valueToFind, fromIndex)
参数:

  • 查找的元素值
  • 从哪里开始查起

应用:

var arr = [
  { id: 1, title: '吃饭', status: true },
  { id: 2, title: '睡觉', status: false },
  { id: 3, title: '打豆豆', status: true }
]
// 注意:对象数组不能使用includes方法来检测。如果要使用可以:
var item1 = arr[0]
const newIncludes = arr.includes(item1)
console.dir(newIncludes)  // true
console.dir([1, 2, 3, 4, 5].includes(5))  // true
console.dir([1, 2, 3, 4, 5].includes(6))  // false

9.reduce()
含义:方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
语法:arr.reduce(callback(acc, cur, index, arr), initalValue)
参数:

  • callback()

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

应用:

var newArr = [1, 2, 3]
const arrReduce = newArr.reduce((cur, acc) => {
  return cur+acc
}, 0)
console.log(arrReduce) // 6

values

含义:返回以属性值为遍历器的对象
应用:

var obj = { value: 'success', title: '成功'}
console.log(_.values(obj)) // ["success", "成功"]