SunJianXu Blog SunJianXu Blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《JavaScript DOM 编程艺术》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《Git》学习笔记
    • 《TypeScript》学习笔记
  • HTML
  • CSS
后端
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

SunJianXu

前端界的小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《JavaScript DOM 编程艺术》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《Git》学习笔记
    • 《TypeScript》学习笔记
  • HTML
  • CSS
后端
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • JavaScript

    • 数组扁平化
      • 几种方法如下
        • toString + split
        • join + split
        • Array.prototype.flat(Infinity)
        • reduce + concat + isArray 递归实现
        • Use a stack 堆栈非递归
        • Use Generator function 生成器
      • 总结
    • 获取页面视口大小
    • 解决 ios10 及以上 Safari 无法禁止缩放的问题
  • 学习笔记

  • 前端
  • JavaScript
sunjianxu
2021-08-20

数组扁平化

# 几种方法如下

  1. toString + split
  2. join + split
  3. Array.prototype.flat(Infinity)
  4. reduce + concat + isArray 递归实现
  5. Use a stack 堆栈非递归
  6. Use Generator function 生成器

# toString + split

function flatDeep(array: any[]): number[] {
  return array
    .toString()
    .split(',')
    .map((item) => Number(item))
}
1
2
3
4
5
6

# join + split

function flatDeep(array: any[]): number[] {
  return array
    .join()
    .split(',')
    .map((item) => Number(item))
}
1
2
3
4
5
6

# Array.prototype.flat(Infinity)

function flatDeep(array): number[] {
  return array.flat(Infinity)
}
1
2
3

# reduce + concat + isArray 递归实现

function flatDeep(array: any[], depth = 1): number[] {
  return depth > 0
    ? array.reduce((pre, cur, index, arr) => {
        return pre.concat(Array.isArray(cur) ? flatDeep(cur, depth - 1) : cur)
      }, [])
    : array.slice()
}
1
2
3
4
5
6
7

# Use a stack 堆栈非递归

// non recursive flatten deep using a stack
// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
function flatten(input) {
  const stack = [...input]
  const res = []
  while (stack.length) {
    // pop value from stack
    const next = stack.pop()
    if (Array.isArray(next)) {
      // push back array items, won't modify the original input
      stack.push(...next)
    } else {
      res.push(next)
    }
  }
  // reverse to restore input order
  return res.reverse()
}

const arr = [1, 2, [3, 4, [5, 6]]]
flatten(arr)
// [1, 2, 3, 4, 5, 6]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

MDN (opens new window)

# Use Generator function 生成器

function* flatten(array, depth) {
  if (depth === undefined) {
    depth = 1
  }
  for (const item of array) {
    if (Array.isArray(item) && depth > 0) {
      yield* flatten(item, depth - 1)
    } else {
      yield item
    }
  }
}

const arr = [1, 2, [3, 4, [5, 6]]]
const flattened = [...flatten(arr, Infinity)]
// [1, 2, 3, 4, 5, 6]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

MDN (opens new window)

# 总结

数组扁平化的方法有:

  1. toString + split
  2. join + split
  3. Array.prototype.flat(Infinity)
  4. reduce + concat + isArray 递归实现
  5. Use a stack
  6. Use Generator function 生成器
编辑 (opens new window)
上次更新: 2021/08/20 17:31:16
获取页面视口大小

获取页面视口大小→

最近更新
01
解决 ios10 及以上 Safari 无法禁止缩放的问题
08-31
02
获取页面视口大小
08-21
03
TypeScript笔记
10-08
更多文章>
Theme by Vdoing | Copyright © 2019-2021 SunJianXu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×