如何在 JavaScript 中操作二维数组
二维数组在 JavaScript 开发中是比较常见的数据结构,在本文将介绍如何使用 JavaScript 创建二维数组并对其进行操作,在JavaScript中常见的数组操作方法大概 10 个左右,可以参阅《JavaScript 数组操作必须熟练运用的10个方法》。
多维数组
JavaScript 本身不提供多维数组,但是,可以通过定义元素数组来创建多维数组,其中每个元素也是另一个数组,出于这个原因,可以说 JavaScript 多维数组是数组的数组,即嵌套数组。定义多维数组的最简单方法是使用数组字面量表示法。
要声明一个空的多维数组,可以使用与声明一维数组相同的语法,如下定义一个二维数组:
const months = [ ["一月", 1], ["二月", 2], ["三月", 3], ];
在数组 months
中,第一个维度表示中文月份,第二个维度显示对应的数字。要在控制台中显示这个二维数组,可以使用 console.table()
方法清晰的展示其二维数组:
要访问多维数组的元素,首先使用方括号访问返回内部数组的外部数组元素;然后使用另一个方括号访问内部数组的元素。如下:
console.log(months[0][1]); // 1
数组声明
根据上面的介绍,二维数组为 嵌套数组 ,理解了其原理就大概知道声明方式。
嵌套数据
在 JavaScript 中,二维数组只是一种嵌套数组,如下:
const arrayNumbers = [ [1, 2], [3, 4], [5, 6], ]; console.log(arrayNumbers[0][0]); console.log(arrayNumbers[0][1]); console.log(arrayNumbers[1][0]); console.log(arrayNumbers[1][1]); console.log(arrayNumbers); // [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
创建空的二维数组
要创建一个空的二维数组,可以使用 Array.from
和 Array
构造函数。
const arrayNumbers = Array.from(Array(2), () => new Array(4)); console.log(arrayNumbers);
Array.from
方法允许从另一个数组创建一个数组,第一个参数是要从新数组派生的数组,第二个参数是一个函数,它将第一个数组中的值映射到想要的值。上面的代码将得到一个 2x4
的二维数组,此外,可以仅使用 Array
函数来创建一个二维数组。
const arrayNumbers = Array(2) .fill() .map(() => Array(4)); console.log(arrayNumbers);
通过调用 fill
方法来填充,这样,就可以在 map
回调中调用和返回数组来创建二维数组。
数组操作
二维数组为 嵌套数组 ,操作的方式结合一维数组的方法。
添加元素
可以使用诸如 push()
和 splice()
之类的 Array
方法来操作多维数组的元素。例如,要在多维数组的末尾添加一个新元素,使用 push()
方法,如下所示:
months.push(["四月", 4]);
要在数组中间插入一个元素,使用 splice()
方法,下面在数组的第二个位置插入一个元素:
months.splice(1, 0, ["一月后", 1]);
移除元素
要从数组中删除元素,可以使用 pop()
或 splice()
方法。
例如,以下语句删除数组的最后一个元素:
months.pop();
同样,可以使用 pop()
方法从多维数组的内部数组中删除元素,如下:
months.forEach((month) => { month.pop(2); }); console.table(months);
迭代多维数组
要迭代多维数组,需要使用嵌套的 for
循环,如下例所示:
for (let i = 0; i < months.length; i++) { var innerArrayLength = months[i].length; for (let j = 0; j < innerArrayLength; j++) { console.log("[" + i + "," + j + "] = " + months[i][j]); } }
第一个循环遍历外部数组的元素,嵌套循环遍历内部数组的元素,上面的代码输出如下:
[0,0] = 一月 [0,1] = 1 [1,0] = 二月 [1,1] = 2 [2,0] = 三月 [2,1] = 3
总结
可以通过嵌套数组字面量来创建 JavaScript 二维数组,也可以使用 Array
函数创建二维数组。在 JavaScript 中多维数组几乎可以作为一维数组工作,二维数组是具有共同名称的元素的集合,它们以行和列的形式组织为矩阵,二维数组是数组的数组。
上一篇: 开源前端 js 在线 excel 插件:x-sheet
下一篇: Fiddler Script
推荐阅读
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
如何在 JavaScript 中操作二维数组
-
[姿势估计] 实践记录:使用 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 中的数组转换技术
-
如何在Arch Linux中利用USB转串口适配器(如CH340)操作
-
如何在JavaScript中轻松操作setInterval倒计时:启动、暂停和停止计时功能实战指南
-
如何在JavaScript中实现鼠标移动事件(mousemove)的简单操作指南
-
如何在Java中快速创建一个3x3的二维数组,填充数据,按行显示内容,然后计算并输出所有元素的总和
-
iOS上的JS复制功能:如何在JavaScript中实现复制操作?
-
如何在JavaScript中找出数组的最大值和最小值?