高级前端开发工程师必须要熟练掌握的数组知识

昨天分享了对象相关的基础知识，今天我们来了解一下 JavaScript 中另外一个非常重要的数据类型 — 数组。

1.  什么是数组

数组是一种数据结构，用于存储和组织一组相关的元素。

在编程中，数组提供了一个有效的方式来处理大量相似或相关的数据。

每个值在数组中都有一个唯一的索引，通常从 0 开始，逐渐增加。

2. 创建数组

其实很简单，你只需要在代码中使用一对方括号[] 就行了。

// 创建一个空数组
var myArray = [];

// 创建一个带有初始值的数组
var numbers = [1, 2, 3, 4, 5];

3. 增、删、查、改

• 新增元素

unshift() 方法可以在数组开头增加元素。

push()  方法可以在数组末尾增加元素。

var flowers = ['rose', 'tulip', 'daisy'];
// 在开头添加元素
flowers.unshift('orchid');
// 在末尾添加元素
flowers.push('sunflower');

• 删除元素

shift() 方法从数组开头开始删除元素。

pop()  方法来在数组末尾删除元素。

splice() 方法可以删除任意位置的元素。

var flowers = ['rose', 'tulip', 'daisy'];
// 从开头删除元素
flowers.shift();
// 从末尾删除元素
flowers.pop();
// 从索引为1的位置开始删除2个元素
flowers.splice(1, 2);

小技巧：

filter()  方法创建一个新数组，其中包含通过某个函数测试的所有元素，可以利用这个特性来删除特定条件下的元素，使用起来更灵活一些。

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

// 删除值为3的元素
myArray = myArray.filter(function(element) {
    return element !== 3;
});

console.log(myArray); // 输出: [1, 2, 4, 5]

• 访问元素

数组里的每个元素都有一个编号，我们称之为“索引”。需要注意的是，索引是从 0 开始的哦~

var fruits = ['apple', 'banana', 'orange'];

// 访问数组中的第一个元素
console.log(fruits[0]); // 输出：apple

• 修改元素

想改变数组中的某个元素？没问题，使用索引就可以搞定！

var fruits = ['apple', 'banana', 'orange'];

// 修改数组中的元素
fruits[0] = 'watermelon';

4. 其他常用操作

• 获取数组长度

可以用length 属性来知道一个数组里有多少个元素。

var colors = ['red', 'green', 'blue'];

// 获取数组的长度
console.log(colors.length); // 输出：3

• 循环访问元素

希望逐个访问数组中的元素，可以考虑使用 for 循环 或者 forEach()  方法来实现。

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

// 使用for循环迭代数组
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// 使用forEach方法迭代数组
numbers.forEach(function(number) {
    console.log(number);
});

5. 总结

数组是一个非常强大的工具，可以帮助我们更方便地组织和操作数据~

希望你可以在实际编程中多多尝试，通过动手实践来巩固所学知识~