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

文章目录

js 对象

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

Object.freeze(obj);

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

对象解构语法

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

js 复制代码
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是推荐的选择。

相关推荐
东方佑35 分钟前
从字符串中提取重复子串的Python算法解析
windows·python·算法
西阳未落1 小时前
LeetCode——二分(进阶)
算法·leetcode·职场和发展
通信小呆呆1 小时前
以矩阵视角统一理解:外积、Kronecker 积与 Khatri–Rao 积(含MATLAB可视化)
线性代数·算法·matlab·矩阵·信号处理
Dfreedom.1 小时前
一文掌握Python四大核心数据结构:变量、结构体、类与枚举
开发语言·数据结构·python·变量·数据类型
CoderCodingNo2 小时前
【GESP】C++四级真题 luogu-B4068 [GESP202412 四级] Recamán
开发语言·c++·算法
一个不知名程序员www2 小时前
算法学习入门---双指针(C++)
c++·算法
saadiya~2 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再2 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Shilong Wang3 小时前
MLE, MAP, Full Bayes
人工智能·算法·机器学习
Theodore_10223 小时前
机器学习(6)特征工程与多项式回归
深度学习·算法·机器学习·数据分析·多项式回归