JS 【精华速查版】2024最新版

本文主要是介绍JS 【精华速查版】2024最新版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JS 的特点

• 单线程
  • JS 和 DOM 渲染共用同一个线程，因为 JS 可修改 DOM 结构
  • 同一时间只能做一件事，DOM 渲染会阻塞 JS 的执行
  • 浏览器和 nodeis 已支持 JS 启动进程，如 Web Worker (只能执行 js 计算，无法渲染 DOM)
• 弱类型
• 跨平台
• 解释型语言
• 以事件驱动为核心
• 遵循 ES 标准

严格模式 的特点

数据类型有哪些

• 值类型（ 6 种）：Number、String、Boolean、Null、Undefined、Symbol（ES6新增）
• 引用类型（1 种）：Object

解构赋值

【实战】互换赋值

let a=1, b=2;
[b,a] = [a,b]
console.log(a,b) //2 1

作用域

即变量的合法使用范围

• 全局作用域——全局可使用
• 函数作用域——函数内可使用
• 块级作用域(ES6 新增)——代码块内能使用 （如 if、for 语句的 {} 内）

自由变量

• 一个变量在当前作用域没有定义，但被使用了
• 在变量定义的地方（不是执行的地方）向上级作用域一层一层寻找，直至找到为止
• 如果到全局作用域都没找到，则报错 xx is not defined

函数

函数声明和函数表达式的区别

• 函数声明 function fn() {…}

• 函数表达式 const fn= function() {…}

• 函数声明会在代码执行前预加载，而函数表达式不会

  函数在声明前调用，可以正常执行，改用函数表达式就不行，调用时变量 fn 还不是函数，会报错。

普通函数和箭头函数的区别

箭头函数不适用的场景

• 构造函数不能使用箭头函数（箭头函数没有自己的this，所以不能作为构造函数使用，也不能通过new操作符调用）
• 事件监听的回调函数不能使用箭头函数（事件监听的回调函数中需通过 this 读取元素本身，但箭头函数内的 this 为外层的 window）
• 对象的方法不适合使用箭头函数（对象方法需要通过 this 获取对象自己，但箭头函数内的 this 为外层的 window）
• 原型链的方法不适合使用箭头函数（原因与对象的方法相同）
• Vue 的生命周期和方法不能使用箭头函数（原因与对象的方法相同）

回调函数

被作为另一个函数的参数传入的函数

闭包

this关键字是如何工作的？（this 的指向）

• 全局上下文中，this 指向全局对象（在浏览器中是window）
• 事件监听器中，this 指向触发事件的元素
• 类的静态方法中，this 指向类
• 普通函数中，this 指向全局对象（在浏览器中是window）
• 构造函数中，this 指向新创建的对象实例
• 箭头函数中，this 指向外层作用域的 this
• 对象的方法用普通函数书写，被调用时 this 指向对象，用箭头函数书写时，this 指向外层的 this （在浏览器中是window）
• bind、call、apply 方法创建的新函数中 ，this 指向方法的第一个参数

详见
https://mp.csdn.net/mp_blog/creation/success/123093256

原型 vs 原型链

异步

Promise

let p1 = new Promise((resolve, reject) => {});

let p1 = new Promise((resolve, reject) => {resolve();
});let p2 = p1.then(function () {console.log("打印 p1 --", p1); // p1 状态为 fulfilled
});// 若then函数内无报错，p2 状态为 fulfilled，若报错，则 p2 状态为 rejected
console.log("打印 p2 --", p2);

let p1 = new Promise((resolve, reject) => {reject();
});let p2 = p1.catch(function () {console.log("打印 p1 --", p1); // p1 状态为 rejected 
});// 若catch 函数内无报错，p2 状态为 fulfilled，若报错，则 p2 状态为 rejected
console.log("打印 p2 --", p2);

Promise 的串行执行

async function promise_serial() {let result = [];result.push((await promise_list[2]).data);result.push((await promise_list[1]).data);result.push((await promise_list[0]).data);console.log(result);
}promise_serial();

Promise 的并行执行

Promise.all() 用于将多个 Promise 实例，包装成一个新的 Promise 实例，实现等待多个 Promise 实例全部变为 fulfilled 状态才执行目标操作。

import axios from 'axios'let infoList = []let id_list = ['1', '2', '3']let promise_list = []for (let id of id_list) {promise_list.push(axios.get(`http://jsonplaceholder.typicode.com/users/${id}`))
}Promise.all(promise_list).then((res) => {infoList = res.map((item) => item.data)console.log(infoList) // 得到预期结果
})

async await

  try {const res = await p4;console.log('await后的Promise执行成功后的返回值res:',res);} catch (err) {console.error('await后的Promise执行失败后的报错err:',err); }

JS 代码在浏览器中的执行顺序

异步任务分为 微任务 和 宏任务

