JavaScript常见数组方法,教你如何转置矩阵

news2025/1/23 4:07:46

📜个人简介

⭐️个人主页:微风洋洋🙋‍♂️
🍑博客领域:编程基础,后端
🍅写作风格:干货,干货,还是tmd的干货
🌸精选专栏【JavaScript】
🚀支持洋锅:点赞👍、收藏⭐、留言💬

好久不见,甚是想念!
大家好!我是微风洋洋
芜湖,起飞🚀

今天这篇文章就是来和大家详细聊聊JavaScript常见数组方法,不知道大家有没有学过线性代数呢,如果学过那么矩阵转置那可就太熟悉了。
今天我想试试能不能用数组来实现矩阵转置呢?

想知道,那就接着往下看吧。希望大家读完有所收获,那我辛苦码字也就值了。

文章目录

  • 一、常见二维数组操作
    • 🌴创建与遍历
    • 🌴【案例】二维数组转置
  • 二、常见数组方法
    • 🌴栈和队列方法
    • 🌴检索方法
    • 🌴数组转字符串
    • 🌴其他方法

一、常见二维数组操作

🌴创建与遍历

在前面的篇章中,已经学习了一维数组的各种创建方式,了解一维数组如何创建后,二维数组的创建就非常的简单了,只需将数组元素设置为数组即可。

在这里插入图片描述

💡 在创建完二维数组后,如何遍历二维数组中的元素,对其进行操作呢?

  • 一维数组可以利用for、for…in或for…of(ES6提供)进行遍历。
  • 二维数组只需在遍历数组后,再次遍历数组的元素即可。

另外,在Web项目开发中,还经常通过多维空数组添加元素的方式来创建多维数组。下面以添加二维空数组元素为例进行演示。

在这里插入图片描述

若要为二维数组元素(如arr[i][0])赋值,首先要保证添加的元素(如arr[i])已经被创建为数组,否则程序会报“Uncaught TypeError……”错误。

📌注意

在创建多维数组时,虽然JavaScript没有限制数组的维数,但是在实际应用中,为了便于代码阅读、调试和维护,推荐使用三维及以下的数组保存数据。


🌴【案例】二维数组转置

二维数组的转置指的是将二维数组横向元素保存为纵向元素。

在这里插入图片描述

代码实现思路:

  • 找规律:res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] = arr[2][0]。
  • 得结论: res[i][j] = arr[j][i]。②
  • res数组长度=arr元素(如arr[0])的长度。③
  • res元素(如res[0])的长度=arr数组的长度。④
  • 按照③和④完成res的创建与遍历,按②进行转置。

为了让你们有成就感我就不贴代码了,有问题可以在评论区提出。其实矩阵完全可以存在数组里,以后做矩阵转置直接运行代码就行了。



二、常见数组方法

🌴栈和队列方法

JavaScript中,除了前面讲解的添加与删除数组元素的方式外,还可以利用Array对象提供的方法,模拟栈和队列的操作。

  • 在数组的末尾或开头添加数组的新元素。
  • 在数组的末尾或开头删除数组元素。

在这里插入图片描述

  • push()和unshift()方法的返回值是新数组的长度。
  • pop()和shift()方法返回的是移出的数组元素。

🌴检索方法

在开发中,若要检测给定的值是否是数组,或是查找指定的元素在数组中的位置。

在这里插入图片描述

表中除了Array.isArray()方法外,其余方法默认都是从指定数组索引的位置开始检索,且检索方式与运算符“===”相同,即只有全等时才会返回比较成功的结果。


⭐includes()和Array.isArray()方法

在这里插入图片描述

  • includes()方法的第1个参数表示待查找的值。
  • includes()方法的第2个参数用于指定在数组中查找的下标。
  • 设置为大于数组长度时,数组不会被检索,直接返回false。
  • 设置为小于0的数时,则检索的索引位置等于数组长度加上指定的负数,若结果仍是小于0的数,则检索整个数组。

⭐indexOf()方法

indexOf()用于在数组中从指定下标位置,检索到的第一个给定值,存在则返回对应的元素下标,否则返回-1。

📌 注意

