青黄皂白-CSDN博客

原创 Vue3迁移指南

读Vue3迁移指南官方文档的一些个人笔记

2023-07-16 16:31:10 670

原创 reduce(Math.pow) 的使用及 reduce 的一些常见用法

reduce(Math.pow) 的使用[3, 2, 1].reduce(Math.pow);[3].reduce(Math.pow);[].reduce(Math.pow, 3);[].reduce(Math.pow);大家知道以上三个表达式都会返回什么值吗？相信大家都会 Math.pow 和 reduce() 的使用有所了解，但是大家真的完全了解它们吗？Math.pow(m, n) 接受两个参数，返回的结果是 m 的 n次幂。比如 Math.pow(3, 2) 返回的是 3 的二次

2022-04-26 22:04:52 694

原创 JavaScript事件（一）

JavaScript事件（一）一、事件流1、事件冒泡IE事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。2、事件捕获事件捕获是从最不具体的节点应该最先收到事件，而最具体的节点最后收到事件。事件捕获实际上是为了在事件达到目标前拦截事件。3. DOM事件流DOM2 Events 规定事件流分为三个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标接收到事件。最后一个阶段是

2022-03-12 23:42:56 1221 1

原创 JS 类型和语法1

JS 类型和语法1JavaScript类型Javascript有七种内置类型：空值（null）未定义（undefined）布尔值（boolean）数字（number）字符串（string）对象（object）符号（symbol， ES6 新增）我们可以用 typeof 运算符来查看值的类型，它返回的是类型的字符串值。但是其中类型和他们的字符串值并不一一对应：其中 typeof null === “object” // true 比较特殊，我们需要使用符合条件来检测 null 值的

2022-02-08 22:54:04 520 1

转载循环加载：a 依赖 b，b 依赖 c， c 依赖 a 加载情况解析

循环加载：a 依赖 b，b 依赖 c， c 依赖 a 加载情况解析“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。// a.jsvar b = require('b');// b.jsvar a = require('a');通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现a依赖b，b依赖c，c又依赖a这

2022-02-06 21:50:15 1450

转载阮一峰ES6入门读书笔记（十六）：Moudle

阮一峰ES6入门读书笔记（十六）：Moudle在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模

2022-01-25 16:35:59 449

转载阮一峰ES6入门读书笔记（十五）：Class

阮一峰ES6入门读书笔记（十五）：ClassClass 基本语法ES6 的 class 可以看作是一个语法糖，它的绝大部分功能，ES5 都可以做到。可以通过下面两段写法来比较两者的不同//ES5写法function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = n

2022-01-24 15:31:57 5201

转载阮一峰 ES6 入门读书笔记（十四）：async 函数

阮一峰 ES6 入门读书笔记（十四）：async 函数1. 含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。async函数对 Generator 函数的改进，体现在以下四点。内置执行器async函数的执行，与普通函数一模一样，只要一行。更好的语义async和await，比

2022-01-22 14:24:20 1849

转载阮一峰 ES6 入门读书笔记（十三）：Generator 函数的语法

阮一峰 ES6 入门读书笔记（十三）：Generator 函数1. 简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。形

2022-01-07 08:36:57 1157 3

转载阮一峰 ES6 入门读书笔记（十二）：Iterator 和 for...of 循环

阮一峰 ES6 入门读书笔记（十二）：Iterator 和 for…of 循环Iterator（遍历器）的概念遍历器是一种为数组和对象，ES6后又新添加了 Map 和 Set 这些数据集合提供同一的接口机制，来处理所有不同的数据结构。任何数据结构只要部署了 Iterator 接口，就可以完成遍历操作。Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按照某种次序排列；三是 ES6 创造了一种新的遍历命令 for…of 循环，Iterator

2022-01-06 16:20:11 256

转载阮一峰ES6入门读书笔记（十一）：Promise

阮一峰ES6入门读书笔记（十一）：PromisePromise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理更强大。所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 对象有以下两个特点。对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦状态改变，就不会再变，任何时候都可

2021-12-30 16:32:54 2043

转载阮一峰ES6入门读书笔记（十）：Proxy

