JavaScript数组类型详解

news2025/2/12 19:10:29

目录

一、数组的基本概念

二、数组的类型

1. 基本数组类型:

2. 数字数组:

3. 字符串数组:

4. 对象数组:

5. 类型数组(TypedArray):

6. ArrayBuffer数组:

7. 类数组(类数组对象):

三、数组的特点

四、数组的创建方式

1. 字面量方式

2. Array()构造函数

3. 扩展运算符

4. Array.from()方法

五、数组的属性与方法

1. 属性:

2. 常用方法:

(1)添加元素

(2)删除元素

(3)插入元素

(4)合并与分割

(5)查找方法

(6)遍历方法

(7)排序与反转

(8)数组与字符串的转换


一、数组的基本概念

JavaScript中的数组是一种复合数据类型,用于存储一组有序的数据,每个数据称为元素(Element),每个元素都有一个唯一的索引(Index),从0开始计数。数组可以包含任意类型的数据,包括数字、字符串、布尔值、对象等。

二、数组的类型

1. 基本数组类型:

基本数组是JavaScript中最常见的数组类型,可以存储任意数据类型的元素,包括数字、字符串、布尔值、对象、函数等。这种数组是基于对象的,通过索引访问元素,其长度是动态可变的。

2. 数字数组:

数字数组仅包含数字值,通常用于需要数值计算的场景。数字数组的内存存储是连续的,因此访问速度较快。

3. 字符串数组:

字符串数组只包含字符串类型的元素,字符串数组的每个元素都是一个字符串对象,可以使用索引直接访问字符串内容。

4. 对象数组:

对象数组存储的是对象类型的元素,每个对象可以包含不同的属性和值,常用于存储复杂的数据结构。

5. 类型数组(TypedArray):

类型数组是JavaScript中的一种特殊数组类型,用于处理固定位宽的数值数据。类型数组的内存布局类似于C语言中的数组,适合高性能计算和数据传输。

6. ArrayBuffer数组:

ArrayBuffer是JavaScript中用于处理二进制数据的底层数据结构,提供了底层的内存操作能力,通常与类型数组结合使用。

7. 类数组(类数组对象):

类数组对象虽然不是真正的数组,但它们具有类似数组的特性,如拥有length属性和索引访问方式,常见的类数组包括DOM节点列表、函数参数等。

三、数组的特点

  1. 动态大小 JavaScript数组的长度是动态的,可以在运行时随时增加或减少元素,而无需预先指定大小。例如,可以通过push方法添加元素,通过pop方法移除元素,或者直接修改数组长度属性来调整数组大小。

  2. 异构元素 数组中的元素可以是任意类型,包括数字、字符串、布尔值、对象、函数等,这使得JavaScript数组比其他语言中的数组更加灵活。

  3. 索引访问 数组的元素可以通过索引访问,索引从0开始,通过索引可以方便地访问、修改或删除数组中的元素。数组的索引是基于整数的,最大索引值为2^32-2(即4294967294),这是JavaScript引擎实现的限制。

  4. 稀疏数组 数组可以是稀疏的,即数组中存在空位(未赋值的索引),稀疏数组的长度属性会返回所有已赋值元素的数量,但未赋值的索引不会被计算在内。

  5. 继承自Array.prototype JavaScript数组是Array.prototype的实例,因此继承了Array.prototype提供的方法,如sort()reverse()filter()等,这些方法为数组操作提供了丰富的功能。

  6. 内置方法 JavaScript数组提供了大量内置方法,用于处理数组中的数据。

  7. 字面量语法 数组可以通过字面量语法创建,这种方式简洁且直观。

  8. 索引作为属性名 数组的索引也可以作为对象的属性名使用。例如,let arr = [1, 2, 3]; console.log(arr[0]);等同于let arr = {0: 1, 1: 2, 2: 3}; console.log(arr[0]);

  9. 性能优化 在现代JavaScript引擎(如Chrome V8)中,数组的实现经过优化,支持两种存储模式:Fast Elements(快速元素)和Dictionary Elements(字典元素)。这些优化提升了数组操作的效率。

  10. 不支持多维数组 虽然JavaScript不直接支持多维数组,但可以通过嵌套数组的方式实现多维数据结构。

  11. 自动更新长度属性 当向数组添加新元素时,JavaScript会自动更新数组的长度属性。

  12. 稀疏数组的处理 对于稀疏数组,可以通过设置长度属性来截断多余的空间。

四、数组的创建方式

JavaScript提供了多种创建数组的方式:

1. 字面量方式

使用方括号[]直接定义数组。

 let arr = [1, 2, 3, 'hello', true];

2. Array()构造函数

通过new Array()创建数组,可以指定长度或直接传入参数。

 let arr = new Array(3); // 创建长度为3的数组
 let arr2 = new Array(1, 2, 3); // 创建包含指定元素的数组

3. 扩展运算符

使用...符号创建数组。

 let arr = [...[1, 2, 3]];

4. Array.from()方法

将类数组对象或可迭代对象转换为数组。

五、数组的属性与方法

1. 属性:

