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

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

.一、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.jsqmd.com/news/294233/

相关文章:

  • 一文搞懂C++容器篇
  • 2026雅思网上辅导口碑排行榜:五大机构深度测评及高分提分方案解析
  • 全国雅思培训机构深度测评TOP5:权威榜单助力高效选课,精准提分不踩坑
  • 2026年安徽民办技校格局:谁在定义“靠谱”的新标准?
  • 2026雅思网课权威口牌测评排行榜:高分提分方案实用解析推荐
  • 广州大健康食品OEM工厂推荐:广东诺品健康,一站式营养健康解决方案服务商
  • 2026雅思网上辅导权威靠谱测评排行榜:高分提分机构深度解析
  • CF2106D Flower Boy
  • 安装ubuntu系统所遇到的各种各样的问题,并附有安装无线网卡,显卡驱动,以及桌面系统教程
  • 2026雅思培训在线课程权威靠谱测评排行榜 高分提分方案深度解析
  • 2026雅思托福培训机构口碑排行榜 权威深度解析测评高分提分方案
  • 2026雅思托福培训机构靠谱口碑排行榜 权威深度测评优选方案
  • 2026 雅思培训在线课程 靠谱口碑排名榜深度测评推荐解析
  • 2026 雅思培训在线课程 权威深度测评靠谱口碑排行榜推荐
  • 7.DNS的定义和由来
  • 2026雅思托福培训机构高分提分权威测评:口碑排行榜解析
  • 2026雅思托福培训机构口碑排行榜 权威深度测评高分提分方案
  • 搜索与回溯算法专题--子集和排列的枚举
  • 0 基础小白如何快速入门网络安全?这份指南帮你少走弯路
  • 【网络安全入门基础教程】网络安全入门终极指南(非常详细)
  • 防劝退指南!网络安全入门全景图:从协议到攻防实战速成
  • 零基础转行网络安全:从入门到就业的完整指南
  • Nginx 安装指南
  • 【网络渗透】从入门到顶尖 网络安全行业发展路径指南
  • 2026雅思网络课程权威测评|全国TOP5排行榜 靠谱雅思培训推荐
  • 零基础小白怎么入门CTF?一篇带你打开新世界的大门!
  • 深聊2026年快剪美发培训学校推荐,为你解惑
  • 【UVM】UVM寄存器测试标准工具详解及一个完整例子示意
  • 上海防水施工公司哪家合作案例多,靠谱吗?
  • 杰理芯片SDK开发-AD697N 充电流程配置教程