永利402游戏网站

当前位置:永利402游戏网站-永利402com官方网站 > 永利402游戏网站 > 平淡的数组降维——Javascript中apply方法的妙用

平淡的数组降维——Javascript中apply方法的妙用

来源:http://www.xtcsyb.com 作者:永利402游戏网站-永利402com官方网站 时间:2019-11-25 15:10

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

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

原稿出处: ralph_zhu   

将多维数组(尤其是二维数组卡塔 尔(英语:State of Qatar)转变为后生可畏维数组是业务支出中的常用逻辑,除了选择节约能源的巡回转变以外,咱们仍然是能够运用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方法的第4个参数,自身是二个数组,数组中的每二个要素(依然数组,即二维数组的第二维卡塔尔国会被视作参数依次传入到concat中,效果同样[].concat([1,2], [3,4], [5,6])。
接收apply方法,我们将单重循环优化为了意气风发行代码,十分轻便有型有木有啊~

读者也可仿照效法本文思路,本身行使递归落成N维数组降维的逻辑。

3 赞 8 收藏 评论

图片 1

查询.filter

查询.filter

 

out.join('')

复制代码

})

Stack.prototype.next = function () {

 

相反,大家能够用.unshift 和 .shift模拟FIFO(先进先出卡塔尔国队列。

// <- [void 0, null, false, '']

复制代码

})

concat([

    this._queue = []

 

 

    }, 0)

var a = { foo: 'bar' }

    return input.reduce(function (partial, value) {

小心那对指向性同一个引用的靶子形似适用。第一个参数是发端询问的初始地点。

循环.forEach

stack.add(1,2,3)

// <- -1

 

    { name: 'Pear' }

filter对种种数组成分实行三次回调函数,并回到二个由回调函数再次来到true的因素 组成的新数组。回调函数只会对已经内定值的数组项调用。

forEach方法须要四个回调函数,数组内的每个成分都会调用叁回此措施,此措施要求多个参数如下:

// <- [1, 2, 3, 8, 8, 8, 8, 8, 9]

 

 

复制代码

 

 

console.log(max)

 

stack = new Stack()

.concat 重临三个新书组

console.log(b.indexOf({ foo: 'bar' }))

// <- false

    console.log(value)

satisfied

// <- [1]

个中前面一个为首荐办法。数组对象世袭自Object.prototype,对数组推行type...

}

}

// <- -1

模型映射.map

 

复制代码

})

var spliced = source.splice(9)

        text = text.replace('%s', value)

计算.reduce和.reduceRight

