HTML+JavaScript-02

数组

JavaScript中的数组用于在单一变量存储多个值,其实跟java中的数组是一样的,都是通过索引来访问这些值的。

创建数组

方式一:(推荐)

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];

方式二:

new关键字

var cars = new Array("北京现代", "丰田", "五菱宏光", "理想", "特斯拉");

注意:出于简洁、可读性和执行速度的考虑,请使用第一种方法(数组文本方法),并且最后一个元素不能加,

访问数组元素

通过引用索引索引下标来访问数组中的元素

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
console.log(cars[0]);//北京现代

注意:索引值是从0开始的

length属性

length属性返回数组的长度

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
console.log("cars数组的长度=" + cars.length);//5

sort属性

sort属性对数组进行排序

var nums = [33, 22, 1, 56, 88, 13];
console.log("排序后的数组=" + nums.sort());//1,13,22,33,56,88

遍历数组

遍历数组最安全的方法是for循环

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
for(let i = 0; i <= cars.length - 1; i++){console.log(cars[i]);
}

image-20240121165235685

push()添加数组

添加数组的最佳方式是push()方法

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars.push("比亚迪");
console.log(cars);

image-20240121165631522

可以看到比亚迪直接加在了cars中的最后

push() 方法返回新数组的长度:

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
console.log(cars.push("比亚迪"));//6

将数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
console.log(cars.toString());

image-20240121170459315

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符:

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
console.log(cars.join("-"));

image-20240121170710883

更改元素

通过索引index进行更改元素

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars[2] = "长安"//把 长安 赋值给 五菱宏光 的索引
console.log(cars);

image-20240121171631404

删除元素

可以使用delete来删除元素,但是不建议这样使用,可以看到“理想”这个元素被删除了,但是对应的索引也没了

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
delete cars[3];
console.log(cars);

image-20240121172136187

使用 delete 会在数组留下未定义的空洞。请使用 pop()shift() 取而代之。

Popping

pop() 方法从数组中删除最后一个元素:

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars.pop();//移除最后一个元素
console.log(cars);

image-20240121173208705

注意:pop()方法只能删除最后一个元素

位移元素

位移与弹出等同,但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars.shift();//移除第一个元素
console.log(cars);

image-20240121173458804

拼接数组

splice() 方法可用于向数组添加新项:

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars.splice(1, 0, "宾利", "迈巴赫");//在北京现代后 添加 宾利 迈巴赫
console.log(cars);

image-20240121173952345

cars.splice(1, 0, "宾利", "迈巴赫");

第一个参数(1)表示新增添元素的索引

第二个参数(0)表示要删除的元素数量

后面的参数是添加的新元素

使用 splice() 来删除元素

var cars = ["北京现代", "丰田", "五菱宏光", "理想", "特斯拉"];
cars.splice(1, 1);//删除丰田
console.log(cars);

image-20240121174657338

cars.splice(1, 1);

第一个参数表示从哪个索引开始删除

第二个参数表示要删除几个元素

合并(连接)数组

concat() 方法通过合并(连接)现有数组来创建一个新数组:

var courseA = ["语文", "数学", "英语"];
var courseB = ["体育", "物理", "JavaScript"];
var course = courseA.concat(courseB);
console.log(course);

image-20240121175612799

裁剪数组

slice() 方法用数组的某个片段切出新数组。

var course = ["语文", "数学", "英语", "体育", "物理", "JavaScript"];
var courseA = course.slice(2);
console.log("course=" + course);
console.log("courseA=" + courseA);

image-20240121180127806

var courseA = course.slice(2);

参数(2)表示从索引为2的元素开始分割

可以看到得到的是以索引为界限的后半部分数组

slice()接收两个参数时,第一个参数还是分割的头,第二个参数就是分割的尾

var course = ["语文", "数学", "英语", "体育", "物理", "JavaScript"];
var courseA = course.slice(2, 4);//截取 "英语", "体育" 赋值给courseA
console.log("course=" + course);
console.log("courseA=" + courseA);

image-20240121180543719

不难发现slice()两个参数的范围是前闭后开

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

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

相关文章

EDA-数据探索-pandas自带可视化-iris

# 加载yellowbrick数据集 import os import pandas as pd FIXTURES os.path.join(os.getcwd(), "data") df pd.read_csv(os.path.join(FIXTURES,"iris.csv")) df.head()sepal_lengthsepal_widthpetal_lengthpetal_widthspecies05.13.51.40.2setosa14.93…

最新AI系统ChatGPT网站系统源码,支持AI绘画,GPT语音对话,ChatFile文档对话总结,DALL-E3文生图,MJ绘画局部编辑重绘

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

数仓建设学习路线(三)元数据管理

什么是元数据&#xff1f; 简单来说就是描述数据的数据&#xff0c;更直白来说就是描述表名、表制作者、表字段、表生命周期、表存粗等信息的数据 元数据该如何管理 工具化 开源&#xff1a; 可通过atlas获取表依赖及信息做二次开发&#xff0c;或者完成可视化界面 平台化&am…

【网络安全 -> 防御与保护】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 网络安全——防御与保护 &#xff08;一&#xff09;.信息安全概述 &#xff08;二&#xff09;.防火墙组网

计组与原理:系统总线

大家好啊&#xff0c;这里来到计组第二部分内容&#xff1a;系统总线 跳转上一篇&#xff1a;计组原理&#xff1a;系统概论与基本组成 系统总线 1.总线的基本概念单总线结构框图面向 CPU 的双总线结构框图以存储器为中心的双总线结构框图 2.总线的分类片内总线系统总线通信总线…

