当前位置: 首页 > news >正文

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.lryc.cn/news/112198.html

相关文章:

  • IO(JavaEE初阶系列8)
  • React Native 样式表的基础知识
  • 【JS 解构赋值】
  • Vue3状态管理库Pinia——自定义持久化插件
  • il汇编整数相加
  • RabbitMQ 事务
  • vue前端 让年月日 加上23:59:59
  • 【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板8
  • STM32--综述
  • Linux学习之sed、awk和vim的差异
  • MacOS上配置docker国内镜像仓库地址
  • 全志F1C200S嵌入式驱动开发(soc系统集成)
  • React路由5版本
  • 6.4.3 1x1卷积层
  • [CKA]考试之检查可用节点数量
  • 备考错题知识点总结
  • 初识Flask:Python轻量级Web框架入门教程
  • 【BASH】回顾与知识点梳理(七)
  • Python实现对IP网段的快速检测
  • 伪操作、C和汇编、ATPCS协议
  • OPENCV C++(五)滤波函数+sobel边缘检测+人脸磨皮mask
  • 20天突破英语四级高频词汇——第②天
  • 【Python 学习】第一个python案例
  • 【C#学习笔记】值类型(2)
  • 【设计模式】-建造者模式
  • 【N32L40X】学习笔记14-在RT-thread系统中读取eeprom数据
  • Python OpenCV读取并显示USB UVC摄像头
  • 针对高可靠性和高性能优化的1200V碳化硅沟道MOSFET
  • 在服务器上搭建gitlab
  • Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展