JS实现数组的扁平化(ES6实现)----例子+难点解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JS实现数组的扁平化(ES6实现)----例子+难点解析

要求:


▪取出嵌套数组(多维)中的所有元素放到一个新数组(一维)中

▪如: [1, [3, [2, 4]]] ==> [1, 3, 2, 4]


基础知识:

arr.concat()

语法:数组.concat(其他数组) 作用:将其他数组和数组拼接在一起 返回值:拼接好的新数组

//准备一个原始数组
var arr=[4,6,8,2,33]
//输出一次
console.log(arr)
//执行 concat 方法
var res=arr.concat([100,200])
console.log(arr)
console.log(res) // [4, 6, 8, 2, 33, 100, 200]

ES6实现: some与…与concat

function flatten(arr) {
  while(arr.some(item => item instanceof Array)) {
    arr = [].concat(...arr)
  }
  return arr
}
let arr = [1, 2, [3, 4], [5, 6]]
console.log(flatten(arr)); // [1, 2, 3, 4, 5, 6]

理解难点:[].concat(…arr)


你试一试

let arr = [1, 2, [3, 4], [5, 6]]
console.log([].concat(...arr)) // [1, 2, 3, 4, 5, 6]

…会把arr拆成 1 2 [3, 4] [5, 6]


而concat会把数值、数组进行拼接,比如 [] 与 1 ⇒ [1] [1] 与 [3, 4] ⇒ [1, 3, 4]


相关文章
|
13天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
9天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
91 59
|
17天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
1天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
8 0
|
17天前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
24 0
|
18天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
18天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
24 0
|
23天前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
58 0
|
23天前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
48 0
|
23天前
|
存储 Java C++
Collection-PriorityQueue源码解析
Collection-PriorityQueue源码解析
54 0

热门文章

最新文章

推荐镜像

更多