JavaScript数组(Array对象)应用介绍

news/2026/1/24 16:20:13/文章来源:https://www.cnblogs.com/Pro-Cyon/p/19526842

.一、Array数组基础

在JavaScript中,数组没有原始类型,可以使用Array对象,Array对象具有以下特征:

1)可调整大小的,并且可以包含不同的数据类型。

2)不是关联数组,因此,不能使用任意字符串作为索引访问数组元素,但必须使用非负整数(或它们各自的字符串形式)作为索引访问。

3)索引从 0 开始:数组的第一个元素在索引 0 处,第二个在索引 1 处,以此类推,最后一个元素是数组的 length 属性减去 1 的值。

4)复制操作创建浅拷贝。(所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝,而不是深拷贝)。

二、Array方法或属性

(一)、创建新数组

1. new定义新数组

作用:创建空白或包含元素的具有可变长度的新数组

返回值:新数组

let ary = new Array(); //建议使用

let ary = []; //不建议使用

let ary = [1, 2, 3];

const ary = [1, 2, 3];//固定变量,不可修改

2. Array.from()按可迭代对象创建数组

作用:从类数组对象或可迭代对象创建新数组

返回值:新数组

改变原数组:不适用

let set = new Set([1, 2, 3]);

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

let str = 'hello';

let arr2 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

3. Array.of()按元素创建新数组

作用:创建一个具有可变数量参数的新数组

返回值:新数组

改变原数组:不适用

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

let single = Array.of(7); // [7] (与 new Array(7)不同)

4. concat()拼接数组与元素创建新数组

作用:合并两个或多个数组

返回值:新数组

改变原数组:否

let ary1 = [1, 2];

let ary2 = [3, 4];

let newAry = ary1.concat(ary2); // [1, 2, 3, 4]

添加元素

var ary3 = [1,2,3,4,5];

var ary4 = ary3.concat(6,7); //[1,2,3,4,5,6,7]

5. slice()数组按索引段创建新数组

作用:提取数组的一部分

语法:slice(start,end)

返回值:新数组

改变原数组:否

let ary1 = [1, 2, 3, 4, 5];

let ary2 = ary1.slice(1, 4); // [2, 3, 4] (包含开始索引,不包含结束索引)

6. filter()数组按条件创建新数组

作用:创建一个新数组,包含通过测试的所有元素

返回值:新数组

改变原数组:否

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

let evens = arr.filter(x => x % 2 === 0); // [2, 4]

7. flat()嵌套数组拉平创建新数组

作用:将嵌套数组"拉平"

返回值:新数组

改变原数组:否

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

let flat1 = arr.flat(); // [1, 2, [3, [4]]]

let flat2 = arr.flat(2); // [1, 2, 3, [4]]

let flatAll = arr.flat(Infinity); // [1, 2, 3, 4]

8 map()数组映射后创建新数组

作用:创建一个新数组,其结果是该数组中的每个元素调用函数后的返回值

返回值:新数组

改变原数组:否

let arr = [1, 2, 3];

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

9. flatMap()数组映射组合后创建新数组

作用:先映射每个元素,然后将结果拉平一层

返回值:新数组

改变原数组:否

let arr = [1, 2, 3];

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

(二)、数组元素变更

1. push()末尾添加元素

作用:在数组末尾添加一个或多个元素

返回值:新数组的长度

改变原数组:是

let ary = [1, 2];

let length = ary.push(3, 4); // ary = [1, 2, 3, 4], length = 4

2. unshift()开头添加元素

作用:在数组开头添加一个或多个元素

返回值:新数组的长度

改变原数组:是

let ary = [1, 2];

let length = ary.unshift(0); // ary = [0, 1, 2], length = 3

3. delete []删除指定索引位置的元素

作用:删除数组某索引位置的元素

返回值:无

改变原数组:是

let ary = [1, 2];

delete ary[1]; // ary= [1]

4. pop()删除最后的元素

作用:删除数组的最后一个元素

返回值:被删除的元素

改变原数组:是

let ary = [1, 2, 3];

let last = ary.pop(); // ary = [1, 2], last = 3

5 shift()删除开头的元素

作用:删除数组的第一个元素

返回值:被删除的元素

改变原数组:是

let ary = [1, 2, 3];

let first = ary.shift(); // ary = [2, 3], first = 1

6. splice()替换索引位置段为元素组

作用:添加/删除数组中的元素

返回值:包含被删除元素的数组

改变原数组:是

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

// 从索引2开始删除1个元素

let ary2 = ary1.splice(2, 1); // ary1 = [1, 2, 4], ary2 = [3]

// 从索引1开始删除0个元素,添加'a', 'b'

