JavaScript中数组的创建方式及数组常用方法

最新推荐文章于 2024-04-22 00:45:00 发布
最新推荐文章于 2024-04-22 00:45:00 发布
阅读量1.2k 收藏
点赞数 7
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52693727/article/details/126978245
版权

在JavaScript中，创建数组的方式有两种，一种是new Array()方法创建数组，另一种是以具体的内容（字面量）创建数组。数组的常用方法是指对数组的一些操作。例如：数组的增加、删除等。

创建数组

new Array()方法创建数组

创建一个长度为3的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr = new Array(3);//创建一个长度为6的数组
    console.log(arr.length);//在控制台上打印数组的长度
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr = new Array(3);
    arr [0] = "html";
    arr [1] = "css";
    arr [2] = "js";
    arr [3] = "vue";
    console.log(arr.length);
    console.log(arr);//在控制台打印数组
</script>
</html>

在这里插入图片描述

字面量创建数组

什么是字面量创建数组，字面量创建数组就是在[]中写出数组的所有元素，中间用逗号隔开。数组的长度有数组里面的元素个数决定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01.length);
    console.log(arr01);

    var arr02 = [1,"2","html",null,undefined,true];
    console.log(arr02.length);
    console.log(arr02);
</script>
</html>

在这里插入图片描述
在这里，我们可以看到数组里面的元素可以是各种类型，无论那种类型都不影响数组的创建。

数组的常用方法

添加数组元素

数组的添加有四种，第一种是通过下标添加元素，第二种是push()方法，第三种是unshift()方法还有一种是concat()方法，可以把一个数组的元素全部添加进数组里。

下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr = new Array(3);
    arr [1] = "js";
    console.log(arr.length);
    console.log(arr);
</script>
</html>

在这里插入图片描述

push()方法

push()方法是在数组的尾部添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    arr01.push(5);
    console.log(arr01.length);
    console.log(arr01);
</script>
</html>

在这里插入图片描述

unshift()方法

unshift()方法在数组头部添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01.length);
    console.log(arr01);
    arr01.unshift(5);
    console.log(arr01.length);
    console.log(arr01);
</script>
</html>

在这里插入图片描述

concat()方法

concat()方法也就是把两个数组拼接在一起，使两个数组合二为一。拼接数组用concat()方法，将需要后缀在后面的数组名写在括号里，如果需要拼接多个数组，中间用逗号隔开。concat()方法也是添加数组元素的一种方式，concat()方法是把一个数组的所有内容都添加到数组尾部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01.length);
    console.log(arr01);

    var arr02 = [1,"2","html",null,undefined,true];
    console.log(arr02.length);
    console.log(arr02);

    var arr03 = arr01.concat(arr02);
    console.log(arr03.length);
    console.log(arr03);

    var arr04 = arr01.concat(arr02,arr03);
    console.log(arr04.length);
    console.log(arr04);
</script>
</html>

在这里插入图片描述

删除数组元素

删除数组的方法有三种，一种是从数组的头部删除，一种是从数组的尾部删除还有一种是可以删除连续的几个数组元素。

pop()方法

pop()方法从数组尾部删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01.length);
    console.log(arr01);
    arr01.pop();
    console.log(arr01.length);
    console.log(arr01);
</script>
</html>

在这里插入图片描述

shift()方法

shift()方法从数组头部删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01.length);
    console.log(arr01);
    arr01.shift();
    console.log(arr01.length);
    console.log(arr01);
</script>
</html>

在这里插入图片描述

splice()方法

splice()方法截取数组内容后，原本的数组内容发生改变,删除截取的元素。框号里写两个参数，第一个参数是要开始删除的数组下标，第二个参数是要删除的元素个数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01);
    var arr02 = arr01.splice(1,2);
    console.log(arr02);
    console.log(arr01);
</script>
</html>

在这里插入图片描述

获取数组元素下标

获取元素下标使用indexOf()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    var arr = arr01.indexOf(3);
    console.log(arr);
</script>
</html>

将数组元素的对象（object）类型转换为字符串（string）类型

join()方法将对象类型转换为字符串类型，括号中写的是转换为字符串类型后的连接符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var arr01 = [1,2,3,4];
    console.log(arr01);
    var arr02 = arr01.join("/");
    console.log(typeof(arr02));
</script>
</html>

在这里插入图片描述

总结

在JavaScript中，创建一个数组，即使我们给这个数组定义了长度，也不影响我们后期给它具体赋值时，超过定义的长度，在我们需要计算数组长度时超过定义的长度的部分也会自动加进去。
添加数组元素时，唯有concat()方法可以一次添加多个元素；删除数组元素时，唯有splice()方法可以一次删除多个元素。其他的方法一次都只能操作一个元素。

