JavaScript_数组常用方法【2】

目录

数组常用方法 2 :

1. forEach( )

forEach 的原理 :

2. map( )

map 的原理 :

3. filter( )

filter 的原理 :

4. find( )

5. every( )

6. some( )

7. reduce( )

reduce 原理 :

ES6新增数组方法（注意浏览器兼容）

includes()

图例 :

上一篇跳转链接 : JavaScript_数组常用方法【2】

数组常用方法 2 :

方法2 内的数组方法相对复杂一些, 也都不会改变原始数组, 都是以返回值形式给出结果

1. forEach( )

+ 语法：数组.forEach( function (item, index, arr) { } )

=> 函数可以接受三个参数

=> 第一个参数：表示数组内的每一项 item

=> 第二个参数：表示数组内每一项的索引 index

=> 第三个参数：表示原始数组 arr（不常用）

+ 作用：遍历数组

+ 返回值：没有(undefined)

// 1. forEach() var arr = [10, 20, 30, 40, 50] // 0 1 2 3 4 console.log(arr) // [10, 20, 30, 40, 50] var res = arr.forEach(function a(item, index, arr) { // 函数 a 会根据 arr 数组中有多少个成员执行多少回 // item, 每一次执行的时候, item 分别是数组内的 每一项 // index, 每一次执行的时候, index 分别是数组内每一项的 索引 // arr, 每一次执行的时候, arr 都代表 原始数组 console.log('我执行了 ', item, ' --- ', index, ' --- ', arr) } )

forEach 的原理：

+会根据数组内的成员数量分别调用 a 函数

function a(item, index, arr)

+ 第一次调用 a(10, 0, [10, 20, 30, 40, 50])

+ 第二次调用 a(20, 1, [10, 20, 30, 40, 50])

+ 第三次调用 a(30, 2, [10, 20, 30, 40, 50])

+ 第四次调用 a(40, 3, [10, 20, 30, 40, 50])

+ 第五次调用 a(50, 4, [10, 20, 30, 40, 50])

2. map( )

+ 语法：数组.map( function (item, index, arr) { } )

+ 作用：映射数组

=> 对于原始数组里面的数据进行加工处理

=> 变成一个新的数组

+ 返回值：是一个新数组

=> 返回值数组和原始数组必然长度一致 .length ===

=> 新数组内每一个数据都是根据原始数组中每一个数据经过映射加工处理出来的

=> 映射加工处理条件以return的形式书写

// 2. map() var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] // 开始映射 var res = arr.map(function a(item, index) { // 书写加工条件 // 以 return 的形式书写映射条件 return item * (index + 1) }) console.log('返回值数组 : ', res) // [10, 40, 90, 160, 250]

map 的原理 :

1. 准备一个 新数组

=> [ ]

原始值 => [10, 20, 30, 40, 50]

2. 开始根据原始数据进行遍历

=> 第一次调用 a(10, 0, 原始数组), 返回值是 10, 把这个返回值放在新数组里面

=> 第二次调用 a(20, 1, 原始数组), 返回值是 40, 把这个返回值放在新数组里面

=> 第三次调用 a(30, 2, 原始数组), 返回值是 90, 把这个返回值放在新数组里面

=> 第四次调用 a(40, 3, 原始数组), 返回值是 160, 把这个返回值放在新数组里面

=> 第五次调用 a(50, 4, 原始数组), 返回值是 250, 把这个返回值放在新数组里面

=> ...

3. 把 最终的这个数组 [10, 40, 90, 160, 250] 当做 map 这个方法的返回值

项目实践所用 ：

需求背景 : 后端需要一个新的字段answers， 但其字段跟options字段类似 ，

只是options字段内的部分数据用不到 ， 所以需要对 options 做一下处理 ：

原始数据 ：

options: [ { itemId: "1", answerScore: 0, label: "数量", value: "1", }, { itemId: "2", answerScore: 0, label: "数量", value: "2", }, { itemId: "3", answerScore: 0, label: "数量", value: "2", }, ];

