重学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是推荐的选择。