JavaScript精华：掌握ES6展开运算符与类数组对象的深入解析

answerball
533 阅读5分钟

引言

随着Web技术的发展，JavaScript作为一门广泛使用的编程语言，其功能也在不断进化。特别是ECMAScript 6（简称ES6）的引入，为开发者们带来了许多新的语法特性和API，极大地简化了开发流程。本文将深入探讨两个重要的知识点：ES6中的展开运算符以及如何处理DOM查询结果得到的类数组对象NodeList。通过具体的示例和详细的解释，帮助读者更好地理解和应用这些新特性。

ES6展开运算符：让代码更简洁优雅

1. 什么是展开运算符？

在ES6中，...符号被称为展开运算符，它提供了一种简单而强大的方式来处理数组或对象。展开运算符允许你将一个数组或对象“展开”成独立的元素，这在函数调用、数组构造或是对象合并等场景下非常有用。

  • 基础用法

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

  • 应用于函数参数传递

    function sum(a, b, c) {
  return a + b + c;
}
let numbers = [10, 20, 30];
console.log(sum(...numbers)); // 输出: 60

    在这个例子中，原本需要分别指定每个参数值的地方，现在可以直接使用数组并利用展开运算符自动分配给函数参数。

  • 字符串转换为字符数组 展开运算符同样适用于字符串，可以轻松地将其转换为字符数组。

    let str = 'hello';
console.log([...str]); // 输出: ['h', 'e', 'l', 'l', 'o']

    这比使用split('')方法更为直观且简洁。

  • 对象的浅复制 当处理对象时，展开运算符可以用于创建一个现有对象的新副本。

    let obj = { name: 'Alice', age: 25 };
let newObj = { ...obj, age: 30 }; // 修改年龄属性
console.log(newObj); // 输出: { name: 'Alice', age: 30 }

2. 实际应用场景分析

  • 合并多个数组

    let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2]; // 合并两个数组
console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]

  • 默认参数值

    function displayInfo({ name = 'Guest', role = 'Visitor' } = {}) {
  console.log(`Name: ${name}, Role: ${role}`);
}
displayInfo(); // 使用默认值
displayInfo({ name: 'John' }); // 只提供部分参数

类数组对象：NodeList 的巧妙运用

在HTML文档中使用document.getElementsByTagName()方法返回的是一个HTMLCollection对象，而document.querySelectorAll('p')则返回一个NodeList对象。两者虽然都具有类似数组的行为，但它们之间存在一些关键的区别。下面是对这两个概念的详细解释以及如何将它们转换为真正的数组的方法。

HTMLCollection vs NodeList

  • HTMLCollection

    • 返回的是一个实时更新的集合，这意味着如果DOM发生变化，这个集合也会自动更新。
    • 只包含元素节点（即标签），不包括文本节点、注释节点等。
    • 支持通过索引访问和namedItem方法（允许通过ID或name属性访问元素）。
    • 不支持forEach方法，也不支持其他数组方法如map, filter等。

  • NodeList

    • 同样可以是动态的（比如从document.querySelectorAll获取的）或静态的（比如从element.childNodes获取的）。
    • 包含所有类型的节点，不仅仅是元素节点。
    • 支持forEach方法，并且在现代浏览器中也支持迭代器协议，因此可以使用for...of循环。
    • 不支持其他数组方法如map, filter等。
我们可以进入到浏览器看看这些类数组和数组的区别：

我通过两种方式来创建两个类数组：

image.png

可以发现它们分别是HTMLCollection和NodeList。

image.png

然后再用标准的方式创建一个数组

image.png

image.png

通过观察我们可以清楚地看到类数组和数组的区别，类数组它只是含有数组的部分方法。

将 HTMLCollection 和 NodeList 转换为数组

既然HTMLCollection和NodeList都不是真正的数组，我们通常需要将它们转换为数组来利用所有的数组方法。这可以通过以下几种方式实现：

  1. 使用展开运算符（Spread Operator）

    const paragraphs = document.getElementsByTagName('p'); // HTMLCollection
const paragraphsArray = [...paragraphs];

const allParagraphs = document.querySelectorAll('p'); // NodeList
const allParagraphsArray = [...allParagraphs];

  2. 使用 Array.from() 方法

    const paragraphs = document.getElementsByTagName('p'); // HTMLCollection
const paragraphsArray = Array.from(paragraphs);

const allParagraphs = document.querySelectorAll('p'); // NodeList
const allParagraphsArray = Array.from(allParagraphs);

  3. 使用 Array.prototype.slice.call() 方法

    深色版本
const paragraphs = document.getElementsByTagName('p'); // HTMLCollection
const paragraphsArray = Array.prototype.slice.call(paragraphs);

const allParagraphs = document.querySelectorAll('p'); // NodeList
const allParagraphsArray = Array.prototype.slice.call(allParagraphs);

示例代码

下面是结合了上述知识点的一个完整示例，展示了如何处理HTMLCollection和NodeList，并将其转换为数组进行操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>类数组与ES6展开运算符</title>
</head>
<body>
  <p id="para1">这是第1个段落</p>
  <p id="para2">这是第2个段落</p>
  <p id="para3">这是第3个段落</p>

  <script>
    // 获取HTMLCollection
    const paragraphs = document.getElementsByTagName('p');
    console.log("HTMLCollection:", paragraphs);

    // 使用展开运算符转换为数组
    const paragraphsArray = [...paragraphs];
    console.log("转换后的数组:", paragraphsArray);

    // 使用数组方法
    paragraphsArray.forEach((para, index) => {
      para.textContent = `这是第${index + 1}个修改后的段落 (HTMLCollection)`;
    });

    // 获取NodeList
    const allParagraphs = document.querySelectorAll('p');
    console.log("NodeList:", allParagraphs);

    // 使用展开运算符转换为数组
    const allParagraphsArray = [...allParagraphs];
    console.log("转换后的数组:", allParagraphsArray);

    // 使用数组方法
    allParagraphsArray.forEach((para, index) => {
      para.textContent = `这是第${index + 1}个修改后的段落 (NodeList)`;
    });
  </script>
</body>
</html>

在这个示例中，我们首先通过getElementsByTagName获取到一个HTMLCollection，然后通过querySelectorAll获取到一个NodeList。接着，我们分别使用展开运算符将它们转换为数组，并利用数组的forEach方法对每个段落的内容进行了修改。这样不仅可以让我们更方便地操作这些元素，同时也使得代码更加简洁和易于理解。

结语

通过对ES6展开运算符以及如何处理类数组对象NodeList的深入讨论，我们不仅学习到了如何编写更加简洁高效的JavaScript代码，还了解了如何灵活应对DOM操作中的常见问题。希望本篇文章能为你的前端开发之旅增添一抹亮色！

20200229174423_bzukt.jpg

avatar
文章
阅读
粉丝