>

Javascript中apply方法的妙用,js将类数组对象转变来

- 编辑:至尊游戏网站 -

Javascript中apply方法的妙用,js将类数组对象转变来

平淡的数组降维——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方法的第3个参数会作为被调用函数的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类数组对象转变为数组对象的点子实例剖判

本文由IT-综合发布,转载请注明来源:Javascript中apply方法的妙用,js将类数组对象转变来