面试官:怎样实现JS数组扁平化?(一)

简介: 面试官:怎样实现JS数组扁平化?(一)

640.jpg

一、什么是’扁平化‘

扁平化的意思对于数组来说,就是将多维数组展开成一维数组或少于当前数组维数的数组。

二、实现扁平化

1、toString 和 split 相结合
思路:

toString 可以将多维数组转变成字符串,在通过 split 转换成数组,此时每个元素都为字符串,但需注意的是 此时每个数组元素都为字符串,可以用Number进行转换。

实现:
let arr = [1,2,[3,4,[5,6,7]]]
function strSplit (arr) {
  return arr.toString().split(',').map((i) => Number(i))
}
console.log('结果是:', strSplit(arr)) // 结果是:[1,2,3,4,5,6,7]
2、reduce迭代
思路:

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值当前索引,调用 reduce 的数组。可以通过迭代的方式进行数组扁平化~

实现:
let arr = [1, [2, [3, 4, 5]]]
function reduceArr (arr) {
  let result = arr.reduce((newArr, i) => {
    return newArr.concat(Array.isArray(i) ? reduceArr(i) : i)
  }, [])
  return result
}
console.log('结果是:', reduceArr(arr)) // 结果是:[1,2,3,4,5]


相关文章
|
5天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
16 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
24天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
17 2
|
27天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3
|
29天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
34 4
|
27天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
29 1
|
23天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
27天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0
|
27天前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
17 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
92 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
111 4