length:返回数组的长度。

 let arr = [1, 2, 3];
 console.log(arr.length); // 输出:3

2. 常用方法:

(1)添加元素

push(): 在数组末尾添加一个或多个元素,并返回新长度。

 let arr = [1, 2, 3];
 arr.push(4);
 console.log(arr); // 输出:[1, 2, 3, 4]

unshift(): 在数组开头添加一个或多个元素,并返回新长度。

 let arr = [1, 2, 3];
 arr.unshift(0);
 console.log(arr); // 输出:[0, 1, 2, 3]

(2)删除元素

pop(): 删除数组末尾的元素,并返回被删除的元素。

 let arr = [1, 2, 3];
 console.log(arr.pop()); // 输出:3
 console.log(arr); // 输出:[1, 2]

shift(): 删除数组开头的元素,并返回被删除的元素。

 let arr = [1, 2, 3];
 console.log(arr.shift()); // 输出:1
 console.log(arr); // 输出:[2, 3]

(3)插入元素

splice(index, deleteCount, ...items):从指定位置插入一个或多个元素,还可以用于删除和替换元素。

  • index:必需。规定从何处添加/删除元素。

  • deleteCount:必需。要删除的元素数量。如果设置为 0,则不会删除任何元素。

  • ...items:可选。要添加到数组的新元素。

 let arr = [1, 2, 4, 5];
 arr.splice(2, 0, 3); // 在索引2的位置插入元素3
 console.log(arr); // 输出: [1, 2, 3, 4, 5]

(4)合并与分割

concat():合并数组,返回新数组。

slice(start, end):截取子数组(不修改原数组)。

 console.log([1, 2].concat([3, 4])); // 输出:[1, 2, 3, 4]
 console.log([1, 2, 3].slice(1)); // 输出:[2, 3]

(5)查找方法

indexOf(): 查找指定元素在数组中的索引。

 let arr = [1, 2, 3];
 console.log(arr.indexOf(2)); // 输出:1

(6)遍历方法

forEach(): 遍历数组中的每个元素。

 let arr = [1, 2, 3];
 arr.forEach((element) => {
     console.log(element);
 });

(7)排序与反转

sort():对数组进行排序(默认按字符串Unicode排序)。

reverse():反转数组顺序。

 let arr = [3, 1, 2];
 console.log(arr.sort()); // 输出:[1, 2, 3]
 console.log(arr.reverse()); // 输出:[1, 2, 3]

(8)数组与字符串的转换

join(separator):按分隔符拼接为字符串。

split(separator):按分隔符分割为数组。

 ["a", "b", "c"].join("-"); // 输出:"a-b-c"
 "a,b,c".split(","); // 输出:["a", "b", "c"]

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

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

相关文章

【实战AI】利用deepseek 在mac本地部署搭建个人知识库

之前的文章中实现了本地通过ollma 部署deepseek R1:14b 模型,这里我想继续实现个人知识库,方便自己文档,数据的检索; 下载anythingLLM 地址: https://anythingllm.com/desktop 下载安装即可&#xff1b…

Spring Boot 3.4 中 MockMvcTester 的新特性解析

引言 在 Spring Boot 3.4 版本中,引入了一个全新的 MockMvcTester 类,使 MockMvc 测试可以直接支持 AssertJ 断言。本文将深入探讨这一新特性,分析它如何优化 MockMvc 测试并提升测试的可读性。 Spring MVC 示例 为了演示 MockMvcTester 的…

【openresty服务器】:源码编译openresty支持ssl,增加service系统服务,开机启动,自己本地签名证书,配置https访问

1,openresty 源码安装,带ssl模块 https://openresty.org/cn/download.html (1)PCRE库 PCRE库支持正则表达式。如果我们在配置文件nginx.conf中使用了正则表达式,那么在编译Nginx时就必须把PCRE库编译进Nginx&#xf…

互联网大厂面试高频题-操作系统部分

前言 哈喽各位小伙伴们,本期小梁给大家带来了互联网大厂面试中操作系统部分的高频题,本文会以通俗易懂的语言以及图解形式描述,希望能给大家的面试带来一点帮助,祝大家offer拿到手软!!! 话不多说,我们立刻进入本期正题! 1 说说什么是操作系统吧。 答…

redis之数据库

文章目录 服务器中的数据库切换数据库数据库键空间读写键空间时的维护操作 设置键的生存时间或过期时间保存过期时间过期键的判定过期键删除策略清性删除策略的实现定期删除策略的实现 总结 服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redisServer结…

Vue3(1)

一.create-vue // new Vue() 创建一个应用实例 > createApp() // createRouter() createStore() // 将创建实例进行了封装,保证每个实例的独立封闭性import { createApp } from vue import App from ./App.vue// mount 设置挂载点 #app (id为app的盒子) createA…

01.Docker 概述

Docker 概述 1. Docker 的主要目标2. 使用Docker 容器化封装应用程序的意义3. 容器和虚拟机技术比较4. 容器和虚拟机表现比较5. Docker 的组成6. Namespace7. Control groups8. 容器管理工具9. docker 的优缺点10. 容器的相关技术 docker 官网: http://www.docker.com 帮助文档…