indexOf()方法的第2个参数用于指定开始查找的下标:

  • 当其值大于或等于数组长度时,直接返回-1。
  • 当其值为负数时,则查找的下标位置等于数组长度加上指定的负数,若结果仍是小于0的数,则检索整个数组。

⭐lastIndexOf()方法

Array对象提供的lastIndexOf()方法,用于在数组中从指定下标位置检索到的最后一个给定值的下标。与indexOf()检索方式不同的是,lastIndexOf()方法默认逆向检索,即从数组的末尾向数组的开头检索。

📌注意

lastIndexOf()方法的第2个参数用于指定查找的下标,且由于其采用逆向的方式检索:

当其值大于或等于数组长度时,则整个数组都会被查找。

当其值为负数时,则索引位置等于数组长度加上给定的负数,若其值仍为负数,则直接返回-1。


🌴数组转字符串

开发中若需要将数组转换为字符串时,则可以利用JavaScript提供的方法实现。

在这里插入图片描述

在这里插入图片描述

🔺join()和toString()方法的相同点:

  • 可将多维数组转为字符串,默认情况下使用逗号连接。
  • 当数组元素为undefined、null或空数组时,对应的元素会被转换为空字符串

🔺join()和toString()方法的不同点:

  • join()方法可以指定连接数组元素的符号。

🌴其他方法

除了前面讲解的几种常用方法外,JavaScript还提供了很多其他常用的数组方法。例如,合并数组、数组浅拷贝、颠倒数组元素的顺序等。

在这里插入图片描述

📌注意

  • slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会原数组产生影响。
  • splice()方法的第1个参数的值等于或大于数组长度时,从数组末尾开始操作;当该值为负数时,则下标位置等于数组长度加上指定的负数,若其值仍为负数,则从数组的开头开始操作。

如果觉得这篇文章对你有一丢丢启发的话,不妨 点赞👍、收藏⭐、留言💬支持一下,你的支持将是我继续创作的最大动力❤️❤️❤️

由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

