Javascript | LeylaTop

📄️ 4种方式判断this指向

如果要判断一个函数内的this指向，只有在运行这个函数的时候，才能知道。通过查看调用函数的方式，按照以下顺序来判断this的指向：

📄️ ES6-解构赋值

解构赋值：按照一定的模式，从数组和对象中提取值，对声明的变量进行赋值；如果被提取的不是数组或对象，则先转化成数组或对象。

📄️ Error及相关构造函数

1. 构造函数 Error 表示一个错误对象，当运行时错误产生时，Error 的实例对象会被抛出。Error 对象也可以用来创建自定义的异常对象。

📄️ JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的多选问题，并且同时也会在这个仓库中发布。

📄️ LHS 和 RHS

LHS 和 RHS 简单来说是一个赋值操作的左侧和右侧，L 就代表 Left 左侧，R 就是代表 Right 右侧。当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。

📄️ Object.entries 和 Object.fromEntries

Object.entries: 将对象或基于对象的可迭代对象转换为键值对数组

📄️ Service Worker

service worker 使用 navigator.serviceWorker 实现一系列的功能，比如推送通知、网络请求拦截、缓存资源等。

JavaScript (JS) 是单线程的，但是单线程对于多核的 CPU 来说，比较浪费资源。使用 Web Worker 可以在主线程外，生成其他 Worker 线程，处理主线程之外的任务。主线程与 Worker 线程同时运行，互不打扰。Worker 线程处理完后，再将处理结果发送给主线程。Web Worker 的主要目的是为了在浏览器中进行后台处理，避免长时间运行的复杂操作阻塞 UI 线程，从而影响用户体验。通过将这些操作放在 Web Worker 中，主线程（UI 线程）可以专注于处理用户交互和渲染，而不会被阻塞。

📄️ Web 剪切板 API

Clipboard API 异步剪切板 API

📄️ await&async

- 函数前面若有async关键字，表明函数内部有异步操作；调用该函数，会立即返回一个promise实例；

📄️ encodeURI 和 encodeURIComponent

网页的 URL 只能包含合法的字符。合法字符分成两类，除了这两类，其他字符出现在 URL 之中都必须转义：

📄️ eval方法调用

1. eval 分为直接调用和间接调用两种

📄️ globalThis、self、window、global 的区别

346 - 《globalThis、self、window、global 的区别》

📄️ javascript-Function 和 Object 的关系

1. Function 和 Object 的关系

📄️ javascript-prototype 和 proto 的区别

开篇

📄️ javascript-类的继承和多态

继承关系：

📄️ js 基础

- 字符串转数组

📄️ js-Javascript中的封装对象机制

包装

📄️ js-原生构造函数的prototype、proto、constructor

代码

📄️ js-自定义滚动条

https://juejin.cn/post/6844903847282868238#heading-10

📄️ js严格模式

js 严格模式会在文件的开头标明

📄️ js中的自动拆箱（unboxing）机制

自动拆箱机制是JavaScript中的一个重要特性，它允许我们在大多数情况下将包装对象和原始值互换使用，提高了语言的灵活性和易用性。

📄️ js字符编码

Unicode字符集：

📄️ js执行的创建阶段和执行阶段

创建阶段（Creation Phase）

📄️ js的运算符优先级问题

📄️ js精度问题

二进制浮点数最大的问题是：

📄️ mousedrag 事件

事件监听的类型：

📄️ new URL 的使用

基本使用及问题

📄️ outer 标记

- outer 是一个标签（label），用于标识代码块或循环的起始位置，通常与break 和 continue 结合使用

📄️ reduce 小练习

1. 数组求和

📄️ setInterval 立即执行

背景：每隔 5s 打印一下当前时间，页面加载完成后，需立即执行一次；setInterval 只会在5s后才会打印第一次；

📄️ switch、if-else、map性能测试

📄️ 你不知道的 parseInt 方法

解释：

📄️ 使用 bind 确保this的上下文

如上代码，cacheStore 是工厂函数的实例，在 cacheStore 内部有一个 cache 对象，当调用set/get 时，内部调用的是this.cache进行赋值/获取。直接将 cacheStore.get 赋值给 localCacheGetItem，调用 localCacheGetItem 会出现 this 为 undefined的情况，在这种情况下，应该是要使用 bind 改写。

📄️ 使用URL.createObjectURL 将文件转为 url

基本语法

📄️ 使用api获取页面DOM元素数量

通过 Google Chrome 控制台快速验证 DOM 大小，只需输入 document.querySelectorAll("*").length 脚本，就能知道当前网页状况。

📄️ 使用fetch获取一个url的html文本

- 核心 .text()

📄️ 使用js实现一个new操作符

📄️ 函数剩余参数

剩余参数语法，不定数量的参数表示为一个数组，由... + 变量名args组成

📄️ 函数是一等公民

- 什么是”一等公民“

📄️ 创建一个长度为100的数组

正确创建方式：

📄️ 在js中查看该函数的调用栈

在函数中输入这个，就可以查看调用该函数的方法

📄️ 字符串的 length 属性与字符数量不相等的问题

在 js 中，字符串的 length 属性，不一定等于字符串的长度。原因是因为 length 属性表示的是字符串中的码元的数量，而非字符个数。

📄️ 对象的属性描述符

定义一个对象，并在定义对象时，为对象赋值，此时，对象的属性描述符为：

📄️ 异步迭代器

结论：

📄️ 数学符号及其 JavaScript 对应符号列表

📄️ 数组中的空位和undefined的区别

- 空位（holes）：这是数组中的一个位置，该位置没有被赋值，甚至没有被初始化为undefined。空位是数组中的缺失元素。当你创建一个数组，比如使用new Array(100)或者稀疏数组（例如，[,,2,,]）时，数组的某些位置就是空位。在遍历数组或调用大多数数组方法时，空位通常会被忽略。

📄️ 数组空单元

1. 空单元格：数组的每个元素称为单元格，如果数组中的某个位置没有值，那么该位置就是空单元格。空单元格不等于 undefined，也不等于null，它表示该位置没有任何值。

📄️ 断网时，将数据存储至Cache Storage 逻辑

- mb-flat-json：

📄️ 模拟一个异步请求函数

- 异步函数

📄️ 画中画模式 documentPictureInPicture

https://mp.weixin.qq.com/s?biz=MzAxODE2MjM1MA==&mid=2651621742&idx=1&sn=46c0a939f76be131285ab374a6caf3da&chksm=80225eafb755d7b995bbdf538bf26ed530b66aec729ba4be47937e52c4f91d91edb71631e5d4#rd

📄️ 立即执行函数&逗号运算符

1. （0, function() {}）() 原理是逗号运算符

📄️ 简版防抖节流函数

节流函数

📄️ 网页元素的尺寸和位移属性大全

网页元素/窗口的尺寸

📄️ 获取 URL中参数

以url为例子，以下是几种常见的 JavaScript 获取 URL中参数name的方式：

📄️ 输出数组所有排序组合

📄️ 遍历对象属性的五种方式

ES6 一共有 5 种方法可以遍历对象的属性。

📄️ 2147483648的特殊性

📄️ 4种方式判断this指向

📄️ BOM和DOM的关系

📄️ DOM之attribute 和 property

📄️ ES - Date 对象

📄️ ES6-Set 和 Map

📄️ ES6-symbol

📄️ ES6-函数新特性

📄️ ES6-变量

📄️ ES6-可选链&空值合并

📄️ ES6-字符串

📄️ ES6-字符串方法

📄️ ES6-数值

📄️ ES6-正则表达式