一、字面量方式
1. 说明：
// 语法： // [element0, element1, ..., elementN] // 示例： const fruits = ['apple', 'banana', 'orange'];
2. 解释：
字面量方式是JavaScript中创建数组最常见的方式，利用方括号将数组元素括起来并用逗号分隔，可以在创建数组时直接添加元素。
3. 应用：
// 访问数组元素
console.log(fruits[0]); // 返回apple
console.log(fruits[1]); // 返回banana
// 改变数组元素
fruits[1] = 'grape';
console.log(fruits); // 返回["apple", "grape", "orange"]
// 添加数组元素
fruits.push('watermelon');
console.log(fruits); // 返回["apple", "grape", "orange", "watermelon"]
// 删除数组元素
fruits.pop();
console.log(fruits); // 返回["apple", "grape", "orange"]
二、构造函数方式
1. 说明：
// 语法： // new Array(element0, element1, ..., elementN) // 或 // new Array(length) // 示例： const nums1 = new Array(1, 2, 3); const nums2 = new Array(4);
2. 解释：
构造函数方式是JavaScript中创建数组的另一种方式。可以使用new运算符和Array()构造函数来创建数组，其中参数可以是元素列表或表示数组长度的数字。如果只传递一个参数，则该参数指定数组的长度。
3. 应用：
// 访问数组元素 console.log(nums1[0]); // 返回1 console.log(nums1[1]); // 返回2 // 获取数组长度 console.log(nums1.length); // 返回3 // 添加数组元素 nums1[3] = 4; console.log(nums1); // 返回[1, 2, 3, 4] // 删除数组元素 delete nums1[2]; console.log(nums1); // 返回[1, 2, empty, 4] console.log(nums1[2]); // 返回undefined console.log(nums1.length); // 返回4（长度未变）
三、Array.from()静态方法
1. 说明：
// 语法： // Array.from(arrayLike[, mapFn[, thisArg]]) // 示例： const str = 'hello world'; const chars = Array.from(str);
2. 解释：
Array.from()是在ES6中引入的静态方法，用于从类似数组或可迭代对象中创建新的数组实例。第一个参数是数组模板，第二个参数是一个映射函数，可以对元素进行转换，第三个参数是函数执行时的上下文对象。
3. 应用：
// 访问数组元素 console.log(chars[0]); // 返回h console.log(chars[1]); // 返回e // 转换数组元素 const nums = Array.from(nums1, x => x * 2); console.log(nums); // 返回[2, 4, NaN, 8] // 过滤数组元素 const odds = Array.from(nums1, x => (x % 2 !== 0) ? x : undefined).filter(Boolean); console.log(odds); // 返回[1]
四、扩展运算符方式
1. 说明：
// 语法： // [...array] // 示例： const arr1 = [1, 2]; const arr2 = [3, 4]; const arr3 = [...arr1, ...arr2];
2. 解释：
扩展运算符是在ES6中引入的新语法，用于将一个可迭代对象展开到一个新的数组中。可以用于合并数组、将字符串转为数组等。
3. 应用：
// 查看数组元素 console.log([...str]); // 返回["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"] // 合并数组 console.log(arr3); // 返回[1, 2, 3, 4] // 简单克隆数组 const arr4 = [...arr1]; console.log(arr4); // 返回[1, 2] // 将字符串转换为数组 console.log([...str]); // 返回["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
五、TypedArray方式
1. 说明：
// 语法： // new TypedArray(length) // 示例： const nums3 = new Int32Array(3);
2. 解释：
TypedArray是在ES6中引入的新的数据类型，指的是一种原始的二进制数据类型，可以存储在数组缓冲区中。创建一个TypedArray时需要指定数组的长度，同时也可以在创建时向数组中赋初始值，这种方式不同于数组字面量方式，因为数组字面量的元素类型是根据值来确定的，而TypedArray的元素类型是由数组类型来确定的。
3. 应用：
// 修改数组元素 nums3[0] = 1; nums3[1] = 2; nums3[2] = 3; console.log(nums3); // 返回[1, 2, 3] // 获取数据长度和数据类型 console.log(nums3.length); // 返回3 console.log(nums3.constructor.name); // 返回Int32Array
六、总结
数组是在JavaScript编程中非常常见的数据结构，对于不同的使用场景和需求，选择合适的创建方式可以使代码更具可读性和清晰度。字面量方式是最常见的一种数组创建方式，但是当我们需要在运行时扩展数组长度时，用构造函数或扩展运算符等方式是比较方便的选择。对于需要存储二进制数据，TypedArray是一个更加高效的方式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/196857.html
微信扫一扫 
支付宝扫一扫 