JavaScript中，数组的基本使用

@彤管

于 2024-11-19 16:51:44 发布

阅读量1k

点赞数 19

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_58258716/article/details/143889478

版权

数组就是某类数据的集合，数组的类型可以是数值型、字符串型，甚至是对象。利用数组的特性，可以在数组中存储一组同类型的数据。JavaScript本身只支持一维数组，不支持多维数组。在用到二维数组时，可以将一维数组的分项定义为一个数组。二维数组本质上就是用数组构成的数组。

一、数组的创建与赋值

1.使用构造函数

使用构造函数进行数组的创建与赋值，代码如下：

var arr1 = new Array(); // 空数组
var arr2 = new Array(5); // 指定数组长度
var arr3 = new Array("a","b","c"); // 定义并赋值

当无法提前预知数组最终元素个数时，可声明未知个数的数组：

var fruit = new Array();
fruit[0] = 'Apple';
fruit[1] = 'Banana';
fruit[2] = 'Orange';

2.对数组直接赋值

对数组直接赋值的代码如下：

var arr4 = ['a','b','c','d'];

二、数组的访问与修改

通过指定数组名及索引号，可以访问某个特定的元素

document.write(fruit[0]); // Apple

如需修改已有数组中的值，只要向指定索引号添加一个新值即可

fruit[0] = 'Pear';

JavaScript的数组不需要预先设定长度，会自己进行扩展，“数组名.length”会返回数组中的元素个数。

三、常用的数组方法

对数组操作的常用方法包括数组元素的增加、删除、截取和合并等

1.push()

push()将一个或多个新元素添加到数组末尾，并返回数组新长度：

arrayObj.push([item1[,item2[,...[,itemN]]]]);

使用push()方法可以把它的参数按顺序添加到arrayObj的尾部。它直接修改arrayObj，而不是创建一个新的数组。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组</title>
</head>
<body>
  <script>
    var arr1 = [1,2];
    var len = arr1.push(3,4);
    document.write(`长度为${len} -- 数组中的数据：${arr1}`);
  </script>
</body>
</html>

2.unshift()

unshift()将一个或多个新元素添加到数组前端，原来数组中的元素自动后移，返回数组新长度

arrayObj.unshift([item1[,item2[,...[,itemN]]]]);

在数组前端插入新数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组</title>
</head>
<body>
  <script>
    var arr2 = [1,2];
    var len = arr2.unshift(3,4);
    document.write(`长度为${len} -- 数组中的数据：${arr2}`);
  </script>
</body>
</html>

3.shift()

shift()用于把数组的第一个元素从数组中删除，并返回该元素的值；

arrayObj.shift();

如果数组是空的，那么shift()方法将不进行任何操作，返回undefined值

删除数值前端的元素

 var username = new Array();
    username[0] = 'Jack';
    username[1] = 'Suan';
    username[2] = 'Bob';
    document.write(`${username}<br />${username.shift()}<br />${username}`)

4.pop()

pop()用于把数组的最后一个元素从数组中删除，并返回该元素的值

arrayObj.pop();

删除数组尾部的元素

var username = new Array();
    username[0] = 'Jack';
    username[1] = 'Suan';
    username[2] = 'Bob';
    document.write(`${username}<br />${username.pop()}<br />${username}`)

5.slice

slice()用于以数组的形式返回数组的一部分，即截取数组的一部分：

arrayObj.slice(start,[end]);

【提示】数值截取时不包括end对应的元素。如果省略end，那么将复制start之后的所有元素。

var arr3 = new Array();
    arr3[0] = 'one';
    arr3[1] = 'two';
    arr3[2] = 'three';
    arr3[3] = 'four';
    arr3[4] = 'five';
    var temp = arr3.slice(2,4);
    document.write(`arr3:${arr3}<br/>temp:${temp}`);

6.concat()

concat()将多个数组(也可以是字符串，或者数组和字符串的混合)连接为一个数组，返回连接好的新数组：

arrayObj.concat([item1[,item2,[,...itemN]]]);

该方法不会改变现有的数组，而是返回被连接数组的副本。该副本数组将所有item参数添加到arrayObj中。如果要进行concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。

    var arr3 = new Array();
    arr3[0] = 'one';
    arr3[1] = 'two';
    arr3[2] = 'three';

    var arr4 = new Array();
    arr4[0] = 'four';
    arr4[1] = 'five';
    arr4[2] = 'six';

    var temp = arr3.concat(arr4);
    document.write(`arr3:${arr3}<br/>arr4:${arr4}<br/>temp:${temp}`);

7.sort()

sort()用于对数组元素排序

sort([item1[,item2[...,itemN]]]);

对数组中的数据进行排序

var username = new Array();
username[0] = 'Jack';
username[1] = 'Suan';
username[2] = 'Bob';
username[3] = 'Mary';
username[4] = 'Jamie';

document.write(`${username}<br />${username.sort()}`)