JS操作数组方法学习系列(1)

简介: JS操作数组方法学习系列(1)

数组添加元素 (push)

作用: 向数组末尾添加一个或多个元素,并返回新数组的长度。

示例:

const fruits = ['apple', 'banana'];
const newLength = fruits.push('cherry');
// newLength: 3, fruits: ['apple', 'banana', 'cherry']

常见场景: 在数组中动态添加新数据。

数组移除末尾元素 (pop)

作用: 移除并返回数组的最后一个元素。

示例:

const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.pop();
// removedFruit: 'cherry', fruits: ['apple', 'banana']

常见场景: 移除最后一个元素,如栈操作。

数组添加元素到开头 (unshift)

作用: 向数组开头添加一个或多个元素,并返回新数组的长度。

示例:

const fruits = ['banana', 'cherry'];
const newLength = fruits.unshift('apple');
// newLength: 3, fruits: ['apple', 'banana', 'cherry']

常见场景: 在数组开头插入新数据。

数组移除开头元素 (shift)

作用: 移除并返回数组的第一个元素。

示例:

const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.shift();
// removedFruit: 'apple', fruits: ['banana', 'cherry']

常见场景: 移除第一个元素,如队列操作。

数组查找元素索引 (indexOf)

作用: 返回数组中第一个匹配元素的索引,如果未找到则返回-1。

示例:

const numbers = [1, 2, 3, 4, 5];
const index = numbers.indexOf(3);
// index: 2

常见场景: 查找元素在数组中的位置。

数组反向查找元素索引 (lastIndexOf)

作用: 返回数组中最后一个匹配元素的索引,如果未找到则返回-1。

示例:

const numbers = [1, 2, 3, 4, 3, 5];
const lastIndex = numbers.lastIndexOf(3);
// lastIndex: 4

常见场景: 反向查找元素在数组中的位置。

数组切割 (slice)

作用: 从数组中提取一个子数组,不会修改原数组。

示例:

const fruits = ['apple', 'banana', 'cherry', 'date'];
const slicedFruits = fruits.slice(1, 3);
// slicedFruits: ['banana', 'cherry']

常见场景: 提取部分数组,而不影响原始数据。

数组连接 (concat)

作用: 连接两个或多个数组,并返回一个新数组。

示例:

const fruits1 = ['apple', 'banana'];
const fruits2 = ['cherry', 'date'];
const combinedFruits = fruits1.concat(fruits2);
// combinedFruits: ['apple', 'banana', 'cherry', 'date']

常见场景: 将多个数组合并成一个。

数组元素查找 (find 和 findIndex)

作用: find返回数组中满足条件的第一个元素,findIndex返回数组中满足条件的第一个元素的索引。

示例:

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(num => num % 2 === 0);
const evenIndex = numbers.findIndex(num => num % 2 === 0);
// evenNumber: 2, evenIndex: 1

常见场景: 查找满足特定条件的元素或索引。

数组元素过滤 (filter)

作用: 创建一个新数组,其中包含满足条件的所有元素。

示例:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers: [2, 4]

常见场景: 从数组中过滤出满足条件的元素。

数组元素映射 (map)

作用: 创建一个新数组,其中包含对原数组中的每个元素应用函数后的结果。

示例:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
// squaredNumbers: [1, 4, 9, 16, 25]

常见场景: 对数组中的每个元素进行转换或映射。

数组元素归并 (reduce)

作用: 将数组中的元素累积为一个值,通过指定的函数。

示例:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
// sum: 15

常见场景: 对数组中的元素执行归纳操作,如计算总和或找到最大值。

数组元素迭代 (forEach)

作用: 遍历数组中的每个元素,对每个元素执行提供的函数。

示例:

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
// 输出: 'apple', 'banana', 'cherry'

常见场景: 执行对每个元素的操作,例如打印或发送请求。

数组元素去重 (filter 和 Set)

作用: 使用filterSet对象来去重数组中的元素。

示例:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((value, index, self) => self.indexOf(value) === index);
// 或者
const uniqueNumbers2 = [...new Set(numbers)];
// uniqueNumbers: [1, 2, 3, 4, 5]

常见场景: 去除数组中的重复元素。

数组元素排序和去重 (sort 和 Set)

作用: 使用sort方法进行排序,然后使用Set对象去重。

示例:

const numbers = [5, 2, 9, 2, 1, 5];
const sortedUniqueNumbers = [...new Set(numbers.sort((a, b) => a - b))];
// sortedUniqueNumbers: [1, 2, 5, 9]

常见场景: 对数组元素进行排序并去重。

数组元素计数 (reduce 和 Object)

作用: 使用reduce和对象来计算数组中每个元素的出现次数。

示例:

const fruits = ['apple', 'banana', 'cherry', 'apple', 'banana'];
const fruitCount = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

常见场景: 计算数组中元素的出现频率。

数组元素计数 (reduce 和 Map)

作用: 使用reduceMap对象来计算数组中每个元素的出现次数。

示例:

const fruits = ['apple', 'banana', 'cherry', 'apple', 'banana'];
const fruitCount = fruits.reduce((acc, fruit) => {
  acc.set(fruit, (acc.get(fruit) || 0) + 1);
  return acc;
}, new Map());

常见场景: 计算数组中元素的出现频率,同时保留键值对。


相关文章
|
12天前
|
前端开发 JavaScript 算法
使用 JavaScript 数组方法实现排序与去重
【10月更文挑战第21天】通过灵活运用 `sort()` 方法和 `filter()` 方法,我们可以方便地实现数组的排序和去重。同时,深入理解排序和去重的原理,以及根据实际需求进行适当的优化,能够更好地应对不同的情况。可以通过实际的项目实践来进一步掌握这些技巧,并探索更多的应用可能性。
93 59
|
12天前
|
JavaScript 前端开发
JavaScript 数组方法汇总
【10月更文挑战第21天】这些是 JavaScript 数组中一些常见的方法,它们为我们处理数组提供了强大的工具,使我们能够更加方便快捷地操作数组。你可以根据具体的需求选择合适的方法来实现相应的功能。同时,还可以通过组合使用这些方法来实现更复杂的数组操作。还可以进一步深入研究和探索其他数组方法,以发掘更多的应用场景和潜力。
82 59
|
27天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
35 4
js学习--制作猜数字
|
26天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
42 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
27天前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
35 4
|
26天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
14 2
|
26天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
15 2
|
26天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
31 1
|
26天前
|
JavaScript
js学习--抽奖
js学习--抽奖
12 1
|
26天前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
28 1