[TOC] #### 前言 --- JavaScript Array 对象方法比较多，可以每天学几个日积月累，来学习几个常用的方法吧 ```javascript // 用于过滤掉数组中不满足指定条件的元素，返回满足条件的所有元素，返回值是数组 array.filter(callback(element, index, array)) // 用于检测数组中是否至少有一个元素满足指定条件，检查到符合条件的元素，直接返回 true，不再检查剩余元素 array.some(callback(element, index, array)) // 用于检测数组中所有元素是否都满足指定条件，所有元素都满足条件才返回 true array.every(callback(element, index, array)) // 将数组中的元素通过一个回调函数逐步缩减为一个单一的值 array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue) // 用于判断数组中是否包含指定元素的数组方法，返回布尔值 arr.includes(searchElement, fromIndex) // 用于查找数组中指定元素的第一个匹配项的索引位置，如果找不到该元素，返回 -1 array.indexOf(searchElement, fromIndex) ``` #### 1. filter() --- 用于过滤掉数组中不满足指定条件的元素，返回满足条件的所有元素，返回值是数组 语法格式： ```javascript // element 当前正在处理的元素（必传） // index 当前元素的索引（可选） // array 调用 some 的原数组（可选） const newArray = array.filter(callback(element, index, array)) ``` 使用示例： ```javascript const list = [ { id: 1, name: 'Aaron', age: 20, hobby: '篮球' }, { id: 2, name: 'King', age: 26, hobby: '羽毛球' }, { id: 3, name: 'Sandy', age: 30, hobby: '马拉松' }, ] // 查询 age > 25 以上的数据，过滤掉不满足条件的元素 const more25 = list.filter(item => item.age > 25) ``` #### 2. some() --- 用于检测数组中是否至少有一个元素满足指定条件，检查到符合条件的元素，直接返回 true，不再检查剩余元素 语法格式： ```javascript // element 当前正在处理的元素（必传） // index 当前元素的索引（可选） // array 调用 some 的原数组（可选） array.some(callback(element, index, array)) ``` 使用示例： ```javascript const age = [18, 25, 28, 30]; // 检测数组中是否存在大于 10 的数字，遍历到 28 停止检测，直接返回 true const more26 = age.some(item => item > 26) console.log(more26); // true // 检测数组中是否存在大于 50 的数字，显然是没有的，返回值为 false const more50 = age.some(item => item > 50) console.log(more50); // false ``` #### 3. every() --- 用于检测数组中所有元素是否都满足指定条件，所有元素都满足条件才返回 true 语法格式： ```javascript // element 当前正在处理的元素（必传） // index 当前元素的索引（可选） // array 调用 some 的原数组（可选） array.every(callback(element, index, array)) ``` 使用示例： ```javascript const age = [18, 25, 30]; // 检测检测数组中所有元素是否都大于 15，返回 true const more25 = age.every(item => item > 15) console.log(more25); // true // 检测检测数组中所有元素是否都大于 28，遍历到 25 停止检测，返回 false const more28 = age.every(item => item > 28) console.log(more28); // false ``` #### 4. reduce() --- 这是一个非常强大且灵活的数组迭代方法，允许将数组中的元素通过一个回调函数逐步缩减为一个单一的值 语法格式： ```javascript // accumulator 累加器（必传） // currentValue 当前值（必传） // currentIndex 当前索引（可选） // array 源数组（可选） // initialValue 初始值（可选） array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue) ``` 使用示例： ```javascript // 数组求和 const numbers = [1, 2, 3, 4, 5] const sum = numbers.reduce((sum, item) => sum += item, 0) console.log(sum); // 15 // 二维数组，计算平均分 const list = [ { id: 1, name: 'Aaron', score: 80 }, { id: 2, name: 'King', score: 85 }, { id: 3, name: 'Sandy', score: 93 }, ] const total = list.reduce((sum, item) => sum + item.score, 0) console.log(total); // 所有人的总分 258 console.log(total / list.length); // 平均分 86 ``` #### 5. includes() --- 用于判断数组中是否包含指定元素的数组方法，是 es6 标准中引入的，提供了一种更直观的方式检查元素的存在性 语法格式： ```javascript // searchElement 必需，查找的元素值 // fromIndex 可选，从该索引值开始查找，支持负值 arr.includes(searchElement[, fromIndex]) ``` 使用示例： ```javascript console.log(['html', 'css', 'javascript'].includes('css')); // true console.log(['html', 'css', 'javascript'].includes('vue')); // false // includes 能正确识别 NaN console.log([1, NaN, 3].includes(NaN)) // true ``` 特别注意，`includes()` 使用严格相等比较（===），不会进行类型转换 ```javascript console.log([1, 2, '3'].includes(3)); // false console.log([1, 2, '3'].includes('3')); // true ``` #### 6. indexOf() --- 用于查找数组中指定元素的第一个匹配项的索引位置，如果找不到该元素，返回 -1 语法格式： ```javascript // searchElement 必需，查找的元素值 // fromIndex 可选，从该索引值开始查找，支持负值 array.indexOf(searchElement[, fromIndex]) ``` 使用示例： ```javascript // 从数组中查找元素 18，找得到返回索引值，找不到返回 -1 const arr = [3, 10, 18, 20] console.log(arr.indexOf(18)) // 2 ``` `indexOf()` 同`includes()` 方法一样，也使用严格相等比较（===），不会进行类型转换 ```javascript console.log([1, 2, 3].indexOf(3)) // 2 console.log([1, 2, 3].indexOf('3')) // -1 ```