深入探索 JavaScript 数组的强大功能

阿贾克斯的黎明

于 2024-10-06 17:52:42 发布

阅读量159

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_57836225/article/details/142729766

版权

前端专栏收录该内容

93 篇文章 0 订阅

订阅专栏

2. unshift () 和 shift ()

3. slice () 和 splice ()

1. 数组的展开语法（Spread Syntax）

2. 数组的解构赋值

四、总结

在 JavaScript 中，数组是一种非常重要且灵活的数据结构，它提供了众多强大的方法和特性来处理数据。让我们深入了解数组的各种功能，包括Array.from方法以及其他常用的数组操作。

一、Array.from 的魅力

Array.from是一个强大的方法，它可以从类数组对象或可迭代对象创建一个新的数组实例。

1. 从类数组对象创建数组

有时候我们会遇到具有类似数组结构的对象，但它们不是真正的数组。例如，document.querySelectorAll返回的结果就是一个类数组对象。Array.from可以将其转换为真正的数组，以便我们可以使用数组的方法进行操作。

const elements = document.querySelectorAll('div');
const arrayOfElements = Array.from(elements);
arrayOfElements.forEach(element => console.log(element));

2. 从可迭代对象创建数组

可迭代对象是指可以被for...of循环遍历的对象，如Set、Map等。Array.from可以将这些可迭代对象转换为数组。

const mySet = new Set([1, 2, 3]);
const arrayFromSet = Array.from(mySet);
console.log(arrayFromSet);

我们还可以在创建数组的过程中使用映射函数对每个元素进行转换。

const numbers = [1, 2, 3];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers);

二、数组的其他强大方法

1. push () 和 pop ()

push()方法用于在数组的末尾添加一个或多个元素，并返回新的数组长度。
pop()方法用于删除数组的最后一个元素，并返回被删除的元素。

const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
const removedFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(removedFruit); // 'orange'

2. unshift () 和 shift ()

unshift()方法用于在数组的开头添加一个或多个元素，并返回新的数组长度。
shift()方法用于删除数组的第一个元素，并返回被删除的元素。

const colors = ['red', 'green'];
colors.unshift('blue');
console.log(colors); // ['blue', 'red', 'green']
const removedColor = colors.shift();
console.log(colors); // ['red', 'green']
console.log(removedColor); // 'blue'

3. slice () 和 splice ()

slice()方法用于提取数组的一部分，并返回一个新的数组，不会修改原始数组。
splice()方法用于在数组中添加或删除元素，并返回被删除的元素组成的数组，会修改原始数组。

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // [2, 3, 4]
const splicedNumbers = numbers.splice(2, 1);
console.log(splicedNumbers); // [3]
console.log(numbers); // [1, 2, 4, 5]

4. map()

map()方法创建一个新数组，其结果是对原数组中的每个元素调用提供的函数后的返回值。

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6]

5. filter()

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

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

6. reduce()

reduce()方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

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

三、数组的高级用法

1. 数组的展开语法（Spread Syntax）

展开语法允许我们在数组字面量中展开一个数组，或者在函数调用中展开一个可迭代对象作为参数。

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const combinedNumbers = [...numbers1,...numbers2];
console.log(combinedNumbers); // [1, 2, 3, 4, 5, 6]

2. 数组的解构赋值

数组解构赋值允许我们从数组中提取值并将其分配给变量。

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

四、总结

JavaScript 数组提供了丰富的功能和方法，使我们能够高效地处理数据。Array.from方法为我们提供了一种从类数组对象和可迭代对象创建数组的强大方式，而其他数组方法如push、pop、map、filter等则让我们能够对数组进行各种操作和转换。掌握这些功能将使我们在 JavaScript 开发中更加得心应手。