if (type === "1") { // 题型追加 answers 字段 item.answers = item.options.map((i) => ({ itemId: i.itemId, answerScore: i.answerScore, })); }

answers: [ { itemId: "1", answerScore: 0, }, { itemId: "2", answerScore: 0, }, { itemId: "3", answerScore: 0, }, ];

3. filter( )

+ 语法：数组.filter( function (item, index, arr) { } )

+ 作用：过滤数组 ( 可灵活运用于实现一些 "删除" 功能 )

=> 把原始数组里面满足条件的内容拿出来, 组成一个新的数组

+ 返回值：是一个新数组

=> 原始数组内有多少满足条件的（true）, 那么新数组里面就有多少个数据

=> 原始数组内没有满足条件的 （false）, 那么就是 空的数组

=> 条件以return的形式书写

// 3. filter() var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] // 对 arr 进行过滤 var res = arr.filter(function a(item) { // 书写过滤条件 // 以 return 的形式书写过滤条件 return item / 10 % 2 === 0 // 把每一项满足除以10之后为偶数的数据过滤出来组成一个新数组 }) console.log('返回值数组 : ', res) // [20, 40]

filter 的原理 :

1. 准备一个空数组

=> [ ]

返回值 => [20, 40]

2. 开始根据数组内有多少成员调用多少次 a 函数

=> 第一次调用 a(10, 0, 原始数组), 返回值 false, 那么 10 不加入新数组

=> 第二次调用 a(20, 1, 原始数组), 返回值 true, 那么 20 加入新数组

=> 第三次调用 a(30, 2, 原始数组), 返回值 false, 那么 30 不加入新数组

=> 第四次调用 a(40, 3, 原始数组), 返回值 true, 那么 40 加入新数组

=> 第五次调用 a(50, 4, 原始数组), 返回值 false, 那么 50 不加入新数组

3. 把数组最终结果 [20, 40] 当做 filter 的返回值

项目实践 ：

因为其 + 返回值: 是一个新数组

所以常利用它和 .length 搭配 （ 可节省 计数器 变量的使用了 ）

需求 ： 题型为多选必答项 ， 并且设置了最少回答数为 mincount

computed: { minAnswer() { let num = this.list.filter((i) => i.value !== ""); return num.length < this.list.mincount; }, },

把原始数组 [ list ] 里面满足条件 ( value 值 不为空 )的内容拿出来 ，组成一个新的数组 ，

判断其 length 数组长度值 （ 已回答数 ） 小于 定义的最小回答数 时 ， 返回 true

并会提示用户最少回答的 Tips 警告语 ⚠️

4. find( )

+ 语法：数组.find( function (item, index, arr) { } )

+ 作用：查找数组中满足条件的某一个数据

+ 返回值：就是数组中你要查找的满足条件的这个数据

+ 查找条件以return的形式书写

+ 常用在复杂数据类型的查找

// 4. find() var arr = [ 100, 200, 301, 400, 500 ] console.log('原始数组 : ', arr) // [100, 200, 301, 400, 500] // 我想找到原始数组中的那一个 奇数 var res = arr.find(function (item) { // 以 return 的形式书写查找条件 return item % 2 === 1 }) console.log('返回值 : ', res) // 301

// find 一般查找的都是复杂数据类型 var arr = [ { id: 1, name: 'Jack' }, { id: 2, name: 'Rose' }, { id: 3, name: 'Tom' } ] // 我已知的只有 id, 我想知道这个人叫什么 // 使用 find 方法直接找到这个人的完整信息 var res = arr.find(function (item) { // 条件: 找到 每一项中 id 是 2 的那一个 return item.id === 2 }) console.log('返回值数组 : ', res) // {id: 2, name: "Rose"}

5. every( )

+ 语法：数组.every( function (item, index, arr) { } )

+ 作用：判断数组中的每一个是否都满足条件

+ 返回值：是一个布尔值 Boolean ： true / false

=> 如果数组中每一个都满足条件, 那么返回值 true

=> 只要数组中任何一个不满足条件, 那么返回 false

+ 判断条件以return的形式书写

// 5. every() var arr = [10, 20, 30, 40, 50] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.every(function (item) { // 以 return 的形式书写 判断 条件 // 判断数组内是不是所有项都 小于 50 return item < 50 }) console.log('返回值 : ', res) // false

项目实践 ：

let count = 0; // 计数器 // 需求 : 题型为必答题 , 统计用户是否每个选项都已回答 this.listData.forEach((item) => { if (item.options.every((i) => i.label !== "")) count++; });

判断数组 [ item.options ] 中的每一个 label 值是否都 不为空 ， 则满足条件 （ true ）

6. some( )

+ 语法：数组.some( function (item, index, arr) { } )

+ 作用：判断数组中是否有某一个满足条件

+ 返回值：是一个布尔值Boolean ： true / false

=> 如果数组中有任何一个满足条件 , 那么返回 true

=> 只有数组中所有都不满足条件的时候 , 才是 false

// 6. some() var arr = [10, 20, 30, 40, 50] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.some(function (item) { // 以 return 的形式书写 判断 条件 // 判断数组内是不是 有某一个 小于 50 return item < 50 }) console.log('返回值 : ', res) // true

项目实践 ：

需求 ： 题目为必答项，每一项都必须要回答，只要有一项未答则 ⚠️ 警告提示

computed: { isShow() { return this.list.some((i) => i.value === ""); }, },

判断数组 [ list ] 中是否有某一个 ( 只要有一个 value 值 为空 ) 则满足条件，返回 true

7. reduce( )

⭐️ + 语法：数组.reduce(function(prev, item, index, arr ) { },初始值)

=> 1、参数一：函数, 函数根据数组中的成员进行 重复调用

->第一个参数 prev ：初始值 或 每一次叠加后的结果

->第二个参数 item ：每一项

-> 第三个参数 index ：索引

-> 第四个参数 arr ：原始数组

=> 2、参数二：初始值: 默认是 0 , 表示从什么位置开始叠加

+ 作用：进行叠加累计

// 7. reduce( ) var arr = [ 10, 20, 30, 40, 50 ] console.log('原始数组 : ', arr) // [10, 20, 30, 40, 50] var res = arr.reduce(function a(prev, item) { // 以 return 的形式书写每次的叠加条件 return prev + item }, 0) console.log('返回值 : ', res) // 150

reduce 原理 :

1. 准备了一个初始值, 按照你传递的 第二个参数 来定

=> 准备初始值 var init = 0

=> 第一次赋值 var init = 10

=> 第二次赋值 var init = 30

=> 第三次赋值 var init = 60

=> 第四次赋值 var init = 100

=> 第五次赋值 var init = 150

2. 根据原始数组来调用 a 函数

=> 第一次调用 a(0, 10, 0, 原始数组), return 0 + 10, 把 返回值再次赋值给 init

=> 第二次调用 a(10, 20, 1, 原始数组), return 10 + 20, 把 返回值再次赋值给 init

=> 第三次调用 a(30, 30, 2, 原始数组), return 30 + 30, 把 返回值再次赋值给 init

=> 第四次调用 a(60, 40, 3, 原始数组), return 60 + 40, 把 返回值再次赋值给 init

=> 第五次调用 a(100, 50, 4, 原始数组), return 100 + 50, 把 返回值再次赋值给 init

3. 把最初始准备的变量 init 结果, 当做 reduce 的返回值

ES6新增数组方法（注意浏览器兼容）

includes()

方法 ： 用来判断一个数组是否包含一个指定的值，如果是 返回 true ，否则 false。

语法 ：arr.includes(searchElement,fromIndex)

searchElement： 必须 。需要查找的元素值 。

fromIndex：可选 。从该索引处开始查找 searchElement 。

如果为负值 ，则按升序从 array.length + fromIndex 的索引开始搜索 。默认为 0。

<script> let arr = ["a","b","c","d"]; // 0 1 2 3 // -4 -3 -2 -1 let result1 = arr.includes("b"); let result2 = arr.includes("b", 2); let result3 = arr.includes("b", -1); let result4 = arr.includes("b", -3); console.log(result1); // true console.log(result2); // false console.log(result3); // flase console.log(result4); // true </script>

数组 、 字符串 都可以使用 此方法 。

总结

我个人认为 ,includes方法好就好在 , 它 返回 的是一个Boolean 布尔值,

这样在项目中使用时 , 直接用 if ( 返回的值就可以了 ) ,

相较于indexOf方法用起来十分方便 。

但各有各的好 ,indexOf方法在其他场景比如配合splice方法

删除元素 时就挺好用的 。

图例 :

上一篇跳转链接 : JavaScript_数组常用方法【2】