你不知道的16个js原生函数和属性的区别(1)，web前端开发规范手册

asnmd1283

于 2024-03-31 01:17:07 发布

阅读量429

点赞数 4

分类专栏： 2024年程序员学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/asnmd1283/article/details/137188664

版权

2024年程序员学习专栏收录该内容

51 篇文章 1 订阅

订阅专栏

textContent是剔除html标签，<br/>无效，\t、\r、\n和连续的空格将生效。

节点取值 value , nodeValue

Node.nodeValue[11]

对于text, comment, 和 CDATA 节点来说, nodeValue返回该节点的文本内容.
对于 attribute 节点来说, 返回该属性的属性值.

对应着下面表格的 nodeType的值 text 3,4,8

| 常量 | nodeType 值 | 描述 |

| — | — | — |

| Node.ELEMENT_NODE | 1 | 一个元素节点，例如 |

和

|| Node.TEXT_NODE | 3 | Element 或者 Attr 中实际的文字 || Node.CDATA_SECTION_NODE | 4 | 一个 CDATASection，例如 <!CDATA[[ … ]]>。|| Node.PROCESSING_INSTRUCTION_NODE | 7 | 一个用于XML文档的 ProcessingInstruction (en-US) ，例如声明。|| Node.COMMENT_NODE | 8 | 一个 Comment 节点。|| Node.DOCUMENT_NODE | 9 | 一个 Document 节点。|| Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的 DocumentType 节点。例如就是用于 HTML5 的。|| Node.DOCUMENT_FRAGMENT_NODE | 11 | 一个 DocumentFragment 节点 |

value

特定的一些HTMLElement元素，用value属性获取其值。常见的有value属性的元素如下：

HTMLInputElement[12] <input value="1" />
HTMLTextAreaElement[13] <textarea value= "你哈" />
HTMLButtonElement[14] <button value= "提交" />
HTMLDataElement[15] <data value="21053">圣女果</data>
HTMLSelectElement[16] <select><option value ="volvo">Volvo</option>
HTMLOptionElement[17] <select><option value ="volvo">Volvo</option>
HTMLParamElement[18]

复制代码

HTMLProgressElement[19] <progress value="22" max="100"></progress>

总结

nodeValue 是文本节点，属性节点，注释节点等类型的节点用来取值的方法
vlaue是特定的元素节点用来取值的方法

节点复制 adoptNode, importNode, cloneNode

Document.adoptNode[20]

将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.

Document.importNode[21]

从其他的document文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 , 并且它的ownerDocument 属性会变成当前的document文档。之后你可以把这个节点插入到当前文档中。

Node.cloneNode[22]

生成节点的一个副本。

实际上 Document 是继承自 Node，也具备cloneNode方法。

这里提一个问题：

Document.adoptNode与Document.importNode是操作外部文档的，那么操作所在的文档会有什么效果呢？

Node.cloneNode 有一个boolean类型的可选参数deep：

true: 则该节点的所有后代节点也都会被克隆
false: 则只克隆该节点本身.

注意

cloneNode deep参数在不同版本的浏览器实现中，默认值可能不一样，所以强烈建议写上值。
cloneNode 会克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如οnclick=“alert(1)”),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件

总结

adoptNode 从外部文档进行拷贝
importNode 从外部文档进行拷贝，并从外部文档删除
cloneNode 从本文档进行复制，有浅复制和深复制

父节点 childNodes , children

Node.childNodes[23]

节点的子节点集合，包括元素节点、文本节点还有属性节点

ParentNode.children[24]

返回的只是节点的元素节点集合, 即 nodeType为1的节点。

例子

来实际看一段代码：

<!CDATA[[ 4 ]]>

复制代码

返回结果截图：

Node.parentNode与Node.parentElement也是同样的道理。

总结

children只返回元素节点，也就是 nodeType为1的节点
childNodes 返回所有类型的节点

添加节点 append, appendChild

node.appendChild[25]

将一个节点附加到指定父节点的子节点列表的末尾处

ParentNode.append[26]

方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点.

例子

我们一次append三个节点，其中两个文本节点，一个div节点。

复制代码

image.png

总结

ParentNode.append()允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

简直说， append强大太多了。

文档可见状态 Document.hidden, Document.visibilityState

document.hidden[27]

返回布尔值，表示页面是（true）否（false）隐藏。

Document.visibilityState[28]

返回document的可见性, 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .
‘prerender’ : 页面此时正在渲染中, 因此是不可见的 . 文档只能从此状态开始，永远不能从其他值变为此状态 .注意: 浏览器支持是可选的.

当此属性的值改变时, 会递交 visibilitychange 事件给Document.

例子

我们先输出当前状态，然后点击别的tab,等下再点击回来。

console.log(

“visibilityState:”,

document.visibilityState,

" hidden:",

document.hidden,

);

console.log(“”);

document.addEventListener(“visibilitychange”, function () {

console.log(

“visibilityState:”,

document.visibilityState,

" hidden:",

document.hidden

);

});

复制代码

image.png

