[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 ```