关键词:
【手撕代码系列】之7个常用的遍历方法JS实现(二)
🚀 通俗易懂的实现方式,帮助我们认识相应的方法
📚 收藏本系列,基础进阶两不误
🎉 本系列持续更新,欢迎查看线上地址
写在前面
代码实现系列是与手写代码相关的第一个系列。
知识点总结的再多,也离不开思考和实践,否则就是空中楼阁,本系列顺序由浅至深。欢迎大家交流,探讨~
一、every
检测数组所有元素是否都符合指定条件
1.1 参数
- function(currentValue,index,arr):
- currentValue: 必须。当前元素的值
- index: 可选。当前元素的索引值
- arr: 可选。当前元素属于的数组对象
- thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
1.2 返回值
- (Bool): 如果所有元素都通过检测返回 true,否则返回 false。
1.3 实现
Array.prototype._every = function (callback, target = this)
const arr = target;
const len = arr.length;
if (typeof callback !== 'function')
throw new Error('need a function')
if (len === 0) return []; // 如果为空数组,返回[]
for (let i = 0; i < len; i++)
if (!callback(arr[i], i, arr))
return false;
return true;
1.4 测试
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr._every((val) => val > 0)) // true
console.log(arr._every((val) => val > 10)) // false
二、filter
_filter(function(currentValue,index,arr), thisValue)
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
2.1 参数
- function(currentValue,index,arr):
- currentValue: 必须。当前元素的值
- index: 可选。当前元素的索引值
- arr: 可选。当前元素属于的数组对象
- thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
2.2 返回值
- (Array): 返回通过检查指定数组中符合条件的所有元素
2.3 实现
Array.prototype._filter = function (callback, target = this)
const arr = target; // 保存this
const result = []; // 返回新数组
const len = arr.length;
if (len === 0) return []; // 如果为空数组,返回[]
for (let i = 0; i < len; i++)
if (callback(arr[i], i, arr)) result.push(arr[i]); //如果判定条件为true,保存至新数组
return result; // 返回符合条件的结果
;
2.4 测试
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr._filter((val) => val > 0))
// => [ 1, 2, 3, 4, 5, 6 ]
console.log(arr._filter((val) => val > 10))
// => []
三、find
_find(function(currentValue,index,arr), thisValue)
返回通过测试(函数内判断)的数组的第一个元素的值。
3.1 参数
- function(currentValue,index,arr):
- currentValue: 必须。当前元素的值
- index: 可选。当前元素的索引值
- arr: 可选。当前元素属于的数组对象
- thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
3.2 返回值
- (Any): 返回通过测试(函数内判断)的数组的第一个元素的值。
3.3 实现
Array.prototype._find = function (fn, target)
const items = target || this;
for (let i = 0; i < items.length; i++)
const cur = items[i];
const index = i;
const arr = items;
if (fn(cur, index, arr))
return cur;
return undefined;
;
3.4 测试
const ages = [3, 10, 18, 20];
console.log(ages._find((age) => age > 0)) // 3
console.log(ages._find((age) => age > 10)) // 18
四、forEach
forEach(collection, [iteratee=.identity])
调用 iteratee 遍历 collection(集合) 中的每个元素, iteratee 调用3个参数: (value, index, collection)。
4.1 参数
- collection (Array): 一个用来迭代的集合。
- [iteratee=_.identity] (Function): 每次迭代调用的函数。
4.2 返回值
- (*): 无
4.3 实现
const _forEach = (array = [], iteratee) =>
if (!array.length) return;
for (let i = 0; i < array.length; i++)
iteratee(array[i], i, array);
;
4.4 测试
_forEach([1, 2, 3, 4, 5], function(value)
console.log(value);
);
// => 1 2 3 4 5
五、includes
_includes(collection, value, [fromIndex=0])
检查 value(值) 是否在 collection(集合) 中。如果 collection(集合)是一个字符串,那么检查 value(值,子字符串) 是否在字符串中, 否则做等值比较。 如果指定 fromIndex 是负数,那么从 collection(集合) 的结尾开始检索。
5.1 参数
- collection (Array|string): 要检索的集合。
- value (*): 要检索的值。
- [fromIndex=0] (number): 要检索的 索引位置。
5.2 返回值
- (Boolean): 如果找到匹配的字符串返回 true,否则返回 false。
5.3 实现
const _includes = function (collection, value, fromIndex = 0)
const length = collection;
if (!length) return false;
let index = fromIndex >= 0 ? fromIndex - 1 : length - 2;
if (typeof value === 'string')
return collection.slice(++index).indexOf(value) !== -1
else
while (++index < length)
if (collection[index] === value)
return true
return false
;
5.4 测试
_includes([1, 2, 3], 1);
// => true
_includes([1, 2, 3], 1, 2);
// => false
_includes('pebbles', 'eb');
// => true
六、map
forEach(collection, [iteratee=.identity])
创建一个数组, value(值) 是iteratee(迭代函数)遍历 collection(集合)中的每个元素后返回的结果。 iteratee(迭代函数)调用3个参数value, index, collection
6.1 参数
- collection (Array): 一个用来迭代的集合。
- [iteratee=_.identity] (Function): 每次迭代调用的函数。
6.2 返回值
- (Array): 返回新的映射后数组。
6.3 实现
const _map = (array = [], iteratee) =>
const length = array;
const result = new Array(length);
for (let i = 0; i < length; i++)
result[i] = iteratee(array[i], i, array);
return result;
;
6.4 测试
console.log(_map([1, 2, 3, 4, 5], (val) => val + 1));
// => [2, 3, 4, 5, 6]
七、some
_some(function(currentValue,index,arr), thisValue)
用于检测数组中的元素是否满足指定条件
7.1 参数
- function(currentValue,index,arr):
- currentValue: 必须。当前元素的值
- index: 可选。当前元素的索引值
- arr: 可选。当前元素属于的数组对象
- thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,“this” 的值为 “undefined”
7.2 返回值
- (Bool): 如果数组中有元素满足条件返回 true,否则返回 false。
7.3 实现
Array.prototype._some = function (callback, target = this)
const arr = target;
const len = arr.length;
if (typeof callback !== 'function')
throw new Error('need a function')
if (len === 0) return []; // 如果为空数组,返回[]
for (let i = 0; i < len; i++)
if (callback(arr[i], i, arr))
return true;
return false;
7.4 测试
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr._some((val) => val > 5)) // true
console.log(arr._some((val) => val > 10)) // false
写在最后
本系列第二篇就到这里了,感兴趣的朋友可以留言讨论更好的代码实现,以及其他想了解的代码实现,下篇手撕代码系列会是其他数据类型相关的方法,收藏不走丢哦~
其他系列
值得收藏面试会用到的七个常用的遍历方法js实现(代码片段)
【手撕代码系列】之7个常用的遍历方法JS实现(二)🚀通俗易懂的实现方式,帮助我们认识相应的方法📚收藏本系列,基础进阶两不误🎉本系列持续更新,欢迎查看线上地址写在前面代码实现系... 查看详情
值得收藏面试会用到的七个常用的遍历方法js实现(代码片段)
【手撕代码系列】之7个常用的遍历方法JS实现(二)🚀通俗易懂的实现方式,帮助我们认识相应的方法📚收藏本系列,基础进阶两不误🎉本系列持续更新,欢迎查看线上地址写在前面代码实现系... 查看详情
值得收藏面试会用到的十个常用的数组方法js实现(代码片段)
【手撕代码系列】之十个常用的数组方法JS实现(一)🚀通俗易懂的实现方式,帮助我们认识相应的方法📚收藏本系列,基础进阶两不误🎉本系列持续更新,欢迎查看线上地址写在前面代码实现系... 查看详情
值得收藏面试会用到的十个常用的数组方法js实现(代码片段)
【手撕代码系列】之十个常用的数组方法JS实现(一)🚀通俗易懂的实现方式,帮助我们认识相应的方法📚收藏本系列,基础进阶两不误🎉本系列持续更新,欢迎查看线上地址写在前面代码实现系... 查看详情
面试总结
Java基础ArrayList如何扩容?hashcode相关Map以对象为key可能会出现那些问题?hashMap底层是怎么实现的,怎么解决冲突问题?手写常见的数组排序?手写常见的数据的查找?a=a+b,a+=b有什么区别?手写有序数组的2分查找?ArrayList和linkedLi... 查看详情
java中常用的七个阻塞队列
Java中常用的七个阻塞队列介绍第一篇在上一篇我们对Java中的队列分类做了简单的介绍。本文咱们主要来聊聊阻塞队列中的七个常用子类。这七个阻塞队列的学习步骤:先看源码,分析完源码之后,我们再来对每个队列进行总结... 查看详情
java性能优化的七个方向
上一篇:面试通过,背调凉了。。了解了优化目标后,那接下来应该从哪些方面入手呢?本文主要侧重于理论分析,我们从整体上看一下Java性能优化都有哪些可以遵循的规律。本文主讲理论。关于实践,... 查看详情
2021高频php面试题(值得收藏)
三次握手,四次挥手,为什么是三次握手四次挥手一、详述一次完整的HTTP请求过程这个问题的核心是域名解析和服务器(nginx)解析这两部分,基本上这两部分详细阐述就可以了。关注微信公众号 “PHP大神”回复“面试题”... 查看详情
js常用代码片段2-值得收藏(代码片段)
DOM检查一个元素是否被聚焦consthasFocus=(ele)=>ele===document.activeElement获取一个元素的所有兄弟元素constsiblings=(ele)=>.slice.call(ele.parentNode.children).filter((child)=>child! 查看详情
js常用代码片段2-值得收藏(代码片段)
DOM检查一个元素是否被聚焦consthasFocus=(ele)=>ele===document.activeElement获取一个元素的所有兄弟元素constsiblings=(ele)=>.slice.call(ele.parentNode.children).filter((child)=>child! 查看详情
setcookie的七个参数
一、setcookie的七个参数格式setcookie(name,value,expire,path,domain,secure,Httponly)1、name必需。规定cookie的名称。2、value必需。规定cookie的值。3、expire可选。规定cookie的有效时间4、path可选。规定cookie的服务器路径,浏览器在发送cookie时只... 查看详情
讀書筆記高效能人士的七个习惯
...,这是一本不错的励志成长书籍,个人觉得非常值得一读.现将个人整理的笔记记录如下。 豆瓣读书:http://book.douban.com/subject/1048007/ 习惯一:积极主动 习惯二:以始为终 习惯三:要是第一 习惯四:... 查看详情
❤️《画解数据结构》七个动画“画“解链表(本文出自那个被吊打的面试官,建议收藏)❤️(代码片段)
本文已收录于专栏🌳《画解数据结构》🌳零、前言 「数据结构」和「算法」是密不可分的,两者往往是「相辅相成」的存在,所以,在学习「数据结构」的过程中,不免会遇到各种「算法」。 到... 查看详情
❤️《画解数据结构》七个动画“画“解链表(本文出自那个被吊打的面试官,建议收藏)❤️(代码片段)
本文已收录于专栏🌳《画解数据结构》🌳零、前言 「数据结构」和「算法」是密不可分的,两者往往是「相辅相成」的存在,所以,在学习「数据结构」的过程中,不免会遇到各种「算法」。 到... 查看详情
坐标变换的七个参数
...定义为七个参数的正应用。平移,缩放和旋转定义为反应的七个参数。我们可以看一下坐标系的EPSG定义:七个参数的定义称为towgs84,字面意思是转换towgs84所需的七个参数。它还可以用作不同坐标系之间的参考转换。在基线转换... 查看详情
js数组字符串常用方法
...sp;2016-01-0823:19 _银弹 阅读(486)评论(0) 编辑 收藏常常在开发中,会使用到很多js数组和字符串的处理方法,这里列举一些常用到的一些,方便大家参考使用。数组方面push:向数组尾部增加内容,返回的是新数组的长... 查看详情
js常用代码片段-127个常用罗列-值得收藏(代码片段)
1、all如果数组所有元素满足函数条件,则返回true。调用时,如果省略第二个参数,则默认传递布尔值。constall=(arr,fn=Boolean)=>arr.every(fn);all([4,2,3],x=>x>1);//trueall([1,2,3]);//true2、allEqual判断数组中的元 查看详情
如何解决 ServiceStack OrmLite 的七个连接表的限制
】如何解决ServiceStackOrmLite的七个连接表的限制【英文标题】:HowtoworkaroundServiceStackOrmLite\'slimitofsevenjoinedtables【发布时间】:2021-12-2204:19:33【问题描述】:使用ServiceStackOrmLite(5.1.0),我们需要运行一个查询,该查询会引入8个连接... 查看详情