首页手记 JS数组入门：新手必读指南

JS数组入门：新手必读指南

标签：

JavaScript 数据结构

概述

本文介绍了JS数组入门的相关知识，包括数组的基本概念、创建和操作方法。文章详细讲解了数组的创建、访问、修改、删除和添加元素等操作，并介绍了常用的数组方法和遍历方式。此外，还涉及了数组的排序、查找以及与其他数据结构的转换。

JS数组简介

1.1 数组的基本概念

数组是一种数据结构，用于存储多个相同类型的元素。在JavaScript中，数组是一种特殊类型的数据结构，它允许我们存储和操作一组相关数据。数组中的每个元素可以是任何类型的数据，包括数字、字符串、对象、函数等。

1.2 数组在JavaScript中的作用

数组在JavaScript中具有多种用途。首先，数组可以帮助我们组织和管理数据集合。其次，数组提供了许多内置的方法，使我们能够方便地操作和处理数据。此外，数组还可以与其他数据结构和函数结合使用，以实现更复杂的数据处理任务。

1.3 创建数组的方法

创建数组的最简单方法是使用数组字面量。数组字面量是一种特定的语法形式，用于直接定义数组。例如：

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

数组也可以通过构造函数 Array() 创建。例如：

let arr = new Array(1, 2, 3, 4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]

另外，我们可以通过 Array.of() 方法创建数组，该方法可以接收任意数量的参数。例如：

let arr = Array.of(1, 2, 3, 4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]

数组的基本操作

2.1 访问数组元素

访问数组元素时，可以使用方括号 [] 来指定索引。数组的索引从0开始。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 输出 1
console.log(arr[2]); // 输出 3

2.2 修改数组元素

修改数组元素与访问数组元素的方式类似。只需要将新的值赋给指定索引的元素即可。例如：

let arr = [1, 2, 3, 4, 5];
arr[2] = 10;
console.log(arr); // 输出 [1, 2, 10, 4, 5]

2.3 删除数组元素

删除数组元素时，可以使用 delete 运算符。但是这种方法会将被删除的元素设置为 undefined，并不会真正地减少数组的长度。例如：

let arr = [1, 2, 3, 4, 5];
delete arr[2];
console.log(arr); // 输出 [1, 2, undefined, 4, 5]

如果需要真正删除元素并调整数组长度，可以使用 splice() 方法。例如：

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 删除从索引2开始的1个元素
console.log(arr); // 输出 [1, 2, 4, 5]

splice() 方法还可以用来插入新元素。例如：

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 0, 'a', 'b'); // 在索引2插入两个元素
console.log(arr); // 输出 [1, 2, 'a', 'b', 3, 4, 5]

2.4 向数组添加元素

向数组添加元素可以使用 push() 方法，它会在数组末尾添加一个或多个元素。例如：

let arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr); // 输出 [1, 2, 3, 4, 5, 6]

如果需要在数组开头添加元素，可以使用 unshift() 方法。例如：

let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2, 3, 4, 5]

常用数组方法

3.1 `push()` 和 `pop()`

push() 方法用于在数组末尾添加一个或多个元素，并返回数组的新长度。例如：

let arr = [1, 2, 3];
console.log(arr.push(4, 5)); // 输出 5
console.log(arr); // 输出 [1, 2, 3, 4, 5]

pop() 方法用于删除数组末尾的元素，并返回该元素。例如：

let arr = [1, 2, 3];
console.log(arr.pop()); // 输出 3
console.log(arr); // 输出 [1, 2]

3.2 `shift()` 和 `unshift()`

shift() 方法用于删除数组开头的元素，并返回该元素。例如：

let arr = [1, 2, 3];
console.log(arr.shift()); // 输出 1
console.log(arr); // 输出 [2, 3]

unshift() 方法用于在数组开头添加一个或多个元素，并返回数组的新长度。例如：

let arr = [1, 2, 3];
console.log(arr.unshift(0)); // 输出 4
console.log(arr); // 输出 [0, 1, 2, 3]

3.3 `concat()`

concat() 方法用于合并两个或多个数组，不会改变原有数组。例如：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); // 输出 [1, 2, 3, 4, 5, 6]
console.log(arr1); // 输出 [1, 2, 3]

3.4 `slice()` 和 `splice()`

