JavaScript数组操作完全手册

🧑?🎓 个人主页：《爱蹦跶的大A阿》

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

??

目录

? 前言

第一节:数组的定义和创建

1.1 数组字面量 []

1.2 Array构造函数

1.3 Array.of()

1.4 Array.from()

第二节:数组元素的添加和删除

第三节:数组的遍历

3.1 for循环

3.2 for...of循环

3.3 forEach()

3.4 while循环

3.5 map()

第四节:数组的排序

4.1 reverse() 反转数组

4.2 sort() 根据字符编码排序

第五节:数组搜索

5.1 indexOf/lastIndexOf

5.2 find

5.3 findIndex

5.4 includes

第六节:数组的转换方法

6.1 join()

6.2 split()

6.3 toString()

6.4 valueOf()

第七节:数组的浅拷贝和深拷贝

7.1 浅拷贝只拷贝一层,更深层次的对象还是共享的。

7.2 深拷贝完全拷贝一个新的对象,不会互相影响。

第八节:多维数组

?第九节:稀疏数组

? 结语

---

?

? 前言

????????数组是JavaScript中最常用也是最有用的数据类型之一。合理运用数组及其方法可以使代码更简洁高效。本文将详细介绍数组的创建、添加、删除、遍历、排序等操作,以及数组常用方法的使用场景和示例,帮助大家掌握数组的精髓。

通过本文,你将学习到:

• 灵活创建数组的各种方式
• 添加、删除、替换数组元素的多种方法
• 循环遍历数组的for/while、forEach、for-of等方法
• 将数组排序的sort、reverse方法
• 查找数组元素的indexOf、find、findIndex等方法
• map、filter等处理和转换数组的方法
• join、split等数组与字符串间转换方法
• 数组浅拷贝和深拷贝的实现技巧
• 处理多维数组和稀疏数组的技能

准备掌握数组的所有操作技能了吗?让我们开始这场数组的盛宴吧!

?

第一节:数组的定义和创建

????????数组是JavaScript中非常常用的数据类型,它代表一个值的有序集合,每个值对应一个从0开始的数字索引。

数组的特点是:

• 数组元素可以是任意数据类型,同一个数组内可以包含多种类型。
• 数组大小可以动态增长,不需要预先指定。
• 通过索引可以快速访问每个元素,索引从0开始。
• 数组有很多内置方法,如sort、pop等,使操作方便。
• 数组是一种复杂数据类型,变量存储的是数组在堆上的地址。

创建数组的方式:

1.1 数组字面量 []

let arr = [1, 'hello', true];

1.2 Array构造函数

可以指定数组长度或传入元素。

let arr1 = new Array(3); // 指定长度为3
let arr2 = new Array(1, 2, 3); // 传入元素

1.3 Array.of()

将参数转换为数组,参数数量不限。

Array.of(8); // [8] 
Array.of(1, 2, 3); // [1, 2, 3]

1.4 Array.from()

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

Array.from('foo'); 
Array.from(document.querySelectorAll('div'));

?在平时开发中,我们最常通过字面量的形式创建数组,简单直观,足以满足大多数需求。

第二节:数组元素的添加和删除

我们经常需要向数组添加或删除元素。添加可以通过:

1. push() - 末尾添加
2. unshift() - 开头添加

删除可以通过:

1. pop() - 删除末尾元素
2. shift() - 删除开头元素
3. splice() - 删除任意位置元素

示例:

let arr = [1, 2, 3];

arr.push(4); // [1, 2, 3, 4]
arr.unshift(0); // [0, 1, 2, 3, 4] 

arr.pop(); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

arr.splice(1, 1); // 从索引1开始删除1个元素,得到[1, 3]

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

第三节:数组的遍历

遍历(iterate)数组意味着依次访问数组的每个元素。主要的遍历方式有:

3.1 for循环

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); 
}

3.2 for...of循环

for (let a of arr) {
  console.log(a);
}

3.3 forEach()

arr.forEach(function(a) {
  console.log(a); 
});

3.4 while循环

let i = 0;
while (i < arr.length) {
  // loop
  i++;
}

3.5 map()

arr.map(function(a) {
  // loop
});

forEach()和map()是数组的高阶函数,为遍历数组提供了更优雅的方式。

