原生js完成each要领

jquery内里有个each要领,将轮回操纵简化、便利。

随后es出了个forEach要领,两个虽然用法邻近,然则不能处置惩罚对象范例。且没法经由过程return true到达continue效果。

另外另有个every要领,该要领虽然能够完成continue效果,然则在处置惩罚类数组与对象范例时,完整无用。

在不运用jqueryeach要领时,该怎样处置惩罚;或者说用原生怎样来完成?
前些前写了个类库: jTool, 其中就完成了该要领。

简朴完成:

// 经由过程字面量体式格局完成的函数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 i in object){
            if(callback.call(object[i], i, object[i]) === false){
                break;
            }
        }
    }
}

我们来try一下, 测试下数组、对象、类数组范例及中缀效果

数组范例

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

输出以下:
《原生js完成each要领》

对象范例

var object = {a:1, b:2, c:3}
each(object, function(i, v){
console.log(i + ‘: ‘ + v);
});
输出以下:
《原生js完成each要领》

类数组范例

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

输出以下:
《原生js完成each要领》

增添中缀前提

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);
});

输出以下:
《原生js完成each要领》

从效果能够看出来,each要领已完成了jquery的each功用。且完成云云简朴~

漫笔一行
这是前端最好的时期, 这也是前端最坏的时期。 浩瀚前端框架满天飞,跟着 jQuery 在前端行业的逐步弱化,老是会有一种斯人远去,何者慰籍的觉得。互勉吧,列位。

另引荐个表格组件gridManager

    原文作者:拭目以待
    原文地址: https://segmentfault.com/a/1190000019294550
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