JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了，但凡网页上任何一个列表数据，基本都是以数组的形式存在，像表格、banner图、菜单列表、商品列表，分类列表等等，在前端领域都是以数组处理。 ## 数组的定义 JS 的数组花样很多，不像其他强类型语言中的数组限制颇多。 ### 数组中的元素 JS 数组中的元素可以是任何类型，包括对象、数组、函数、字符串、数字、布尔值等。而且可以在同一个数组中混合使用各种数据类型。 示例： ```js const arr1 = [ '前端路引', // 字符串 1, // 数字 true, // 布尔值 function() {}, // 函数 { name: '前端路引' }, // 对象 [1, 2], // 数组 new Date(), // 日期对象 new RegExp(), // 正则对象 // ...还可以是其他各种对象 ]; ``` ### 数组定义 除了使用字面量 `[]` 定义数组外，还可以使用构造函数 `Array` 定义数组，也可以使用数组提供的内置方法定义数组。 示例： ```js const arr1 = [1, 2, 3]; // 字面量定义数组 const arr2 = new Array(); // 空数组 const arr3 = new Array(1, 2, 3); // 包含元素 const arr5 = Array(1, 2, 3) // 与 new Array 一样，获取 [1, 2, 3] const arr6 = new Array(5) // [空属性 × 5] 数组长度为 5 const arr7 = Array(5) // 与 new Array(5) 相同 const arr8 = Array.of(5) // [5] 数组长度为 1 // 将类数组或可迭代对象转为数组 const arr9 = Array.from('前端路引') // ['前', '端', '路', '引'] const arr10 = Array.from([1, 2, 3], (item) => item * 2) // [2, 4, 6] const arr11 = Array.from({ length: 5 }, (item, index) => index) const arr12 = Array.from(document.querySelectorAll('div')) // 扩展运算符 const arr13 = [...arr5]; // 扩展运算符将会展开原数组，获得一个新的数组 // fill 方法 const arr14 = new Array(5).fill(1); // [1, 1, 1, 1, 1] ``` ### 数组长度 数组的 `length` 属性表示数组长度，即一个数组中的元素个数，也可以通过 `length` 属性修改数组长度，如果长度不够，则自动使用 `空属性` 填充，如果设置的 `length` 小于原数组长度，则数组将会截断。 ```js const arr1 = [1, 2, 3]; console.log(arr1.length); // 3 arr1.length = 5; // 自动使用空属性填充 console.log(arr1); // [1, 2, 3, 空属性 × 2] arr1.length = 2; // 截断长度为2 console.log(arr1); // [1, 2] ``` ## 数组取值 数组取值需要通过 `下标(index)` 来获取，所有数组下标都从 `0` 开始，如果下标越界，则会返回 `undefined`。 ```js const arr1 = ['前', '端', '路', '引']; console.log(arr1[0]); // 前 console.log(arr1[4]); // undefined 数组最大下标为 length - 1 console.log(arr1[-1]); // undefined const index = 2; // 可以使用变量取值 console.log(arr1[index]); // 路 // 使用 at 方法取值 console.log(arr1.at(0)); // 前 console.log(arr1.at(4)); // 越界获取 undefined // at 方法负数取值，从数组末尾开始取值倒数，-1 表示数组最后一个元素，-2 表示数组倒数第二个元素，以此类推。 console.log(arr1.at(-1)); // 引 ``` 空属性的取值将会获得 `undefined`： ```js const arr1 = new Array(5); // [空属性 × 5] 数组长度为 5 console.log(arr1[0]); // undefined console.log(arr1.at(0)); // undefined ``` ## 写在最后 以上数组定义和取值基本涵盖了日常开发中最常用的几种方式，当然不是所有的定义方法都能穷举，比如一些歪路子定义数组： ```js const arr1 = eval(`['前', '端', '路', '引']`); const arr2 = (new Function(`return ['前', '端', '路', '引']`))(); ``` 歪路子有很多，就不一一介绍了，掌握常用的定义方法即可！