JavaScript数组操作完全手册

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

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

[✨ 前言](#✨ 前言)

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

[1.1 数组字面量 []](#1.1 数组字面量 [])

[1.2 Array构造函数](#1.2 Array构造函数)

[1.3 Array.of()](#1.3 Array.of())

[1.4 Array.from()](#1.4 Array.from())

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

第三节:数组的遍历

[3.1 for循环](#3.1 for循环)

[3.2 for...of循环](#3.2 for...of循环)

[3.3 forEach()](#3.3 forEach())

[3.4 while循环](#3.4 while循环)

[3.5 map()](#3.5 map())

第四节:数组的排序

[4.1 reverse() 反转数组](#4.1 reverse() 反转数组)

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

第五节:数组搜索

[5.1 indexOf/lastIndexOf](#5.1 indexOf/lastIndexOf)

[5.2 find](#5.2 find)

[5.3 findIndex](#5.3 findIndex)

[5.4 includes](#5.4 includes)

第六节:数组的转换方法

[6.1 join()](#6.1 join())

[6.2 split()](#6.2 split())

[6.3 toString()](#6.3 toString())

[6.4 valueOf()](#6.4 valueOf())

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

[7.1 浅拷贝只拷贝一层,更深层次的对象还是共享的。](#7.1 浅拷贝只拷贝一层,更深层次的对象还是共享的。)

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

第八节:多维数组

第九节:稀疏数组

[✨ 结语](#✨ 结语)

✨ 前言

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

通过本文,你将学习到:

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

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

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

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

数组的特点是:

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

创建数组的方式:

1.1 数组字面量 []

javascript 复制代码

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

1.2 Array构造函数

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

javascript 复制代码

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

1.3 Array.of()

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

javascript 复制代码

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

1.4 Array.from()

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

javascript 复制代码

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

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

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

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

push() - 末尾添加
unshift() - 开头添加

删除可以通过:

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

示例:

javascript 复制代码

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循环

javascript 复制代码

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

3.2 for...of循环

javascript 复制代码

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

3.3 forEach()

javascript 复制代码

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

3.4 while循环

javascript 复制代码

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

3.5 map()

javascript 复制代码

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

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

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

第四节:数组的排序

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

4.1 reverse() 反转数组

javascript 复制代码

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

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

javascript 复制代码

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

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

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

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

第五节:数组搜索

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

5.1 indexOf/lastIndexOf

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

javascript 复制代码

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

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

5.2 find

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

javascript 复制代码

let arr = [1, 2, 3];

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

5.3 findIndex

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

javascript 复制代码

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

5.4 includes

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

javascript 复制代码

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

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

第六节:数组的转换方法

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

6.1 join()

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

javascript 复制代码

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

6.2 split()

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

javascript 复制代码

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

6.3 toString()

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

javascript 复制代码

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

6.4 valueOf()

返回数组对象本身

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

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

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

javascript 复制代码

let arr2 = arr1.slice();

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

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

javascript 复制代码

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中的数组可以包含其他数组,形成多维数组。

javascript 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

第九节:稀疏数组

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

javascript 复制代码

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

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

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

javascript 复制代码

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

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

✨ 结语

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

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

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

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