【JS】自定义JS函数工具库 - 封装处理数组的方法（基础篇）- map - reduce - filter - find - findIndex - every - some
文章目录
- 0. 目标
- 1. 封装 map 函数
-
- 定义
- 使用
- 结果
- 2. 封装 reduce 函数
-
- 定义
- 使用
- 结果
- 3. 封装 filter 函数
-
- 定义
- 使用
- 结果
- 4. 封装find函数
-
- 定义
- 使用
- 结果
- 5. 封装findIndex函数
-
- 定义
- 使用
- 结果
- 6. 封装every函数
-
- 定义
- 使用
- 结果
- 7. 封装some函数
-
- 定义
- 使用
- 结果
关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils
0. 目标
自定义以下数组原型上的方法
map(): 返回一个由回调函数的返回值组成的新数组
reduce(): 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
filter(): 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回
find(): 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined
findIndex(): 找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1
every(): 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false
some(): 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false
相关的原生js可以查看
【JS】JavaScript数组-归并方法-reduce-reduceRight
【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()
【JS】JavaScript数组-操作方法-concat-数组强制打平-slice-splice方法使用
1. 封装 map 函数
定义
/**
* 封装map函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function map(arr, callback) {
// 声明一个空的结果数组
let result = [];
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// 执行回调，将回调函数执行结果添加到结果数组中
result.push(callback(arr[i], i));
}
return result;
}
使用
import {
map } from './array/declares'
// 声明一个数组
const arr = [2, 4, 6, 8]
const result = map(arr, (item) => {
return item * 10
})
console.log(result)
结果
2. 封装 reduce 函数
定义
/**
* 封装reduce函数
* @param {Array} arr
* @param {Function} callback
* @param {number} initValue
* @returns
*/
export function reduce(arr, callback, initValue) {
// 声明变量
let result = initValue;
for (let i = 0; i < arr.length; i++) {
// 执行回调
result = callback(result, arr[i]);
}
return result;
}
使用
const arr = [2, 4, 6, 8]
const result = reduce(arr, (res, value) => {
return res + value;
}, 1)
console.log(result)
结果
3. 封装 filter 函数
定义
/**
* 封装filter函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function filter(arr, callback) {
// 定义空数组接收 回调返回为true的 元素
let result = [];
for (let i = 0; i < arr.length; i++) {
let res = callback(arr[i], i);
// 如果回调结果为真 就压入结果数组中
if (res) {
result.push(arr[i]);
}
}
return result;
}
使用
const arr = [2, 3, 4, 5, 6, 8];
const result = filter(arr, (item) => item % 2 === 0);
console.log(result);
结果
4. 封装find函数
定义
/**
* 封装find函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function find(arr, callback) {
for (let i = 0; i < arr.length; i++){
let res = callback(arr[i], i)
if (res) {
// 返回 满足条件的第一个元素
return arr[i]
}
}
// 如果没有遇到满足条件的就返回undefined
return undefined
}
使用
const arr = [2, 3, 4, 5, 6, 8];
const result = find(arr, item => item > 5)
const result2 = find(arr, item => item > 10)
console.log(result);
console.log(result2);
结果
5. 封装findIndex函数
定义
/**
* 封装findIndex函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function findIndex(arr, callback) {
for (let i = 0; i < arr.length; i++){
let res = callback(arr[i], i)
if (res) {
// 返回 满足条件的第一个元素的小标
return i
}
}
// 如果没有遇到满足条件的就返回 -1
return -1
}
使用
const arr = [2, 3, 4, 5, 6, 8];
const result = findIndex(arr, item => item > 5)
const result2 = findIndex(arr, item => item > 10)
console.log(result);
console.log(result2);
结果
6. 封装every函数
定义
/**
* 封装every函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function every(arr, callback) {
for (let i = 0; i < arr.length; i++){
let res = callback(arr[i])
// 只要有一个不满足就返回false
if (!res) {
return false
}
}
return true
}
使用
const arr = [2, 3, 4, 5, 6, 8];
const result = every(arr, item => item > 0)
const result2 = every(arr, item => item > 5)
console.log(result);
console.log(result2);
结果
7. 封装some函数
定义
/**
* 封装some函数
* @param {Array} arr
* @param {Function} callback
* @returns
*/
export function some(arr, callback) {
for (let i = 0; i < arr.length; i++){
let res = callback(arr[i])
if (res) {
// 只要有一个满足就返回 true
return true
}
}
return false
}
使用
const arr = [2, 3, 4, 5, 6, 8];
const result = some(arr, (item) => item > 10);
const result2 = some(arr, (item) => item > 5);
console.log(result);
console.log(result2);
结果
