Javascript 数据结构[入门]

  • 作者:20岁爱吃必胜客(坤制作人),近十年开发经验, 跨域学习者,目前于海外某世界知名高校就读计算机相关专业。
  • 荣誉:阿里云博客专家认证、腾讯开发者社区优质创作者,在CTF省赛校赛多次取得好成绩。
  • 跨领域学习,喜欢摄影、弹吉他、咏春拳。文章深入浅出、语言风趣;爱吃必胜客社区创立者,旨在“发现美 欣赏美

  • 🏆 学习系列专栏
    。🏅 Python学习宝库
    。🏅 网络安全学习宝库

在这里插入图片描述

在这里插入图片描述

文章目录

  • ⭐️使用数组存储不同类型的数据
  • 使用方括号访问数组的元素
  • 使用 push() 和 unshift() 为数组添加元素
  • 使用 pop() 和 shift() 从数组中删除元素
  • 使用 splice() 删除元素
  • 使用 splice() 添加元素

⭐️使用数组存储不同类型的数据

以下是最简单的数组(Array)示例: 这是一个一维数组(one-dimensional array),它只有一层,或者说它里面没有包含其它数组。 可以观察到,这个数组中只包含了布尔值(booleans)、字符串(strings)、数字(numbers)以及 JavaScript 中的其他数据类型:

let simpleArray = ['one', 2, 'three', true, false, undefined, null];
console.log(simpleArray.length);

调用 console.log 显示 7。

所有数组都有一个表示长度的属性,我们可以通过 Array.length 来访问它。 下面是一个关于数组的更复杂的例子。 这是一个多维数组 (multi-dimensional Array),或者说是一个包含了其他数组的数组。 可以注意到,在它的内部还包含了 JavaScript 中的对象(objects)结构。 我们会在后面的小节中讨论该数据结构,但现在你只需要知道数组能够存储复杂的对象类型数据。

let complexArray = [[{one: 1,two: 2},{three: 3,four: 4}],[{a: "a",b: "b"},{c: "c",d: "d"}]
];

我们已经定义了一个名为 yourArray 的变量。 请修改代码,将一个含有至少 5 个元素的数组赋值给 yourArray 变量。 你的数组中应包含至少一个 string 类型的数据、一个 number 类型的数据和一个 boolean 类型的数据。

使用方括号访问数组的元素

所有数据结构的基本特性是,它们不仅可以存储数据,还可以让我们按需访问存放在其中的数据。 我们已经学习了如何创建数组,现在让我们来学习如何访问数组中的数据。

我们先定义一个包含 3 个元素的数组:

let ourArray = ["a", "b", "c"];

在数组中,内部的每个元素都有一个与之对应的索引(index)。 索引既是该元素在数组中的位置,也是我们访问该元素的引用。 需要注意的是,JavaScript 数组的索引是从 0 开始的(这种从 0 开始的规则叫做 zero-indexed),即数组的第一个元素是在数组中的第 0 个位置,而不是第 1 个位置。 要从数组中获取一个元素,我们可以在数组字面量后面加一个用方括号括起来的索引。不过习惯上,我们会通过表示数组的变量名来访问,而不是直接通过字面量。 这种从数组中读取元素的方式叫做方括号表示法(bracket notation)。 如果我们要从数组 ourArray 中取出数据 a 并将其赋值给另一个变量,可以这样写:

let ourVariable = ourArray[0];

现在,变量 ourVariable 的值也为 a。

通过索引,我们不仅可以获取某个元素值,还可以用类似的写法来设置一个索引位置的元素值:

ourArray[1] = "not b anymore";

在上面的代码中,我们用方括号表示法把索引为 1 的元素从 b 改成了 not b anymore。 现在 ourArray 的值是 [“a”, “not b anymore”, “c”]。

在本挑战中,请将 myArray 中的第二个元素(索引为 1)设置为除了 b 以外的任意值。

使用 push() 和 unshift() 为数组添加元素

数组的长度与数组能包含的数据类型一样,都是不固定的。 数组可以包含任意数量的元素,可以不限次数地往数组中添加元素或者从中移除元素。 总之,数组是可变的(mutable)。 在本挑战中,我们要学习两种修改数组的方法:Array.push() 和 Array.unshift()。

