从一维到二维:JavaScript 中的数组转换技术
概述
在 JavaScript 中,我们经常需要将一维数组转换成二维数组。这种操作在数据处理和可视化等领域非常常见。本文将介绍两种将一维数组转换成二维数组的方法,希望能够帮助读者更好地理解这一过程。
方法一:使用循环
最基本的方法是使用循环遍历一维数组,然后将每个元素插入到二维数组的相应位置。下面是一个使用循环的示例代码:
function convertArray(arr, rows, columns) {
var result = [];
for (var i = 0; i < rows; i++) {
result[i] = [];
for (var j = 0; j < columns; j++) {
var index = i * columns + j;
if (index < arr.length) {
result[i][j] = arr[index];
}
}
}
return result;
}
上面的代码中,convertArray
函数接收三个参数:原始一维数组 arr
,新数组的行数 rows
和新数组的列数 columns
。函数首先创建一个空的二维数组 result
,然后使用两个嵌套循环将每个元素插入到相应的位置。
在内部循环中,我们计算当前元素在一维数组中的索引 index
。如果 index
小于原始数组的长度,则将原始数组中的对应元素插入到二维数组的当前位置。
使用循环的好处是代码简单,易于理解。但是,这种方法可能不够高效,特别是对于非常大的数组。
方法二:使用高阶函数
另一种将一维数组转换成二维数组的方法是使用 JavaScript 数组的高阶函数。下面是一个使用 reduce
和 slice
方法的示例代码:
function convertArray(arr, rows, columns) {
return arr.reduce(function(result, item, index) {
var rowIndex = Math.floor(index / columns);
var colIndex = index % columns;
if (!result[rowIndex]) {
result[rowIndex] = [];
}
result[rowIndex][colIndex] = item;
return result;
}, []);
}
上面的代码中,我们使用 reduce
方法遍历原始数组 arr
,然后将每个元素插入到新的二维数组中。在每次迭代中,我们计算当前元素在二维数组中的行列位置 rowIndex
和 colIndex
,然后使用 if
语句检查二维数组中是否已经存在这一行。如果不存在,则创建一个新的行,然后将当前元素插入到对应的位置。
使用高阶函数的好处是代码更加简洁,且对于大型数组可以提高效率。同时,它也可以让我们使用更高阶的函数,如 map
,flatMap
等,可以更加简化代码,提高可读性和可维护性。下面是一个使用 flatMap
方法的示例代码:
function convertArray(arr, rows, columns) {
return arr.flatMap((item, index) =>
index % columns ? [] : [arr.slice(index, index + columns)]
);
}
上面的代码中,我们使用 flatMap
方法遍历原始数组 arr
,然后对于每个元素 item
,判断它在新数组中的位置。如果是新的一行,则使用 slice
方法将该行的元素提取出来,然后返回该行。否则,返回一个空数组。
示例
力扣题解 第13期:2022. 将一维数组转变成二维数组
var construct2DArray(original, m, n) {
const len = original.length;
if (len !== m * n) {
return [];
}
const res = new Array(m);
for (let i = 0; i < m; i++) {
res[i] = original.slice(i * n, (i + 1) * n);
}
return res;
}
该函数接收一个一维数组 original
,和两个整数 m
和 n
。它首先检查 original
的长度是否等于 m * n
,如果不等于则返回一个空的二维数组。如果长度等于 m * n
,则创建一个二维数组 res
,然后使用 for
循环将 original
中每 n
个元素分为一行,最后返回创建好的二维数组 res
。
这种方法的时间复杂度为 ,空间复杂度为 。
var construct2DArray = function (original, m, n) {
return original.length !== m * n ? [] : new Array(m).fill(0).map((v, i) => {
return original.slice(n * i, n * i + n);
});
};
这个方法使用了条件运算符(ternary operator)和数组的 map()
方法来实现创建二维数组。具体来说,它首先检查 original
的长度是否等于 m * n
,如果不等于则返回一个空的二维数组 []
。如果长度等于 m * n
,则使用 map()
方法创建一个长度为 m
的新数组,每个元素都通过一个函数映射成一个长度为 n
的新数组,新数组的元素从 original
中截取出来。
这个函数的第二个参数 i
代表 map()
方法内部当前处理的元素的下标,它用来计算当前行的起始下标,即 n * i
。然后使用 slice()
方法从 original
中截取出对应的元素。具体来说,对于第 i
行,它的元素从 n * i
开始,到 n * i + n - 1
结束。因此,可以使用 slice(n * i, n * i + n)
来截取这一行的元素。
这种方法使用了数组的高阶函数 map()
方法,代码简洁易读,可维护性较好。时间复杂度为 ,空间复杂度为 。
var construct2DArray = function(original, m, n) {
return original.length === m * n ?
Array.from({ length: m }, (_, i) => original.slice(i * n, (i + 1) * n)) :
[];
};
这个方法使用了 Array.from()
方法和箭头函数,使代码更加简洁。具体来说,它首先检查 original
的长度是否等于 m * n
,如果不等于则返回一个空的二维数组 []
。如果长度等于 m * n
,则使用 Array.from()
方法创建一个长度为 m
的新数组,并通过箭头函数将每个元素映射成一个长度为 n
的新数组,这个新数组的元素从 original
中截取出来。最后返回这个新的二维数组。
这种方法的时间复杂度为 ,空间复杂度为 。
总结
在本文中,我们介绍了两种将一维数组转换成二维数组的方法。第一种方法使用循环,第二种方法使用 JavaScript 的高阶函数。使用循环的代码比较简单,但是可能不够高效;使用高阶函数的代码更加简洁,可读性和可维护性更好,对于大型数组也有一定的性能优势。
如果你需要将一维数组转换成二维数组,可以根据实际情况选择合适的方法。希望本文能够帮助你更好地理解 JavaScript 中数组的处理和转换技巧。
推荐阅读
-
条形码技术分析:从一维代码到二维代码的演变与应用
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
[姿势估计] 实践记录:使用 Dlib 和 mediapipe 进行人脸姿势估计 - 本文重点介绍方法 2):方法 1:基于深度学习的方法:。 基于深度学习的方法:基于深度学习的方法利用深度学习模型,如卷积神经网络(CNN)或递归神经网络(RNN),直接从人脸图像中学习姿势估计。这些方法能够学习更复杂的特征表征,并在大规模数据集上取得优异的性能。方法二:基于二维校准信息估计三维姿态信息(计算机视觉 PnP 问题)。 特征点定位:人脸姿态估计的第一步是通过特征点定位来检测和定位人脸的关键点,如眼睛、鼻子和嘴巴。这些关键点提供了人脸的局部结构信息,可用于后续的姿势估计。 旋转表示:常见的旋转表示方法包括欧拉角和旋转矩阵。欧拉角通过三个旋转角度(通常是俯仰、偏航和滚动)描述头部的旋转姿态。旋转矩阵是一个 3x3 矩阵,表示头部从一个坐标系到另一个坐标系的变换。 三维模型重建:根据特征点的定位结果,三维人脸模型可用于姿势估计。通过将人脸的二维图像映射到三维模型上,可以估算出人脸的旋转和平移信息。这就需要建立人脸的三维模型,然后通过优化方法将模型与特征点对齐,从而获得姿势估计结果。 特征点定位 特征点定位是用于检测人脸关键部位的五官基础部分,还有其他更多的特征点表示方法,大家可以参考我上一篇文章中介绍的特征点检测方案实践:人脸校正二次定位操作来解决人脸校正的问题,客户在检测关键点的代码上略有修改,坐标转换部分客户见上图 def get_face_info(image). img_copy = image.copy image.flags.writeable = False image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = face_detection.process(image) # 在图像上绘制人脸检测注释。 image.flags.writeable = True image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR) box_info, facial = None, None if results.detections: for detection in results. for detection in results.detections: mp_drawing.Drawing.detection = 无 mp_drawing.draw_detection(image, detection) 面部 = detection.location_data.relative_keypoints 返回面部 在上述代码中,返回的数据是五官(6 个关键点的坐标),这是用 mediapipe 库实现的,下面我们可以尝试用另一个库:dlib 来实现。 使用 dlib 使用 Dlib 库在 Python 中实现人脸关键点检测的步骤如下: 确保已安装 Dlib 库,可使用以下命令: pip install dlib 导入必要的库: 加载 Dlib 的人脸检测器和关键点检测器模型: 读取图像并将其灰度化: 使用人脸检测器检测图像中的人脸: 对检测到的人脸进行遍历,并使用关键点检测器检测人脸关键点: 显示绘制了关键点的图像: 以下代码将参数 landmarks_part 添加到要返回的关键点坐标中。
-
从一维到二维:JavaScript 中的数组转换技术
-
JS学习手记:掌握JavaScript数组 - 从一维到多维(包括数组基础、for...in遍历、二维数组及冒泡排序示例)