随笔分类 - JavaScript
JavaScript 实现计算器，进行加减乘除运算并处理括号关系
摘要：Tips： 我的实例在Vue环境下进行，我给的代码中调用其他函数时，通过this找到。如果读者使用原生JavaScript，则需要删除this。 正文开始 1. 前端页面展示如下 用户在Input输入框输入计算表达式，点击计算按钮，即可完成计算，后展示在下方。 2. 代码逻辑 2.1 用户输入的为字
作用域&变量提升&闭包&原型&继承__代码输出题
摘要：1. 局部作用域中的意外全局变量 (function(){ var x = y = 1; })(); var z; console.log(y); console.log(z); console.log(x); **答案：**1，undefined，报错 Uncaught ReferenceErro
this 代码输出题
摘要：1. 简单函数调用this问题 function foo() { console.log( this.a ); } function doFoo() { foo(); } var obj = { a: 1, doFoo: doFoo }; var a = 2; obj.doFoo() 答案： 2。
异步&事件循环____代码输出题
摘要：一、Promise 1. const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') }, 1000) }) const promise2 = promise1.then(() =
你不知道的 Promise
摘要：1.Promise的resolve参数 1.1 普通的值或者对象 当resolve方法的参数是普通值或对象时，Promise状态是直接改变的。 new Promise((resolve, reject) => { // pending -> fulfilled // resolve(基本数据类型或普
ES6中的 Proxy 和 Reflect
摘要：Proxy 1.监听对象的操作 **有一个需求：**有一个对象，我们希望监听这个对象中的属性被设置或获取的过程。 ES6前可以通过属性描述符中的存取属性描述符（Object.defineProperty）来做； 还有代理 Proxy 1.1 属性描述符实现 使用属性描述符中的存取属性描述符：get函
JavaScript的ES10、ES11新增内容
摘要：ES10新增 1. 数组方法 flat flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。flat意为平，就相当于降维。将二维数组转为一维亦可其他。 var newArray = arr.flat([depth]) // depth: 默
Object.defineProperty
摘要：1. Object.defineProperty Object.defineProperty()方法会直接在一个对象上定义个新属性，或者修改一个对象的现有属性，并返回此对象。该方法允许精确地添加或修改对象的属性。 Object.defineProperty(obj, prop, descriptor
认识V8引擎
摘要：1. V8引擎的定义 官方解释： V8 是用C++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。 它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-3
Proxy 可以实现什么功能？
摘要：Proxy 可以实现什么功能？ 在 Vue3 中通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。 Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。 let p = new Proxy(target, handler) target 代
JS中，new 操作符具体干了什么？
摘要：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。 一、过程： new 共经历了4个过程。 var fn = function () { }; var fnObj = new fn(); 1、创建了一个空对象 var obj = new object(); 2、设置原型
异步加载图片
摘要：1. 使用场景 在图片访问比较慢的情况，可以优先给图片设置灰色的等待加载图，等到图片加载完成，替换原来的灰色占位图片。达到图片未加载时结构不乱，拥有页面效果； 2. JS 实现 // 异步加载图片 export function loadImageAsync(url) { return new Pr
配置/封装 axios 网络请求
摘要：1. 为什么要封装 axios ？ 实际开发过程中，我们项目可能会有大量接口，而接口的URL地址可以分为好几类，如果我们使用全局配置axios的baseURL是不太现实的。 每类接口所需要的超时时间timeout各不相同。 当服务器端接口地址改变或者参数改变，需要一个一个组件 / 页面去修改 axi
rem的使用和自适应布局
摘要：1. 什么是 rem ? rem是CSS3新增的一个相对单位（root em，根em）,使用 rem 为元素设定字体大小时，是相对大小，相对的只是 HTML 根元素的字体大小。 根据不同的HTML 根元素的字体大小，可以完成自适应布局。 2. 为HTML设置font-size rem 自适应JS /
JS--原生Ajax
摘要：GET 请求 // GET 请求 // 创建XMLHTTPRequest对象 const xhr = new XMLHttpRequest(); // 设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数 xhr.open("get", `url地址?id=${id}`); /
JS--继承，多种继承方式
摘要：1. 原型链继承 // 原型链继承 function Parent(){ this.name = ["原型链继承"]; } // 原型上挂载方法 Parent.prototype.getName = function(){ console.log(this.name); } function Chi
JS---Promise对象
摘要：1. 什么是 Promise 对象？什么是 Promises/A+ 规范？ Promise 对象是异步编程的一种解决方案，最早由社区提出。Promises/A+ 规范是 JavaScript Promise 的标准，规定了一个 Promise 所必须具有的特性。 Promise 是一个构造函数，接收
JS--原型、原型链
摘要：1. 构造函数创建对象 我们先使用构造函数创建一个对象： function Person() { } var person = new Person(); person.name = 'Kevin'; console.log(person.name) // Kevin 在这个例子中，Person 就
JS---函数柯里化
摘要：函数柯里化 1. 什么是函数柯里化？ 在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 举例来说，一个接收3个参数的普通函数，在进行柯里化后，柯里化版本的函数接收一个参数并返回接收下一个参数的函数，该函数返回一个接收第三个参数的函数。最后一个函数在接收
JS---节流和防抖的实现
摘要：1. 函数防抖(debounce) 概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 实现： function debounce(fn, wait){ let timer = null; return function (){ let context = this;// 获
