重学JS-009 --- JavaScript算法与数据结构（九）Javascript 方法

js 对象

js 中对象表示 {} ，这是一个空对象，而且对象中是可以嵌套对象的。

确保不能通过添加或删除任何属性来修改此对象。将使用一种名为 Object.freeze(obj) 的方法，它将冻结该对象并防止对其进行任何更改。

对象解构语法允许你从数组和对象中解包值：

js 复制代码

const developerObj = {
  name: "Jessica Wilkins",
  isDeveloper: true
};

// Object destructuring
const { name, isDeveloper } = developerObj;

.map() 方法将返回一个由逗号分隔的新数组。

对于回调函数，传入 e 作为参数。e 表示包含该事件信息的对象。

e.target.value 表示 playersDropdownList 元素中的 value 属性。

在 filter 方法内部，可添加参数的回调函数。

重要特性与注意事项

不修改原数组：filter()不会改变原始数组，而是返回一个全新的数组。这是函数式编程的一个重要原则，有助于避免副作用。
总是遍历整个数组：与 find()方法找到第一个匹配项就停止不同，filter()会遍历数组中的每一个元素。如果你只需要找到第一个符合条件的元素，使用 find()会更高效。
处理稀疏数组：对于存在"空位"（如 [1, , 3]）的稀疏数组，filter()会跳过这些空位。
性能考虑：由于会遍历整个数组，在处理非常大的数据集时，如果有可能提前终止循环，可能需要考虑其他优化方案。但在绝大多数日常场景下，filter()的性能已经足够优秀。

在JavaScript中，textContent是一个用于获取或设置HTML元素及其所有后代节点中文本内容的属性。它与 innerText和 innerHTML等其他属性有所不同，主要体现在其行为、性能和应用场景上。

💻 textContent 的核心特性

textContent的主要特点是它会获取指定节点及其所有子节点中的所有文本内容，包括那些通过CSS（如 display: none）隐藏的元素的文本，并且不会解析其中的HTML标签。

- 获取所有文本：它会返回节点下的完整文本内容，不受CSS样式影响，包括

- 设置内容为纯文本：当使用 textContent设置内容时，它会将元素内的所有现有内容替换为一个单一的文本节点。即使你设置的字符串中包含HTML标签，这些标签也会被当作普通文本显示，而不会被浏览器解析。这使其能有效防范XSS（跨站脚本）攻击。

⚖️ textContent 与 innerText 的区别

理解 textContent和 innerText的区别对于正确选择使用哪个属性至关重要。

特性	textContent	innerText
可见性处理	返回所有文本，包括隐藏元素的文本	只返回用户可见的文本，忽略通过CSS隐藏的文本（如 display: none）
CSS依赖	不依赖CSS样式，性能较好	依赖CSS样式，需要触发回流（reflow）来计算布局，性能相对较差。
空白字符处理	保留源代码中的空白字符（如换行和多个连续空格）	会合并空白字符，使其更接近视觉渲染效果
浏览器兼容性	在现代浏览器中得到良好支持（IE9+）	在旧版IE浏览器中兼容性更好，但现代浏览器也已支持

总结

textContent是 JavaScript 中一个强大且高效的属性，适用于需要获取或设置元素完整纯文本内容的场景。它与 innerText的关键区别在于是否考虑CSS样式和元素的可见性。在大多数需要处理纯文本的情况下，尤其是对性能和安全性有要求时，textContent是推荐的选择。