slice() 方法用于提取数组的一部分并返回一个新的数组，原始数组不会被改变。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // 输出 [2, 3, 4]
console.log(arr); // 输出 [1, 2, 3, 4, 5]

splice() 方法用于删除数组的一部分元素，并可以插入新的元素。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 1, 'a', 'b')); // 输出 [3]
console.log(arr); // 输出 [1, 2, 'a', 'b', 4, 5]

3.5 `join()`

join() 方法用于将数组的元素连接成一个字符串，常用参数为分隔符。例如：

let arr = [1, 2, 3];
console.log(arr.join(', ')); // 输出 "1, 2, 3"

3.6 `every()` 和 `some()`

every() 方法用于测试数组中的所有元素是否都符合指定条件。例如：

let arr = [1, 2, 3, 4, 5];
let allGreaterThanZero = arr.every(function(value) {
    return value > 0;
});
console.log(allGreaterThanZero); // 输出 true

some() 方法用于测试数组中是否至少有一个元素符合指定条件。例如：

let arr = [1, 2, 3, 4, 5];
let hasOddNumbers = arr.some(function(value) {
    return value % 2 !== 0;
});
console.log(hasOddNumbers); // 输出 true

数组的基本操作

2.4 数组的长度

获取数组长度可以使用 length 属性。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 输出 5

数组的遍历

4.1 `for` 循环遍历

for 循环是一种常见的遍历数组的方法。例如：

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
// 输出 1, 2, 3, 4, 5

4.2 `forEach()` 方法

forEach() 方法用于对数组中的每个元素执行一个函数。例如：

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(value) {
    console.log(value);
});
// 输出 1, 2, 3, 4, 5

4.3 `map()` 方法

map() 方法用于对数组中的每个元素执行一个函数，并返回一个新的数组。例如：

let arr = [1, 2, 3, 4, 5];
let result = arr.map(function(value) {
    return value * 2;
});
console.log(result); // 输出 [2, 4, 6, 8, 10]

4.4 `filter()` 方法

filter() 方法用于创建一个新数组，其中包含通过提供的函数测试的所有元素。例如：

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
    return value % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4]

数组排序与查找

5.1 `sort()` 方法

sort() 方法用于对数组的元素进行排序。默认情况下，sort() 方法会按字母顺序对元素进行排序，对于数字则按字符串顺序排序。例如：

let arr = [5, 3, 2, 4, 1];
arr.sort();
console.log(arr); // 输出 [1, 2, 3, 4, 5]

如果需要按数字顺序排序，则需要提供一个比较函数。例如：

let arr = [5, 3, 2, 4, 1];
arr.sort(function(a, b) {
    return a - b;
});
console.log(arr); // 输出 [1, 2, 3, 4, 5]

5.2 `reverse()` 方法

reverse() 方法用于将数组中的元素顺序反转。例如：

let arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // 输出 [5, 4, 3, 2, 1]

5.3 `indexOf()` 和 `lastIndexOf()`

indexOf() 方法用于查找数组中某个元素第一次出现的位置。如果没有找到，返回 -1。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出 2
console.log(arr.indexOf(6)); // 输出 -1

lastIndexOf() 方法与 indexOf() 类似，但它是从数组的末尾开始查找。例如：

let arr = [1, 2, 3, 4, 5, 3];
console.log(arr.lastIndexOf(3)); // 输出 5
console.log(arr.lastIndexOf(6)); // 输出 -1

5.4 `includes()` 方法

includes() 方法用于判断数组是否包含某个元素，并返回 true 或 false。例如：

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出 true
console.log(arr.includes(6)); // 输出 false

数组与其他数据结构的转换

6.1 数组转对象

可以通过遍历数组并创建一个对象来实现数组转对象。例如：

let arr = ['name', 'age', 'city'];
let obj = {};
arr.forEach(function(key, index) {
    obj[key] = 'value' + index;
});
console.log(obj); // 输出 {name: "value0", age: "value1", city: "value2"}

实际应用中，可以将配置文件中的配置项转换为对象。例如：

let arr = ['username', 'password', 'email'];
let obj = {};
arr.forEach(function(key, index) {
    obj[key] = 'value' + index;
});
console.log(obj); // 输出 {username: "value0", password: "value1", email: "value2"}

6.2 对象转数组

可以通过遍历对象的键值对来实现对象转数组。例如：

