三大高阶函数的使用
编程范式:面向对象编程(第一公民:对象) / 函数式编程(第一公民:函数)
filter
filter() 方法创建一个新数组, 其包含通过所提供的回调函数函数实现的测试的所有元素。
语法
var newArray = arr.filter(callback(element, index, array), thisArg)
参数
callback
-
element
数组中当前正在处理的元素。
-
index
可选正在处理的元素在数组中的索引。
-
array
可选调用了 filter 的数组本身。
thisArg
可选
返回值
一个新的数组,如果被测试数组没有能通过的元素,返回空数组
说明
filter
为数组中的每个元素调用一次 callback
函数,并利用所有使得 callback
返回 true 或等价于 true 的值的元素创建一个新数组。
callback
被调用时传入三个参数:
- 元素的值
- 元素的索引
- 被遍历的数组本身
使用
-
基本写法
const arr = [1, 2, 3, 4, 5, 6, 7, 8]; let newArr = arr.filter(function(item, index, arr) { // 基本写法 console.log(item); // 1, 2, 3, 4, 5这些值 console.log(index); // 0, 1, 2, 3这些下标值 console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8] if (item > 6) { return true } }) // newArr = [7, 8]
-
使用箭头函数
const arr = ['aa', 'aab', 'bba', 'cca', 'aagf']; let newArr = arr.filter(item => { return item.startsWith('a') ? true : false }) // 筛选数组里面值开头字母为 a 的元素为一个新的数组 console.log(newArr); // 筛选id大于1的选项 const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]; let newArr = arr.filter(item => { return item.id > 1 }) console.log(newArr);
map
map() 方法创建一个新数组, 其包含经过 callback 处理之后返回的所有元素。
语法
var newArray = arr.map(callback(element, index, array), thisArg)
参数
callback
-
element
数组中当前正在处理的元素。
-
index
可选正在处理的元素在数组中的索引。
-
array
可选调用了 filter 的数组本身。
thisArg
可选 回调函数中 this 的指向
返回值
一个新的数组
说明
map
为数组中的每个元素调用一次 callback
函数,并利用所有 callback
返回的元素创建一个新数组。
callback
被调用时传入三个参数:
- 元素的值
- 元素的索引
- 被遍历的数组本身
使用
-
对数组处理
const arr = [1, 2, 3, 4, 5, 6, 7, 8]; let newArr = arr.map(item => { return item * 10 }) console.log(newArr); // [10, 20, 30, 40, 50, 60, 70, 80]
-
对数组内的对象处理
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]; let newArr = arr.map(item => { item.id += 20; return item }) console.log(newArr); // [{{id: 21}}, {{id: 22}}, {{id: 23}}]
reduce
reduce() 方法对数组中的每个元素执行一个由我提供的reducer函数(升序执行),将其结果汇总为单个返回值。
语法
var newArray = arr.reduce(callback(element, index, array), initialValue)
参数
callback
-
accumulator
callback 返回的值,第一次调用的时候为我们提供的
initialValue
初始值 -
element
数组中当前正在处理的元素。
-
index
可选正在处理的元素在数组中的索引。
-
array
可选调用了 filter 的数组本身。
initialValue
可选 :作为第一次调用 callback
函数时的第一个参数的值 | 如果没有提供初始值,将使用数组中的第一个元素
返回值
函数累计处理的结果
说明
reduce
为数组中的每个元素调用一次 callback
函数,并把 callback
的值传入下一个 callback
中**previousValue **这个参数,若调用时为最后一次,则r把 return 的值给返回出去给变量
callback
被调用时传入四个参数:
- 我们提供的初始值
- 元素的值
- 元素的索引
- 被遍历的数组本身
使用
-
对数组处理
// 案例1 const arr = [1, 2, 3, 4, 5, 6, 7, 8]; let newValue = arr.reduce(function(previousValue, value) { return previousValue + value // 该返回值成为下一个回调函数的previousValue值 }, 0) console.log(newValue); // 该值为arr里面所有值的总和 // 案例2 const arr = ['a', 'b', 'c', 'd', 'e', 'f'] let newArr = arr.reduce(function(previousValue, value) { return previousValue + value }, '') console.log(newArr); // abcdef
-
对数组内的对象处理
const arr = [{ id: 1, price: 56 }, { id: 2, price: 23 }, { id: 3, price: 14 }, { id: 4, price: 73 }]; let newValue = arr.reduce(function(previousValue, item) { return previousValue + item.price }, 0) console.log(newValue);