从零搭建:Canal实时数据管道打通MySQL与Elasticsearch

Canal实时同步Mysql Binlog至 Elasticsearch 文章目录 Canal实时同步Mysql **Binlog**至**Elasticsearch** 一. 环境准备1.环境检查检查Mysql是否开启BinLog开启Mysql BinlogJava环境检查 2.新建测试库和表3.新建Es索引 二.**部署 Canal Server****2.1 解压安装包****2.2 配置 …

《战神:诸神黄昏》游戏闪退后提示弹窗“d3dx9_43.dll缺失”“找不到d3dx11_43.d”该怎么处理?

宝子们,是不是在玩《战神:诸神黄昏》的时候,突然弹出一个提示:“找不到d3dx9_43.dll”或者“d3dx11_43.dll缺失”?这可真是让人着急上火!别慌,今天就给大家唠唠这个文件为啥会丢,还有…

Ollama本地部署DeepSeek(Mac)

准备工作 DeepSeek对比 DeepSeek-r1 DeepSeek-R1的多个版本:加上2个原装671B的,总计8个参数版本 DeepSeek-R1 671B DeepSeek-R1-Zero 671B DeepSeek-R1-Distill-Llama-70B DeepSeek-R1-Distill-Qwen-32B DeepSeek-R1-Distill-Qwen-14B DeepSeek-R1-Di…

arm linux下的中断处理过程。

本文基于ast2600 soc来阐述,内核版本为5.10 1.中断gic初始化 start_kernel() -> init_IRQ() -> irqchip_init() of_irq_init()主要是构建of_intc_desc. 489-514: 从__irqchip_of_table中找到dts node中匹配的of_table(匹配matches->compatible)&#xf…

Docker的深入浅出

目录 Docker引擎 Docker镜像 (镜像由多个层组成,每层叠加之后,从外部看来就如一个独立的对象。镜像内部是一个精简的操作系统(OS),同时还包含应用运行所必须的文件和依赖包) Docker容器 应用容器化--Docker化 最佳…

内存映射工作原理和适用场景

Linux 内存映射(Memory Mapping)是一种将文件或其他资源直接映射到进程虚拟内存地址空间的机制,允许进程像访问内存一样访问文件或设备。这种机制通过 mmap() 系统调用实现,常用于高效文件操作、进程间共享内存等场景。 1. 内存映…

自动驾驶超声波雷达:市场潜力爆发,引领未来出行新趋势

在自动驾驶技术的飞速发展中,自动驾驶超声波雷达作为一项关键技术,正逐渐崭露头角,其重要性及市场增长潜力不容忽视。本文将深入探讨自动驾驶超声波雷达的重要性、市场增长趋势、显著优势、全球市场规模与驱动因素、主要市场参与者以及不同地…

41.兼职网站管理系统(基于springbootvue的Java项目)

目录 1.系统的受众说明 2.相关技术 2.1 B/S架构 2.2 Java技术介绍 2.3 mysql数据库介绍 2.4 Spring Boot框架 3.系统分析 3.1 需求分析 3.2 系统可行性分析 3.2.1技术可行性:技术背景 3.2.2经济可行性 3.2.3操作可行性: 3.3 项目设计目…

Linux ARM64 将内核虚拟地址转化为物理地址

文章目录 前言一、通用方案1.1 kern_addr_valid1.2 __pa 二、ARM64架构2.1 AT S1E1R2.2 is_kernel_addr_vaild2.3 va2pa_helper 三、demo演示参考资料 前言 本文介绍一种通用的将内核虚拟地址转化为物理地址的方案以及一种适用于ARM64 将内核虚拟地址转化为物理地址的方案&…

spring学习(使用spring加载properties文件信息)(spring自定义标签引入)

目录 一、博客引言。 二、基本配置准备。 (1)初步分析。 (2)初始spring配置文件。 三、spring自定义标签的引入。 (1)基本了解。 (2)引入新的命名空间:xmlns:context。 &…

Flutter项目试水

1基本介绍 本文章在构建您的第一个 Flutter 应用指导下进行实践 可作为项目实践的辅助参考资料 Flutter 是 Google 的界面工具包,用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中,您将构建以下 Flutter 应用。 该应用可以…

Linux(Ubuntu)安装pyenv和pyenv-virtualenv

Ubuntu安装pyenv和pyenv-virtualenv 安装 pyenv1. 下载 pyenv2. 配置环境变量3. 重启 Shell4. 安装依赖5.检测是否安装成功 安装 pyenv-virtualenv1. 安装 pyenv-virtualenv2. 配置环境变量3. 重启 Shell pyenv 的使用1. 查看可安装的 Python 版本2. 安装指定版本的 Python3. 查…

调用DeepSeek官方的API接口

效果 前端样式体验链接:https://livequeen.top/deepseekshow 准备工作 1、注册deepseek官网账号 地址:DeepSeek 点击进入右上角【API开放平台】,并进行账号注册。 2、注册完成后,依次点击【API keys】-【生成API key】&#x…