• 同步任务放入调用栈 Call Stack
• 微任务（Promise，async、await 等） 放入微任务队列 micro task queue
• 宏任务（setTimeout ，setInterval、ajax、Dom事件等） 放入 Web APIs 中

添加 async 的函数本身不是异步，内部代码会同步执行，遇到 await 时，await 后紧跟的函数会立即执行，是同步任务，await 语句后的代码才是异步微任务

async function async1() {console.log("async1 start"); // 第 1 个打印await async2(); // 先执行 async2() , 进入 async2 函数内// await 后的代码都是微任务，将其放入微任务队列 --- 微任务 1console.log("async1 end"); // 第 3 个打印
}// 定义函数，先跳过
async function async2() {console.log("async2"); // 第 2 个打印
}// 代码从此开始执行，进入 async1 函数内
async1(); 

执行结果

async1 start
async2
async1 end

Promise 函数内的代码是同步执行，待 Promise 执行 resolve() 后会立即触发 then 函数，then 函数内的代码才是异步微任务

new Promise(function (resolve) {console.log("promise 函数内"); // 第1个打印resolve(); // Promise 状态变为 resolved , 立即触发了 then 函数
}).then(function () {// then 函数是个微任务，将其放入微任务队列console.log("then 函数内"); // 第3个打印
});console.log("promise 函数外"); // 第2个打印

执行结果

promise 函数内
promise 函数外
then 函数内

setTimeout 和 setInterval 从被放入 Web APIs 开始计时，计时结束后，会放入回调队列（Callback Queue），等待 event loop 触发执行

对象

创建对象的方法

• {}
• 构造函数，含 new Object()
• Object.create()
• 类
• 工厂函数

{}、Object()、new Object()、Object.create() 的区别

• {} 是通过字面量的方式创建空对象，原型为 Object.prototype，语法最简洁，也最常用。
• Object() 与 new Object() 功能相同，无论传入什么参数，其创建的对象的原型都是 Object.prototype，但 new Object() 创建对象的意图更明确
• Object.create() 创建的对象的原型由其传入的第一个参数决定。

【实战】判断变量是否为空对象

if(JSON.stringify(obj)==="{}"){// 是空对象
}

数组

【实战】判断是否为数组

Array.isArray(val)

数组常用的 API

数组的 API，有哪些是纯函数 ?

• concat
• map
• filter
• slice

纯函数：1.不改变源数组 2.返回一个数组

数组遍历

数组去重

let oldList = [1, 2, 3, 3];
let newList = Array.from(new Set(oldList)); // 得到 [1, 2, 3]

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])
console.log(newArr);// [1, 2, 3, 4]

事件

事件冒泡 vs 事件捕获

• 事件冒泡指事件从触发事件的元素开始，逐级向外传播至 html 节点
• 事件捕获指事件从 html 节点，逐级向内传播到触发事件的元素

异常

throw 语句手动抛出异常

// 用户定义的 throw 语句 --- 通用错误
throw new Error('The number is low');

try catch 语句手动捕获并处理异常

try {// 执行目标代码
} catch (err) {// 控制台打印报错信息console.log(err);
} finally {// 无论是否报错都会执行的代码
}

常见的异常：

• 通用错误 Error
• 语法错误 SyntaxError
• 类型错误 TypeError
• 引用错误 ReferenceError
• 范围错误 RangeError

垃圾回收 GC

导致内存泄漏的场景

• 不断创建全局变量
• 未及时清理的闭包
• DOM元素的引用
• 事件监听器

避免内存泄漏的方法

• 避免创建全局变量。
• 使用严格模式或者let/const声明变量。
• 及时解除DOM元素的引用。
• 在移除DOM元素之前，移除相关的事件监听器。
• 使用弱引用或者引用计数来处理循环引用的问题。（如使用 WeakMap 和 WeakSet）
• 使用try/catch/finally来确保资源在异常发生时也能被正确释放。

JS 的垃圾回收机制 GC

• 引用计数（之前）
• 标记清除（现代）
• 标记整理（优化）
• 分代式垃圾回收（V8引擎）

其他

延迟加载

https://blog.csdn.net/weixin_41192489/article/details/141133404

监控白屏、首屏

// 监听DOMContentLoaded事件来计算首屏时间和白屏时间
document.addEventListener('DOMContentLoaded', (event) => {const perf = performance.timing;// 首屏时间（First Paint）const firstPaint = event.timeStamp - perf.navigationStart;console.log(`首屏时间（First Paint）: ${firstPaint} ms`);// 通过DOMContentLoaded事件的延迟来估算白屏时间const whiteScreenTime = event.timeStamp - perf.fetchStart;console.log(`估算的白屏时间: ${whiteScreenTime} ms`);
});

这篇关于JS 【精华速查版】2024最新版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！