这两个方法都接收一个或多个元素作为参数,并会将参数中的元素添加到该数组中。 push() 方法会将元素插入到数组的末尾,而 unshift() 方法会将元素插入到数组的开头。 请看以下例子:

let twentyThree = 'XXIII';
let romanNumerals = ['XXI', 'XXII'];romanNumerals.unshift('XIX', 'XX');
romanNumerals 的值就变成了 ['XIX', 'XX', 'XXI', 'XXII']。romanNumerals.push(twentyThree);romanNumerals 的值现在就变成了 ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']

请注意这里,我们也可以使用变量作为参数,这让我们在动态修改数组数据时更加灵活。

我们已经定义了一个 mixedNumbers 函数,它接收一个数组作为参数。 请修改这个函数,使用 push() 和 unshift() 来将 ‘I’, 2, ‘three’ 插入到数组开头;将 7, ‘VIII’, 9 插入到数组的末尾。最终这个函数的返回值就会是一个依次包含不同形式的 1-9 的数组。

使用 pop() 和 shift() 从数组中删除元素

push() 和 unshift() 都有一个与它们作用相反的函数:pop() 和 shift()。 与插入元素相反,pop() 会从数组的末尾移除一个元素,而 shift() 会从数组的开头移除一个元素。 pop() 和 shift() 与 push() 和 unshift() 的关键区别在于,用于删除元素的方法不接收参数,而且每次只能删除数组中的一个元素。

让我们来看以下的例子:

let greetings = ['whats up?', 'hello', 'see ya!'];greetings.pop();
greetings 值为 ['whats up?', 'hello']。greetings.shift();
greetings 值为 ['hello']

这些用于删除数组元素的方法会返回被删除的元素:

let popped = greetings.pop();

greetings 值为 [],popped 值为 hello。

我们已经定义了一个 popShift 函数,它接收一个数组作为输入参数并返回一个新的数组。 请修改这个函数,使用 pop() 和 shift() 来移除输入的数组中的第一个元素和最后一个元素,并将这两个被移除的元素分别赋值给对应的变量,使得最终返回的数组里包含这两个值。

使用 splice() 删除元素

在之前的挑战中,我们已经学习了如何用 shift() 和 pop() 从数组的开头或末尾移除元素。 但如果我们想删除数组中间的一个元素, 或者想一次删除多个元素,该如何操作呢? 这时候我们就需要使用 splice() 方法了, splice() 可以让我们从数组中的任意位置连续删除任意数量的元素

splice() 最多可以接受 3 个参数,但现在我们先关注前两个。 splice() 的前两个参数是整数,表示数组中调用 splice() 的项的索引或位置。 别忘了,数组的索引是从 0 开始的,所以我们要用 0 来表示数组中的第一个元素。 splice() 的第一个参数代表从数组中的哪个索引开始移除元素,而第二个参数表示要从数组中的这个位置开始删除多少个元素。 例如:

let array = ['today', 'was', 'not', 'so', 'great'];array.splice(2, 2);

这里我们移除 2 个元素,首先是第三个元素(索引为 2)。 array 会有值 [‘today’, ‘was’, ‘great’]。

splice() 不仅会修改调用该方法的数组,还会返回一个包含被移除元素的数组

let array = ['I', 'am', 'feeling', 'really', 'happy'];let newArray = array.splice(3, 2);

newArray 值为 [‘really’, ‘happy’]。

我们已经定义了数组 arr。 请使用 splice() 从 arr 里移除元素,使剩余的元素之和为 10。

const arr = [2, 4, 5, 1, 7, 5, 2, 1];
// 只修改这一行下面的代码
arr.splice(0,1)
arr.splice(3,4)// 只修改这一行上面的代码
console.log(arr);

使用 splice() 添加元素

还记得在上个挑战中我们提到 splice() 方法最多可以接收 3 个参数吗? 第三个参数可以是一个或多个元素,这些元素会被添加到数组中。 这样,我们能够便捷地将数组中的一个或多个连续元素换成其他的元素。

