js(JavaScript)数据结构之数组（Array）

什么是数据结构？

下面是维基百科的解释：

数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装：一个数据结构可被视为两个函数之间的接口，或者是由数据类型联合组成的存储内容的访问方法封装。

我们每天的编码中都会用到数据结构，下面是常见的数据结构：

  • 数组（Array）
  • 栈（Stack）
  • 队列（Queue）
  • 链表（Linked List）
  • 散列表（Hash）
  • 字典
  • 树（Tree）
  • 图（Graph）
  • 堆（Heap）

数组（Array）

在计算机科学中，数组数据结构（英语：array data
structure），简称数组（英语：Array），是由相同类型的元素（element）的集合所组成的数据结构，分配一块连续的内存来存储。利用元素的索引（index）可以计算出该元素对应的存储地址。——维基百科

数组经常使用的场景：待办事项列表、购物清单、最佳十名榜单等等。

数组是计算机科学中的一种数据结构，用于存储一系列相同类型的元素，并将它们存在连续的内存中。通过索引可以找到存储地址。

适用场景

  • 适用：简单数据结构、不需要频繁查找或排序
  • 不适用：复杂数据结构、需要频繁操作和查找

创建数组

  • Array 构造函数：new Array() 或 new Array(1, 2, 3)，需要 new 关键字
  • 方括号 []：[] 或 [1, 2, 3]，更简洁

1、Array构造函数

var arr1 = new Array();  //创建空数组
var arr2 = new Array(1,2,3); //创建元素为1，2，3的数组
var arr3 = new Array(5);  //创建长度为5的数组

Array构造函数，需要使用new关键字。

2、使用方括号[]

var arr1 = [] ;  //创建一个空数组
var arr2 = [4,5,6];  //创建元素为4，5，6的数组

判断、长度和遍历数组

  • Array.isArray(arr)：判断是否是数组
  • arr.length：获取数组长度
  • 遍历方式：for、forEach、map、filter、some、every、find

判断是否是数组
Array.isArray(arr) 判断

Array.isArray(arr1);
结果输出为： true

判断数组的长度
数组有一个属性length，可以用来获取数组的长度。

var arr2 = [4,5,6,7];
var length = arr2.length;
结果输出为： 4

遍历数组
方式一：for循环遍历数组

for(var i = 0; i < arr.length; i++) {console.log(arr[i]);
}

方式二：forEach遍历数组
forEach()在原数组的基础上改变，没有返回值，在function内进行操作

arr.forEach( function (i) {console.log(i);
});

方式三：map遍历数组
map()会返回一个新数组，原数组不会改变。

var arr = [1,2,3];
var arr1 = arr.map(function (i) {return i * i;
});
结果：arr1 = [1,4,9]

方式四：filter遍历数组
过滤筛选，返回一个新数组，原数组不会改变。

var arr = [1,2,3,4,5,6,7,8,9];
var arr1 = arr.filter(function(i) {return i%2==0;
});
结果：arr1 = [2,4,6,8]

方式五：some遍历检测数组中是否有元素满足条件
如果有一个元素满足条件，则返回true，剩下的元素不会再进行检测
如果全部遍历结束，没有满足条件的元素，则返回false

