深入理解 JS 数组本质、空位处理及类数组转换方法

1.定义

数组本质上是按特定顺序排列的一组数据集合。

在 JavaScript 中，数组可以容纳任意类型的数据，包括基本类型和引用类型。
数组支持嵌套结构，从而可以构建多维数组以处理更复杂的数据关系。

const arr = [0,'1',{},function(){}];
//二维数组
const arr1 = [1,2,[3,4,5],6];

2.数组的本质

从底层实现来看，数组是一种特殊的对象，其键名（key）为正整数的字符串形式。虽然通常使用数字索引访问数组元素，但引擎会自动将数字键转换为字符串键进行存储和查找。

const arr = [];
arr['1'] = 1;
//1被自动转换成'1'
console.log(arr[1],arr['1']); //1
typeof arr; //obejct

3.数组的length

数组的 length 属性反映的是数组中最大正整数键名加 1 的值，即正整数键的数量。尽管可以将其他类型的值作为数组的键，但这些非正整数键不会计入 length 的长度中。

const arr = [];
arr[2.1] = 2.1;
arr['a'] = 'a';
console.log(arr); //[2.1: 2.1, a: 'a']
console.log(arr.length); //0

length 属性是可写的，修改它会直接影响数组的大小和内容截断。

const arr = [1,2,3,4,5];
arr.length = 2;
console.log(arr); //[1,2]

4. in

in 运算符用于检测数组或对象中是否存在指定的键名，它适用于数组和对象两种数据结构。

const arr = ['a','b'];
1 in arr; // true
2 in arr; //fasle

5. for…in

for…in 循环主要用于遍历数组和对象的可枚举属性。
在遍历数组时，for…in 不仅会遍历整数索引键，还会遍历所有非整数类型的自定义键。
Object.keys() 方法同样可以获取数组中非整数类型的键名。

const arr = [1,2];
arr['a'] = 3;
arr[4.5] = 4;
for(key in arr){
 console.log(key);
};
// 0
// 1
// a
/  4.5
Object.keys(arr); // ['0', '1', 'a', '4.5']

6.数组的空位

当数组中两个逗号之间没有值时，会产生空位（empty），这是一种特殊的稀疏数组状态。
使用 delete 运算符删除数组元素也会产生 empty 空位。
计算数组的 length 时，empty 空位会被包含在内，影响长度统计。

var arr = [1,5,,8];
console.log(arr); //[1, 5, empty, 8]
//使用delete也会产生空值
delete arr [0];
console.log(arr); //[empty, 5, empty, 8]
console.log(arr.length); //4

空位（empty）与 undefined 存在显著区别：undefined 会参与 for…in 和 forEach 的遍历，而 empty 不会参与这些遍历操作。
Object.keys() 能获取到 undefined 元素的键名，但无法获取 empty 空位的键名。
通过 length 属性结合索引遍历，可以访问到 empty 空位对应的值（通常为 undefined）。

    const arr1 = new Array(10); //[empty × 10]
    for (key in arr1) {
      console.log(arr1);
    }; //无输出,没有进行遍历
    arr1.forEach((v) => {
      console.log(v)
    }); //无输出,没有进行遍历
    console.log(Object.keys(arr1)); //[]
    const arr2 = [undefined, undefined, undefined]; //[empty × 10]
    for (key in arr2) {
      console.log(key);
    };
    //0
    //1
    //2
    arr2.forEach((value, index) => {
      console.log(value, index)
    });
    // undefined,0
    // undefined,1
    // undefinef,2
    console.log(Object.keys(arr2)); //[3]
    // 使用for循环遍历empty
    for(let i = 0;i<arr1.length;i++){
       console.log(arr1[1])
    };
    //undefined × 10

7.类数组(伪数组)

类数组的定义是：键名均为正整数或零，且拥有 length 属性的对象。

const arrayLike = { 
  0:'a', 
  1:'b', 
  2:'c', 
  length:3 
  };
arrayLike[3] = 'd';
console.log(arrayLike[0]); //a
console.log(arrayLike.length); //3

示例代码为 arrayLike 添加了一个数字键，但 length 没有改变，这就说明arrayLike不是数组

典型的类数组有函数的arguments、大多数的元素DOM集合、字符串

function foo(){
  console.log(arguments);
};
foo('tom','jack');
// {0:'tom', 1:'jack', length:2, callee:...}
console.log(document.getElementsByClassName('a'));
//{"0": ...,"1": ...,"2":..., "length":3}
const str = 'apple';
console.log(str.length); //5
consoel.log(str[2]); //p

将伪数组转为数组

使用Array.prototype.slice
使用拓展运算符

function foo(){
  const arr = Array.prototype.slice.call(arguments);
}
function foo(){
  const arr = [...arguments]
}
function foo(...args){
}

总结

数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心
类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象
使用Array.prototype.slice.call()或者拓展运算符将类数组转换为数组,类数组可以使用call函数借用数组的方法

到此这篇关于JavaScript数组操作总结的文章就介绍到这了,更多相关JS数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 数组操作核心机制与类数组转换详解