weixin_52693727
关注
structs.js:用于创建和操作字节数组的Javascript数据类型
05-16
structs.js 用于创建和操作字节数组的Javascript数据类型 用法示例 import Struct from 'structs.js' var bottle = new Struct ( ) ; var label = bottle . push ( new Struct ( ) ) ; var content = bottle . push ( "B" , [ 119 , 0x41 , 116 , 101 , 114 ] ) ; //push array of unsigned 8bit integers label . push ( "c" , "WATER" ) ; //push a string, strings are pushed as arrays of uint8 charcodes. //structs have some getter-methods
javascript中数组的多种定义方法和常用函数简介
12-01
3. **JavaScript数组的常用函数**： - **toString()**：将数组转换为字符串，元素之间默认由逗号分隔。 - **toLocaleString()**：类似于toString()，但根据本地环境进行转换。 - **join()**：允许指定分隔符，将...
JavaScript中的数组创建
weixin_33842304的博客
12-21 153
JavaScript中的数组创建 本文转载自：众成翻译 译者：loveky 链接：http://www.zcfy.cc/article/713 原文：http://rainsoft.io/power-up-the-array-creation-in-javascript/ 数组是一个包含了对象或原始类型的有序集合。很难想象一个不使用数组的程序会是什么样。 以下是几种操作数组的方式: 初始化数...
JavaScript中，数组创建的两种方式
liuyang___的博客
12-18 945
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
javascript创建数组
学习专栏
06-17 3280
在JavaScript中没有多维数组的概念但是可以模拟实现 1维//1 不能确定数组length的情况下，先声明一个数组名，然后再逐个赋值。var tArray=new Array();tArray[0]=A;tArray[1]=2;//2 知道确切的length，创建数组var tArray=new Array(10);//3 创建数组的同
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
10-20
在JavaScript中，数组和字符串是两种基本的数据类型，它们各自具有一系列的方法来执行各种操作。正确理解和掌握这些方法对于编写高效和优雅的代码至关重要。 首先，让我们来看看字符串（String）对象的方法。 1. ...
Javascript中的数组常用方法解析
10-18
JavaScript数组还包含了其他一些常用方法，如concat()用于连接两个或多个数组，slice()用于截取数组的一部分形成新数组，splice()则用于添加或删除数组中的元素，slice()和splice()都可以指定开始和结束位置。...
JS 创建数组 （ 6种方法 ）
最新发布
大剑师兰特的GIS世界
04-22 3315
JS创建数组可通过字面量、构造函数Array()、Array.of()、Spread运算符、Array.from()等方式，例如：let arr = [1, 2, 3]、let arr = new Array(3)、let arr = Array.of(1, 2, 3)、let arr = [...'abc']、let arr = Array.from({length: 3}, (_, i) => i+1)。
Javascript数组的创建
weixin_67107650的博客
03-06 1142
新手上路
3.JavaScript中定义数组的两种主要方式
qq_34962100的博客
05-18 1826
JavaScript中定义数组的两种主要方式（new Array()和[]方式） new Array() ①可以用像JAVA的那种写法的方式定义，如 var arr = new Array() 这样定义了一个空数组 ②可以填写一个数字作为构造时的参数，比如 var arr = new Array(5) 在控制台可以看见这个数组的内容是 [undefined × 5] 这是一个"稀疏数组"，通过直接改变数组length属性得到的元素数量少于数组的length的数组。 这种数组可以用 for
创建数组的两种方式
...
08-21 392
创建数组的两种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t
JavaScript-122：创建数组的两种方式
臧小川的博客
10-13 601
创建数组的两种方式 利用属数组字面量 var arr = [1, 2, 3, 4] console.log(arr); 2 利用 new Array() var arr1 = new Array(); // 创建了一个空的数组 var arr1 = new Array(2); // 这个2表示数组的长度为2 里面有2个空的数组元素 var arr1 = new Array(2, 3); // 等价于[2,3] 这样写表示 里面有两个数组元素 是2,3 console.log(arr1);
JavaScript 创建数组的方法和基本操作
yakoo5的专栏
02-24 1588
数组是我从学习编程以来打交道最多的一种数据类型，其实说白了，数组无非就是key value对。还记得刚参加工作那会，一个php的foreach循环就差点搞得我吐血，现在回头想想，当时自己真够笨的。 数组(array)是一种数据类型，它包含或者存储了编码的值，每个编码的值称作该数组的一个元素(element),每个元素的编码被称作下标(index)。JavaScript是神奇的
【JS】JavaScript中创建数组的6种方式（代码示例合集）
热门推荐
【敦厚的曹操】的专栏
01-06 1万+
一、创建数组的三种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
js数组的创建与方法
qq_43123740的博客
09-13 252
数组的概念 所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。 数组也是对象，它和普通对象功能类似，也是用来存储一些数据的，不同与对象的是普通对象是用字符串作为属性名的，而数组使用数字来作为索引操作元素 数组的存储性能比较好，开发中我们常用数组来存储一些数据。 //创建数组对象 // 创建一个空数组 var arr1 = []; ...
JS中创建数组的方式
wuwenhao的博客
05-30 5140
创建数组的方法有三种： 1:利用new Array 创建: var arr = new Array(); arr[0] = "a"; arr[1] = "b"; arr[2] = "c"; 2: 简洁方式: var arr = new Array("a","b","c"); 3: 字面量创建: var arr = ["a","b","c"];
JavaScript数组操作详解：常用方法与实例
本文档深入探讨了JavaScript数组的常用方法，这对于任何开发人员来说都是极其重要的基础知识。首先，了解如何判断一个对象是否是数组至关重要。JavaScript提供了两种方法来实现这一目标：`instanceof Array` 和 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值