Array

[TOC]

索引

~~静态方法~~：

Array.from()：(arrayLike,mapFn?,thisArg?)，静态方法，用于将类数组对象或可迭代对象转换为真正的数组，并支持对元素进行映射处理。

属性：

array.length：number，获取或设置数组的长度，直接反映数组中元素的数量（或最大索引加1）。

方法：

array.slice：(start?,end?)，纯函数，用于提取数组的一部分，返回新数组，且不修改原数组。
array.splice()：(start,deleteCount?,item1?,item2?,...)，用于修改原数组，可以删除、替换或添加元素。它会直接改变原数组，并返回被删除的元素组成的数组。
array.concat()：(value1?, value2?, ...)，纯函数，用于合并数组或值，返回一个新数组，且不修改原数组。

Array

静态方法

from()

Array.from()：(arrayLike,mapFn?,thisArg?)，静态方法，用于将类数组对象或可迭代对象转换为真正的数组，并支持对元素进行映射处理。

arrayLike：ArrayLike|Iterator，待转换的类数组对象或可迭代对象。
mapFn?：(item,index)=>newItem，对每个元素进行处理的回调函数。返回处理后的新元素，组成最终数组。
thisArg?：any，执行 mapFn 时的 this 值。若 mapFn 是箭头函数，此参数无效。
返回：
arr：Array，转换后的数组实例。

~~核心功能~~：

转换类数组对象：

// 1. 转换 arguments 对象
function example() {
  return Array.from(arguments); 
}
console.log(example(1, 2, 3)); // [1, 2, 3]

// 2. 转换 NodeList
const divs = document.querySelectorAll('div');
const divArray = Array.from(divs); // 转为数组后可调用数组方法

转换可迭代对象：

// 1. 转换 Set
const set = new Set([1, 2, 3]);
console.log(Array.from(set)); // [1, 2, 3]

// 2. 转换字符串
console.log(Array.from('Hello')); // ['H', 'e', 'l', 'l', 'o']

使用映射函数：

// 1. 生成数字范围并加倍
const nums = Array.from({ length: 5 }, (v, i) => i * 2);
console.log(nums); // [0, 2, 4, 6, 8]

// 2. 转换对象属性并处理
const obj = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.from(obj, (val) => val.toUpperCase());
console.log(arr); // ['A', 'B']

~~边界情况~~：

原始值处理：

Array.from(123);        // []（数字不可迭代）
Array.from(true);       // []（布尔值不可迭代）

稀疏数组处理：

Array.from({ length: 3 }); // [undefined, undefined, undefined]

映射函数参数：

Array.from([1, 2, 3], function(v, i) { 
  return v + this.num; 
}, { num: 10 }); // [11, 12, 13]

~~对比扩展运算符~~：

场景	Array.from()	扩展运算符 `[...]`
类数组对象（无迭代器）	✅ 支持（如 `{length: 2}`）	❌ 报错（需对象可迭代）
可迭代对象	✅ 支持（如 Set、Map、字符串）	✅ 支持
映射处理	✅ 支持（通过 `mapFn` 参数）	❌ 需额外调用 `.map()`

属性

length

array.length：number，获取或设置数组的长度，直接反映数组中元素的数量（或最大索引加1）。

语法：

// 1. 获取数组长度
const len = array.length;

// 2. 设置数组长度
array.length = newLength;

~~核心行为~~：

获取长度：返回数组的最大索引加1，包括稀疏数组的空位。

const sparseArr = [1, , 3]; // 稀疏数组（索引1为空位）
console.log(sparseArr.length); // 3（最大索引2 + 1）

设置长度：
- 缩短数组（新长度 < 当前长度）：超出新长度的元素会被删除，数组被截断。
  js
```
const arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]
```
  1
  2
  3
- 扩展数组（新长度 > 当前长度）：新增的索引位置会被填充为空位（非 undefined，属于稀疏数组）。
  js
```
const arr = [1, 2];
arr.length = 5;
console.log(arr); // [1, 2, empty × 3]
```
  1
  2
  3

~~参数处理规则~~：

数值转换：非数值类型会被转换为数值：

arr.length = "3";    // 转换为 3
arr.length = "3.5";  // 转换为 3.5 → 取整为3（部分环境可能抛出错误）
arr.length = null;   // 转换为 0
arr.length = true;   // 转换为 1
arr.length = "abc";  // 转换为 NaN → 视为0（清空数组）

有效性检查：
- 合法范围：0 ≤ newLength ≤ 2^32 - 1（即 4294967295）。
- 非法值处理：
  - 负数：抛出 RangeError。
    js
```
arr.length = -1; // RangeError: Invalid array length
```
    1
  - 非整数（如 3.5）：部分环境静默取整，部分抛出错误（建议避免）。
    js
```
arr.length = 3.5; // 可能设置为3或抛出错误（依环境而定）
```
    1
  - 超出 2^32 - 1：抛出 RangeError。
    js
```
arr.length = 4294967296; // RangeError
```
    1

~~注意事项~~：