ary1.splice(1, 0, 'a', 'b'); // ary1 = [1, 'a', 'b', 2, 4]

7. fill()替换索引位置段为某元素

作用:用固定值填充数组中的元素

返回值:修改后的数组

改变原数组:是

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

arr.fill(0, 1, 3); // arr = [1, 0, 0, 4] (从索引1到3填充0)

8. reverse()数组顺序反转

作用:反转数组中元素的顺序

返回值:反转后的数组

改变原数组:是

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

ary.reverse(); // ary = [3, 4, 2, 1]

9. sort()元素进行排序

作用:对数组元素进行排序

语法:sort([orderfunction])

返回值:排序后的数组

改变原数组:是

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

ary.sort(); // ary = [1, 2, 3, 4]

// 自定义排序

arr.sort((a, b) => b - a); // 降序排列 arr = [4, 3, 2, 1]

10. copyWithin()元素复制向索引位置

作用:浅复制数组的一部分到同一数组中的另一个位置

返回值:修改后的数组

改变原数组:是

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

// 将索引3到4的元素复制到索引0的位置

arr.copyWithin(0, 3, 5); // arr = [4, 5, 3, 4, 5]

 

(三)、数组信息判断

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

作用:判断一个值是否为数组

返回值:布尔值

改变原数组:不适用

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

Array.isArray({}); // false

Array.isArray('abc'); // false

2. includes()判断元素是否存在

作用:判断数组是否包含某个值

返回值:布尔值

改变原数组:否

let ary = [1, 2, 3];

let hasTwo = ary.includes(2); // true

let hasFour = ary.includes(4); // false

3. some()判断有符合条件的元素

作用:测试数组中是否至少有一个元素通过了测试函数

返回值:布尔值

改变原数组:否

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

let hasEven = arr.some(x => x % 2 === 0); // true

4. every()判断所有元素符合条件

作用:测试数组的所有元素是否都通过了测试函数

返回值:布尔值

改变原数组:否

let arr = [1, 30, 39, 29, 10, 13];

let allBelow40 = arr.every(x => x < 40); // true

(四)、数组信息获取

1. length获取数组长度

返回值:数组的长度

let ary = [1, 2];

let len=ary.length; // 2

2. []获取索引位置的元素

语法:uivos(index)

参数:uivos为数组变量,index为查询元素位置,首个元素位置为0

返回值:指定位置的元素

let ary=[1,2,3];

let value = ary[0]; //返回1

3. at()获取索引位置的元素

作用:返回指定索引处的元素(支持负索引)

返回值:元素或undefined

改变原数组:否

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

let item1 = arr.at(2); // 3

let item2 = arr.at(-1); // 5

4. find()获取满足条件的首个元素

作用:返回数组中满足测试函数的第一个元素

返回值:元素或undefined

改变原数组:否

let arr = [5, 12, 8, 130, 44];

let found = arr.find(x => x > 10); // 12

5. indexOf()向后获取元素的首个索引位置

作用:返回数组中指定元素的第一个索引

语法:array.indexOf(item,start)

参数:item:查找的元素。start:开始检索的位置,首个元素位置为0,省略时默认为0 。

返回值:索引或-1

改变原数组:否

let ary=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];

let a1 = ary.indexOf("Apple"); // 2

let notFound = ary.indexOf( "Abc"); // -1

let a2 = ary.indexOf("Apple",4); // 6

6 lastIndexOf()向前获取元素的首个索引位置

作用:返回数组中指定元素的最后一个索引

返回值:索引或-1

改变原数组:否

let ary = [1, 2, 3, 2];

let index = ary.lastIndexOf(2); // 3

7. findIndex()获取满足条件的首个索引位置

作用:返回数组中满足测试函数的第一个元素的索引

返回值:索引或-1

改变原数组:否

let arr = [5, 12, 8, 130, 44];

let index = arr.findIndex(x => x > 10); // 1

(五)、转换数组数据

1. join()加分隔符拼接为字符串

作用:将数组所有元素连接成一个字符串

语法:join(separator)

说明:separator为分隔符,省略时默认为逗号

返回值:字符串

改变原数组:否

let ary = ['a', 'b', 'c'];

let str = ary.join('-'); // "a-b-c"

2. toString()转换为字符串

作用:将数组转换为字符串

返回值:字符串

改变原数组:否

let ary = [1, 2, 3];

let str = ary.toString(); // "1,2,3"

3. toLocaleString()转换为本地化字符串

作用:返回本地化字符串表示

返回值:字符串

改变原数组:否

let ary = [1000, new Date()];

let str = ary.toLocaleString(); // "1,000,2023/5/15 12:00:00" (取决于地区设置)

