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

简介: 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]


相关文章
|
1天前
|
存储 JavaScript 前端开发
【JavaScript】JavaScript 中的 Class 类:全面解析
【JavaScript】JavaScript 中的 Class 类:全面解析
7 1
|
1天前
|
JavaScript 前端开发 数据处理
【JavaScript】JavaScript数组全方位探索指南:深入理解数组特性
【JavaScript】JavaScript数组全方位探索指南:深入理解数组特性
7 1
|
1天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
7 2
|
1天前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
7 2
|
1天前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
8 3
|
1天前
|
JavaScript Linux 开发者
【Node.js】从基础到精通(二)—— Path 模块全解析
【Node.js】从基础到精通(二)—— Path 模块全解析
6 0
|
1天前
|
JavaScript 安全 前端开发
【Node.js】从入门到精通(一)—— fs 模块全解析
【Node.js】从入门到精通(一)—— fs 模块全解析
4 0
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
152 63
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
31 5

热门文章

最新文章

推荐镜像

更多