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数组的使用。

?