if (学会了){
点个赞,给个好评,我祝福你学啥会啥;
}else{
收藏一下以后慢慢学,我相信你能学会;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408273.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

git提交规范,规范自己的提交标准

为了规范我的git提交内容,提交的时候commit -m “备注的信息”,但是每个人的备注信息千奇百怪,为了统一,我们进行了git的规范。 首先要全局安装commitizen npm i -g commitizen4.2.4然后安装插件 npm i cz-customizable6.3.0…

javascript获取url信息的常见方法

1、获取页面完整的url 1 2 var alocation.href; console.log(a); // “http://www.cnblogs.com/wuxibolgs329/p/5261577.html#flag?test12345” 2、获取页面的域名 var host window.location.host; //www.cnblogs.com var host2 document.domain; //www.cnblogs.com …

学生管理系统Element UI版

💂 个人主页: 陶然同学🤟 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅 想寻找共同成长的小伙伴,请点击【Java全栈开发社区】…

微前端 - qiankun

前言 qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 本文主要记录下如何接入 qiankun 微前端。主应用使用 vue2,子应用使用 vue3、react。 一、主应用 主应用不限技术栈,只需…

前后端分离式交互

目录 前言 1.javaEE环境安装 第一步:正常创建javase项目 第二步:右击项目,引入框架支持 第三步:将项目部署到Tomcat服务器上。Tomcat安装及配置 2.servlet搭建 请求格式为:ip:端口/项目名/servlet地址 3.servl…

uniapp -- 扫码记录(针对app场景)

背景 扫码需求日益增多,为了满足客户的需求,扫码演变的多种多样,其中有二维码,条形码居中,条形码又可以细分成几种,以下记录全屏和自定义页面扫码的在uniapp的技术实现 全屏扫码 uniapp自身带的api方法-uni.scanCod…

vscode的vue代码提示与补全没反应(vetur问题)

问题:vscode的里面写vue时候代码提示用不了了 问题原因:vetur这个插件升级了,与老版本的vscode不适配了 解决方案: 1.卸载vscode,与vscode官网下载最新版本vscode 2.安装老版本的vetur(感谢评论区另一个大佬推荐的…

刷题日常计~JS③

作者 : SYFStrive 博客首页 : 点击跳转HomePage 📜: 初编程JavaScript之每天10题 👉 从质变到量变💪 📌:个人社区(欢迎大佬们加入) 👉:社区链接&#x1f5…

关于WEB-INF目录及Tomcat部署方式、原理的简单理解

个人学习所用,有不足或错误之处欢迎指正和补充! 目录 前言: 一、WEB-INF目录与META-INF目录 1. Web应用程序的目录结构 2. WEB-INF简介 3. WEB-INF的作用 4. 静态资源的访问 二、Tomcat部署本地工件 1. war和war exploded的区别 2.…

【HTML小游戏】推箱子网页版(附完整源码)

最近刚刚更新完了HTML,CSS的万字总结,有很多人已经学习完了文章,感觉反馈还不错,今天,用HTML,CSS,JS的知识编写了一个童年经典游戏 - 推箱子,供学习参考。 文章目录 1. 效果展示2. 游戏介绍3. 游戏规则4. 源码学习1. 效果展示 游戏主界面展示: 游戏界面展示: 2. 游戏…

ECMAScript6新特性【数组扩展(扩展运算符、新增方法一、新增方法二、新增方法三)】(四)-全面详解(学习总结---从入门到深化)

👏作者简介:大家好,我是小童,Java开发工程师,CSDN博客博主,Java领域新星创作者 📕系列专栏:前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…

【vue2】vuex的安装、配置与使用

一、前言 使用vuex可以实现数据的共享。 二、安装 vscode中新建终端安装vuex。由于vue2不能使用vuex4的版本,所以在安装时需要指定版本3 npm i vuex3 三、vuex工作流 vuex核心包括actions、mutations、state。 ①state用来存储数据; ②actions用…

vue+element-ui

一.使用图形化界面,创建vue项目 vue ui(在根目录下,打开cmd,启动图形化界面) 添加插件 添加element-ui插件 这里选择import on demand 安装好了 添加依赖 添加axios依赖 添加好了 二.创建Git仓库,连接并上传刚刚创建的项目 在项目文件目录下…

基于微信小程序的电影订票系统设计与实现(代码+数据库+论文)

项目简介 本系统是基于微信小程序的电影订票系统的设计与实现。基于B/S架构模式进行设计,使用了JavaScript、CSS、java语言等,后台数据库设计使用Mysql。本电影订票系统主要分为前端小程序订票系统和后台电影管理两部分。用户使用时接触的是系统前端小程…

学习Canvas基础-绘制矩形

学习Canvas基础-绘制矩形 canvas提供了三个API,分别是: 1.绘制矩形 rect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height) 但该方法不会出实际效果,需要配合 fill()和stroke()方法让其显现…

深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解

这篇文章对flex不熟也可以看。这篇文章只讲这三个属性。为了简单化,不会提到主轴交叉轴,也不讲方向,默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。 如果你觉得对flex比较了解,可以直接从第二小节开始看起。 1.…

window.print() 前端页面打印与预览PDF

window.print()打印是浏览器自带的打印,实现原理是将html转换为pdf可以在线预览打印或者导出pdf,在任何网页上可通过Ctilp快捷键调出浏览器打印程序,它可将整个网页打印出来,在我们开发中,其实并不需要将所有页面打印出…

js调用gpt3.5

参考链接&#xff1a;直接在前端调用 GPT-3 API 效果图&#xff1a; 小技巧&#xff1a; 1. shiftenter是发送消息的快捷键 2. 有本地聊天记录功能 3. 按delete按钮可以删除包括这条之后的记录 <!DOCTYPE html> <html><head><meta charset"UTF-8&…

前端插件库之vue3使用vue-codemirror插件

vue3插件vue-codemirror使用步骤和实例vue-codemirror使用配置说明:个人代码编辑区Demovue-codemirror 基于 CodeMirror &#xff0c;适用于 Vue 的 Web 代码编辑器。 使用 1.命令行安装 npm install vue-codemirror --save // cnpm install vue-codemirror --save如果运行…

vue3使用viewer

介绍 v-viewer是一款基于viewer.js的强大的插件&#xff0c;不但支持vue3版本&#xff0c;还支持vue2、JavaScript、jquery&#xff0c;有以下特点&#xff1a; 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转&#xff08;类似微博的图片旋转&#xff09;支持水平/垂直…