var arr = [10,17,12,11];
arr.some(function(i){return i >15;
);
结果：true

方式六：every遍历检测数组是否所有元素都满足条件

var arr = [17,10,18,15];
arr.every(function(i){return i > 11;
});
结果：false

方法七：find遍历返回通过测试的数组的第一个元素的值
当数组中的元素满足条件时，find()返回符合条件的这个元素，剩下的元素不会再进行检测
如果没有符合条件的元素则返回undefined

var arr = [10,12,15,19,111];
arr.find(function(i){return i > 14;
});
结果：15

基本操作

  • 读取/查找：arr[index]、indexOf、lastIndexOf
  • 更新/替换：直接赋值或使用 splice()

插入和删除元素

  • 插入：unshift()（首部）、push()（尾部）、splice()（中间）
  • 删除：pop()（尾部）、shift()（首部）、splice()（中间）
读取元素/查找运算

JavaScript 中通过 数组[下标] 的方式来访问数组中指定下标的元素值，数组下标从0开始。

let arr = [1,5,2,4,4,3,2,14]
console.log(arr[5]) // 3

indexOf()
查找某个字符串在要查询的字符串中首次出现的位置的索引值

var arr = [1,2,3,4,3,2,1];
var n = arr.indexOf(3);
结果： n = 2;

lastIndexOf()
查找某个字符串在要查询的字符串中最后一个出现的索引值

var arr = [1,2,3,4,3,2,1];
var  n = arr.lastIndexOf(3);
结果：n = 4;

注意：如果某字符串中只有一个要查询的字符串，那么lastIndexOf和indexOf结果是一样的。

更新元素/替换元素

数组元素值的更新原理与访问原理一致，也是通过先计算出要更新的内存区域，然后再对其进行修改。

JavaScript 中通过 数组[下标] = 值 的方式对数组中指定位置的值进行修改。

let arr = [1,5,2,4,4,3,2,14]
arr[5] = 100
console.log(arr[5]) // 100

splice()方法
splice(index,length,new_arr)

  • index:从第几个元素开始替换
  • length:需要替换的元素的个数
  • new_arr:替换出来的元素存储在new_arr里

这个方法的返回结果是被截取的部分

使用splice()进行替换:var arr = [1,2,3,4,5,6];
var arr1 = arr.splice(0,2,9);
结果：arr = [9,3,4,5,6];  arr1 = [1,2];

使用splice()进行删除：var arr = [1,2,3,4,5,6];
arr.splice(2,3);
结果：arr = [1,2,6];   arr1 = [3,4,5];

使用splice()进行插入：var arr = [1,2,3,4,5,6];
arr.splice(2,0,10,11,12);
结果：arr = [1,2,10,11,12,3,,4,5,6];
插入元素/添加元素

数组的实际元素数量有可能小于数组的长度

let arr = new Array(8); //定义长度为8的数组，在内存中会为我们分配8个元素的空间// 初始化：对数组前6个元素赋值
arr[0] = 1;
arr[1] = 5;
arr[2] = 2;
arr[3] = 4;
arr[4] = 4;
arr[5] = 3;arr.size = 5 // 代表当前数组的实际使用长度

首位插入
unshift()
向数组首位插入元素，可插入多个

var arr = [1,2,3,4,5,6];
arr.unshift(0);
结果：arr = [0,1,2,3,4,5,6];

尾部插入
尾部插入，是最简单的情况，直接把插入的元素放在数组尾部的空闲位置即可，等同于更新元素的操作

如果需要在数组最后插入一个1，直接对当前数组最后一项赋值即可

arr[6] = 1 // 对第6个元素赋值console.log(arr) // [ 1, 5, 2, 4, 4, 3, 1, <1 empty item> ]

push()
向数组末位插入入元素，可插入多个

var arr = [1,2,3,4,5,6];
arr.push(7);
结果：arr = [1,2,3,4,5,6,7];

配合length使用
向数组末位插入一个元素

var arr = [1,2,3,4,5,6];
ar[arr.length] = 8;
结果：arr = [1,2,3,4,5,6,8];

中间插入
由于数组的每一个元素都有其固定下标，所以不得不首先把插入位置及后面的元素向后移动，腾出地方，再把要插入的元素放到对应的数组位置上;
如果需要在数组第三个位置后插入一个1，那么需要想将第三个位置以及后面的元素全部向后移动一位，留出空闲的位置后再对其进行修改操作。

// 向数组中下标为 index 的位置插入一个item值
function arrayAddItem(arr, index, item) {// 将第item后的元素全部向后移动一位for(let i = arr.size; i > index; i--){// 移动arr[i] = arr[i-1]}// 将要插入的值赋值到指定位置arr[index] = itemarr.size++return arr
}arr = arrayAddItem(arr, 3, 1)
console.log(arr); // [ 1, 5, 2, 1, 4, 4, 3, <1 empty item> ]

超范围插入

由于数组的长度是不可变的，所以一个数组分配到的内存空间也是固定的。前面都是在数组中元素数量小于数组长度的情况下插入元素的。

let arr = [1,2,3,4,5]
arr.size = 5 // 当前数组是使用长度// 向数组中下标为 index 的位置插入一个item值
function arrayAddItem(arr, index, item) {if(arr[arr.length-1]){// 数组中的元素数量已经满了，扩容数组arr = expandArray(arr)}// 将第item后的元素全部向后移动一位for(let i = arr.size; i > index; i--){// 移动arr[i] = arr[i-1]}// 将要插入的值赋值到指定位置arr[index] = itemarr.size++return arr
}// 扩容数组为原来长度的两倍
function expandArray(arr){// 创建一个长度为原来长度两倍的数组let newArray = new Array(arr.size * 2)// 将原来的数组复制到新的数组中for (let i = 0; i < arr.size; i++) {newArray[i] = arr[i]}newArray.size = arr.sizereturn newArray
}arr = arrayAddItem(arr, 3, 1)
console.log(arr); [ 1, 2, 3, 1, 4, 5, <4 empty items>]
删除元素

数组的删除操作和插入操作的过程相反，如果删除的元素位于数组中间，其后的元素都需要向前挪动1位

function arrayRemoveItem(arr, index){for (let i = index; i < arr.size-1; i++) {// 后面一项往前移动arr[i] = arr[i+1]}// 当前项算法为最后一项delete arr[arr.size-1]arr.size--return arr
}

如果对数组元素没有顺序要求，删除操作还存在一种取巧的方法：

function arrayRemoveItem(arr, index){// 最后一项移动到被删除的位置arr[index] = arr[size-1]// 移除最后一项delete arr[size-1]size--return arr
}

pop()
把数组末尾的元素去除，并返回这个元素

var arr = [1,2,3,4,5,6];
var number = arr.pop();
结果：arr = [1,2,3,4,5]; number = 6;

shift()
把数组开头的元素去除，并返回这个元素

var arr = [1,2,3,4,5,6];
var number = arr.shift();
结果：arr = [2,3,4,5,6]; number = 1;

其他操作

  • 排序和反序：sort()、reverse()
  • 连接：concat()
  • 转换为字符串：join()、toString()
  • 填充：fill()
反序reverse()

用来反转数组的

var arr = [1,2,3,4];
arr.reverse();
结果：arr = [4,3,2,1];
排序sort()

按照字典顺序对元素进行排序，用来排序数组的，并且你也可以自定义排序规则，只需要传入一个函数即可

var arr = [8,5,6,2,3,1];
arr.sort();
结果：arr = [1,2,3,5,6,8];

arr = ['sunshine_lin','sanxin_lin','digger_lin']
console.log(arr.sort())
//['digger_lin','sanxin_lin','sunshine_lin' ]
console.log(arr)
//['digger_lin','sanxin lin','sunshine lin'
console.log(arr.sort((a，b) => b,length - a.length)) // 根据字符串长度排序
//['sunshine_lin','digger_lin','sanxin_lin' ]console.log(arr)
// [ 'sunshine_lin','digger_lin','sanxin_lin']
连接concat()

连接两个或者多个数组，并且返回该数组。

var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1.concat(arr2);
结果：arr1 = [1,2,3,4,5,6];
数组转换为字符串

join()

var arr = [1,2,3,4,5];
arr.join();
结果为："1,2,3,4,5"

toString()

var arr = ["a","b","c","d"];
arr.toString();
结果为：“a,b,c,d”
fill 填充

用来把数组填满成自己想要的元素

arr = ['sunshine_lin','sanxin_lin','digger_lin']
console.log(arr.fill(0))
// [0, 0, 0]
console.log(arr)
// [0, 0, 0]
console.log(new Array(5).fill('哈哈哈哈哈哈'))
//  ['哈哈哈哈哈哈', '哈哈哈哈哈哈', '哈哈哈哈哈哈', '哈哈哈哈哈哈', '哈哈哈哈哈哈']

参考效果

请添加图片描述
参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Array操作示例</title>
</head><body><script>var arr = [1, 2, 3, 4, 5]; // 创建数组// 判断、长度和遍历数组console.log(Array.isArray(arr)); // trueconsole.log(arr.length); // 5arr.forEach(function (item) {console.log(item);});// 读取/查找console.log(arr[2]); // 3console.log(arr.indexOf(4)); // 3console.log(arr.lastIndexOf(2)); // 1// 更新/替换arr[1] = 6;console.log(arr); // [1, 6, 3, 4, 5]arr.splice(2, 1, 7);console.log(arr); // [1, 6, 7, 4, 5]// 插入和删除元素arr.unshift(0);console.log(arr); // [0, 1, 6, 7, 4, 5]arr.push(8);console.log(arr); // [0, 1, 6, 7, 4, 5, 8]arr.splice(3, 0, 9);console.log(arr); // [0, 1, 6, 9, 7, 4, 5, 8]arr.pop();console.log(arr); // [0, 1, 6, 9, 7, 4, 5]arr.shift();console.log(arr); // [1, 6, 9, 7, 4, 5]arr.splice(2, 1);console.log(arr); // [1, 6, 7, 4, 5]// 其他操作arr.sort();console.log(arr); // [1, 4, 5, 6, 7]arr.reverse();console.log(arr); // [7, 6, 5, 4, 1]var newArr = arr.concat([2, 3]);console.log(newArr); // [7, 6, 5, 4, 1, 2, 3]var str = arr.join('-');console.log(str); // "7-6-5-4-1"arr.fill(0);console.log(arr); // [0, 0, 0, 0, 0]</script>
</body></html>

优势与劣势

  • 优势：快速随机访问、高效的查找（如二分查找）
  • 劣势：插入和删除操作影响性能，需要移动大量元素

适用场景

数组适用于读取操作多、写操作少的情况。

持续学习总结记录中，回顾一下上面的内容：
创建数组
Array 构造函数：new Array() 或 new Array(1, 2, 3)，需要 new 关键字
方括号 []：[] 或 [1, 2, 3]，更简洁
判断、长度和遍历数组
Array.isArray(arr)：判断是否是数组
arr.length：获取数组长度
遍历方式：for、forEach、map、filter、some、every、find
基本操作
读取/查找：arr[index]、indexOf、lastIndexOf
更新/替换：直接赋值或使用 splice()
插入和删除元素
插入：unshift()（首部）、push()（尾部）、splice()（中间）
删除：pop()（尾部）、shift()（首部）、splice()（中间）
其他操作
排序和反序：sort()、reverse()
连接：concat()
转换为字符串：join()、toString()

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

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

相关文章

HackTheBox - Medium - Linux - Faculty

HackTheBox - Medium - Linux - Faculty

Faculty Faculty 是一台中型 Linux 机器&#xff0c;具有 PHP Web 应用程序&#xff0c;该应用程序使用的库容易受到本地文件包含的影响。利用该库中的 LFi 会泄露一个密码&#xff0c;该密码可用于通过 SSH 以名为“gbyolo”的低级用户身份登录。用户“gbyolo”有权作为“dev…
阅读更多...
Linux 内核如何根据设备树文件来匹配内核

Linux 内核如何根据设备树文件来匹配内核

一. 简介 上一篇文章学习了 Linux内核如何确定是否支持此设备&#xff0c;如果支持&#xff0c;设备就会启动 Linux 内核。 文章地址如下&#xff1a; 设备树根节点下的compatile属性的作用-CSDN博客 本文继上面文章的学习。这里简单看一下&#xff0c; Linux 内核是如何根…
阅读更多...
iOS App自动化测试：从环境搭建到实际应用（Python+pytest+appium+allure框架）

iOS App自动化测试：从环境搭建到实际应用（Python+pytest+appium+allure框架）

iOS App自动化测试&#xff1a;Pythonpytestappiumallure 一、环境准备&#xff1a; 1.1 Appium环境搭建 Windows端&#xff1a;Windows端appium环境搭建Mac端&#xff1a;Mac端appium环境搭建 总结&#xff1a;appium-doctor 是用来检测环境配的是否完整&#xff0c;安装完…
阅读更多...
java进阶||jdk进阶之循环

java进阶||jdk进阶之循环

从18年学java到现在除了各种各样的数据类型和集合烧不了要遍历这些变量, for循环这时就少不了啦(当然还有8后引入的神器泛型) 先来看一段精髓业务代码, 使用了多个新特性当然也少不了循环和分支判断 代码较长解析在后面 private CommonPage<List<Object>> handle…
阅读更多...
【MyBatis】动态SQL

【MyBatis】动态SQL

文章目录 前言增加操作\<trim>标签查询操作\<where>标签修改操作\<set>标签删除操作\<foreach>标签\<include>标签 前言 动态 SQL 是 MyBatis 的强大特性之一。如果你使用过 JDBC 或其它类似的框架&#xff0c;你应该能理解根据不同条件拼接 SQ…
阅读更多...
超声波清洗机可以洗些什么东西？质量比较好的超声波清洗机推荐

超声波清洗机可以洗些什么东西？质量比较好的超声波清洗机推荐

超声波清洗机只能清洗眼镜吗&#xff1f;不是的&#xff01;超声波清洗机能够清洗的物品远比我们想象的还多&#xff0c;最常见的还是清洗眼镜&#xff0c;毕竟超声波清洗机最常见就是在眼镜店了&#xff0c;很多朋友都喜欢定期都眼镜店里来清洗一下眼镜&#xff0c;这个习惯其…
阅读更多...
vivado Revision Control

vivado Revision Control

2020.2 只需要git 管理 prj.xpr 和 prj.srcs/ https://china.xilinx.com/video/hardware/ip-revision-control.html Using Vivado Design Suite with Revision Control https://www.xilinx.com/video/hardware/vivado-design-suite-revision-control.html http://www.xi…
阅读更多...
腾讯实验平台基于 StarRocks 构建湖仓底座

腾讯实验平台基于 StarRocks 构建湖仓底座

作者&#xff1a; 腾讯大数据平台部科学实验中心Tech Lead、专家工程师 马金勇博士 腾讯大数据平台部科学实验中心数据负责人、专家工程师 胡明杰 StarRocks Contributor、腾讯高级工程师 刘志行 在 2022 年&#xff0c;腾讯 A/B Test 团队启动了海外商业化版本 ABetterChoice …
阅读更多...
企业网络两层和三层架构部署有何差异

企业网络两层和三层架构部署有何差异

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 厦门微思网络​​​​​​ https://www.xmws.cn华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom Linux\RHCE\RHCE 9.0\RHCA\ Oracle OC…
阅读更多...
html的全选反选

html的全选反选

一、实验题目 html实现选择框的全选和反选 二、实验代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>全选和反选</title></head><body><ul>兴趣爱好</ul><input id"all"…
阅读更多...
【AI】 AIOTSummary

【AI】 AIOTSummary

智能物联网（AIoT）是2018年兴起的概念，指系统通过各种信息传感器实时采集 各类信息（一般是在监控、互动、连接情境下的），在终端设备、边缘域或云中心 通过机器学习对数据进行智能化分析，包括定位、比对、预测、调度等。智能物联网（AIoT）是2018年兴起的概念，指系统通过…
阅读更多...
微软等开源评估ChatGPT、Phi、Llma等，统一测试平台

微软等开源评估ChatGPT、Phi、Llma等，统一测试平台

微软亚洲研究院、中国科学院自动化研究所、中国科学技术大学和卡内基梅隆大学联合开源了&#xff0c;用于评估、分析大语言模型的统一测试平台——PromptBench。 Prompt Bench支持目前主流的开源、闭源大语言模型&#xff0c;例如&#xff0c;ChatGPT、GPT-4、Phi、Llma1/2、G…
阅读更多...
基于虚拟机安装centos且远程连接

基于虚拟机安装centos且远程连接

基于虚拟机安装centos且远程连接 1、安装虚拟机 目前市面上的虚拟机种类有很多&#xff0c;我们可以选择自己熟悉的虚拟机进行安装&#xff0c;我在这里用的虚拟机是VMware。具体的安装过程很简单&#xff0c;一直点击下一步就可以了。因为VMware虚拟机需要激活&#xff0c;所…
阅读更多...
AI语音识别模块--whisper模块

AI语音识别模块--whisper模块

1.下载 ffmpeg&#xff0c;挑一个自己电脑系统的版本&#xff0c;下载&#xff0c;如我win64&#xff1a; 地址&#xff1a; Releases BtbN/FFmpeg-Builds GitHub 下载压缩包zip&#xff0c;到本地 解压安装&#xff0c;其实无需安装&#xff0c;只需把对应的目录下的bin&…
阅读更多...
【Matlab】在Matlab中安装优化工具yalmip的方法

【Matlab】在Matlab中安装优化工具yalmip的方法

最近博主想做一些关于多目标优化的问题&#xff0c;因为之前对Matlab有一定经验&#xff0c;所以直接在网上查找了如何在Matlab上实现多目标优化的文献&#xff0c;看到有人提到了yamip&#xff0c;于是博主就试着在Matlab中安装yamip&#xff0c;将其中遇到的问题和一些经验和…
阅读更多...
缓存学习实战篇

缓存学习实战篇

缓存练习题&#xff08;用户查询操作&#xff09; public List<ShopType> queryAllType() throws JsonProcessingException {//从缓存中查数据String shopTypeJson stringRedisTemplate.opsForValue().get("cache:shopType");//如果缓存命中&#xff0c;if (S…
阅读更多...
申请ZeroSSL泛域名域名证书 并部署阿里云测试

申请ZeroSSL泛域名域名证书 并部署阿里云测试

安装acme.sh 安装过程中可能会失败 多试几次就会成功 wget -O - https://raw.githubusercontent.com/acmesh-official/acme.sh/master/acme.sh | sh -s -- --install-online -m 你的邮箱gmail.com安装完成后重新加载 Bash&#xff1a; source ~/.bashrc然后也可以开启自动更…
阅读更多...
客户端请求服务器的步骤

客户端请求服务器的步骤

当我们在浏览器地址栏输入’http://www.xxx.com/api/xxx"时&#xff0c;客户端是如何找到服务器并发送请求的&#xff1f; 1.先找到服务器 a.检测浏览器缓存有没有缓存该域名对应的IP地址&#xff0c;有则通过IP地址取找服务器。 b.检测本地的hosts文件&#xff0c;是否有…
阅读更多...
FPGA 高端项目：基于 SGMII 接口的 UDP 协议栈，提供2套工程源码和技术支持

FPGA 高端项目：基于 SGMII 接口的 UDP 协议栈，提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的以太网方案本协议栈的 1G-UDP版本本协议栈的 10G-UDP版本本协议栈的 25G-UDP版本1G 千兆网 TCP-->服务器 方案1G 千兆网 TCP-->客户端 方案10G 万兆网 TCP-->服务器客户端 方案 3、该UDP协议栈性能4、详细设计方案设…
阅读更多...
NX二次开发PK获取对象类型

NX二次开发PK获取对象类型

PK_ENTITY_ask_class(),获取对象类型建议用这个函数&#xff0c;比较通用&#xff0c;包含所有对象类型&#xff0c;可以替代UF_MODL_ask_edge_type(),UF_MODL_ask_body_type(),UF_MODL_ask_face_type()等函数 PK_ENTITY_t entity; PK_CLASS_t PK_TYPE; PK_ENTITY_ask_class(e…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023