let obj = {name: 'John', age: 30, city: 'New York'};
let arr = Object.keys(obj);
console.log(arr); // 输出 ["name", "age", "city"]

实际应用中，可以将对象的键值对转换为数组。例如：

let obj = {username: 'admin', password: '12345', email: 'admin@example.com'};
let arr = Object.keys(obj);
console.log(arr); // 输出 ["username", "password", "email"]

6.3 二维数组的使用

二维数组是一种数组嵌套数组的数据结构。例如：

let arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(arr[0][1]); // 输出 2

二维数组可以用于表示表格或矩阵等数据结构。例如：

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

matrix.forEach(function(row) {
    console.log(row);
});
// 输出 [1, 2, 3]
// 输出 [4, 5, 6]
// 输出 [7, 8, 9]

实际应用中，可以从CSV文件中读取数据，并将其转换为二维数组。例如：

let csvData = '1,2,3\n4,5,6\n7,8,9';
let matrix = csvData.split('\n').map(row => row.split(','));
matrix.forEach(function(row) {
    console.log(row);
});
// 输出 ['1', '2', '3']
// 输出 ['4', '5', '6']
// 输出 ['7', '8', '9']

6.4 数组的扁平化

扁平化数组是指将嵌套数组展开为单个数组。例如：

let arr = [1, [2, [3, 4], 5], 6];
let flatArr = arr.flat(Infinity);
console.log(flatArr); // 输出 [1, 2, 3, 4, 5, 6]

也可以通过递归的方式实现扁平化。例如：

function flattenArray(arr) {
    let result = [];
    arr.forEach(function(item) {
        if (Array.isArray(item)) {
            result = result.concat(flattenArray(item));
        } else {
            result.push(item);
        }
    });
    return result;
}

let arr = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(arr)); // 输出 [1, 2, 3, 4, 5, 6]

通过以上内容，您应该已经掌握了JavaScript数组的基本概念和操作方法。数组在JavaScript中是一种非常灵活和强大的数据结构，能够帮助您高效地处理各种数据。继续学习和实践，您将能够更熟练地使用数组来解决实际问题。如果您想进一步学习JavaScript或其他编程语言，请访问慕课网，那里提供了丰富的课程资源。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

幕布斯6054654

手记
篇

粉丝

219

获赞与收藏

1011

关注作者，订阅最新文章

相关文章推荐

新手必读：javascript入门书籍推荐

JavaScript：从新手到忍者修炼入门指南

React JS和React-Native新手学习指南

webpack4.x最详细入门指南

Maven入门指南

阅读免费教程

JavaScript 入门教程

80个小节 311144 2192

数据结构入门教程

7个小节 23510 613

后端通用面试教程

41个小节 30273 342

ES6-10 入门教程

61个小节 93083 732

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

JS数组入门：新手必读指南

JS数组简介

1.1 数组的基本概念

1.2 数组在JavaScript中的作用

1.3 创建数组的方法

数组的基本操作

2.1 访问数组元素

2.2 修改数组元素

2.3 删除数组元素

2.4 向数组添加元素

常用数组方法

3.1 push() 和 pop()

3.2 shift() 和 unshift()

3.3 concat()

3.4 slice() 和 splice()

3.5 join()

3.6 every() 和 some()

数组的基本操作

2.4 数组的长度

数组的遍历

4.1 for 循环遍历

4.2 forEach() 方法

4.3 map() 方法

4.4 filter() 方法

数组排序与查找

5.1 sort() 方法

5.2 reverse() 方法

5.3 indexOf() 和 lastIndexOf()

5.4 includes() 方法

数组与其他数据结构的转换

6.1 数组转对象

6.2 对象转数组

6.3 二维数组的使用

6.4 数组的扁平化

相关文章推荐

阅读免费教程

3.1 `push()` 和 `pop()`

3.2 `shift()` 和 `unshift()`

3.3 `concat()`

3.4 `slice()` 和 `splice()`

3.5 `join()`

3.6 `every()` 和 `some()`

4.1 `for` 循环遍历

4.2 `forEach()` 方法

4.3 `map()` 方法

4.4 `filter()` 方法

5.1 `sort()` 方法

5.2 `reverse()` 方法

5.3 `indexOf()` 和 `lastIndexOf()`

5.4 `includes()` 方法