需要注意的是,forEach()和map()不会改变原数组,而是返回一个新数组。

?

第四节:数组的排序

排序可以按字母顺序或其他标准,重新排列数组元素的位置。

4.1 reverse() 反转数组

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

4.2 sort() 根据字符编码排序

let arr = ['a', 'c', 'b'];
arr.sort(); // ['a', 'b', 'c']

sort()可以传入比较函数实现自定义排序逻辑。

Array的sort()和reverse()会改变原数组。

此外,还可以使用算法排序,如快速排序、归并排序等。

第五节:数组搜索

在数组中搜索元素是一个非常常见的需求,JavaScript提供了多种内置方法来实现。

5.1 indexOf/lastIndexOf

• 接收要搜索的元素作为参数,返回找到的第一个或最后一个元素的索引
• 如果未找到,返回-1

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

arr.indexOf(1); // 0
arr.lastIndexOf(1); // 2
arr.indexOf(3); // -1

5.2 find

• 接收一个回调函数,返回第一个使得回调函数返回true的元素
• 回调函数的参数就是数组元素

let arr = [1, 2, 3];

let found = arr.find(function(element) {
  return element > 2; 
}); // 3

5.3 findIndex

• 和find类似,不同的是它返回索引而不是元素

let index = arr.findIndex(function(x) {
  return x > 2;
}); // 2

5.4 includes

• 接收要搜索的元素作为参数,返回一个布尔值表示是否找到
• ES7新增方法,兼容性需要注意

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

????????这些方法极大地方便了数组元素的搜索,使用回调函数可以自定义匹配逻辑。掌握后可以解决大部分搜索需求。?

第六节:数组的转换方法

数组与字符串的相互转换也是常见的需求。

6.1 join()

• 将数组元素以指定分隔符拼接成字符串
• 默认使用,作为分隔符

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

6.2 split()

• 按指定分隔符将字符串拆分成数组
• 可以将字符串转换为数组

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

6.3 toString()

• 将数组直接转换为字符串,元素使用,拼接

[1, 2, 3].toString(); // "1,2,3"

6.4 valueOf()

• 返回数组对象本身

这些方法为数组和字符串之间的相互转换提供了可能。

第七节:数组的浅拷贝和深拷贝

7.1 浅拷贝只拷贝一层,更深层次的对象还是共享的。

let arr2 = arr1.slice();

7.2 深拷贝完全拷贝一个新的对象,不会互相影响。

可以通过递归实现深拷贝。

function deepCopy(arr) {
  let result = []; 
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result.push(deepCopy(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

?拷贝后修改数组不会影响原数组,需要根据实际需求选择浅拷贝或深拷贝。

第八节:多维数组

JavaScript中的数组可以包含其他数组,形成多维数组。

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

• arr长度为2,每个元素也是一个数组
• 可以通过多层索引访问元素

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

多维数组提高了数据的结构化,可以表示更复杂的信息。

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

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    // 遍历每个子数组
  }
}

?第九节:稀疏数组

当数组中的元素不连续时, between 槽位被跳过,就形成了稀疏数组。

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

arr长度为4,但只有两个元素。

稀疏数组在遍历时需要注意,通常需要检查元素是否存在。

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

这就概述了JavaScript数组的主要内容,祝您数组操作愉快!有任何问题都欢迎提出?

? 结语

? ? ? ??在这个多篇文章的系列探索中,我们全面介绍了数组的各种操作技巧,如定义、添加、删除、遍历、排序、搜索、转换等等。代码实例贯穿始终,使抽象的概念具象化。

????????数组是JavaScript最常用也是最有力的工具之一。合理利用数组的各种功能,可以使我们的代码更简洁高效。同时,深入理解数组的工作原理也是成为优秀JavaScript开发者的必经之路。

????????这一系列文章对数组进行了较为深入和全面的介绍,但还有很多高级功能未涉及,如链式操作、性能优化等。JavaScript的数组操作是一个宏大的主题,我们还需要持续学习,以加强数组功底。

????????感谢大家的观看!让我们继续一起探索JavaScript这个美丽的语言。坚持学习,代码水平才能不断提升。掌握数组,掌握编程的半壁江山。希望这组文章能成为你的JavaScript数组参考指南。Happy coding!

?