重学JS-009 --- JavaScript算法与数据结构（九）Javascript 技巧
文章目录
- js 对象
- Object.freeze(obj);
- 对象解构语法
- js 三元字符
- map()
- 回调函数
- filter()
- textContent
js 对象
js 中对象表示 {} ，这是一个空对象，而且对象中是可以嵌套对象的。
Object.freeze(obj);
确保不能通过添加或删除任何属性来修改此对象。 将利用一种名为 Object.freeze(obj) 的方法，它将冻结该对象并防止对其进行任何更改。
对象解构语法
对象解构语法允许你从数组和对象中解包值：
const developerObj = {
name: "Jessica Wilkins",
isDeveloper: true
};
// Object destructuring
const { name, isDeveloper } = developerObj;js 三元字符
${isCaptain ? '(Captain)' : ''} ${name}
map()
.map() 方法将返回一个由逗号分隔的新数组。
回调函数
对于回调函数，传入 e 作为参数。e 表示包含该事件信息的对象。
e.target.value 表示 playersDropdownList 元素中的 value 属性。
filter()
在 filter 方法内部，可添加参数的回调函数。
重要特性与注意事项
不修改原数组：filter()不会改变原始数组，而是返回一个全新的数组。这是函数式编程的一个重要原则，有助于避免副作用 。
总遍历整个数组：与 find()方法找到第一个匹配项就停止不同，filter()会遍历数组中的每一个元素 。如果你只应该找到第一个符合条件的元素，使用 find()会更高效 。
处理稀疏数组：对于存在“空位”（如 [1, , 3]）的稀疏数组，filter()会跳过这些空位 。
性能考虑：由于会遍历整个数组，在处理非常大的素材集时，如果有可能提前终止循环，可能需要考虑其他优化方案。但在绝大多数日常场景下，filter()的性能已经足够优秀。
textContent
在JavaScript中，textContent是一个用于获取或设置HTML元素及其所有后代节点中文本内容的属性。它与 innerText和 innerHTML等其他属性有所不同，主要体现在其行为、性能和应用场景上。
textContent 的核心特性
textContent的主要特点是它会获取指定节点及其所有子节点中的所有文本内容，包括那些凭借CSS（如 display: none）隐藏的元素的文本，并且不会解析其中的HTML标签 。
- 获取所有文本：它会返回节点下的完整文本内容，不受CSS样式影响，包括
- 仅处理文本：它获取的是纯文本，HTML标签会被忽略，不会像 innerHTML那样返回HTML结构 。
- 设置内容为纯文本：当使用 textContent设置内容时，它会将元素内的所有现有内容替换为一个单一的文本节点。即使你设置的字符串中包含HTML标签，这些标签也会被当作普通文本显示，而不会被浏览器解析 。这使其能有效防范XSS（跨站脚本）攻击 。
⚖️ textContent 与 innerText 的区别
理解 textContent和 innerText的区别对于正确选择使用哪个属性至关重要。
| 特性 | textContent | innerText |
|---|---|---|
| 可见性处理 | 返回所有文本，包括隐藏元素的文本 | 只返回用户可见的文本，忽略通过CSS隐藏的文本（如 display: none） |
| CSS依赖 | 不依赖CSS样式，性能较好 | 依赖CSS样式，需要触发回流（reflow）来计算布局，性能相对较差 。 |
| 空白字符处理 | 保留源代码中的空白字符（如换行和多个连续空格） | 会合并空白字符，使其更接近视觉渲染效果 |
| 浏览器兼容性 | 在现代浏览器中得到良好承受（IE9+） | 在旧版IE浏览器中兼容性更好，但现代浏览器也已支持 |
总结
textContent是 JavaScript 中一个强大且高效的属性，适用于需获取或设置元素完整纯文本内容的场景。它与 innerText的关键区别在于是否考虑CSS样式和元素的可见性。在大多数需要处理纯文本的情况下，尤其是对性能和安全性有要求时，textContent是推荐的选择。