xml地图|网站地图|网站标签 [设为首页] [加入收藏]

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

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:91 发布时间:2019-05-02
摘要:大雅的数组降维——Javascript中apply方法的妙用 2016/02/18 · JavaScript· apply,数组 初稿出处:ralph_zhu    将多维数组(特别是二维数组)转化为1维数组是职业支付中的常用逻辑,除了利用节

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

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

初稿出处: ralph_zhu   

将多维数组(特别是二维数组)转化为1维数组是职业支付中的常用逻辑,除了利用节约财富的轮回调换以外,我们还能动用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方法的参数是1个成分,该因素会被直接插入到新数组中;假如参数是三个数组,该数组的壹一要素将被插入到新数组中;将该个性应用到代码中:

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的每一种要素都以2个数组,作为concat方法的参数,数组中的每2个子成分又都会被单独插入进新数组。
选用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方法的第二个参数(2个数组,或类数组的靶子)会作为被调用对象的arguments值,也正是说该数组的逐壹要素将会相继成为被调用函数的1一参数;将该性情应用到代码中:

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

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

arr作为apply方法的第三个参数,自个儿是三个数组,数组中的每一个成分(照旧数组,即2维数组的第3维)会被看做参数依次传入到concat中,效果一样[].concat([1,2], [3,4], [5,6])。
使用apply方法,我们将单重循环优化为了一行代码,很简短有型有木有啊~

读者也可参考本文思路,自个儿行使递归落成N维数组降维的逻辑。

3 赞 8 收藏 评论

图片 1

在正规浏览器中,好像只要对象存在length属性,就会把它转变为数组,但IE就不尽然。

1.indexOf和lastIndexOf方法:

[Ctrl A 全选 注:如需引进外部Js需刷新才干实践]

因为IE7在数组对象上使用indexOf会报错,所以要求重写三个包容性的。

随后大家看看各大类库的拍卖:

复制代码 代码如下:

复制代码 代码如下:

Array.prototype.lastIndexOf(item,index){
  var n = this.length,i = (index==null||index>n-1)?n-1:index;
  if(i < 0) i = n i;
  for(;i>=0;i--)
    if(this[i] === item)   //全等看清,indexOf,lastIndexOf
      return i;
  return -1;
}

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

2.shuffle艺术:对数组进行洗牌。

jQuery对象是用来存款和储蓄与管理dom元素的,它根本依靠于setArray方法来安装与保证长度与索引,而setArray的参数要求是二个数组,因而makeArray的地位10分首要。那办法保证纵然未有参数也要回到1个空数组。
Prototype.js的$A方法

复制代码 代码如下:

复制代码 代码如下:

function shuffle(target){
  var i = target.length, j ,temp;
  for(;i>0;j=parseInt(Math.random() * i), x = target[--i],target[i] = target[j],target[j]=x){}   
     //假设length=10,那么Math.random()*10->[0,10),parseInt后,[0,9],随机的取舍一个与数组最终1项调换。第一次巡回,[0,8],与数组的尾数第2项交换。
  return target;
}

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

三.数组的平坦化管理:flatten,重返一个1维数组

mootools的$A方法

复制代码 代码如下:

复制代码 代码如下:

function flatten(arr){
  var result = [];
  arr.forEach(function(item){
    if(Array.isArray(item))   result.concat(flatten(item));
    else  result.push(item);
  });
  return result;
}

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

四.unique措施:对数组去重操作

Ext的toArray方法

此办法,面试官最欢愉问了,因为它有两种贯彻格局,最常见的是多少个for循环。一般精晓的最多的是行使一个目标a,然后1个for循环数组arr,每趟if(a[arr[i]])是不是留存,不设有则push到你新定义的数组result中。存在就印证,重复,由此不要push到result中。那种方案,针对"1二三",123,会感到一样的,其实二个是字符串,贰个是数字,不应该认为是同一的。

复制代码 代码如下:

由此就涌出了以下格局:[1,"1","1"]

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

复制代码 代码如下:

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:优雅的数组降维,js将类数组对象转换成数组对象

关键词: 68399皇家赌场 JavaScript

最火资讯