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/
发表评论 取消回复