首页 > 其他分享 >举例说明js创建数组有哪些方法?

举例说明js创建数组有哪些方法?

时间:2024-11-29 13:38:28浏览次数:5  
标签:const 创建 js 数组 Array 构造函数 方法 举例说明

JS 创建数组有多种方法,以下列举几种常见的方式并举例说明:

  1. 数组字面量 (Array Literal): 这是最常用且最简洁的方法。使用方括号 [] 包含数组元素,元素之间用逗号分隔。

    const arr1 = [1, 2, 3, "hello", true, { name: "John" }]; // 包含不同数据类型的数组
    const emptyArr = []; // 创建空数组
    
  2. Array 构造函数 (Array Constructor): 可以使用 Array() 构造函数来创建数组。

    const arr2 = new Array(); // 创建一个空数组,等价于 []
    const arr3 = new Array(5); // 创建一个长度为 5 的空数组 (注意:元素的值为 empty)
    const arr4 = new Array(1, 2, 3); // 创建包含 1, 2, 3 的数组,等价于 [1, 2, 3]
    

    需要注意的是,如果只传入一个数字参数给 Array() 构造函数,它会创建一个指定长度的空数组,而不是包含该数字的数组。 如果需要创建一个只包含一个数字的数组,请使用数组字面量或传入多个参数。

  3. Array.from() 方法: Array.from() 可以将类数组对象(例如字符串、NodeList、arguments 对象)转换为真正的数组。

    const str = "hello";
    const arr5 = Array.from(str); //  ["h", "e", "l", "l", "o"]
    
    const nodeList = document.querySelectorAll("p"); // 获取所有 p 元素
    const arr6 = Array.from(nodeList); // 将 NodeList 转换为数组
    

    Array.from() 也接受第二个参数,它是一个映射函数,可以对转换后的每个元素进行操作。

    const arr7 = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
    
  4. Array.of() 方法: Array.of() 方法可以创建一个包含指定元素的新数组。与 Array() 构造函数不同,即使只传入一个数字参数,它也会创建一个包含该数字的数组。

    const arr8 = Array.of(7); // [7]  创建一个包含数字 7 的数组
    const arr9 = Array.of(1, 2, 3); // [1, 2, 3]
    
  5. 扩展运算符 (Spread Syntax): 可以使用扩展运算符 ... 将一个可迭代对象(例如数组、字符串)的元素添加到一个新的数组中。

    const arr10 = [1, 2];
    const arr11 = [...arr10, 3, 4]; // [1, 2, 3, 4]
    
    const str2 = "abc";
    const arr12 = [...str2]; // ["a", "b", "c"]
    

这些是创建数组的常用方法,选择哪种方法取决于具体的需求。数组字面量通常是最简洁和常用的方法,而其他方法则提供了更灵活的创建方式,例如从其他数据类型转换或创建特定长度的数组。

希望以上解释和示例能够帮助你理解如何在 JavaScript 中创建数组。

标签:const,创建,js,数组,Array,构造函数,方法,举例说明
From: https://www.cnblogs.com/ai888/p/18576467

相关文章

  • 举例说明:not()的使用场景有哪些
    !(NOT)运算符在前端开发中有多种使用场景,主要用于反转布尔值。以下是一些例子:1.条件语句中的逻辑判断:检查变量是否为假值:在JavaScript中,一些值被认为是“假值”(falsy),例如false,0,-0,0n,"",null,undefined和NaN。可以使用!来检查一个变量是否为假值。let......
  • 用js封装一个对cookie操作的方法
    /***Cookie操作工具类*/constCookieUtil={/***设置cookie*@param{string}namecookie名称*@param{string}valuecookie值*@param{Object}options可选参数*-{number}expires过期时间(单位:天)*-{string}path......
  • 用js实现最大化和最小化窗口
    //最大化窗口functionmaximizeWindow(){if(window.innerWidth<screen.availWidth||window.innerHeight<screen.availHeight){if(document.documentElement.requestFullscreen){document.documentElement.requestFullscreen();}elseif(d......
  • 举例说明什么是匿名函数?它有什么优缺点呢?
    匿名函数(前端开发)示例及优缺点匿名函数,也称为Lambda函数、闭包,是指没有被赋予名称的函数。在JavaScript中,它们通常使用箭头函数语法()=>{}或传统的function关键字定义,但没有函数名。示例://使用箭头函数语法constadd=(x,y)=>x+y;letsum=add(5,3);......
  • 个人js相关方法实现
    js判断类型的方法实现//设置为全局方法,返回方法的小写类型(function(){window.getTypeLowerCase=function(param){//consttoString=Object.create({}).toString;consttoString={}.toString;returntypeofparam==='object'?......
  • node.js毕设基于微信小程序的图书推荐系统程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于图书推荐系统的研究,现有研究主要集中在网页端或者独立APP的开发上,专门针对微信小程序这一平台开发图书推荐系统的研究较少。在国内外,图书推荐系统多......
  • js模块化
    JavaScript模块化规范1.模块化概述什么是模块化?将程序文件依据一定规则拆分成多个文件,这种编码方式就是模块化的编码方式拆分出来的每个文件就是一个模块,模块中的数据都是私有的,模块之间相互隔离同时也能通过一些手段,可以把模块内的指定数据“交出去”,供其他模块使用......
  • JS的异步函数的理解
    异步函数是JavaScript语言中的一个重要特性,它使得编写异步代码变得更加直观和易于管理。以下是对异步函数的深入理解:1. 概念理解异步函数是使用async关键字声明的函数。当这样的函数被调用时,它返回一个Promise对象。这使得异步函数在语法上看起来与普通同步函数非常相似,但它......
  • JS怎么实现Module模块化?
    在JavaScript中实现模块化主要有两种方式:CommonJS和ES6模块。以下是这两种方法的基本实现:CommonJSCommonJS是Node.js的原生模块系统,但它也可以在浏览器环境中使用通过构建工具如Webpack或Browserify。模块导出://myModule.jsmodule.exports={myFunction:function(......
  • js中的事件委托
    事件委托就是使用事件冒泡机制将子元素相关事件绑定到父元素的处理方式。假设场景:当我们在开发过程中有toolbar功能开发,toolbar中每个按钮都会触发不同的相关功能(弹窗,左边栏,右边栏,跳转等),如果给每一个按钮绑定click事件,不仅代码量多,而且不方便维护,因此需要使用事件委托,将子元素所......