Linux之权限(内容详细,细节满满)

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 Linux 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力 目录 一.前言 二.权限修改的两种方法 …

Python学习02—Python开发环境的配置

1.Python语言的简单概述 Python的诞生离不开一个人&#xff0c;他就是Guido van Rossum&#xff0c;他在1989年的圣诞节期间&#xff0c;在荷兰的阿姆斯特丹度假&#xff0c;为了打发假期时间&#xff0c;就想着设计一种编程语言&#xff0c;后期便诞生了Python Python语言拥…

掌握技术脉搏:程序员如何在技术变革中保持领先,避免被裁员

笔者刚入行IT业的时候&#xff0c;有个前辈老猿工就语重心长的说&#xff0c;写代码要与时俱进&#xff0c;永远不能停止学习&#xff0c;如果不能时刻走在前面&#xff0c;就会被淘汰。哪天感觉到力不从心&#xff0c;就要考虑努力往管理层走啦。随着计算机技术和互联网技术的…

MySQL-B-tree和B+tree区别

B-tree&#xff08;平衡树&#xff09;和Btree&#xff08;平衡树的一种变种&#xff09;是两种常见的树状数据结构&#xff0c;用于构建索引以提高数据库的查询性能。它们在一些方面有相似之处&#xff0c;但也有一些关键的区别。以下是B-tree和Btree的主要区别&#xff1a; …

Java Server-Sent Events通信

Server-Sent Events特点与优势 后端可以向前端发送信息&#xff0c;类似于websocket&#xff0c;但是websocket是双向通信&#xff0c;但是sse为单向通信&#xff0c;服务器只能向客户端发送文本信息&#xff0c;效率比websocket高。 单向通信&#xff1a;SSE只支持服务器到客…

Leetcode—22.括号生成【中等】

2023每日刷题&#xff08;七十九&#xff09; Leetcode—22.括号生成 算法思想 实现代码 class Solution { public:vector<string> generateParenthesis(int n) {vector<string> ans;int m n * 2;string path(m, 0);function<void(int, int)> dfs [&…

小红书多模态团队建立新「扩散模型」:解码脑电波,高清还原人眼所见

近些年&#xff0c;研究人员们对探索大脑如何解读视觉信息&#xff0c;并试图还原出原始图像一直孜孜不倦。去年一篇被 CVPR 录用的论文&#xff0c;通过扩散模型重建视觉影像&#xff0c;给出了非常炸裂的效果—— AI 不光通过脑电波知道你看到了什么&#xff0c;并且帮你画了…

技术浪潮中的职业变革:程序员面临的裁员挑战与应对策略

目录 前言 冲破时空壁垒&#xff1a;探索技术变革的酷时代&#xff01; 逆境成长&#xff1a;一个互联网人战胜失业困境的故事 裁员的双面影响&#xff1a;挑战与机遇 应对裁员潮危机&#xff1a;程序员的超级英雄之路 前言 惊人的新闻传来&#xff0c;一对来自中国的工程师…

基于神经网络的电力系统的负荷预测

一、背景介绍&#xff1a; 电力系统负荷预测是生产部门的重要工作之一&#xff0c;通过准确的负荷预测&#xff0c;可以经济合理地安排机组的启停、减少旋转备用容量、合理安排检修计划、降低发电成本和提高经济效益。负荷预测按预测的时间可以分为长期、中期和短期负荷预测。…

​​快速排序(四)——挖坑法,前后指针法与非递归

目录 ​一.前言 二.挖坑法 三.前后指针法 四.递归优化 五.非递归 六.结语 一.前言 本文我们接着上篇文章的重点快排&#xff0c;现在继续讲解对快排优化的挖坑法&#xff0c;前后指针法以及非递归方法&#xff0c;下面是上篇文章快排链接&#xff1a;https://mp.csdn.net…

C#,字符串匹配(模式搜索)有限自动机(Finite Automata)算法的源代码

一、有限状态自动机 图中两个圆圈&#xff0c;也叫节点&#xff0c;用于表示状态&#xff0c;从图中可以看成&#xff0c;它有两个状态&#xff0c;分别叫0和1。从每个节点出发&#xff0c;都会有若干条边。当处于某个状态时&#xff0c;如果输入的字符跟该节点出发的某条边的内…

用Axure RP 9制作滑块

制作流程 1.打开界面 放置一个水平线 修改长为400 线段为5 2.放入圆 如图 3.修改圆的长和宽 如图 4.将圆变成动态面板 5.设置交互事件 如图 6.增加交互事件 7.增加 8.修改成跟随水平

基于springboot+vue的网上点餐系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 背景和意…

php基础学习之数据类型

php数据类型的基本概念 数据类型&#xff1a;data type&#xff0c;在PHP中指的是数据本身的类型&#xff0c;而不是变量的类型。 PHP 是一种弱类型语言&#xff0c;变量本身没有数据类型。 把变量类比成一个杯子&#xff08;容器&#xff09;&#xff0c;杯子可以装雪碧、可…

STL之unordered_map使用方法

这里写目录标题 STL之unordered_map使用方法1.什么是STL呢2.unordered_map2.1 头文件&#xff1a;2.2 怎么创建&#xff1a;2.3 初始化&#xff1a;2.4 根据key获取对应value值&#xff1a;2.5 遍历&#xff0c;判断key是否存在&#xff1a;2.6 怎么根据迭代器it获取key和value…