4. reduce()元素合计或顺序拼接

作用:从左到右对数组元素执行累加器函数

返回值:累加结果

改变原数组:否

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

let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10

5. reduceRight()元素合计或反序拼接

作用:从右到左对数组元素执行累加器函数

返回值:累加结果

改变原数组:否

let arr = ['a', 'b', 'c'];

let str = arr.reduceRight((acc, curr) => acc + curr); // "cba"

6. entries()获取所有元素对象(迭代器)

作用:返回一个新的数组迭代器对象,包含键/值对

返回值:迭代器

改变原数组:否

let arr = ['a', 'b', 'c'];

let iterator = arr.entries();

for (let [index, value] of iterator) {

console.log(index, value);

}

// 输出:

// 0 'a'

// 1 'b'

// 2 'c'

(六)、数组信息遍历

1. for数组元素遍历

作用:遍历数组元素

返回值:undefined

改变原数组:否

for (let i=0 ; i < ary.length ; ++i ){

const item = ary[i];

……

};

for (const item of ary) {

……

};

2. forEach()遍历所有元素

作用:对数组的每个元素执行一次函数

返回值:undefined

改变原数组:取决于回调函数

let arr = [1, 2, 3];

arr.forEach((item, index) => {

console.log(index, item);

});

// 输出:

// 0 1

// 1 2

// 2 3

3. keys()获取所有索引位置(迭代器)

作用:返回一个新的数组迭代器对象,包含数组的键

返回值:迭代器

改变原数组:否

let arr = ['a', 'b', 'c'];

let iterator = arr.keys();

for (let key of iterator) {

console.log(key); // 0, 1, 2

}

4. values()获取所有元素(迭代器)

作用:返回一个新的数组迭代器对象,包含数组的值

返回值:迭代器

改变原数组:否

let arr = ['a', 'b', 'c'];

let iterator = arr.values();

for (let value of iterator) {

console.log(value); // 'a', 'b', 'c'

}

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

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

相关文章

一文搞懂C++容器篇

一文搞懂C之容器篇 C STL&#xff08;标准模板库&#xff09;的核心价值之一就是提供了丰富的容器——即“存储数据的通用结构”&#xff0c;能帮我们快速实现数据的存储、访问、插入、删除等操作&#xff0c;无需重复造轮子。本文将C常用容器按“功能分类”梳理&#xff0c;从…

2026雅思网上辅导口碑排行榜:五大机构深度测评及高分提分方案解析

结合2026年雅思考试命题趋势与全国教育机构调研数据,本次针对雅思网上辅导开展全面深度测评,聚焦提分效果、个性化方案、性价比等核心维度,梳理出靠谱实用的机构排行榜。雅思备考中,考生常面临基础薄弱无从下手、单…

全国雅思培训机构深度测评TOP5:权威榜单助力高效选课,精准提分不踩坑

雅思培训选课是众多考生及家长的核心难题,尤其北京海淀区、上海徐汇区、广州天河区、深圳南山区、成都锦江区等热门留学区县考生,如何筛选优质靠谱的雅思教育机构,掌握实用提分技巧、实现高分目标,是备考首要阻碍。…

2026年安徽民办技校格局:谁在定义“靠谱”的新标准?

一、 核心结论 在安徽省职业教育蓬勃发展的浪潮中,“靠谱”已成为学生与家长择校的核心诉求。它不再局限于传统的就业安置,而是深度融合了高技能培养质量、前瞻性专业布局、多元化升学通道以及坚实的办学底蕴。基于这…

2026雅思网课权威口牌测评排行榜:高分提分方案实用解析推荐

据2026年雅思考试行业权威调研显示,考生在雅思培训选课过程中,常面临优质教育机构筛选难、高分提分技巧匮乏、个性化方案缺失、性价比权衡迷茫等痛点。为帮助考生精准避开误区,本次基于全维度测评体系,结合机构资质…

广州大健康食品OEM工厂推荐:广东诺品健康,一站式营养健康解决方案服务商

广州大健康食品OEM工厂推荐:广东诺品健康,一站式营养健康解决方案服务商 一、为什么选择广州大健康食品OEM工厂? 随着大健康产业的蓬勃发展(2024年国内大健康代加工市场规模突破3800亿元,同比增长22%),越来越多…

2026雅思网上辅导权威靠谱测评排行榜:高分提分机构深度解析

结合2026年雅思考试命题趋势与全国教育机构调研数据,本次针对雅思网上辅导开展全面深度测评,聚焦提分效果、个性化方案、性价比等核心维度,梳理出靠谱实用的机构排行榜。雅思备考中,考生常面临基础薄弱无从下手、单…