Queue.prototype.add = function () {

console.log(b.indexOf(a))

复制代码

var c = b.concat()

index 当前操作成分的数组索引

// <- false

模型映射.map

 

console.log(source)

复制代码

array 当前数组的援引

 

 

.pop方法和.push成对应用,它回到数组的最终成分并将成分从数组移除。假诺数组为空,再次来到void 0(undefined卡塔尔。使用.push和.pop大家能随随意便模拟出LIFO(后进先出或先进后出卡塔尔国栈。

复制代码

a.reverse()

复制代码

        id: item.id,

list = [1,2,3,4,5,6,7,8,9,10]

[9,80,3,10,5,6].sort(function (a, b) {

 

    return {

    return parseInt(value, 10)

 

 

 

function format (text, bold) {

 

    return this._queue.unshift.apply(this._queue, arguments)

各种人都通晓向数组添美成分用.push。但您理解一遍能够加多多个因素呢?如下[].push('a', 'b', 'c', 'd', 'z')。

undefined × 3 值解释.map不会在没被赋过值或然选择delete删除的目录上调用,但他俩还是被含有在结果数组中。map在遍历或改动数组方面特别有用,如下所示:

万能的.splice

意气风发旦a和b是等价的,则重回值等于零

您恐怕已经注意到,它也回到被剔除的成分。假使您想遍历已经删除的数组时那可能会派上用处。

    return value

 

假诺a在b前,则再次来到值小于零

in操作符

function concat (input) {

    this._stack = []

// <- 1

    return this._queue.shift()

    return text

        return partial + value

values = [void 0, null, false, '']

 

  • '' + out[1] + '' + out[2] + '' + out[n]。

// 遍历

.join函数小编就要下文谈起,上边例子中,它将数组中的分歧因素拼接在同盟,相像于如下的作用:out[0]

// <- 3

 

复制代码

 

result = values.map(function(value, index, array){

// <- [8, 8, 8, 8]

format('some%sthing%s %s', true, 'some', 'other', 'things')

 

function Stack () {

var a = [1, 2, 5]

 

        if (partial) {

// <- ['a', 'b']

 

// <- 'George, Sam, Pear'

// <- true

};

    return value < 10

 

 

// <- <b>somesomethingother things</b>

var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]

var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]

1 in a === !!a[1]

复制代码

.join和.concat的区别

 

复制代码

while (item = list.shift()) {

})

value 当前操作的数组成分

// <- []

// <- removed 11

复制代码

})

    return value

    return a - b

var a = [3, 7, 6]

function Queue () {

satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {

 

        }

 

 

Array.prototype.slice能被用来将类数组对象调换为真正的数组。

 

// <- [10, 3, 5, 6, 80, 9]

}

除此以外,能够传递可选的第一个参数,作为种种调用函数的上下文(this卡塔尔国。

 

// 叁个映射新对象的通用方式

console.log(b === c)

// <- 'awesome'

previousValue是终极被调用的回调函数的再次来到值,initialValue是发端时previousValue被开头化的值。currentValue 是前段时间被遍历的要素值,index是眼下因素在数组中的索引值。array是对调用.reduce数组的总结援用。

复制代码

复制代码

那格局将数组中的成分翻转并替换原来的因素。

和.concat相通,调用.slice缺省参数时,重返原数组的浅拷贝。slice函数要求三个参数,三个是从头地方和贰个完工地方。

复制代码

}

}

        return partial + value

走进.reverse

走进.reverse

// <- 12

万能的.splice

 

b[3] === a && c[3] === a

复制代码

queue.add(1,2,3)

    if (value > max) max = value

 

 

[1, '2', '30', '9'].map(function (value) {

复制代码

通过.indexOf,我们得以寻觅数组成分的岗位。如果未有匹配成分则赶回-1。作者意识我用的浩大的一个格局是接二连三相比较,举个例子a === 'a' || a === 'b' || a === 'c',可能即使唯有三个结果的相比。在这里种情况下,你也能够使用.indexOf,像那样:['a', 'b', 'c'].indexOf(a) !== -1。

// <- 'awesome'

 

// <- removed 13

})

 

var b = [a, 2]

我们不可能用break中断forEach循环,抛出非常是不明智的主意。幸运的是,大家有其余的秘籍中断操作。

5 in a

复制.slice

stack.next()

 

断言.some和.every

var a = { foo: 'bar' }

[void 0, null, false, '', 1].filter(function (value) {

    this.push(String.fromCharCode(value.charCodeAt() + index + 2))

除此之外,另一个广阔用场是从参数列表中移除最先的多少个因素,并将类数组对象调换为确实的数组。

 

 

 

 

复制代码

// <- true

 

 

// <- [3, 5, 6, 9, 10, 80]

复制代码

 

复制.slice

 

            partial += ', '

复制代码

console.log(b.indexOf(1))

 

.join和.concat的区别

Array.prototype.sum = function () {

// <- 28

复制代码

[void 0, null, false, '', 1].filter(function (value) {

max = -Infinity

 

some将会给数组里的每多少个元素实践一回回调函数,直到有一个回调函数重临true位置。倘诺找到对象成分,some马上回到true,不然some重回false。回调函数只对曾经钦赐值的数组索引实践;它不会对已删除的或未钦定值的因素实行。

先是reduce函数不是很好精通,.reduce从左到右而.reduceRight从右到左循环遍历数组,每趟调用接受方今结束的有的结出和近日遍历的值。

    return this._stack.pop()

}

var a = [1, 1, 7, 8]

console.log(b.indexOf(a, 1))

}, out = [])

只要您想从后迈入搜索,.lastIndexOf能派上用途。

 

Queue.prototype.next = function () {

        text = '<b>' + text + '</b>'

// <- 1

复制代码

.join方法日常和.concat混淆。.join(分隔符)方法创制一个字符串,会将数组里面各样成分用分隔符连接。若无提供分隔符,暗中同意的相间符为“,”。.concat方法创造三个新数组,其是对原数组的浅拷贝(注意是浅拷贝哦卡塔尔。

    }, '')

 

[97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')

如果未提供比较函数,成分会转换为字符串,并按字典许排列。举例,在字典序里,“80”排在“9”早先,但事实上大家期望的是80在9今后(数字排序卡塔 尔(阿拉伯语:قطر‎。

 

 

var b = [1, 2, 3, a]

b.indexOf(2, 1)

像当先五成排序函数同样,Array.prototype.sort(fn(a,b))必要三个满含五个测量检验参数的回调函数,并且要爆发一下两种重临值之意气风发:

queue.next()

 

// <- true, 但因为 2!

在JavaScript中,能够经过二种办法创造数组,构造函数和数组间接量, 在那之中前者为首选办法。数组对象世袭自Object.prototype,对数组推行typeof操作符重临‘object’实际不是‘array’。然则实践[] instanceof Array重回true。别的,还大概有类数组对象是主题材料更复杂,如字符串对象,arguments对象。arguments对象不是Array的实例,但却有个length属性,并且值能通过索引获取,所以能像数组相仿通过巡回操作。

in操作符相仿于将键值调换为布尔值。!!表明式平常被开荒者用来重新取非二个值(转变为布尔值卡塔 尔(英语:State of Qatar)。实际上约等于强制转变为布尔值,任何为确实值被转为true,任何为假的值被改换为false。

var spliced = source.splice(3, 4, 4, 5, 6, 7)

    values.forEach(function (value) {

spliced.forEach(function (value) {

 

循环.forEach

 

查找.indexOf

用法例子:.filter(fn(value, index, array), thisArgument)。把它想象成.Where(x => x.IsAwesome) LINQ expression(假如你明白C#卡塔 尔(英语:State of Qatar),也许SQL语句里面包车型客车WHERE。思考到.filter仅重返callback函数再次来到真值的值,下边是有的珠辉玉映的例证。未有传递给回调函数测量试验的因素被轻巧的跳过,不会含有进重回的新书组里。

查找.indexOf

    { name: 'George' },

    return this.reduce(function (partial, value) {

    { name: 'Sam' },

 

 

 

// <- [undefined, null, false, '', undefined × 3, undefined]

map 方法会给原数组中的各类元素(必须有值)都调用三次 callback 函数.callback 每趟试行后的再次来到值组合起来造成一个新数组. callback函数只会在有值的目录上被调用; 那多少个平素没被赋过值恐怕使用delete删除的目录则不会被调用。——MDN

在面试中生手轻巧犯的失实是混淆.indexOf和in操作符,如下:

Stack.prototype.add = function () {

    var values = Array.prototype.slice.call(arguments, 2)

复制代码

list

])

// 1, 2, 30, 9

 

 

items.map(function (item) {

复制代码

 

spliced

array.concat()未有参数的情景下,会重回原数组的浅拷贝

.splice是自己最愉快的原生数组函数之意气风发。它同意你剔除元素,插入新因素,或在同等职位同一时候拓宽上述操作,而只利用一个函数调用。注意和.concat和.slice差别的是.splice函数改过原数组。

 

    })

console.log(source)

 

瞩目,当回调函数的value < 10 条件知足时,中断函数循环。.every的干活表现看似,但回调函数要赶回false并不是true。

values[7] = void 0

 

 

// <- true

 

 

栈和队列.pop,.push,.shift和.unshift

 

若果a在b后,则重临值大于零

    return this._stack.push.apply(this._stack, arguments)

 

        name: computeName(item)

// <- -1

 

 

in操作符

    if (bold) {

浅拷贝意味着新数组和原数组保持风流倜傥致的对象引用,这平日是好事。比方:

}

// <- 0

复制代码

排序.sort

复制代码

Array.prototype.map方法和地方大家提到的.forEach,.some和.every有相近的参数:.map(fn(value, index, array), thisArgument)。

那是JavaScript原生数组方法中最轻巧易行的秘技。不用犯嘀咕,IE7和IE8不帮忙此方法。

设若你想测量检验上边包车型大巴例子,您能够复制并粘贴到您的浏览器的调整台北。

复制代码

 

// [8, 7, 1, 1]

 

 

})

 

}

 

[9,80,3,10,5,6].sort()

// <- removed 10

    return !value

['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {

 

 

计算.reduce和.reduceRight

 

 

复制代码

 

// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]

断言.some和.every

在本文中,笔者将复习一些数组原型的措施,并研究这个艺术的用法。

 

要是您曾经用过.NET的枚举,这个点子的名字和.Any(x => x.IsAwesome) 和 .All(x => x.IsAwesome)非常相通。

复制代码

    }

    }

 

八个出类拔萃的用例,使用.reduce的求和函数。

 

这个形式和.forEach相近,必要一个暗含value,index,和array八个参数的回调函数,况且也是有三个可选的第三个上下文参数。MDN对.some的描述如下:

 

复制代码

复制代码

 

 

.concat 的申明用法:array.concat(val, val2, val3, valn)

queue = new Queue()

    console.log('removed', value)

[3,4,5,6,10].sum()

用.shift或.pop能十分轻松遍历数组成分,并做一些操作。

 

难点的根本是in操作符检索对象的键而非值。当然,这在品质上比.indexOf快得多。

    console.log(item)

二种办法皆好似下规范用法:.reduce(callback(previousValue, currentValue, index, array), initialValue)。

})

 

}

1 in a

 

 

 

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })

排序.sort(比较函数)

 

和复制分歧的是,数组本人被校正。在未来的文章中本人将张开对那些概念的了然,去探访哪些成立一个库,如Underscore或Lo-Dash。

地点提到假诺想把数组连成二个字符串,能够利用.join。当数组的值是目的的情事下,除非对象有能再次来到其合理值的valueof或toString方法,不然.join的显现和您期待的不一致等。但是,大家能够使用.reduce作为目的的字符串生成器。

栈和队列.pop,.push,.shift和.unshift

// <- removed 12

复制代码

本文由永利402游戏网站-永利402com官方网站发布于永利402游戏网站,转载请注明出处:平淡的数组降维——Javascript中apply方法的妙用

关键词: