JavaScript数组全攻略

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》

​ 

目录

✨ 前言

数组的定义

创建数组

1. 数组字面量

2. Array构造函数

3. Array.of()

4. Array.from()

读取元素

写入元素

数组长度

清空数组

添加元素

删除元素

splice()

遍历数组

for循环

for...of循环

forEach()

map()/filter()/reduce()

搜索元素

indexOf()/lastIndexOf()

find()

findIndex()

includes()

排序数组

reverse()

sort()

数组和字符串转换

join()

split()

映射数组

map()

过滤数组

filter()

规约数组

reduce()

拷贝数组

浅拷贝

深拷贝

多维数组

稀疏数组

类数组对象

✨ 结语


 

✨ 前言

        对象允许存储键值集合,这很好。

        但很多时候我们发现还需要 有序集合,里面的元素都是按顺序排列的。例如,我们可能需要存储一些列表,比如用户、商品以及 HTML 元素等。

        这里使用对象就不是很方便了,因为对象不能提供能够管理元素顺序的方法。我们不能在已有的元素“之间”插入一个新的属性。这种场景下对象就不太适用了。

        这时一个特殊的数据结构数组(Array)就派上用场了,它能存储有序的集合。

数组的定义

数组是存储数据的有序列表,每个元素都有对应的索引位置。

创建数组

1. 数组字面量

使用[]创建数组最简单直观:

let arr = [1, 2, 3];

2. Array构造函数

可以指定数组长度或元素:

let arr1 = new Array(3); // 创建长度为3的空数组let arr2 = new Array(1, 2, 3); // 使用参数初始化数组

3. Array.of()

将参数转换为数组元素:

let arr = Array.of(1, 2, 3); // [1, 2, 3]

4. Array.from()

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

let arr = Array.from('foo'); // ['f', 'o', 'o']

 

读取元素

可以通过索引读取元素,从0开始:

let arr = [1, 2, 3];let first = arr[0]; // 1
let second = arr[1]; // 2

写入元素

同样通过索引可以修改写入元素:

let arr = [1, 2, 3];arr[0] = 'first'; 
arr[1] = 'second';

数组长度

length属性表示当前数组的长度:

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

清空数组

将length重置为0即可清空数组:

let arr = [1, 2, 3];
arr.length = 0; // 清空数组

 

添加元素

使用push()和unshift()可以向数组末尾或开头添加一个或多个元素:

let arr = [1, 2];arr.push(3); // 尾部添加一个元素
arr.unshift(0); // 头部添加一个元素

删除元素

使用pop()和shift()可以删除数组末尾或开头的元素:

let arr = [1, 2, 3];arr.pop(); // 删除最后一个元素
arr.shift(); // 删除第一个元素

 

splice()

splice()可以删除任意位置的元素:

let arr = [1, 2, 3, 4];arr.splice(2, 1); // 从索引2开始删除1个元素

splice()也可以实现插入、替换等功能。 

遍历数组

遍历数组常用的方法:

for循环

使用传统的for循环根据索引遍历:

for(let i = 0; i < arr.length; i++) {// arr[i] 访问元素
}

 

for...of循环

使用for...of直接遍历元素:

for(let a of arr) {// a 为数组元素
}

forEach()

数组的forEach()方法遍历:

arr.forEach(function(element) {// element为数组元素
});

 

map()/filter()/reduce()

数组的高阶函数也可以遍历数组

搜索元素

indexOf()/lastIndexOf()

搜索元素第一次或最后一次出现的索引:

let arr = [1, 2, 1];
arr.indexOf(1); // 0
arr.lastIndexOf(1); // 2

find()

找到第一个满足条件的元素:

let found = arr.find(x => x > 2);

 

findIndex()

找到第一个满足条件元素的索引:

let index = arr.findIndex(x => x > 2);

includes()

检查数组是否包含某元素:

[1,2,3].includes(2); // true

 

排序数组

reverse()

反转数组顺序:

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

sort()

默认按字符串排序:

let arr = [3, 1, 2];  
arr.sort(); // [1, 2, 3]

 可以传入比较函数自定义排序逻辑。

数组和字符串转换

join()

join()可以将数组转换为字符串:

let arr = [1, 2, 3];arr.join(); // "1,2,3"
arr.join('-'); // "1-2-3"

split()

split()可以将字符串分割成数组:

"a-b-c".split('-'); // ['a', 'b', 'c']

 

映射数组

map()

map()将数组元素映射到新数组:

let arr = [1, 2, 3]; let mapped = arr.map(x => x * 2); // [2, 4, 6]

不会改变原数组

过滤数组

filter()

filter()过滤数组元素:

let arr = [1, 2, 3];let filtered = arr.filter(x => x > 2); // [3]

 

规约数组

reduce()

reduce()可以将数组组合为单个值:

let arr = [1, 2, 3];let sum = arr.reduce((a, b) => a + b); // 6

拷贝数组

浅拷贝

使用slice()可以浅拷贝数组:

let arr2 = arr1.slice();

 

深拷贝

可以递归实现深拷贝:

function deepCopy(arr) {// 递归拷贝算法
}

多维数组

数组可以包含其他数组,形成多维数组:

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

 访问多维数组需要多层索引:

arr[1][0]; // 返回3

遍历多维数组需要嵌套循环:

for (let i = 0; i < arr.length; i++) {for (let j = 0; j < arr[i].length; j++) {// 遍历 sub array}
}

 

稀疏数组

当数组的元素不连续时,就会形成稀疏数组:

let arr = [];
arr[0] = 1;
arr[3] = 4;

数组的长度为4,但中间有空隙。

遍历稀疏数组需要检查元素是否存在:

for(let i = 0; i < arr.length; i++) {if(arr.hasOwnProperty(i)) {// 处理存在的元素}
}

 

类数组对象

拥有长度和索引元素的对象,类似于数组:

let obj = {0: 'first',1: 'second',length: 2
};

可以使用Array.from()转换为数组。 

✨ 结语

        

        本文全面介绍了JavaScript数组的各种功能点,现做一个简要总结。

        数组是一种存储数据的有序列表,可以通过索引进行访问。我们首先介绍了数组的各种创建方式。

        然后详细讲解了数组元素的读取和写入,以及获取数组长度和清空数组的方法。

        对于修改数组,我们涵盖了尾部/头部添加,中间删除,splice的用法。

        遍历数组常用的有for循环、forEach、for...of等。搜索数组可以用indexOf、find、includes等。

        排序数组有reverse和sort两种方法。转换数组可以用join和split。

        映射数组可以用map实现,过滤可以用filter实现。reduce可以将数组规约为一个值。

        拷贝数组有浅拷贝和深拷贝之分。多维数组和稀疏数组也需要特殊处理。

        这篇文章涵盖了数组的全方位用法分析,提供详细的代码示例,旨在成为JavaScript数组的完整指南。

        如果对数组的任何操作或用法不清楚,都欢迎在评论区提出,我会继续补充解释。希望这篇全面解析可以帮助大家全面掌握JavaScript数组的使用。

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

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

相关文章

Unity摇杆+键鼠控制位移、旋转

1、位移 首先我们找到两张图片&#xff0c;一个大圆一个小圆&#xff0c;像这样&#xff1a; 结构是这样的&#xff1a; 然后&#xff0c;新建一个场景&#xff0c;用胶囊去做玩家&#xff0c;摄像机在胶囊下&#xff0c;并且在场景中放两个cube作为参照物 像这样搭好后&#…

STM32——OLED实验

1.OLED简介 OLED&#xff0c;即有机发光二极管 OLED引脚说明 引脚说明&#xff1a; 1、CS&#xff1a;OLED片选信号&#xff08;低电平有效&#xff09; 2、WR&#xff1a;向OLED写入数据 3、RD&#xff1a;向OLED读取数据 4、D[7:0]&#xff1a;8位双向数据线&#xff0c;有…

API Monitor简易使用教程 监控Windows dll调用 监控Windows API调用 查看函数名,参数类型,参数,返回值

先看效果&#xff0c;可以显示所有dll及windows api的指定函数调用&#xff0c;以及传递的参数查看与修改。 官网下载 也有教程 我验证使用方法 1、API Filter窗口&#xff1a;选定要监听的dll函数或windows API&#xff0c;可以打断点 选中并右键勾上Breakpoint 选 Before C…

线程安全--互斥锁

文章目录 一.线程安全问题读取无效(脏)数据丢失更新线程安全的保证--操作的原子性 二.互斥锁及其实现原理互斥锁的实现原理pthread线程库提供的锁操作 三.死锁问题 一.线程安全问题 当多个线程并发地对同一个共享资源进行修改操作时,可能会引发数据读写错误(比如读取无效(脏)数…

【Databend】行列转化:一行变多行和简单分列

文章目录 数据准备和需求生成序列和分隔函数根据分隔符变多行JSON 数据简单分列总结 数据准备和需求 行列转化在实际工作中很常见&#xff0c;其中最常见的有一行变多行&#xff0c;有下面一份数据&#xff1a; drop table if exists fact_suject_data; create table if not …

设计模式之迭代器模式【行为型模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…

linux搭建SRS服务器

linux搭建SRS服务器 文章目录 linux搭建SRS服务器SRS说明实验说明搭建步骤推流步骤查看web端服务器拉流步骤final SRS说明 SRS&#xff08;simple Rtmp Server&#xff09;,是一个简单高效的实时视频服务器&#xff0c;支持RTMP/WebRTC/HLS/HTTP-FLV/SRT, 是国人自己开发的一款…

“所有伙食开销统计:轻松查看,智能管理你的餐饮支出“

你是否经常为伙食开销感到困扰&#xff0c;不知道如何有效控制和管理&#xff1f;现在&#xff0c;有了我们的伙食开销统计工具&#xff0c;这些问题将得到轻松解决&#xff01; 首先第一步&#xff0c;我们要进入晨曦记账本并在上方功能栏里选择“查看方式”。并在弹出来的列表…

c++算法之枚举

目录 解空间的类型 循环枚举解空间 例题 特别数的和 输入格式 输出格式 输入样例&#xff1a; 输出样例&#xff1a; 解 例题 反倍数 问题描述 输入格式 输出格式 样例输入 样例输出 解 例题 找到最多的数 解 枚举算法是一种基本的算法思想&#xff0c;它通过…

写一个文字滑动切换样式效果

<template><div class"mainrouter centerWindi"><h1>2024,马上暴富</h1></div> </template> <style lang"scss"> /* 居中 */ .centerWindi {apply flex justify-center items-center;text-align: center; }/* 路…

【Linux笔记】进程等待与程序替换

一、进程的终止 1、进程退出码 在讲解进程的终止之前&#xff0c;先要普及一下进程的退出码概念。 我们父进程之所以要创建子进程&#xff0c;就是为了让子进程运行不一样的任务&#xff0c;那么对于子进程执行的这个任务执行完毕后的结果是否正确或者是否出差错&#xff0c…

宝塔面板安装MySQL8数据库

第一步&#xff1a;搜索mysql 第二步: 点击安装 我这里选择安装8版本 第三步&#xff1a;给宝塔配置mysql防火墙 第四步&#xff1a;修改数据库密码 第五步&#xff1a;想要使用navicat连接 需要修改root的权限 &#xff08;1&#xff09;使用secureCRT先登录mysql (2) 输入u…