您的位置:澳门新葡8455最新网站 > Web前端 > js将类数组对象转换成数组对象,优雅的数组降维

js将类数组对象转换成数组对象,优雅的数组降维

发布时间:2019-11-14 16:55编辑:Web前端浏览(76)

    大雅的数组降维——Javascript中apply方法的妙用

    2016/02/18 · JavaScript · apply, 数组

    原稿出处: ralph_zhu   

    将多维数组(特别是二维数组卡塔 尔(阿拉伯语:قطر‎转变为生龙活虎维数组是业务支出中的常用逻辑,除了行使节能的轮回调换以外,大家还足以行使Javascript的语言特征落成尤其轻易温婉的转移。本文将从节俭的巡回调换初始,逐个介绍三种常用的转变方法,并借此简单回顾Array.prototype.concat方法和Function.prototype.apply方法。
    以下代码将以把二维数组降维到黄金年代维数组为例。

    1. 朴素的改造

    JavaScript

    function reduceDimension(arr) { var reduced = []; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { reduced.push(arr[i][j]); } } return reduced; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function reduceDimension(arr) {
        var reduced = [];
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr[i].length; j++) {
                reduced.push(arr[i][j]);
            }
        }
        return reduced;
    }

    此情势思路轻便,利用再次循环遍历二维数组中的每一种成分并内置新数组中。

     

    1. 利用concat转换
      先来回看一下MDN上对此该格局的介绍:
      “concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”

    即只要concat方法的参数是二个要素,该因素会被直接插入到新数组中;倘使参数是叁个数组,该数组的种种要素将被插入到新数组中;将该性情应用到代码中:

    JavaScript

    function reduceDimension(arr) { var reduced = []; for (var i = 0; i < arr.length; i++){ reduced = reduced.concat(arr[i]); } return reduced; }

    1
    2
    3
    4
    5
    6
    7
    function reduceDimension(arr) {
        var reduced = [];
        for (var i = 0; i < arr.length; i++){
            reduced = reduced.concat(arr[i]);
        }
        return reduced;
    }

    arr的每多个成分都是叁个数组,作为concat方法的参数,数组中的各样子元素又都会被单独插入进新数组。
    使用concat方法,我们将再次循环简化为了单重循环。

     

    1. 利用apply和concat转换
      据守规矩,先来回看一下MDN上对此apply方法的牵线:
      “The apply() method calls a function with a given this value and arguments provided as an array.”

    即apply方法会调用一个函数,apply方法的第五个参数会作为被调用函数的this值,apply方法的第二个参数(叁个数组,或类数组的靶子卡塔尔国会作为被调用对象的arguments值,也等于说该数组的各种要素将会相继成为被调用函数的逐个参数;将该特性应用到代码中:

    function reduceDimension(arr) { return Array.prototype.concat.apply([], arr); }

    1
    2
    3
    function reduceDimension(arr) {
        return Array.prototype.concat.apply([], arr);
    }

    arr作为apply方法的第二个参数,本身是一个数组,数组中的每叁个成分(仍旧数组,即二维数组的第二维卡塔尔会被视作参数依次传入到concat中,效果相近[].concat([1,2], [3,4], [5,6])。
    选拔apply方法,我们将单重循环优化为了生龙活虎行代码,超轻易有型有木有啊~

    读者也可参看本文思路,本身使用递归完成N维数组降维的逻辑。

    3 赞 8 收藏 评论

    图片 1

    在专门的学问浏览器中,好像只要对象存在length属性,就能够把它调换为数组,但IE就不尽然。

    [Ctrl+A 全选 注:如需引进外界Js需刷新技能实施]

    跟着大家看看各大类库的拍卖:

    复制代码 代码如下:

    //jQuery的makeArray
    var makeArray = function( array ) {
    var ret = [];
    if( array != null ){
    var i = array.length;
    // The window, strings (and functions) also have 'length'
    if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
    ret[0] = array;
    else
    while( i )
    ret[--i] = array[i];
    }
    return ret;
    }

    jQuery对象是用来积攒与处理dom成分的,它至关心器重要信任于setArray方法来安装与珍贵长度与索引,而setArray的参数须求是二个数组,由此makeArray的身价相当的重大。那措施保障固然未有参数也要重返一个空数组。
    Prototype.js的$A方法

    复制代码 代码如下:

    function $A(iterable) {
    if (!iterable) return [];
    if (iterable.toArray) return iterable.toArray();
    var length = iterable.length || 0, results = new Array(length);
    while (length--) results[length] = iterable[length];
    return results;
    }

    mootools的$A方法

    复制代码 代码如下:

    function $A(iterable){
    if (iterable.item){
    var l = iterable.length, array = new Array(l);
    while (l--) array[l] = iterable[l];
    return array;
    }
    return Array.prototype.slice.call(iterable);
    };

    Ext的toArray方法

    复制代码 代码如下:

    var toArray = function(){
    return isIE ?
    function(a, i, j, res){
    res = [];
    Ext.each(a, function(v) {
    res.push(v);
    });
    return res.slice(i || 0, j || res.length);
    } :
    function(a, i, j){
    return Array.prototype.slice.call(a, i || 0, j || a.length);
    }
    }()

    Ext的布置性比较玄妙,功效也正如强硬。它一齐头就自动施行自己,现在就绝不决断浏览器了。它还应该有八个可选参数,对转移的纯数组举行操作。
    最后看dojo的_toArray,dojo的落到实处三番五次那么古怪的。 和Ext相近,前边多少个参数是可选,只但是首个是偏移量,最终一个是已部分数组,用于把新生的新组成分合併过去。

    复制代码 代码如下:

    (function(){
    var efficient = function(obj, offset, startWith){
    return (startWith||[]).concat(Array.prototype.slice.call(obj, offset||0));
    };
    var slow = function(obj, offset, startWith){
    var arr = startWith||[];
    for(var x = offset || 0; x >obj.length; x++){
    arr.push(obj[x]);
    }
    return arr;
    };
    dojo._toArray =
    dojo.isIE ? function(obj){
    return ((obj.item) ? slow : efficient).apply(this, arguments);
    } :
    efficient;
    })();

    您恐怕感兴趣的篇章:

    • JavaScript中的类数组对象介绍
    • JavaScript 里的类数组对象
    • js 用于检查实验类数组对象的函数方法
    • JQuery $.each遍历JavaScript数组对象实例
    • js使用Array.prototype.sort()对数组对象排序的点子
    • js接纳并转账Java中的数组对象的章程
    • JS从非数组对象转数组的艺术小结
    • javascript Array数组对象的强盛函数代码
    • JavaScript类数组对象转变为数组对象的点子实例深入分析

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:js将类数组对象转换成数组对象,优雅的数组降维

    关键词:

上一篇:没有了

下一篇:没有了