JS数组降维的实现Array.prototype.concat.apply([], arr)


Posted in Javascript onApril 28, 2020

把多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象

二维数组降为一维数组

循环降维

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   for (let j = 0; j < children[i].length; j++) {
    reduce.push(children[i][j]);
   }
  } else {
   reduce.push(children[i]);
  }
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

concat降维

MDN上对于concat的介绍

“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

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

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 let reduce = [];
 for (let i = 0; i < children.length; i++) {
  reduce = reduce.concat(children[i]);
 }
 return reduce;
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

apply和concat降维

MDN上对于apply方法的介绍

“The apply() method calls a function with a given this value and arguments provided as an array.”

apply

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

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
function simpleNormalizeChildren(children) {
 return Array.prototype.concat.apply([], children);
}
simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

Vue2.6.11版本源码降维

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]];
// :any 可以去掉 这里是Vue通过Flow指定传入的参数类型可以是任意类型
function simpleNormalizeChildren(children: any) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   return Array.prototype.concat.apply([], children);
  }
 }
 return children;
}

simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

多维数组降为一维数组

递归降维

递归函数就是在函数体内调用自己;

递归函数的使用要注意函数终止条件避免死循环;

// 多维数组
let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]];
function simpleNormalizeChildren(children) {
 for (let i = 0; i < children.length; i++) {
  if (Array.isArray(children[i])) {
   children = Array.prototype.concat.apply([], children);
   for(let j =0; j<children.length; j++) {
    simpleNormalizeChildren(children)
   }
  }
 }
 return children;
}
simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

到此这篇关于JS数组降维的实现Array.prototype.concat.apply([], arr)的文章就介绍到这了,更多相关JS数组降维内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
纯JS实现轮播图
Feb 22 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
React中Ref 的使用方法详解
Apr 28 #Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 #Javascript
react PropTypes校验传递的值操作示例
Apr 28 #Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 #Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
You might like
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
React快速入门教程
2017/01/17 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
详解如何运行vue项目
2019/04/15 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python sorted方法和列表使用解析
2019/11/18 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
九年级数学教学反思
2014/02/02 职场文书
带薪年假请假条
2014/02/04 职场文书
安全教育感言
2014/03/04 职场文书
项目施工员岗位职责
2014/03/09 职场文书
爱国演讲稿400字
2014/05/07 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
出售房屋委托书范本
2014/09/24 职场文书
求职简历自我评价范文
2015/03/10 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers