探索JavaScript数组 | 青训营笔记

76 阅读3分钟

JavaScript中的数组是一种强大而灵活的数据结构,提供了许多有用的方法,让我们能够轻松地操作和处理数据。让我们来看看都有哪些常用的数组方法等待着我们吧!

有哪些

push() 和 pop()

这是数组的好朋友,可以让我们在数组的末尾添加元素(push)或者移除最后一个元素(pop)。就像拼积木一样,我们可以随意地增加或减少数组的内容。

shift() 和 unshift()

这两个方法和上面的好朋友类似,不同的是它们可以在数组的开头进行元素的添加(unshift)和移除(shift)。想象一下排队进入游乐场,我们可以随意调整队伍的顺序。

slice()

这个方法可以让我们从数组中提取出一部分元素,而不影响原数组。就像剪切水果一样,我们可以只取出其中几块,而不必把整个水果切开。

splice()

这是一个非常强大的方法,可以让我们在数组中进行插入、删除和替换元素的操作。就像变魔术一样,我们可以随意改变数组的内容。

indexOf() 和 lastIndexOf()

这两个方法可以帮助我们查找数组中某个元素的位置。indexOf()从数组的开头开始查找,而lastIndexOf()则从数组的末尾开始查找。想象一下找寻宝藏的过程,我们可以一步步寻找直到找到宝藏所在的位置。

forEach()

这个方法可以让我们对数组中的每个元素执行指定的操作。就像在人群中挨个问好一样,我们可以和每个元素打个招呼。

map()

这个方法和forEach()有点类似,不同的是它会返回一个新的数组,其中包含对原数组中每个元素应用指定操作后的结果。就像做变换魔术一样,我们可以将每个元素进行变换,并得到一个全新的数组。

filter()

这个方法可以让我们根据指定条件筛选数组中的元素,并返回符合条件的新数组。就像筛选糖果一样,我们可以根据口味喜好挑选出自己喜欢的糖果。

如何使用

下面是小栗子~

// 示例数组
let fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango'];

// push() 和 pop()
fruits.push('pear'); // 在数组末尾添加元素
console.log(fruits); // 输出:['apple', 'banana', 'orange', 'kiwi', 'mango', 'pear']

fruits.pop(); // 移除数组末尾的元素
console.log(fruits); // 输出:['apple', 'banana', 'orange', 'kiwi', 'mango']

// shift() 和 unshift()
fruits.unshift('grape'); // 在数组开头添加元素
console.log(fruits); // 输出:['grape', 'apple', 'banana', 'orange', 'kiwi', 'mango']

fruits.shift(); // 移除数组开头的元素
console.log(fruits); // 输出:['apple', 'banana', 'orange', 'kiwi', 'mango']

// slice()
let slicedFruits = fruits.slice(1, 3); // 提取索引1到索引2的元素(不包括索引3)
console.log(slicedFruits); // 输出:['banana', 'orange']

// splice()
fruits.splice(2, 1, 'peach', 'watermelon'); // 在索引2的位置插入'peach'和'watermelon',同时移除1个元素
console.log(fruits); // 输出:['apple', 'banana', 'peach', 'watermelon', 'kiwi', 'mango']

// indexOf() 和 lastIndexOf()
let index = fruits.indexOf('kiwi'); // 查找'kiwi'的索引位置
console.log(index); // 输出:4

let lastIndex = fruits.lastIndexOf('banana'); // 从末尾开始查找'banana'的索引位置
console.log(lastIndex); // 输出:1

// forEach()
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 输出:
// 'apple'
// 'banana'
// 'peach'
// 'watermelon'
// 'kiwi'
// 'mango'

// map()
let uppercaseFruits = fruits.map(function(fruit) {
  return fruit.toUpperCase();
});
console.log(uppercaseFruits);
// 输出:['APPLE', 'BANANA', 'PEACH', 'WATERMELON', 'KIWI', 'MANGO']

// filter()
let filteredFruits = fruits.filter(function(fruit) {
  return fruit.length > 5;
});

console.log(filteredFruits); // 输出:['watermelon']

这些示例代码展示了JavaScript数组常用方法的简单应用。希望通过本文,让你对JavaScript数组的常用方法有一些简单的了解!