优雅的数组降维,深入浅出

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

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

原来的书文出处:
ralph_zhu   

将多维数组(尤其是2维数组)转化为一维数组是事情开销中的常用逻辑,除了选取节能的循环调换以外,大家仍是可以够使用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的每二个要素都以3个数组,作为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方法的第四个参数,本人是3个数组,数组中的每贰个要素(仍旧数组,即二维数组的第二维)会被用作参数依次传入到concat中,效果同样[].concat([1,2],
[3,4], [5,6])。
应用apply方法,我们将单重循环优化为了1行代码,很简短有型有木有啊~

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

3 赞 8 收藏
评论

图片 1

那篇小说实在是很难下笔,因为网络有关小说不计其数。

对apply、call、bind的认知,并且列出有个别它们的妙用加深记念。

那篇小说实在是很难下笔,因为网络有关小说数不完。

戏剧性的是今天看到阮老师的1篇作品的一句话:

 

巧合的是今日看到阮老师的一篇小说的一句话:

“对自个儿的话,博客首先是一种知识管理工科具,其次才是流传工具。笔者的本事文章,首要用来收10自个儿还不懂的学识。我只写那三个本人还平昔不完全驾驭的事物,那个本身精通的事物,往往未有重力写。炫人眼目未有是自家的遐思,好奇才是。”

   apply、call 

在 javascript 中,call 和 apply
都以为了转移某些函数运转时的上下文(context)而存在的,换句话说,正是为着改造函数体内部
this 的对准。

JavaScript
的一大特色是,函数存在「定义时上下文」和「运维时上下文」以及「上下文是能够转移的」那样的概念。

先来一个榛子:

1
2
3
4
5
6
7
8
9
10
11
function fruits() {}
 
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " this.color);
    }
}
 
var apple = new fruits;
apple.say();    //My color is red

而是假诺大家有三个目标banana= {color : “yellow”} ,我们不想对它再度定义
say 方法,那么大家得以由此 call 或 apply 用 apple 的 say 方法:

1
2
3
4
5
banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

所以,可以观察 call 和 apply 是为了动态改变 this 而产出的,当1个 object
未有某些方法(本栗子中banana未有say方法),但是任何的有(本栗子中apple有say方法),我们能够凭仗call或apply用别的对象的法门来操作。

 

“对自身的话,博客首先是壹种文化管理工具,其次才是流传工具。笔者的技艺小说,首要用来整理本身还不懂的学问。作者只写那3个自个儿还不曾完全调控的事物,那三个自个儿精通的东西,往往未有重力写。炫人眼目未有是本人的心劲,好奇才是。”

对于那句话,没办法援救越多,也让笔者下决心好好写那篇,网络作品虽多,繁多复制粘贴,且晦涩难懂,小编期待能够通过那篇文章,能够清楚的升官对apply、call、bind的认知,并且列出一些它们的妙用加深纪念。

apply、call 的区别

对此 apply、call
2者来讲,成效完全等同,只是接受参数的格局不太一样。比如,有三个函数定义如下:

1
2
3
var func = function(arg1, arg2) {
     
};

就足以因而如下格局来调用:

1
2
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

里面 this 是您想钦命的上下文,他能够是其他一个 JavaScript
对象(JavaScript 中任何皆对象),call 需求把参数按顺序传递进入,而 apply
则是把参数放在数组里。  

JavaScript
中,有个别函数的参数数量是不稳固的,由此要说适用规范的话,当你的参数是明显知道数码时用
call 。

而不明确的时候用 apply,然后把参数 push
进数组传递进入。当参数数量不确定时,函数内部也能够因而 arguments
这些伪数组来遍历所有的参数。

 

为了巩固深化回忆,上边罗列部分常用用法:

对此那句话,不能够协理更加多,也让本人下决心好好写那篇,英特网小说虽多,多数复制粘贴,且晦涩难懂,小编期望可以因此这篇文章,能够清楚的晋升对apply、call、bind的认知,并且列出部分它们的妙用加深回忆。

相关文章