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

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. 发送日期字符串而非时间戳 在前端使用日期选择器&#xff08;如 el-date-picker&#xff09;获取日期后&#xff0c;将日期转换为特定格式的字符串&#xff08;如 YYYY-MM-DD&#xff09;发送给后端&#xff0c;避免直接发送带有时区信息的时间戳或日期对象。这样…...

mmsegmentation自己的数据集+不同网络的config配对

比如说我们要用这个网络&#xff1a; 我们发现他内部继承了很多类&#xff0c;要想配对我们的数据集&#xff0c;就要进行父类的修改。 ../_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 官方网站&#xff1a;https://go.dev/ 点击下一步&#xff0c;查看官方手册怎么用 https://tour.go-zh.org/welcome/1 手册中的内容比较简单 go语言是以包的形式化管理函数的 搜索包名…...

ram的使用——初始化很重要

背景 ram是非常常用的ip&#xff0c;前人的经验告诉我们&#xff0c;如果不对ram进行初始化直接读写&#xff0c;不定态在实际上板时会出现不可预知的问题。 我们需要对ram进行初始化写0操作&#xff0c;代码如下。需要注意&#xff0c;复位释放时立马写入可能存在复位抖动的…...

doris:最佳实践

异步物化视图使用原则​ 时效性考虑&#xff1a; 异步物化视图通常用于对数据时效性要求不高的场景&#xff0c;一般是 T1 的数据。如果时效性要求高&#xff0c;应考虑使用同步物化视图。 加速效果与一致性考虑&#xff1a; 在查询加速场景&#xff0c;创建物化视图时&#x…...

[创业之路-299]:图解金融体系结构

一、金融体系结构 1.1 概述 金融体系结构是一个国家以行政的、法律的形式和运用经济规律确定的金融系统结构&#xff0c;以及构成这个系统的各种类型的银行和非银行金融机构的职能作用和相互关系。以下是对金融体系结构的详细分析&#xff1a; 1、金融体系的构成要素 现代金…...

RL--2

强化学习当中最难的两个点是&#xff1a; 1.reward delay&#xff1b; 2.agent的行为会影响到之后看到的东西&#xff0c;所以agent要学会探索世界&#xff1b; 关于强化学习的不同类型&#xff0c;可以分为以下三种&#xff1a; 一种是policy based&#xff1a;可以理解为它是…...

[JVM篇]分代垃圾回收

分代垃圾回收 分代收集法是目前大部分 JVM 所采用的方法&#xff0c;其核心思想是根据对象存活的不同生命周期将内存划分为不同的域&#xff0c;一般情况下将 GC 堆划分为老生代(Tenured/Old Generation)和新生代(Young Generation)。老生代的特点是每次垃圾回收时只有少量对象…...

Dify本地安装

目录 方式一docker安装&#xff1a; 方式二源码安装&#xff1a; Dify本地安装可以用docker方式&#xff0c;和源码编译方式。 先到云厂商平台申请一台Centos系统云主机&#xff0c;网络选择海外&#xff0c;需要公网IP&#xff0c;再按一下流程操作&#xff1a; 方式一doc…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...