我们日常可以用visibilitychange来监听当前页面处于隐藏时，去清除定时器或页面中的动画, 停止音乐视频等的播放。

我还想到一个有意思的

广告倒计时

你离开后，不算倒计时，会不会被骂死

阅读某些协议

你离开后，停止倒计时

总结

hidden 与 visibilityState 返回值不同，一个是布尔值，一个是字符串
visibilityState 的状态多一种 prerender, 其对应的hidden的值是true
visibilityState e有相关的事件

函数调用 call, apply, bind

Function.prototype.call[29]

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

Function.prototype.apply[30]

调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数

Function.prototype.bind[31]

方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

例子

function sum(…args) {

const total = args.reduce((s, cur) => {

return s + cur;

}, 0);

return (this.base || 0) + total;

}

const context = {

base: 1000

};

const bindFun = sum.bind(context, 1, 2);

const callResult = sum.call(context, 1, 2, 3, 4);

const applyResult = sum.apply(context, [1, 2, 3, 4]);

const bindResult = bindFun(3, 4);

console.log(“call:”, callResult); // 1010

console.log(“apply:”, applyResult); // 1010

console.log(“bind:”, bindResult); // 1010

复制代码

总结

相同点，都能改变被调用函数的this指向。

call: 第二个参数开始，可以接收任意个参数
apply: 第二个参数，必须是数组或者类数组
bind: 第二个参数开始，可以接收任意个参数 , 返回的是一个新的函数

注意点：

bind调用多次，this指向第一次第一个参数

log 调用了两次bind, 第一次bind{ val: 1 }, 第二次bind{ val: 2 }, 输出的this是一次bind的上下文

function log() {

console.log(“this”, this);

}

console.log(log.bind({ val: 1 }).bind({ val: 2 })()) // { val: 1 }

复制代码

再看一段类似的代码：

虽然this的指向不会再变改变，但是参数还是继续接受， arguments 长度为2，第一次bind的1，第二次bind的 2 , 都照单全收。

function log() {

console.log(“this”, this); // { val: 1 }

console.log(“arguments”, arguments); // { ‘0’: 1, ‘1’: 2 }

}

console.log(log.bind({ val: 1 }, 1).bind({ val: 2 }, 2)()) // 1

复制代码

字符串截取 substr, substring

String.prototype.substr[32]

返回一个字符串中从指定位置开始到指定字符数的字符

语法：第二参数，是需要截取的长度

str.substr(start[, length])

String.prototype.substring[33]

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

语法：第二参数，结束索引

str.substring(indexStart[, indexEnd])

例子

提示：

两个参数都没设置的时候，效果相同

第一个参数是大于等于0的整数，没设置第二参数的时候，效果相同

const str = “我们都是好孩子”;

console.log(str.substr()) // 我们都是好孩子

console.log(str.substring()) // 我们都是好孩子

console.log(str.substr(1)) // 们都是好孩子

console.log(str.substring(1)) // 们都是好孩子

console.log(str.substr(-1)) // 子

console.log(str.substring(-1)) // 我们都是好孩子

console.log(str.substr(1, 2)) // 们都

console.log(str.substring(1, 2)) // 们

复制代码

总结

substr 第二个参数是需要截取的长度
substring 第二个参数是结束索引值的
没指定参数或者第一个参数是大于等于0的整数时，效果相同
第一个参数是负数或者第二个参数是负数，处理规则不通

具体参见 substr[34]和 substring[35]

遍历 for of, for in

for in

获取enumerable:true的属性键

for of

遍历属性值。不受到enumerable限制。

例子

在数组原型上增加了方法gogo, for in结果中出现了，而 for of结果冲未出现。

定义了属性2不能被遍历， for in结果中未出现，而 for of结果中出现了。

// 原型上增加方法

Array.prototype.gogo = function(){

console.log(“gogo”);

}

var a = [1,2,3];

// key值2不可以枚举

Object.defineProperty(a, 2, {

enumerable: false

});

Object.defineProperty(a, “2”, {

enumerable: false

});

for(let p in a){

// 索引被遍历出来是字符串类型

console.log(p, typeof p); // 0 string; 1 string; gogo string

}

console.log(“—”)

for(let v of a){

console.log(v); // 1 2 3

}

复制代码

总结

for in

获取enumerable:true的属性键。
可以遍历对象。
可以获取原型上的属性键。
数字属性键被遍历出来是字符串。比如索引值

for of：

遍历属性值。不受到enumerable限制。
可遍历数组。一般不可以遍历对象，如果实现了Symbol.iterator，可以遍历。如Array，Map，Set，String，TypedArray，arguments 对象等等
不能获取原型上的值

当前时间 Date.now(), Performance.now()

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-Fjftug3n-1711819015916)]
[外链图片转存中…(img-6PGTsGnx-1711819015916)]
[外链图片转存中…(img-m14Jtds2-1711819015917)]
[外链图片转存中…(img-sFlAaZTh-1711819015917)]
[外链图片转存中…(img-ncg4wDom-1711819015918)]
[外链图片转存中…(img-myBDFbnw-1711819015918)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-zAU4kJOG-1711819015919)]