const numbers = [10, 11, 12, 12, 15];
const startIndex = 3;
const amountToDelete = 1;numbers.splice(startIndex, amountToDelete, 13, 14);
console.log(numbers);

第二个 12 已被删除,我们在同一索引处添加 13 和 14。 numbers 数组现在将会是 [ 10, 11, 12, 13, 14, 15 ]。

在上面的代码中,数组一开始包含了若干数字。 接着,我们调用 splice() 方法,索引为 (3) 的地方开始删除元素,删除的元素数量是 (1)。然后,(13, 14) 是在删除位置插入的元素。 可以在 amountToDelete 后面传入任意数量的元素(以逗号分隔),每个都会被插入到数组中。

我们已经定义了一个 htmlColorNames 函数,它以一个 HTML 颜色的数组作为输入参数。 请修改这个函数,使用 splice() 来移除数组中的前两个元素,并在对应的位置上添加 ‘DarkSalmon’ 和 ‘BlanchedAlmond’。

在这里插入图片描述

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

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

相关文章

3年经验,面试测试岗只会功能测试开口要求18K,令我陷入沉思。

由于朋友临时有事, 所以今天我代替朋友进行一次面试,公司需要招聘一位自动化测试工程师,我以很认真负责的态度完成这个过程, 大概近30分钟。 主要是技术面试, 在近30分钟内, 我与被面试者是以交流学习的方式…

java linq多字段排序时间比较

