zoukankan      html  css  js  c++  java
  • 模拟jquery实现each方法和map方法

    ********************each方法**********************

    function each( obj, cbk ) {
    /*
    * 实现思路:
    * 1、首先却分传入进来的是不是likeArray,
    * 2、如果是采用 var i = 0 的遍历方法遍历所有的值,
    * 然后把遍历到的下标和值依次传给回调使用,并且设置回调内部的this为遍历到的值
    * 3、如果不是likeArray,才有for in的遍历方法遍历所有的值,
    * 然后把遍历到的键和值依次传给回调使用,并且设置回调内部的this为遍历到的值
    * 4、如果回调的返回结果是false,那么中断遍历
    * */

    var i, len;

    // 如果是数组或者伪数组,才有vai i的方式遍历,效率比较高
    if( 'length' in obj ) {
    for( i = 0, len = obj.length; i < len; i++ ) {

    // 把遍历到的键值传给回调使用,如果回调返回false,
    // 那么证明对方不需要再遍历其他数据了,所以break跳出循环。
    if( cbk.call( obj[ i ], i, obj[ i ] ) === false ) {
    break;
    }
    }
    }

    // 否则采用for in的遍历方式
    else {
    for( i in obj ) {

    // 把遍历到的键值传给回调使用,如果回调返回false,
    // 那么证明对方不需要再遍历其他数据了,所以break跳出循环。
    if( cbk.call( obj[ i ], i, obj[ i ] ) === false ) {
    break;
    }
    }
    }

    return obj;
    }

    // 测试
    var obj = { name: 'xx', age: 'xxx' };
    var arr = [ {val:10}, {val:100}, {val:1000} ];
    each( obj, function( key, val ) {
    console.log( key, val, this );
    } );
    each( arr, function( index, val ) {

    console.log( index, val, this );

    // 如果遍历到的对象,val属性值为100,那么就不用遍历剩余的对象了
    if( this.val == 100 ) {
    return false;
    }

    } );

    ********************map方法**************************

    /*
    * jQ实例的map方法:
    * map方法的本意是根据一组数组,按照对应的规则映射成另外一组数据返回。
    * 1、返回给回调的参数先是下标,然后是值
    * 2、回调函数执行时内部的this就指向遍历到的每一个值(就是回调中接收到的val)
    * 3、收集回调返回的结果,如果不为null或undefined,那么存储起来,组成新的实例返回
    * */

    function map( obj, cbk ) {
    /*
    * 实现思路:
    * 1、先却分遍历的对象是不是likeArr
    * 2、是的话var i方式遍历,把遍历的数据传给回调,
    * 同时指定回调内部的this为遍历到的值
    * 3、不是for in方式遍历,把遍历的数据传给回调,
    * 同时指定回调内部的this为遍历到的值
    * 4、收集回调的返回结果,如果不为null或undefined,就存储起来,最终一起返回
    * */

    var i, len, temp, result = [];

    if( 'length' in obj ) {
    for( i = 0, len = obj.length; i < len; i++ ) {
    temp = cbk.call( obj[ i ], i, obj[ i ] );
    if( temp != null ) {
    result.push( temp );
    }
    }
    }else {
    for( i in obj ) {
    temp = cbk.call( obj[ i ], i, obj[ i ] );
    if( temp != null ) {
    result.push( temp );
    }
    }
    }

    return result;
    }

    // 测试
    var obj = { name: 'xx', age: 'xxx' };
    var arr = [ {val:10}, {val:100}, {val:1000} ];

    console.log( map(obj, function (key, val) {

    // 收集值为xxx的key
    if (val === 'xxx') {
    return key;
    }
    }));

    console.log(map(arr, function (index, val) {

    // 收集val大于10的对象
    if (this.val > 10) {
    return this;
    }
    }));

    function map( obj, cbk ) {
    /*
    * 实现思路:
    * 1、先却分遍历的对象是不是likeArr
    * 2、是的话var i方式遍历,把遍历的数据传给回调,
    * 同时指定回调内部的this为遍历到的值
    * 3、不是for in方式遍历,把遍历的数据传给回调,
    * 同时指定回调内部的this为遍历到的值
    * 4、收集回调的返回结果,如果不为null或undefined,就存储起来,最终一起返回
    * */

    var i, len, temp, result = [];

    if( 'length' in obj ) {
    for( i = 0, len = obj.length; i < len; i++ ) {
    temp = cbk.call( obj[ i ], i, obj[ i ] );
    if( temp != null ) {
    result.push( temp );
    }
    }
    }else {
    for( i in obj ) {
    temp = cbk.call( obj[ i ], i, obj[ i ] );
    if( temp != null ) {
    result.push( temp );
    }
    }
    }

    return result;
    }

    // 测试
    var obj = { name: 'xx', age: 'xxx' };
    var arr = [ {val:10}, {val:100}, {val:1000} ];

    console.log( map(obj, function (key, val) {

    // 收集值为xxx的key
    if (val === 'xxx') {
    return key;
    }
    }));

    console.log(map(arr, function (index, val) {

    // 收集val大于10的对象
    if (this.val > 10) {
    return this;
    }
    }));

  • 相关阅读:
    05:背景设置
    04:文本 + 字体
    03:CSS三大特性
    02:Emmet 语法 + Ps切图
    01:基本概念 + 引入CSS
    input禁止输入的方法
    十进制转换成任意进制(栈的应用)
    假定一个解并判断是否可行(二分搜索应用)
    关于二分查找和二分搜索
    统计单词
  • 原文地址:https://www.cnblogs.com/luxiaoxiao/p/6102925.html
Copyright © 2011-2022 走看看