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

2024-12-04 10:26:26

把多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，最近跟着黄轶老师学习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数组降维内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

java JSONArray 遍历方式(2种)

第一种(java8):遍历JSONArray 拼接字符串 public static void main(String[] args) { JSONArray jSONArray = new JSONArray(); JSONObject jb = new JSONObject(); jb.put("id", 1); jb.put("name", "s"); jSONArray.add(jb); JSONObject j1 = new JSONO
python3 dict ndarray 存成json,并保留原数据精度的实例

如下所示: import numpy as np import codecs, json a = np.arange(10).reshape(2,5) # a 2 by 5 array b = a.tolist() # nested lists with same data, indices file_path = "/path.json" ## your path variable json.dump(b, codecs.open(file_path, 'w', encoding='
JS在Array数组中按指定位置删除或添加元素对象方法示例

JavaScript的数据中可通过splice/slice在指定位置添加或删除元素.另外还有slice.delete等方法实现. splice简介 splice方法向/从数组中添加/删除项目,然后返回被删除的项目. 该方法会改变原始数组. arrayObject.splice(index, howmany, item1, ..., itemX) 参数描述 index 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany 必需.要删除的项目数量.如果设置为 0,
JS Array.from()将伪数组转换成数组的方法示例

Array.from 方法用于将两类对象转换为真正的数组: 1.类似数组的对象,可以理解为"伪数组" 2.可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性. let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 } 像上面的 arrayL
js Array.slice的8种不同用法示例

前言 JS数组slice方法是JS语言中最强大.最常用的内建函数之一. 随着React和其他面向功能的JavaScript实践的兴起,它变得越来越重要,原因有两个: 函数式编程,尤其是高阶函数,与数据列表密切配合函数式编程需要纯函数,即不会产生副作用或修改输入数据的函数 JavaScript 数组slice方法符合这两个标准. slice方法可以在不修改原始列表的情况下创建列表子集的浅拷贝.因此,它为编写函数式 JS 提供了一个关键的构建块. 在这篇文章中,我们将通过实例来掌握slice方法,
php array 转json及java 转换 json数据格式操作示例

本文实例讲述了php array 转json及java 转换 json数据格式操作.分享给大家供大家参考,具体如下: php array 转json 数据 $arr = array( "demo1" => "my demo1", "demo2" => array( "demo2_demo1"=>"aaaaaaaa", "demo2_demo2"=>"bb
JavaScript Array.flat()函数用法解析

在过去的几年中,已经将许多有用的功能添加到Javascript Array全局对象中,这些功能为开发人员在编写可用于数组的代码时提供了多种选择.这些功能提供了许多优点,其中最值得注意的是,虽然在过去的一段时间里,开发人员必须实现自己的复杂逻辑来执行各种数组操作,但现在这些新功能已经不再需要这种自制的实现.本文将探讨的有用功能之一是 flat() 函数. JavaScript的Array.flat()函数深入探讨功能概述 flat() 函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回
你应该了解的JavaScript Array.map()五种用途小结

前言从经典的 for 循环到 forEach() 方法,用于迭代数据集合的各种技术和方法比比皆是.但是现在比较流行的方法是 .map() 方法. .map() 通过指定函数调用一个数组中每一项元素,来创建一个新数组. .map() 是一种 non-mutating(非变异) 方法,它创建一个新数组,而不是只对调用数组进行更改的 mutating(变异) 方法.这可能很难记住. 语法: array.map(function(currentValue,index,arr), thisValue)
JS数组降维的实现Array.prototype.concat.apply([], arr)

把多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,最近跟着黄轶老师学习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 < childre
JS数组降维的几种方法详解

二维数组降维使用数组实例方法concat和ES6扩展运算符降维 let arr=[1,2,[3,4],5]; let arr1=[].concat(...arr); //先使用扩展运算符打散最外边的数组,concat自带打散粘合数组的功能 console.log(arr1); // [1, 2, 3, 4, 5] //ES6之前用apply打散数据的兼容性写法 var arr2=[1,2,[3,4],5]; var arr3=[].concat.apply([],arr2); console.
Array.prototype.slice.apply的使用方法

复制代码代码如下: function test(){ //将参数转为一个数组 var args = Array.prototype.slice.apply(arguments); alert(args); } arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象),用来引用调用该函数时传递的实际参数.这个对象很象数组,拥有length属性且使用下标的形式来获取其元素,但它又并非真正的Array对象.更多关于Arguments对象的资料请参阅<JavaS
Array.prototype.concat不是通用方法反驳[译]

ECMAScript 5.1规范§15.4.4.4中说到: 复制代码代码如下: concat函数是有意设计成通用的;它并不要求它的this值必须得是个Array对象.因此,它可以被转移到其它类型的对象上作为方法来调用. 本文中的代码都使用了[]来作为Array.prototype的快捷方式.这已经是很常用的技巧了,虽然可读性差点:你通过一个对象实例访问到了Array.prototype上的方法.但是,这样的访问方式在现代的JavaScript引擎中非常之快,以至于我怀疑,说不定在这种调用方式下
JavaScript实现数组降维详解

二维数组降维二维数组只有两个维度,降维比较简单,也不用考虑太复杂的算法逻辑,我们看一下二维数组降维的几种方法: 遍历降维 var arr = [ ['h', 'e', 'l', 'l', 'o'], ['m', 'y'], ['w', 'o', 'r', 'l', 'd'], ['!'] ]; var result = []; for (var r = 0; r < arr.length; r++) { for (var c = 0; c < arr[r].length; c++) { re
前端进阶JS数组高级用法大全教程示例

目录 1.批量制造数据 2.数组合并去重 3.创建数组的几种方式 4.类数组常见的类数组判断是否是类数组类数组如何转换为数组如何让类数组使用上数组丰富的内建方法类数组和数组的区别 5.数组方法的使用注意事项数组的长度数组的空元素 empty 基于值进行运算,空位的值作为undefined join和toString,空位怎么处理数组不会自动添加分号 indexOf与includes 数组可变长度问题数组查找和过滤改变自身的方法 delete误区 push vs concat
js多维数组降维的5种方法

目录一,递归二,将多维数组转为字符串,再转化为一维数组三,利用数组的方法四.利用contact 五.利用扩展运算符多维数组降维也就是数组扁平化数组扁平化的方法有很多种,但是我主要用五种,如下: 一,递归 // 一,递归 let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]] let newArr = [] const getArr=(array)=>{ array.forEach((item)=>{
js中继承的几种用法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承复制代码代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(na
js数组操作方法总结(必看篇)

判断数值数组中各个数字出现的奇偶次数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>数组操作</title> </head> <body> <script type="text/javascript"> var arr=[3,1,2,2,1,3,1
JS数组交集、并集、差集的示例代码

本文介绍了JS数组交集.并集.差集,分享给大家,具体如下: 由于下面会用到ES5的方法,低版本会存在兼容,先应添加对应的polyfill Array.prototype.indexOf = Array.prototype.indexOf || function (searchElement, fromIndex) { var index = -1; fromIndex = fromIndex * 1 || 0; for (var k = 0, length = this.length; k <

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

相关推荐

随机推荐