稀疏数组的影响：扩展后的空位可能被部分数组方法（如 map、forEach）跳过，导致意外行为。
js
```
const arr = [];
arr.length = 3;
arr.forEach((v, i) => console.log(i)); // 无输出（空位被跳过）
```
1
2
3
快速清空数组：设置 length = 0 是清空数组的高效方法。
js
```
const arr = [1, 2, 3];
arr.length = 0;
console.log(arr); // []
```
1
2
3
不可逆操作：缩短数组会永久删除超出新长度的元素，无法恢复。

方法

slice()

array.slice：(start?,end?)，纯函数，用于提取数组的一部分，返回新数组，且不修改原数组。

start?：number，默认：0，开始提取的索引（从 0 开始）。
- start < 0：从数组末尾倒数（例如，-2 表示倒数第二个元素）。
- start >= 数组长度：返回空数组。
end?：number，默认：数组长度，结束提取的索引（不包含该位置）。
- end < 0：从数组末尾倒数。
- end <= start：返回空数组。
返回：
arr：Array，包含从 start 到 end（不含 end）的元素。

~~边界情况~~：

稀疏数组：空位保留（如 [1, ,3].slice(0,3) → [1, empty, 3]）。

示例：

基本使用：

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

console.log(arr.slice(1, 3));    // [2, 3]（索引1到2）
console.log(arr.slice(-3, -1));  // [3, 4]（倒数第三到倒数第二个）
console.log(arr.slice(2));       // [3, 4, 5]（索引2到末尾）
console.log(arr.slice());        // [1, 2, 3, 4, 5]（浅拷贝原数组）

splice()

array.splice()：(start,deleteCount?,item1?,item2?,...)，用于修改原数组，可以删除、替换或添加元素。它会直接改变原数组，并返回被删除的元素组成的数组。

start：number，开始修改的索引（从 0 开始）。
- start < 0：从数组末尾倒数（例如，-2 表示倒数第二个元素）。
- start < -数组长度：视为 0。
- start >= 数组长度：从数组末尾开始操作（直接添加元素到末尾）。
deleteCount?：number，默认：0，要删除的元素数量。
- deleteCount <= 0：不删除元素（若未提供，则删除从 start 到末尾的所有元素）。
- deleteCount > 剩余元素数：删除从 start 到末尾的所有元素。
item1?,item2?,...：any，从 start 位置开始插入的元素。如果不提供此参数，则仅删除元素。
返回：
deleteArr：Array，返回被删除的元素组成的数组。

~~核心功能~~：

删除元素：

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // 从索引1开始删除2个元素
console.log(arr); // [1, 4, 5]
console.log(返回值); // [2, 3]

添加元素：

const arr = [1, 2, 3];
arr.splice(1, 0, "a", "b"); // 从索引1开始添加元素，不删除
console.log(arr); // [1, "a", "b", 2, 3]

替换元素：

const arr = [1, 2, 3];
arr.splice(1, 1, "x"); // 删除索引1的1个元素，插入"x"
console.log(arr); // [1, "x", 3]
console.log(返回值); // [2]

~~边界情况~~：

稀疏数组：空位会被跳过或处理为 undefined（取决于具体操作）。

concat()

array.concat()：(value1?, value2?, ...)，纯函数，用于合并数组或值，返回一个新数组，且不修改原数组。

value1?, value2?, ...：any，待合并的值，可以是数组、原始值、对象等。不同类型的处理规则不同：
- 数组：将数组的每个元素（仅展开一层）添加到新数组。
- 非数组：直接作为单个元素添加到新数组（包括null、undefined、Symbol、类数组对象）。
返回：
arr：Array，合并后的结果。参数为空执行浅拷贝。

~~核心行为~~：

合并数组：

const arr1 = [1, 2];
const arr2 = [3, [4, 5]];
const merged = arr1.concat(arr2); // [1, 2, 3, [4, 5]]（仅展开一层）

合并非数组值：

const arr = [1];
const newArr = arr.concat("a", { x: 2 }, null); // [1, "a", {x: 2}, null]

空参数：

const arr = [1, 2];
const copy = arr.concat(); // [1, 2]（copy !== arr） 原数组的浅拷贝

稀疏数组

const sparseArr = [1, , 3]; // 空位在索引1
const newArr = sparseArr.concat([4, 5]); // [1, empty, 3, 4, 5]（保留空位）

类数组对象

const arrayLike = { 0: "a", length: 1 };
const arr = [1].concat(arrayLike); // [1, {0: "a", length: 1}]（不展开类数组对象）

~~注意事项~~：

性能优化：合并大型数组时，concat() 可能比循环遍历更高效，但需注意内存占用。
替代方案：使用扩展运算符实现类似效果（仅限可迭代对象）：
js
```
const merged = [...arr1, ...arr2, value];
```
1

Array ​

索引 ​

Array ​

静态方法 ​

from() ​

属性 ​

length ​

方法 ​

slice() ​

splice() ​

concat() ​

Array

索引

Array

静态方法

from()

属性

length

方法

slice()

splice()

concat()