js里面有些东西我们经常写，但是一些小技巧我们没有用
# 十分有用的小技巧
document.anchors // 返回文档中所有锚点元素的列表。
document.characterSet // 返回文档正在使用的字符集。
document.documentURI // 以字符串的类型，返回当前文档的路径。(当前页面的url)
document.head // 返回当前文档的 <head> 元素。
// 查看页面是否隐藏
document.hidden // 通常配合visibilitychange方法使用
document.addEventListener("visibilitychange", function() {
if( document.hidden ) {
// 页面不可见（当前浏览器没有聚焦到当前标签页）
}else {
// 页面可见（当前浏览器聚焦到当前标签页）
}
});
document.images // 返回当前文档中所包含的图片的列表。
document.links // 返回一个包含文档中所有超链接的列表。
document.designMode // 控制整个文档是否可编辑,有效值为 "on" 和 "off"
var mode = document.designMode; "on" || "off"
designMode 是一个可读写的属性，默认值 "off"。
当你在浏览器中启用调试工具并切换到Console，输入 document.designMode = 'on' 你就可以发现整个页面就可以被编辑了
当然这是一个整体页面的，如果想控制其中一个html元素可以编辑怎么办呢？ 答案就是 div.contentEditable = 'true'
document.dir // 获取或设置文档的文字方向（rtl 或 ltr）
document.URL // 只读 以字符串的类型，返回当前文档的路径
document.referrer // 返回来源页面的url
document.domain // 获取或设置当前文档的域名
document.readyState // 返回当前文档的加载状态 loading / 正在加载 interactive / 可交互 complete / 完成
switch (document.readyState) {
case "loading":
// 表示文档还在加载中，即处于“正在加载”状态。
break;
case "interactive":
// 文档已经结束了“正在加载”状态，DOM元素可以被访问。
// 但是像图像，样式表和框架等资源依然还在加载。
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// 页面所有内容都已被完全加载.
let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
console.log(`The first CSS rule is: ${CSS_rule }`);
break;
}
// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
// 模拟 load 事件
document.onreadystatechange = function () {
if (document.readyState === "complete") {
initApplication();
}
}
防抖
在n秒后执行函数 如果在n秒内再次触发则重新计算
//防抖的封装
function debounce(fn, delay = 500) { //fn要执行的方法 delay时间默认是500
let timer;
return function () {
var self = this //拿到this vue中使用指向vue
var args = arguments //获取参数
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(self, args)
}, delay)
}
}
let input = document.querySelector("input");
input.onkeyup = debounce((arr) => { //如果有参数会被收集到这里
console.log(input.value);
})
// vue中使用
methods: {
getCode: throttle(function () {
this.$refs.registerForm.validateField('mailbox',err => {
if (err) return;
console.log("发送");
});
}, 5000),
},
节流
在n秒内只执行一次
let input = document.querySelector("input");
input.onkeyup = throttle(()=>{
console.log(input.value);
},10000)
function throttle(fn,tiem = 1000) {
let lock = true;
return function(){
var self = this //拿到this vue中使用指向vue
var args = arguments //获取参数
if (!lock) {
return
}
fn.apply(self, args) // 回调函数中拿到参数
lock = false //关锁
setTimeout(() => {
lock = true
}, tiem);
}
}
js代码严格模式：
"use strict";
交错合并数组
Array.from({ length: Math.max(arr1.length, arr2.length) }, (_, i) => [arr1[i], arr2[i]]).flat()
反向链接
//创建链表的节点:在js里面可以用构造函数来创建列表的节点
function Node(val) {
this.value = val;
this.next = null;
}
//首先需要新建链表的方法
function createList(arr) {
let head = new Node(arr[0]);
let tail = head;
for (let i = 1; i <= arr.length - 1; i++) {
tail.next = new Node(arr[i]);
tail = tail.next;
/* tail.next = {
value: 1,
next: new Node(arr[i]) //i++
} */
}
return head;
}
//生成链表
let linkedList = createList([1, 2, 3, 4, 5])
console.log(linkedList);
function reverseList(head) {
// 1.遍历链表,把链表里面的每个值都拿下来并缓存
// (在这里我存的节点的值,而不是存整个节点,这样是可以节约内存的)
let arr = []; //arr用于储存链表的节点的值
let p = head; //p用于遍历链表
while (p) {
arr.push(p.value);
p = p.next;
}
// 2.再次遍历列表,将数组里面的值倒序的赋值给每一个节点的value域就实现了链表的反转
// (这里我并没有考虑新建一个链表,而是用了原来的链表,可以节约创建新链表的时间和内存)
p = head;
while (p) {
p.value = arr.pop();
p = p.next;
}
return head;
}
let reservesLinkedList = reverseList(linkedList);
console.log(reservesLinkedList);
JavaScript 宏观任务和微观任务
宏观任务：宿主发起的任务 为宏观任务，如setTimeout、setInterval、setImmediate，I/O
微观任务：JavaScript引擎发起的任务 为微观任务,Promise 的.then .catch
微观的优先级是大于宏观的
在一个宏观任务中 只有微观任务全部运行完毕后才会继续执行下一个宏观任务
0、什么是JavaScript？
JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，JavaScript也是面向对象编程语言。
1、什么是全局变量？如何声明，使用有哪些问题？
全局变量没有任何作用域。如果省略var关键字，则声明一个全局变量。或window.变量名 = 赋值
2、解释JavaScript中定时器？说明定时器的缺点？
定时器用于在设定的时间执行一段代码，或者在给定的时间间隔内重复该代码。这通过使用函数setTimeout，setInterval和clearInterval来完成。
缺点：定时器在一个线程内运行，因此事件可能需要排队等待执行。
3、如何用JavaScript提交表单
submit（）
4、元素的样式如何改变？
答案：
document.getElementById(“id”).style.fontSize = "20";
或
document.getElementById(“myText”).className = "className";
5、“”和“=”之间的区别是什么？
答案：
“==”仅检查值相等；
“===”是一个更严格的等式判定，如果两个变量的值或类型不同，则返回false。
6、JavaScript中的弹出框有哪些类型？
答案：Alert、Confirm、Prompt。
7、讲述一下JavaScript中使用innerHTML的缺点
缺点：内容随处可见；不能像“追加到innerHTML”一样使用；即使你使用+ = like“innerHTML = innerHTML +'html'”旧的内容仍然会被html替换；整个innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多；innerHTML不提供验证，因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。
8、解释一下for-in循环
答案：
for-in循环用于循环对象的属性 得到的是key。
for-in循环的语法是：
在每次循环中，来自对象的一个属性与变量名相关联，循环继续，直到对象的所有属性都被耗尽。
9、如何在不支持JavaScript的旧浏览器中隐藏JavaScript代码？
答案：
可以在
浙公网安备 33010602011771号