JavaScript 数组(Array)对象

JavaScript数组(Array)对象是一种特殊的对象,用于存储一组或多组数据。它可以存储任意类型的数据,包括数字、字符串、对象和其他数组。数组对象的定义方式很简单,只需要用一对方括号“[]”将数据集合起来即可。

## 数组的声明与赋值

### 声明

声明数组的方法有两种:

- 通过字面量声明:

```javascript

var arr = []; // 定义一个空数组

var arr1 = [1, 2, 3]; // 定义一个拥有三个元素的数组,元素分别为 1、2、3

var arr2 = [1, "hello", true, {name: "Tom"}]; // 定义一个包含不同类型元素的数组

```

- 通过Array()构造函数声明:

```javascript

var arr = new Array(); // 定义一个空数组

var arr1 = new Array(1, 2, 3); // 定义一个拥有三个元素的数组,元素分别为 1、2、3

var arr2 = new Array(3); // 定义一个拥有三个空元素的数组

// 定义一个包含不同类型元素的数组

var arr3 = new Array(1, "hello", true, {name: "Tom"});

```

### 赋值

数组的每个元素都有一个下标,下标从0开始,表示这个元素在数组中的位置。赋值数组元素可以通过下标直接赋值,也可以使用push()方法添加元素到数组的末尾。

```javascript

var arr = ["apple", "banana", "orange"];

arr[0] = "pear"; // 将数组中下标为0的元素从"apple"改为"pear"

arr.push("watermelon"); // 添加一个新的元素"watermelon"到数组的末尾

```

## 数组的常用方法

### 遍历数组

遍历数组是数组的一种基本操作。JavaScript提供了多种方法可以遍历数组。

1. for循环

通过使用for循环可以遍历整个数组。

```javascript

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

```

2. forEach()方法

对于每个元素都调用一次提供的函数。forEach()方法不返回新的数组。

```javascript

var arr = ["apple", "banana", "orange"];

arr.forEach(function(item, index, array) {

console.log(item, index);

});

```

输出结果:

```

apple 0

banana 1

orange 2

```

3. map()方法

返回一个新的数组,数组中的元素为原始数组元素调用函数处理后的值。原始数组不受影响。

```javascript

var arr = [1, 2, 3];

var newArr = arr.map(function(item) {

return item * 2;

});

console.log(newArr); // [2, 4, 6],原始数组并未受到改变

```

### 数组的排序

JavaScript数组包含sort()方法,该方法对数组进行排序。

1. sort()方法

sort()方法默认按照字符串的unicode进行排序,如果要对数字进行排序,则需要指定比较函数。

```javascript

var arr = [2, 1, 4, 3];

arr.sort(); // [1, 2, 3, 4]

```

指定比较函数:

```javascript

var arr = [2, 1, 4, 3];

arr.sort(function(a, b) {

return a - b;

});

console.log(arr); // [1, 2, 3, 4]

```

### 数组的筛选

数组对象包含了若干筛选方法,用于从原数组中找到符合某个条件的元素,并返回一个新数组,下面列出数组对象中常用的几种方法。

1. filter()方法

该方法返回一个新数组,其中包含所有通过给定函数测试的元素。该方法不会改变原始数组。

```javascript

var arr = [1, 2, 3, 4, 5];

var newArr = arr.filter(function(item) {

return item > 3;

});

console.log(arr); // [1, 2, 3, 4, 5]

console.log(newArr); // [4, 5]

```

2. find()方法

该方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

```javascript

var arr = [1, 2, 3, 4, 5];

var result = arr.find(function(item) {

return item > 3;

});

console.log(result); // 4

```

## 数组扩展运算符

数组扩展运算符(...)可以将一个数组转换为逗号分隔的值序列,或将一个逗号分隔的值序列转换为一个数组。

```javascript

// 将数组转换为逗号分隔的值序列

var arr = [1, 2, 3];

console.log(...arr); // 1 2 3

// 将逗号分隔的值序列转换为数组

console.log([1, 2, 3]); // [1, 2, 3]

console.log(...[1, 2, 3]); // 1 2 3

```

## 数组的应用案例

### 数组的去重

利用Set数据结构可以完成数组的去重,Set实例对象的成员唯一。

```javascript

var arr = [1, 2, 2, 3, 4, 4, 5];

var newArr = [...new Set(arr)];

console.log(newArr); // [1, 2, 3, 4, 5]

```

### 数组交并集运算

求两个数组的并集、交集、差集可以使用数组对象提供的方法完成。

```javascript

var arr1 = [1, 2, 3, 4, 5];

var arr2 = [3, 4, 5, 6, 7];

// 求并集

var union = Array.from(new Set(arr1.concat(arr2)));

console.log(union); // [1, 2, 3, 4, 5, 6, 7]

// 求交集

var intersect = arr1.filter(item => arr2.includes(item));

console.log(intersect); // [3, 4, 5]

// 求差集

var diff = arr1.filter(item => !arr2.includes(item));

console.log(diff); // [1, 2]

```

### 数组元素求和

可以使用reduce()数组对象提供的方法实现数组元素的求和。

```javascript

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduce((prev, cur) => prev + cur);

console.log(sum); // 15

```

以上就是JavaScript数组对象的详细介绍及使用方法,此外还有很多关于数组的操作,需要结合具体场景进行实际应用。 如果你喜欢我们三七知识分享网站的文章, 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔!https://www.37seo.cn/

点赞(76) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部