JS 初始化数组的方法,居然还有这么多种!想用哪种,随你挑!

最近在做Web开发,想创建一个具有默认值的对象数组,却突然想不起来怎么创建的,瞧我这记性,好记性不如烂笔头。既然搜索了,那就好好整理一翻吧。JavaScript中初始化数组的几种方法包括:

  1. 直接赋值法

    可以使用方括号创建一个空数组或一个具有初始值的数组。

    例如,创建一个空数组:

    let arr1 = []; // 输出:[]
    

    创建一个具有初始值的数组:

    let arr2 = [1, 2, 3]; // 输出:[1, 2, 3]
    
  2. Array 构造函数(new一个数组)

    使用Array构造函数来创建一个空数组或一个具有初始值的数组。

    例如,创建一个空数组:

    let arr3 = new Array(); // 输出:[]
    

    创建一个具有初始值的数组:

    let arr4 = new Array(1, 2, 3); // 输出:[1, 2, 3]
    
  3. 使用 Array.of 方法

    Array.of 创建一个数组,它把所有参数作为数组元素,返回一个包含这些元素的数组。如果只传递一个参数,则该方法将创建仅包含该参数的数组。

    例如,创建一个空数组:

    let arr5 = Array.of(); // 输出:[]
    

    创建一个具有初始值的数组:

    let arr6 = Array.of(1, 2, 3); // 输出:[1, 2, 3]
    
  4. 使用 Array.from 方法

    Array.from方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

    例如,从字符串创建一个数组:

    let str = 'hello';
    

    运行结果:

image.png
Array.from 方法还可以使用其映射功能来创建数组。

例如,使用Array.from方法的映射功能从1到5创建一个数组:

```
let arr15 = Array.from({length: 5}, (_, index) => index + 1);
```
  1. 使用 Array.prototype.from 方法

    Array.prototype.from 方法会对数组中每个元素执行回调函数,并返回一个处理后的新数组。

    例如,从1到5创建一个数组:

    let arr9 = Array.from(Array(5), (_, i) => i + 1);
    

    运行结果:

image.png
  1. 使用 fill 方法

    fill 方法可以填充一个数组中的所有元素,使用给定的静态值。

    例如,创建一个由10个0组成的数组:

    let arr8 = new Array(10).fill(0);
    

    创建一个空对象组成的数组:

    let arr81 = new Array(10).fill({});
    

    运行结果:


    image.png
  1. 使用 Array.prototype.concat 方法

    concat 方法可以将一个或多个数组合并成一个新数组。

    例如,将两个数组合并成一个:

    let arr10 = [1, 2];
    
  2. 使用扩展运算符(spread operator)

    扩展运算符可以将一个数组“解开”为独立的元素,并插入到另一个数组中。它还可以用于创建具有相同元素的新数组。

    例如,使用扩展运算符从另一个数组创建一个新数组:

    let arr13 = [1, ...arr8];
    
  3. 使用 Array.prototype.filter 方法

    filter方法会返回一个新数组,其中包含原始数组中符合特定条件的所有元素。

    例如,从现有数组(arr2)中筛选出所有大于等于2的元素:

    let arr17 = arr2.filter((element)=>element>=2);
    

最后总结

把JS中创建数组的方法,稍微整理一下,就出来9种。平时能够用到的也就两三种。

第一种方法最简单,使用得也最多。如果是创建一个空的对象数组,则适合使用第六种方法。如果是从一个数组中获取符合条件的新数组,则适合使用第九种方法。其他方法稍微了解一下就好。

以上代码,均已运行成功,并输出结果,请放心使用。以上便是本次的整理,希望对你有帮助。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容