Web前端入门第 60 问：JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了，但凡网页上任何一个列表数据，基本都是以数组的形式存在，像表格、banner图、菜单列表、商品列表，分类列表等等，在前端领域都是以数组处理。
数组的定义

JS 的数组花样很多，不像其他强类型语言中的数组限制颇多。
数组中的元素

JS 数组中的元素可以是任何类型，包括对象、数组、函数、字符串、数字、布尔值等。而且可以在同一个数组中混合使用各种数据类型。
示例：

1. const arr1 = [
2.   '前端路引', // 字符串
3.   1, // 数字
4.   true, // 布尔值
5.   function() {}, // 函数
6.   { name: '前端路引' }, // 对象
7.   [1, 2], // 数组
8.   new Date(), // 日期对象
9.   new RegExp(), // 正则对象
10.   // ...还可以是其他各种对象
11. ];

复制代码

数组定义

除了使用字面量 [] 定义数组外，还可以使用构造函数 Array 定义数组，也可以使用数组提供的内置方法定义数组。
示例：

1. const arr1 = [1, 2, 3]; // 字面量定义数组
2. const arr2 = new Array(); // 空数组
3. const arr3 = new Array(1, 2, 3); // 包含元素
4. const arr5 = Array(1, 2, 3) // 与 new Array 一样，获取 [1, 2, 3]
5. const arr6 = new Array(5) // [空属性 × 5]  数组长度为 5
6. const arr7 = Array(5) // 与 new Array(5) 相同
7. const arr8 = Array.of(5) // [5]  数组长度为 1
8. // 将类数组或可迭代对象转为数组
9. const arr9 = Array.from('前端路引') // ['前', '端', '路', '引']
10. const arr10 = Array.from([1, 2, 3], (item) => item * 2) // [2, 4, 6]
11. const arr11 = Array.from({ length: 5 }, (item, index) => index)
12. const arr12 = Array.from(document.querySelectorAll('div'))
13. // 扩展运算符
14. const arr13 = [...arr5]; // 扩展运算符将会展开原数组，获得一个新的数组
15. // fill 方法
16. const arr14 = new Array(5).fill(1); // [1, 1, 1, 1, 1]

复制代码

数组长度

数组的 length 属性表示数组长度，即一个数组中的元素个数，也可以通过 length 属性修改数组长度，如果长度不够，则自动使用 空属性 填充，如果设置的 length 小于原数组长度，则数组将会截断。

1. const arr1 = [1, 2, 3];
2. console.log(arr1.length); // 3
3. arr1.length = 5; // 自动使用空属性填充
4. console.log(arr1); // [1, 2, 3, 空属性 × 2]
5. arr1.length = 2; // 截断长度为2
6. console.log(arr1); // [1, 2]

复制代码

数组取值

数组取值需要通过 下标(index) 来获取，所有数组下标都从 0 开始，如果下标越界，则会返回 undefined。

1. const arr1 = ['前', '端', '路', '引'];
2. console.log(arr1[0]); // 前
3. console.log(arr1[4]); // undefined 数组最大下标为 length - 1
4. console.log(arr1[-1]); // undefined
5. const index = 2;
6. // 可以使用变量取值
7. console.log(arr1[index]); // 路
9. // 使用 at 方法取值
10. console.log(arr1.at(0)); // 前
11. console.log(arr1.at(4)); // 越界获取 undefined
12. // at 方法负数取值，从数组末尾开始取值倒数，-1 表示数组最后一个元素，-2 表示数组倒数第二个元素，以此类推。
13. console.log(arr1.at(-1)); // 引

复制代码

空属性的取值将会获得 undefined：

1. const arr1 = new Array(5); // [空属性 × 5]  数组长度为 5
2. console.log(arr1[0]); // undefined
3. console.log(arr1.at(0)); // undefined

复制代码

写在最后

以上数组定义和取值基本涵盖了日常开发中最常用的几种方式，当然不是所有的定义方法都能穷举，比如一些歪路子定义数组：

1. const arr1 = eval(`['前', '端', '路', '引']`);
2. const arr2 = (new Function(`return ['前', '端', '路', '引']`))();

复制代码

歪路子有很多，就不一一介绍了，掌握常用的定义方法即可！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！