来自 前端知识 2019-09-21 12:50 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

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方法的首先个参数会作为被调用函数的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方法的第2个参数,本人是二个数组,数组中的每三个成分(依旧数组,即二维数组的第二维)会被当作参数依次传入到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方法

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:js将类数组对象调换来数组对象,优雅的数组降维

关键词: