使用 ES2019中的新特性 Array.prototype.flat()

const arr = [1,2,3,4,[10,20,30]]
const res = arr.flat()
console.info(res) // [1,2,3,4,10,20,30]

使用 reduce, 递归数组

const arr = [1,2,3,4,[10,20,30]]

function flatten(arr){
let res = []
arr.forEach(val=>{
if(val instanceof Array){
res = res.concat(flatten(val))
}else{
res.push(val)
}
})
return res
} const res = flatten(arr)
console.info(res) // [1,2,3,4,10,20,30]

使用 apply 和 Array.prototype.concat (只能处二维数组转换成一维数组)

  • concat的特性: [].concat(1) => [1]; [].concat([1,2,3]) => [1,2,3] 如果concat的val是数组就等于该数组,如果是单个值,则为[val]
  • 原理: apply方法会调用一个函数,
  • 第一个参数会作为被调用函数的this
  • 第二个参数(一个数组 或者 类数组对象)作为被调用对象的 arguments值 也就是说该数组的各个元素会依次成为北调用函数的各个参数
const children = [[1,2],3,4]
const v = ['a','b','c']
const b = Array.prototype.concat.apply(v, children)
console.info(b) // ["a", "b", "c", 1, 2, 3, 4]

JavaScript 把数组扁平化的方法的更多相关文章

  1. 面试官:JavaScript如何实现数组拍平(扁平化)方法?

    面试官:JavaScript如何实现数组拍平(扁平化)方法? 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个"三维" ...

  2. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

  3. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  4. javascript中数组的22种方法 (转载)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详 ...

  5. javascrip的数组扁平化

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var ar ...

  6. JS: 数组扁平化

    数组扁平化 什么是数组扁平化? 数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层. // 多层嵌套 [1, 2, [3, 4]] // 一层 [1, 2, 3, 4] 递归实现 思 ...

  7. js技巧-使用reduce实现更简洁的数组对象去重和数组扁平化

    Array.prototype.reduce()方法介绍: 感性认识reduce累加器: const arr = [1, 2, 3, 4]; const reducer = (accumulator, ...

  8. JS数组专题1️⃣ ➖ 数组扁平化

    一.什么是数组扁平化 扁平化,顾名思义就是减少复杂性装饰,使其事物本身更简洁.简单,突出主题. 数组扁平化,对着上面意思套也知道了,就是将一个复杂的嵌套多层的数组,一层一层的转化为层级较少或者只有一层 ...

  9. js多维数组扁平化

    数组扁平化,就是将多维数组碾平为一维数组,方便使用. 一:例如,一个二维数组 var arr = ['a', ['b', 2], ['c', 3, 'x']],将其扁平化: 1.  通过 apply ...

随机推荐

  1. 小白从零开始阿里云部署react项目+node服务接口(二:node服务+web)

    我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init  一路enter 3  yarn add  express cors  ...

  2. 因为mac不支持移动硬盘的NTFS格式,mac电脑无法写入移动硬盘的终极解决办法

    相信很多实用mac的同学,都有磁盘容量问题,所以才使用移动硬盘 当移动硬盘在windows电脑上使用过之后,会被格式化为NTFS格式 而mac电脑不支持NTFS格式 这里有两种方法 第一种是把移动硬盘 ...

  3. C++语法小记---标准库

    C++标准库 C++标准库包含如下内容: C++标准编译工具链 C++扩展编译工具链(各种C++编译器独有) C++标准库 C++库 C库 C兼容库(为了兼容能够用C编译器编译的项目,直接使用C++也 ...

  4. el-table 操作列(编辑or删除) 获取本行相关数据

    简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的id或者其他附属信息.ok,下边放代码 //vue el-table的部分代码 <el ...

  5. 读/写xlsx文件

    安装 pip install openpyxl 1.创建Excel电子表格 建立新文档需要调用Workbook对象的save方法,一个Workbook对象代表一个Excel工作簿,该方法的参数是保存的 ...

  6. Python匿名函数_return语句

    Python匿名函数: 使用 lambda 关键字创建匿名函数: lambda 定义的函数只是一个表达式,而不是代码块 lambda 函数拥有自己的命名空间,不能够访问参数列表之外的 或 全局命名空间 ...

  7. Seaborn实现回归分析

    import numpy as np import pandas as pd from scipy import stats,integrate import matplotlib.pyplot as ...

  8. Filebeat日志收集简单使用

    1.简略介绍 轻量型日志采集器,用于转发和汇总日志与文件. 官网: https://www.elastic.co/cn/beats/filebeat 2.本文实现的功能 3.事先必备: 至少一台Kaf ...

  9. Python os.getcwdu() 方法

    概述 os.getcwdu() 方法用于返回一个当前工作目录的Unicode对象.高佣联盟 www.cgewang.com Unix, Windows 系统下可用. 语法 getcwdu()方法语法格 ...

  10. PHP readlink() 函数

    定义和用法 readlink() 函数返回符号连接的目标. 如果成功,该函数返回连接的目标.如果失败,则返回 FALSE. 语法 readlink(linkpath) 参数 描述 linkpath 必 ...