阮一峰ES6入门读书笔记（十）：Proxy 和 Reflect1. 概述Proxy用于修改某些操作的默认行为，可以理解为，在魔表对象之前架设了一层“拦截”，外界对该对象的访问，都必须通过这层拦截。var obj = new Proxy({}, { get: function (target, propKey, receiver) { console.log(`getting ${propKey}!`); return Reflect.get(target, propKey, rec

2021-12-28 10:43:13 2414

转载阮一峰ES6入门读书笔记（九）：Set 和 Map

阮一峰ES6入门读书笔记（九）：Set 和 Map1.Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4Set函数可以接受一个数组（或者具有 ite

2021-12-25 14:10:37 446

转载阮一峰读书笔记（八）：Symbol

阮一峰读书笔记（八）：Symbol1. 概述ES5 的对象属性名都是字符串，柘荣哟造成属性名冲突。ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 的第七种数据类型，前六种是：undefined, null, boolean, String, Number, Object。Symbol 值通过 Symbol 函数生成。Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。typeof 运算符的结

2021-12-24 13:32:53 460

转载阮一峰ES6入门读书笔记（七）：运算符的拓展

阮一峰ES6入门读书笔记（七）：运算符的拓展1. 指数运算符ES6新增了一个指数运算符（**）。2 ** 2 // 42 ** 3 // 8这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。// 相当于 2 ** (3 ** 2)2 ** 3 ** 2// 512指数运算符可以与等号结合，形成一个新的赋值运算符（**=）。let a = 1.5;a **= 2;// 等同于 a = a * a;let b = 4;b **= 3;

2021-12-21 16:47:33 259

转载阮一峰ES6入门读书笔记（六）：对象

阮一峰ES6入门读书笔记（六）：对象属性的简洁表示法ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};上面的代码中，变量 foo 直接写在大括号里面。这时，属性名就是变量名，属性值就是变量值。除了属性可以简写，方法也可以简写const o = { method() {

2021-12-19 11:37:04 542

转载阮一峰ES6入门读书笔记（五）：数组

阮一峰ES6入门读书笔记（五）：数组1. 拓展运算符拓展运算符是三个点（…）。它好比 rest 参数的你晕眩，讲一个数组转为用逗号纷纷的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符主要用于函数调用，尤其是

2021-12-14 13:48:55 442

转载阮一峰ES6入门读书笔记（四）：函数

阮一峰ES6入门读书笔记（四）：函数rest 参数ES6 引入了 rest 参数（形式为 …变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum;}add(2, 5, 3) // 10下面是一个

2021-12-12 15:56:50 2665 1

转载阮一峰ES6入门读书笔记（三）：字符串

阮一峰ES6入门读书笔记（三）：字符串字符串的拓展加强了对 Unicode 的支持字符串添加了遍历器接口，使得字符串可以被 for…of 遍历允许直接输入字符，以及字符的转义形式JSON.stringify() 的改造模板字符串字符串新增的常用方法1. 实例方法：includes(), startsWith(), endsWith()传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

2021-12-11 10:39:04 256

转载 ES6入门：变量和解构赋值

阮一峰ES6入门读书笔记（二）：变量和解构赋值1. 基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。以下是一些常见的结构赋值：let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ['foo', 'bar', 'baz'];third // 'baz'let [x, , y] = [1, 2, 3, 4];x // 1y // 3

2021-12-10 11:40:02 229

转载 ES6入门：let和const

阮一峰ES6入门读书笔记（一）：let和constlet基本用法let 的用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块有效。{ let a = 10; var b = 1;}a // ReferencError: a is not defined.b // 1由上述代码可知，let 声明的变量 a 只在块作用域中有效，在块作用域之外报错，var 声明的变量 b 则可以有效访问到。for 循环的计数器，就很适合使用 let 命令。for (let i = 0;

2021-12-09 11:47:14 191

原创 JavaScript script标签与文档模式

JavaScript <script>标签与文档模式1. 文档模式首先说一下文档模式吧IE5.5 发明了文档模式的概念，即可以使用 doctype 切换文档模式。最初的文档模式有两种：混杂模式和标准模式。混杂模式让 IE 像 IE5 一样（支持一些非标准的特性）。标准模式让 IE 具有兼容标准的行为。2.<script>标签script标签有以下几种元素：src：可选。表示包含要执行的代码的外部文件。async：可选。表示应该立即开始下载脚本，并在下载完后开始执行。

2021-10-31 17:47:09 422

原创 WebAPI

属性的操作getAttribute()：获取一个img的src，或a链接的hrefnode.getAttribute('id')creatAttribute()：用于创建（或获取）属性名attribute = document.createAttribute(name)//参数name，是属性的名称setAttribute()：用于设置属性和值var node = document.getElementById("div1");node.setAttribute("my_att

2021-06-25 23:57:36 162

原创 JavaScript 事件注册

事件注册事件注册有哪些方法on + “event”例如：onclick/onmouseover…支持最广。但是要在一个元素上多次添加同一事件，此时就无能为力了，只能以最后一次绑定的事件为准。addEventListenerW3C 标准方法，功能也最强大，支持添加多个事件//element.addEventListener(type,listener,useCapture);obj.addEventListener('click', method1, false)obj.addEventLis

2021-06-25 23:56:51 767

原创 Event Loop事件循环机制

Event Loop事件循环机制一、JS单线程执行却不堵塞的秘密在开始之前，我们先看一张图：此图为事件在浏览器中的角色，不用看太久，有个概念就好，等你读完这篇文章，就能看懂这张图了。首先要声明，事件循环是与 js 的运行环境相关的机制，它与 js (引擎) 本身无关。常见的运行环境有浏览器、Node.js，每种运行环境可能都有自己实现事件循环的方式，而本文只探讨浏览器的时间循环。为什么要进行事件循环？因为 js 是单线程执行的，一个函数运行过久就会卡住后面的函数执行，如果这些函数恰好是做与 UI

2021-06-01 09:58:06 312

原创 JS详解——对象

JS详解——对象一、声明语法对象可以通过两种形式定义：声明（文字）形式和构造形式。对象的文字语法如下：var myobj = { key: value // ...}构造形式大概是这样的：var myobj = new Object()myObj.key = value构造形式和文字形式生成的对象是一样的。唯一的区别是，文字形式中你可以添加多个键值对，而构造形式中你必须逐个添加属性。二、类型在JavaScript中一共有六种主要类型（术语是”语言类型“）：stringnu

2021-05-07 23:00:09 259 2

原创 vue-重塑筋脉-组件

vue-重塑筋脉-组件1.虚拟DOM与diff算法 key的作用虚拟DOM是vue针对真实dom进行增加或删除的操作的时候，需要将上一个dom树删除再重新生成一个新的dom树，而这样是非常耗费资源并且繁琐的。所以vue就采用了这样一个方法解决了这个问题，首先，开发者需要将dom树的每个节点赋予一个key值，这个key必须是唯一的。而dom发生变化时，首先会通过diff算法，比较更新后的虚拟dom与真实的dom有什么不同，再通过相同key值不变的保留，变化的进行改变来达成增加或删除的操作。这样，没改变值的

2021-05-02 22:46:33 251 1

空空如也

空空如也