public static void main(String[] args) {//100万条数据List<CrmInvestSaleUserCount> waitAssignUserList new ArrayList<>();for (int i 0; i < 1000000; i) {waitAssignUserList.add(new CrmInvestSaleUserCount().setSales_username("test" i…

架构训练营学习笔记:6-2 微服务基础选型

基础选型 微服务基础设施架构 优先级 其中&#xff0c;核心 就是服务注册、服务发现、服务路由。 模式1-嵌入SDK 模式2-反向代理式 模式3-网络代理式&#xff08;Service Mesh&#xff09; 模式对比 常见微服务框架选择 嵌入SDK-dubbo Spring Cloud 反向代理式 APISIX …

小研究 - 基于 SpringBoot 微服务架构下前后端分离的 MVVM 模型(一)

本文主要以SpringBoot微服务架构为基础&#xff0c;提出了前后端分离的MVVM模型&#xff0c;并对其进行了详细的分析以及研究&#xff0c;以此为相关领域的工作人员提供一定的技术性参考。 目录 1 研究背景 2 SpringBoot微服务优势 3 微服务 3.1 技术发展 3.2 技术优势 在…

流数据湖平台Apache Paimon(五)集成 Spark 引擎

文章目录 第4章 集成 Spark 引擎4.1 环境准备4.2 Catalog4.2.1 文件系统4.2.2 Hive 4.3 DDL4.3.1 建表4.3.2 修改表 第4章 集成 Spark 引擎 4.1 环境准备 Paimon 目前支持 Spark 3.4、3.3、3.2 和 3.1。课程使用的Spark版本是3.3.1。 1&#xff09;上传并解压Spark安装包 t…

MyBatis枚举映射类讨论

前言 本篇需要对于MyBatis有一定的认识&#xff0c;而且只是针对于TypeHandler接口来讨论&#xff0c;暂不讨论其他方面的问题 TypeHandler概叙 TypeHandler是MyBatis设计的一个用于参数的接口&#xff0c;你们会不会很好奇MyBatis是如何把整形&#xff0c;时间&#xff0c;字符…

模版下载和Excel文件导入

模版下载 模版下载 模版下载 /*** 生成模版** param* return AppResponse*/public AppResponse ExcelFile() throws IOException {// 创建一个新的Excel工作簿Workbook workbook new XSSFWorkbook();// 创建一个工作表Sheet sheet workbook.createSheet("页面拨测模板&…

C++类的定义和对象的创建

一、问题引入 C类和对象到底是什么意思&#xff1f; 1、C 中的类&#xff08;Class&#xff09;可以看做C语言中结构体&#xff08;Struct&#xff09;的升级版。结构体是一种构造类型&#xff0c;可以包含若干成员变量&#xff0c;每个成员变量的类型可以不同&#xff1b; …

2023-08-06力扣今日二题

链接&#xff1a; 剑指 Offer 09. 用两个栈实现队列 题意&#xff1a; 如题 解&#xff1a; 第一个栈逆序栈&#xff0c;存储插入顺序&#xff0c;另一个栈正序栈负责弹出数据 优化思想&#xff1a;只有当st2正序栈为空时才将st1逆序栈的转移过来&#xff08;若st2不为空…

使用langchain与你自己的数据对话(五):聊天机器人

之前我已经完成了使用langchain与你自己的数据对话的前四篇博客&#xff0c;还没有阅读这四篇博客的朋友可以先阅读一下&#xff1a; 使用langchain与你自己的数据对话(一)&#xff1a;文档加载与切割使用langchain与你自己的数据对话(二)&#xff1a;向量存储与嵌入使用langc…

【探索Linux】—— 强大的命令行工具 P.2(Linux下基本指令)

前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&#xff0c;并且讲了有关C的一些知识&#xff0c;也相信大家都掌握的不错&#xff0c;今天博主将会新开一个Linux专题&#xff0c;带领大家继续学习有关Linux的内容。今天第一篇文章博主首先带领大家了解一下…

uniapp两个单页面之间进行传参

1.单页面传参&#xff1a;A --> B url: .....?code JSON.stringify(param), 2.单页面传参B–>Auni.$emit() uni.$on()

Python爬虫——解析_jsonpath解析淘票票网站

jsonpath简单解析淘票票网站&#xff0c;获取城市名称 代码如下&#xff1a; import urllib.request import json import jsonpathurl https://dianying.taobao.com/cityAction.json?activityId&_ksTS1691330599914_108&jsoncallbackjsonp109&actioncityAction&…

使用HTTP隧道时如何应对目标网站的反爬虫监测?

在进行网络抓取时&#xff0c;我们常常会遇到目标网站对反爬虫的监测和封禁。为了规避这些风险&#xff0c;使用代理IP成为一种常见的方法。然而&#xff0c;如何应对目标网站的反爬虫监测&#xff0c;既能保证数据的稳定性&#xff0c;又能确保抓取过程的安全性呢&#xff1f;…

【学习笔记】[SDOI2017] 硬币游戏

抽象&#x1f605; 我忍不了了&#xff0c;直接上概率生成函数&#x1f605; 首先要做过这道题 [CTSC2006] 歌唱王国 设 F i ( x ) ∑ f j x j F_i(x)\sum f_jx^j Fi​(x)∑fj​xj&#xff0c;其中 f j f_j fj​表示 ∣ T ∣ j |T|j ∣T∣j时第 i i i个人获胜的概率 设 …

[CKA]考试之查看pod的cpu

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 找出标签是namecpu-loader的Pod&#xff0c;并过滤出使用CPU最高的Pod&#…

用python实现猜数字游戏

1 问题 如何来判断玩家输入的数据类型来避免报错&#xff1f; 解决&#xff1a; 使用isdigit函数来判断玩家输入的数据类型是否为数字&#xff0c;是则继续运行反之则提醒玩家输入的内容不合法。 如何限制玩家输入字符的数量&#xff1f; 解决&#xff1a;定义一个最大常量和最…

Spring Boot集成Mybatis-Plus

Spring Boot集成Mybatis-Plus 1. pom.xml导包 <!--lombok--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><!--mysql驱动--><dependency><groupId>mysql<…

论 SoC上的Linux如何拉动外部I/O

在MCU中&#xff08;如classic autosr或其他RTOS&#xff09;&#xff0c;一般可以直接通过往对应的寄存器&#xff08;地址转为指针&#xff09;写值&#xff0c; 或者调用一些硬件抽象层或者驱动接口来拉动芯片提供的GPIO。 但是在Linux中&#xff0c;可能不会让应用层直接去…

我在leetcode用动态规划炒股

事情是这样的&#xff0c;突然兴起的我在letcode刷题 121. 买卖股票的最佳时机122. 买卖股票的最佳时机 II123. 买卖股票的最佳时机 III 以上三题。 1. 121. 买卖股票的最佳时机 1.1. 暴力遍历&#xff0c;两次遍历 1.1.1. 算法代码 public class Solution {public int Ma…