JavaScript 内置对象-数组对象
在JavaScript中,数组(Array)是一种非常重要的数据结构,它允许我们以列表的形式存储多个值,并提供了丰富的内置方法来操作这些值。无论是处理简单的数值集合还是复杂的对象数组,数组对象都能提供强大的支持。本文将详细介绍数组对象的创建、基本操作以及一些常用的高级方法。
一、创建数组
使用字面量语法
最常见也是最直接的方式是使用方括号[]来创建一个数组:
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits); // 输出: ["Apple", "Banana", "Cherry"]
使用构造函数
另一种方式是通过调用 Array 构造函数来创建数组:
let numbers = new Array(1, 2, 3);
console.log(numbers); // 输出: [1, 2, 3]
注意:当只传递一个参数给 Array 构造函数时,这个参数会被解释为数组的长度而不是元素值。
二、访问和修改数组元素
数组中的每个元素都有对应的索引位置,从0开始计数。可以通过索引来访问或修改数组中的元素。
访问元素
let colors = ['Red', 'Green', 'Blue'];
console.log(colors[0]); // 输出: Red
console.log(colors[2]); // 输出: Blue
修改元素
colors[1] = 'Yellow';
console.log(colors); // 输出: ["Red", "Yellow", "Blue"]
三、常用数组方法
添加和删除元素
- push():向数组末尾添加一个或多个元素,并返回新的长度。
- pop():移除并返回数组的最后一个元素。
- unshift():向数组开头添加一个或多个元素,并返回新的长度。
- shift():移除并返回数组的第一个元素。
let stack = [];
stack.push('First');
stack.push('Second');
console.log(stack.pop()); // 输出: Second
console.log(stack.shift()); // 输出: First
合并与分割
- concat():合并两个或更多数组,不会改变现有数组,而是返回一个新数组。
- join():将所有数组元素连接成一个字符串,默认使用逗号作为分隔符。
let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];
let combined = arr1.concat(arr2);
console.log(combined.join('-')); // 输出: a-b-c-d
搜索与查找
- indexOf():返回第一个找到的指定元素的位置,如果没有找到则返回-1。
- includes():判断数组是否包含某个指定的值,返回布尔值。
- find():返回数组中满足提供的测试函数的第一个元素的值。否则返回
undefined。 - findIndex():返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
let numbers = [1, 2, 3, 4];
console.log(numbers.indexOf(3)); // 输出: 2
console.log(numbers.includes(5)); // 输出: false
console.log(numbers.find(x => x > 2)); // 输出: 3
console.log(numbers.findIndex(x => x === 4)); // 输出: 3
排序
- sort():对数组元素进行排序,默认按字符串顺序升序排列。可以通过传递比较函数自定义排序规则。
- reverse():颠倒数组中元素的顺序。
let nums = [4, 2, 6, 8, 1];
nums.sort((a, b) => a - b);
console.log(nums); // 输出: [1, 2, 4, 6, 8]
nums.reverse();
console.log(nums); // 输出: [8, 6, 4, 2, 1]
迭代
- forEach():对数组的每一个元素执行一次提供的函数。
- map():创建一个新数组,其结果是对原数组中的每个元素都执行提供的函数后的返回值。
- filter():创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
- reduce():对数组中的每个元素执行一个reducer函数(由你提供),将其结果汇总为单个返回值。
let values = [1, 2, 3, 4];
values.forEach(value => console.log(value));
let doubled = values.map(value => value * 2);
console.log(doubled); // 输出: [2, 4, 6, 8]
let even = values.filter(value => value % 2 === 0);
console.log(even); // 输出: [2, 4]
let sum = values.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出: 10
四、数组的高级特性
扁平化数组
- flat():按照一个可指定的深度递归遍历数组,并将所有元素与子数组元素合并为一个新数组返回。
let nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat(2)); // 输出: [1, 2, 3, 4, 5, 6]
填充数组
- fill():用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
let empty = [,,];
empty.fill(7);
console.log(empty); // 输出: [7, 7, 7]
结语
感谢您的阅读!如果您对JavaScript的数组对象或者其他相关话题有任何疑问或见解,欢迎继续探讨。
相关文章:
JavaScript 内置对象-数组对象
在JavaScript中,数组(Array)是一种非常重要的数据结构,它允许我们以列表的形式存储多个值,并提供了丰富的内置方法来操作这些值。无论是处理简单的数值集合还是复杂的对象数组,数组对象都能提供强大的支持。…...
Qt——连接MySQL数据库之ODBC的方法详细总结(各版本大同小异,看这一篇就够了)
【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》 《实用硬件方案设计》 《结构建模设…...
进程令牌:Windows 安全架构中的关键元素
一、进程令牌概述 进程令牌(Process Token)是 Windows 操作系统中一个重要的安全机制,它包含了与进程安全上下文相关的详细信息。每个进程在执行时都会关联一个进程令牌,令牌用于确定该进程可以访问哪些资源以及能执行哪些操作。…...
基于springboot的超时代停车场管理平台(源码+文档)
大家好我是风歌,曾担任某大厂java架构师,如今专注java毕设领域。今天要和大家聊的是一款基于springboot的超时代停车场管理平台。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 基于Spring Boot的超时代停车场…...
缓存穿透、缓存击穿、缓存雪崩的区别与解决方案
1. 缓存穿透(Cache Penetration) 定义:大量请求查询 数据库中不存在的数据,导致请求绕过缓存直接访问数据库,造成数据库压力过大。 场景: 恶意攻击:例如用不存在的用户ID频繁请求。 业务误操作…...
箭头函数的this指向谁
先看1个重要原则: 由Vue管理的函数,一定不要写箭头函数,箭头函数的this就不再是Vue实例了 箭头函数的 this 指向在定义时确定,继承自外层作用域(即定义时的上下文)的 this,且无法通过 call、app…...
【愚公系列】《Python网络爬虫从入门到精通》012-字符串处理
标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…...
【Python】01-基础
目录 1、命令行简介1.1 命令行结构1.2 常用dos指令 2、环境变量2.1 查看2.2 添加2.3 修改2.4 删除 3、path环境变量4、进制5、文本文件和字符集6、Sublime使用 1、命令行简介 命令行就是文本交互页面,通过命令行可以使用指令来操作计算机 1.1 命令行结构 版本及版…...
Java-DFS(深度优先搜索)
原理 深度优先搜索的基本思路是从一个节点开始,依次访问它的每一个邻居节点,直到达到一个没有未被访问的邻居的节点为止。这个过程可以使用递归或者栈来实现。其特点是尽可能深入每一个分支,然后再回溯。 DFS算法常用于解决以下类型的问题&…...
AI大模型编程能力对比:DeepseekClaudeGemini
在当今快速发展的技术领域,人工智能(AI)模型在编程和数据处理方面的应用越来越广泛。不同的AI模型因其独特的设计理念和技术优势,适用于不同的编程任务和场景。 本文将对三种主流的AI模型——DeepSeek v3、Gemini Flash 2.0 和 C…...
用C++实现点到三角形最小距离的计算
1、全部代码 #include <iostream> #include <cmath> #include <array> #include <algorithm>// 二维点结构体 struct Point2D {double x, y;Point2D(double x 0, double y 0) : x(x), y(y) {} };// 计算点到线段的最小距离 double pointToSegmen…...
解决前后端日期传输因时区差异导致日期少一天的问题
前端处理 1. 发送日期字符串而非时间戳 在前端使用日期选择器(如 el-date-picker)获取日期后,将日期转换为特定格式的字符串(如 YYYY-MM-DD)发送给后端,避免直接发送带有时区信息的时间戳或日期对象。这样…...
mmsegmentation自己的数据集+不同网络的config配对
比如说我们要用这个网络: 我们发现他内部继承了很多类,要想配对我们的数据集,就要进行父类的修改。 ../_base_/models/deeplabv3_unet_s5-d16.py, ../_base_/datasets/drive.py,../_base_/default_runtime.py, ../_base_/schedules/schedule…...
Golang官方编程指南
文章目录 1. Golang 官方编程指南2. Golang 标准库API文档 1. Golang 官方编程指南 Golang 官方网站:https://go.dev/ 点击下一步,查看官方手册怎么用 https://tour.go-zh.org/welcome/1 手册中的内容比较简单 go语言是以包的形式化管理函数的 搜索包名…...
ram的使用——初始化很重要
背景 ram是非常常用的ip,前人的经验告诉我们,如果不对ram进行初始化直接读写,不定态在实际上板时会出现不可预知的问题。 我们需要对ram进行初始化写0操作,代码如下。需要注意,复位释放时立马写入可能存在复位抖动的…...
doris:最佳实践
异步物化视图使用原则 时效性考虑: 异步物化视图通常用于对数据时效性要求不高的场景,一般是 T1 的数据。如果时效性要求高,应考虑使用同步物化视图。 加速效果与一致性考虑: 在查询加速场景,创建物化视图时&#x…...
[创业之路-299]:图解金融体系结构
一、金融体系结构 1.1 概述 金融体系结构是一个国家以行政的、法律的形式和运用经济规律确定的金融系统结构,以及构成这个系统的各种类型的银行和非银行金融机构的职能作用和相互关系。以下是对金融体系结构的详细分析: 1、金融体系的构成要素 现代金…...
RL--2
强化学习当中最难的两个点是: 1.reward delay; 2.agent的行为会影响到之后看到的东西,所以agent要学会探索世界; 关于强化学习的不同类型,可以分为以下三种: 一种是policy based:可以理解为它是…...
[JVM篇]分代垃圾回收
分代垃圾回收 分代收集法是目前大部分 JVM 所采用的方法,其核心思想是根据对象存活的不同生命周期将内存划分为不同的域,一般情况下将 GC 堆划分为老生代(Tenured/Old Generation)和新生代(Young Generation)。老生代的特点是每次垃圾回收时只有少量对象…...
Dify本地安装
目录 方式一docker安装: 方式二源码安装: Dify本地安装可以用docker方式,和源码编译方式。 先到云厂商平台申请一台Centos系统云主机,网络选择海外,需要公网IP,再按一下流程操作: 方式一doc…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
Vue3 PC端 UI组件库我更推荐Naive UI
一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用,前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率,还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库(Naive UI、Element …...
TJCTF 2025
还以为是天津的。这个比较容易,虽然绕了点弯,可还是把CP AK了,不过我会的别人也会,还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
渗透实战PortSwigger Labs指南:自定义标签XSS和SVG XSS利用
阻止除自定义标签之外的所有标签 先输入一些标签测试,说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时(如通过点击或键盘导航&…...
