javascript笔记——源生js实现each方法

 

出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48

jquery里面有个each方法,将循环操作简化、便捷。

随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型。且无法通过return true达到continue效果。

此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用。

在不使用jquery的each方法时,该如何处理;或者说用原生如何来实现?我在GridManager.js中集成了该方法,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 通过字面量方式实现的函数each
var each =  function(object, callback){
  var type = (function(){
          switch (object.constructor){
            case Object:
                return 'Object';
                break;
            case Array:
                return 'Array';
                break;
            case NodeList:
                return 'NodeList';
                break;
            default:
                return 'null';
                break;
        }
    })();
    // 为数组或类数组时, 返回: index, value
    if(type === 'Array' || type === 'NodeList'){
        // 由于存在类数组NodeList, 所以不能直接调用every方法
        [].every.call(object, function(v, i){
            return callback.call(v, i, v) === false false true;
        });
    }
    // 为对象格式时,返回:key, value
    else if(type === 'Object'){
        for(var in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

我们来try一下, 测试下数组、对象、类数组类型及中断效果

数组类型:

1
2
3
4
var _array = [1,2,3,4];
each(_array, function(i, v){
  console.log(i + ': ' + v);
});

输出如下:

对象类型:

1
2
3
4
var object = {a:1, b:2, c:3}
each(object, function(i, v){
  console.log(i + ': ' + v);
});

输出如下:

类数组类型 :

1
2
3
4
var ele = document.querySelectorAll('div');
each(ele, function(i, v){
  console.log(i + ': ' + v);
});

输出如下:

增加中断条件:

1
2
3
4
5
6
7
8
9
10
11
12
var object2 = {name:'baukh', age: '29', six:'男', url: 'www.lovejavascript.com',}
each(object2, function(i, v){
  if(i === 'age'){ //如果存在键值为age的属性时,则输出警告,用于实现continue效果
    console.log('存在键值为age,这家伙已经'+v+'岁了');
    return true;
  }
  if(i === 'six' && v === '男'){//如果存在键值为age的属性时,则输出跳出,用于实现break效果
    console.log('存在键值为six,是个男的,不用关注了~');
    return false;
  }
  console.log(i + ': ' + v);
});

输出如下:

从结果可以看出来,each方法已经实现了jquery的each功能。且实现如此简单~

cocos2d JS 源生js实现each方法的更多相关文章

  1. javascript笔记——源生js实现each方法

    出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个 ...

  2. 源生JS实现点击复制功能

    之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能.给他解决后现在来总结归纳一下,顺便做个笔记. PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我. ...

  3. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  4. 【转】js 关键字 in 的使用方法

    js 关键字 in 的使用方法  原文地址:http://sunct.iteye.com/blog/1709017   1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作. 对于数组 ...

  5. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  6. JS数组添加字典的方法

    var ary_RoleType = [];  //申明数组变量 for(var j = 0;j<treeData.length;j++){ if($.inArray(treeData[j].v ...

  7. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  8. JSF页面中使用js函数回调后台bean方法并获取返回值的方法

    由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...

  9. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

随机推荐

  1. Linux 查看负载内存

    负载   内存     1.作用 top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式 top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数 ...

  2. spark Transformations算子

    在java中,RDD分为javaRDDs和javaPairRDDs.下面分两大类来进行. 都必须要进行的一步. SparkConf conf = new SparkConf().setMaster(& ...

  3. 自定义InputFormat和OutputFormat案例

    一.自定义InputFormat InputFormat是输入流,在前面的例子中使用的是文件输入输出流FileInputFormat和FileOutputFormat,而FileInputFormat ...

  4. Faster数据库研习,一

    什么是Faster   Faster 是一个很屌的嵌入式KeyValue 数据库项目   我简单的把 微软官网怎么吹的给大家翻译一下:   Faster:一个为状态管理而生的嵌入式并发KeyValue ...

  5. Python requests--初识接口自动化

    requests模块初级宝典:http://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests模块之葵花宝典:http ...

  6. Anaconda介绍、安装及使用教程

    https://www.jianshu.com/p/62f155eb6ac5 Anaconda介绍.安装及使用教程 Python是一种面向对象的解释型计算机程序设计语言,其使用,具有跨平台的特点,可以 ...

  7. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Saratov

    A. Three Arrays 枚举每个$a_i$,双指针出$b$和$c$的范围,对于$b$中每个预先双指针出$c$的范围,那么对于每个$b$,在对应$c$的区间加$1$,在$a$处区间求和即可. 树 ...

  8. css 制作菜单

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. select应用

    服务端源码 #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ @author: zengchunyun "& ...

  10. ASP.NET Core 2.2 迁移至 3.0 备忘录

    将 ASP.NET Core 2.2 迁移至 ASP.NET Core 3.0 需要注意的地方记录在这篇随笔中. TargetFramework 改为 netcoreapp3.0 <Target ...