将多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,除了使用朴素的循环转换以外,我们还可以利用Javascript的语言特性实现更为简洁优雅的转换。本文将从朴素的循环转换开始,逐一介绍三种常用的转换方法,并借此简单回顾Array.prototype.concat方法和Function.prototype.apply方法。
以下代码将以把二维数组降维到一维数组为例。

1. 朴素的转换

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

此方法思路简单,利用双重循环遍历二维数组中的每个元素并放到新数组中。

2. 利用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)."
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

即如果concat方法的参数是一个元素,该元素会被直接插入到新数组中;如果参数是一个数组,该数组的各个元素将被插入到新数组中;将该特性应用到代码中:

function reduceDimension(arr) {
var reduced = [];
for (var i = 0; i < arr.length; i++){
reduced = reduced.concat(arr[i]);
}
return reduced;
}

arr的每一个元素都是一个数组,作为concat方法的参数,数组中的每一个子元素又都会被独立插入进新数组。
利用concat方法,我们将双重循环简化为了单重循环。

3. 利用apply和concat转换
按照惯例,先来回顾一下MDN上对于apply方法的介绍:
"The apply() method calls a function with a given this value and arguments provided as an array."
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

即apply方法会调用一个函数,apply方法的第一个参数会作为被调用函数的this值,apply方法的第二个参数(一个数组,或类数组的对象)会作为被调用对象的arguments值,也就是说该数组的各个元素将会依次成为被调用函数的各个参数;将该特性应用到代码中:

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

arr作为apply方法的第二个参数,本身是一个数组,数组中的每一个元素(还是数组,即二维数组的第二维)会被作为参数依次传入到concat中,效果等同于[].concat([1,2], [3,4], [5,6])。
利用apply方法,我们将单重循环优化为了一行代码,很简洁有型有木有啊~

二维数组转化为一维数组 contact 与apply 的结合的更多相关文章

  1. PHP开发小技巧③—实现多维数组转化为一维数组

    在平常的项目开发中我们多会用到让多维数组转化为一维数组的情况,但是很多Programmer不会将其进行转化,也有些没有想到很好的算法然后经过乱起八糟的运算方式将其勉强转化好,但是所写的程序代码冗余非常 ...

  2. 题目要求:传入数组 内容为[['lisi','男','27'],['wangwu','男',18],['zhaoliu','男','30']],将此二维数组转化为一维数组,创建自定义函数完成

    //自定义函数 function getOne($arr){ $str = ''; //定义空的字符串,用来接收值 foreach ($arr as $key=>$value){ //循环遍历数 ...

  3. 【Excle】二维表转化为一维表

    现在我们想做如下操作: 想把表1的数据转化为表2的数据,那么我们只需要如下这段代码即可解决需求 Sub 转置() Dim i%, arr arr = Application.InputBox(&quo ...

  4. reduce计算数组中每个元素出现的次数 数组去重的几种方式 将多维数组转化为一维

    // js计算数组中每个元素出现的次数 // var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; // var countedNames = ...

  5. [Swift]多维数组的表示和存储:N维数组映射到一维数组(一一对应)!

    数组:有序的元素序列. 若将有限个类型相同的变量的集合命名,那么这个名称为数组名.组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量.用于区分数组的各个元素的数字编号称为下标.数组 ...

  6. Python中如何将二维列表转换成一维列表

    已知:a = [(4,2,3), (5, 9, 1), (7,8,9)]希望将二维列表转换成一维列表:["4,2,3", "5, 9, 1", "7, ...

  7. js快速将字符串数组转化为数字数组(互换)

    1.数字数组转化为字符串数组 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(String); //结果: ['1', '2', '3', '4', '5 ...

  8. Python数组操作将一维数组变成二维数组

    一.问题 我们在进行数组操作的时候会遇到将一个低维的数组变成一个高维的素数组 二.解决 第一种方法基本思路就是将低维数组进行等长的循环,在第一次为零的情况下,需要添加一个[]数组,原因是将它的基本框架 ...

  9. 将二维数组转换成一维数组(基于reduce)

    reduce:不改变原数组,返回一个新的数组.就是遍历数组元素,从头开始,依次往下,第一个参数是上一次的返回值,第二个参数是下一个数组元素,首次的时候第一个和第二个参数分别是 array[0],  a ...

随机推荐

  1. centos7下安装docker(8.2进入容器)

    那些在后台运行的新建的容器,通常不是我们想要的,我们要进行一些修改,比如安装服务,创建用户,查看日志,调整网络等等,这些操做都要进入容器去进行修改,今天我们来讨论如何进入容器. 1.docker at ...

  2. [笔记]一些STL用法

    参考资料:STL 在 OI 中的应用 离散化 std::unique 功能:对有序的容器重新排列,将第一次出现的元素从前往后排,其他重复出现的元素依次排在后面 返回值:返回迭代器,迭代器指向的是重复元 ...

  3. 转载 Net多线程编程—System.Threading.Tasks.Parallel

    .Net多线程编程—System.Threading.Tasks.Parallel   System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Paral ...

  4. Emoji表情符号在MySQL数据库中的存储

    文章转自https://www.jianshu.com/p/20740071d854 在Android手机或者iPhone的各种输入法键盘中,会自带一些Emoji表情符号,如IPhone手机系统键盘包 ...

  5. leetcode 20. Valid Parentheses 、32. Longest Valid Parentheses 、

    20. Valid Parentheses 错误解法: "[])"就会报错,没考虑到出现')'.']'.'}'时,stack为空的情况,这种情况也无法匹配 class Soluti ...

  6. VsCode源码分析之布局

    关于VsCode源码编译运行,请参考这篇文章:VsCode源码编译运行 当然了,也可以参考官方文档(所以这里就不再赘述):https://github.com/Microsoft/vscode/wik ...

  7. Dubbo高级篇4

    https://blog.csdn.net/moonpure/article/details/52842115 线程模型 http://dubbo.io/User+Guide-zh.htm 用户指南& ...

  8. 广告牌LED灯阵

    大家都知道广告牌里面原来都是灯管,现在开始更换成LED灯了,下面是我在现场拍的图片: 下面这个图片是LED灯条,铝基板打印电路,TM1812驱动,该IC可以接受4组24位数据,然后转发数据(https ...

  9. WPF解决界面全屏化但不遮挡任务栏的问题

    原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改   </pre>&l ...

  10. Angularjs 地址联动2.1.1

    这个地址联动是基于 Angularjs 的 效果图如下: 看着是不是可美观了?哈哈!源码如下: <!DOCTYPE HTML> <html lang="zh-CN" ...