[js高手之路] 设计模式系列课程 - 迭代器(1)
2023-09-11 14:19:51 时间
迭代器是指通过一种形式依次遍历数组,对象,或者类数组结构中的每个元素. 常见的有jquery中的each方法, ES5自带的forEach方法. 下面我们就来自定义一个类似jquery或者ES5的迭代器方法
1 function each( arr, fn ) {
2 for( var i = 0, len = arr.length; i < len; i++ ){
3 fn.call( arr, arr[i], i );
4 }
5 }
6 each( [ 'zhangsan', 'lisi', 'ghostwu' ], function( val, key ){
7 console.log( this, val, key );
8 });
输出结果:
["zhangsan", "lisi", "ghostwu"] "zhangsan" 0["zhangsan", "lisi", "ghostwu"] "lisi" 1["zhangsan", "lisi", "ghostwu"] "ghostwu" 2
二、利用迭代器,判断两个数组的长度和对应的位置的值是否相等
1 function each( arr, fn ) { 2 for( var i = 0, len = arr.length; i < len; i++ ){ 3 fn.call( arr, arr[i], i ); 4 } 5 } 6 function isEqual( arr1, arr2 ){ 7 var flag = false; 8 if( arr1.length != arr2.length ){ 9 throw new Error( '数组的长度不相等' ); 10 } 11 each( arr1, function( val, key ){ 12 if ( val != arr2[key] ) { 13 throw new Error('数组的第' + (key+1) + '项不相等'); 14 } 15 }); 16 return true; 17 } 18 console.log( isEqual( [ 10, 20, 30 ], [ 10, 20, 30 ] ) );
三、另一种迭代器
1 function Iterator( obj ){ 2 var curInd = 0; 3 var next = function(){ 4 curInd += 1; 5 }; 6 var isDone = function(){ 7 return curInd >= obj.length; 8 }; 9 var current = function(){ 10 return obj[curInd]; 11 }; 12 return { 13 next : next, 14 isDone : isDone, 15 current : current 16 }; 17 } 18 var obj = null; 19 obj = Iterator( [ 10, 20, 30 ] ); 20 console.log( obj.current(), obj.isDone() ); // 10, false 21 obj.next(); 22 console.log( obj.current(), obj.isDone() ); // 20, false 23 obj.next(); 24 console.log( obj.current(), obj.isDone() ); // 30, false 25 obj.next(); 26 console.log( obj.current(), obj.isDone() ); // undefined, true
四,使用上面的迭代器,改写两个数组的比较
1 function Iterator( obj ){ 2 var curInd = 0; 3 var next = function(){ 4 curInd += 1; 5 }; 6 var isDone = function(){ 7 return curInd >= obj.length; 8 }; 9 var current = function(){ 10 return obj[curInd]; 11 }; 12 return { 13 next : next, 14 isDone : isDone, 15 current : current 16 }; 17 } 18 19 function compare( it1, it2 ){ 20 while( !it1.isDone() && !it2.isDone() ){ 21 if( it1.current() != it2.current() ){ 22 throw new Error( '数组不相等' ); 23 } 24 it1.next(); 25 it2.next(); 26 } 27 return true; 28 } 29 30 var Iterator1 = Iterator([ 10, 20, 30 ]); 31 var Iterator2 = Iterator([ 10, 20, 30 ]); 32 33 console.log( compare( Iterator1, Iterator2 ) );
相关文章
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(Vue.js)带有星期日期的数字时钟
- JS计算字符串所占字节数
- JS设计模式之MODULE(模块)模式
- 判断浏览器内核JS代码
- js Proxy
- egg.js
- 微信QQ的二维码登录原理js代码解析
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [JS Compose] 6. Semigroup examples
- Velocity.js发布:更快的动画切换速度
- [Tools] Package Your node.js Projects Into a Standalone Applications with pkg
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- how is component.js of extension project loaded
- Atitit.js获取上传文件全路径
- atitit. js 跨界面 页面 web cs 传值方法总结
- 华为OD机试 - 微服务的集成测试(Java & JS & Python)
- JS:crypto-js模块实现数据加密解密
- js-cookie读写浏览器中的Cookie及其应用
- JS unescape()去掉请求链接中的各种符号
- js通过闭包实现多个相同事件只需绑定一次
- js将日期格式转换为YYYY-MM-DD HH:MM:SS
- js读取本地txt文件中的json数据
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- 基于JAVA实现的WEB端UI自动化 - WebDriver高级篇 - 执行JS操作