CF2106D Flower Boy

https://codeforces.com/problemset/problem/2106/D 解题思路:我们不光要求前缀,还要求后缀。我们可以用前后缀分别来维护a[N]大于b[N]的数目,到时候这届如果前缀数不够的话我们就直接拼起来看行不行。 #include<…

安装ubuntu系统所遇到的各种各样的问题,并附有安装无线网卡,显卡驱动,以及桌面系统教程

1、安装ubuntu系统 这个网上的教程很多,随便找一个教程就好 大致的过程就是,准备u盘,制作u盘(可以用rufus 然后进入bio界面 关闭安全启动,这一步非常关键,没有这一步,接下来的许多问题都无法解决 直接UEFI驱动,…

2026雅思培训在线课程权威靠谱测评排行榜 高分提分方案深度解析

在雅思考试竞争日趋激烈的当下,挑选靠谱的教育机构、获取优质提分技巧、制定个性化实用方案,成为众多考生及家长的核心痛点。市面上雅思培训课程良莠不齐,选课过程中既要兼顾性价比与提分效果,又要甄别机构资质与教…

2026雅思托福培训机构口碑排行榜 权威深度解析测评高分提分方案

随着2026年留学与职场竞争加剧,雅思考试已成为衡量国际语言能力的核心指标,然而考生在雅思培训选课过程中,常面临优质机构筛选难、提分技巧不系统、个性化方案缺失等痛点。如何在海量教育机构中锁定靠谱选择,凭借高…

2026雅思托福培训机构靠谱口碑排行榜 权威深度测评优选方案

基于2026年雅思考试趋势、全国万余名考生反馈及行业师资调研,结合权威教研标准与实战提分数据,我们开展了全面的雅思托福培训机构深度测评,旨在破解考生选课难题。雅思备考中,多数人面临培训机构鱼龙混杂、提分效果…

2026 雅思培训在线课程 靠谱口碑排名榜深度测评推荐解析

随着2026年雅思机考占比持续攀升,评分标准更侧重综合能力,考生在雅思培训选课过程中面临诸多困境:基础薄弱不知如何起步、分数卡在瓶颈难以突破、优质教育机构鱼龙混杂、缺乏个性化提分方案等。多数考生渴望通过权威…

2026 雅思培训在线课程 权威深度测评靠谱口碑排行榜推荐

结合2026年雅思考试趋势与行业调研数据,雅思培训选课市场乱象频发,多数考生面临优质教育机构筛选难、提分技巧匮乏、个性化方案缺失等问题。为助力考生高效突破考试瓶颈、冲刺高分,本文联合教育大数据研究院,通过全…

7.DNS的定义和由来

1、DNS的定义和由来 以上仅供参考,如有疑问,留言联系

2026雅思托福培训机构高分提分权威测评:口碑排行榜解析

基于2026年雅思托福考试改革趋势与行业调研数据,结合万千考生及家长诉求,本次针对市面上主流教育机构开展全面深度测评,聚焦优质课程、高分提分技巧、个性化方案等核心维度,梳理出靠谱实用的机构排行榜。在雅思培训…

2026雅思托福培训机构口碑排行榜 权威深度测评高分提分方案

在雅思培训赛道中,考生常面临选课迷茫、提分乏力、优质教育机构甄别困难等核心痛点,既要兼顾性价比与提分效果,又需寻求权威个性化方案,精准掌握考试技巧实现高分突破。基于2026年雅思考试趋势与全行业深度测评,本…

搜索与回溯算法专题--子集和排列的枚举

枚举排列: 不重集排列: 思路: 用cur表示以cur为当前位置填元素 当cur==n时排列生成完成,输出 然后枚举b数组,尝试在cur上填每一个数 填之前检查一下当前要填的数与a数组之前的数是否相同,不相同代表排列合法,继…

0 基础小白如何快速入门网络安全?这份指南帮你少走弯路

0 基础小白如何快速入门网络安全&#xff1f;这份指南帮你少走弯路 一、为什么要学网络安全&#xff1f; 在互联网时代&#xff0c;网络安全早已不是 “黑客” 的专属领域。从大学生的个人信息保护&#xff0c;到企业的数据安全&#xff0c;甚至国家的网络主权&#xff0c;都离…

【网络安全入门基础教程】网络安全入门终极指南(非常详细)

前言 “1. 结构问题 建议将原文分为三个明确的小标题段落&#xff1a; 破除误解&#xff08;针对黑客形象等问题&#xff09;日常关联性&#xff08;补充更具体的场景&#xff0c;如智能家居漏洞、钓鱼邮件案例&#xff09;学习可行性&#xff08;增加零基础成功案例&#xf…