javascript
文章平均质量分 54
whmwjy1997
这个作者很懒,什么都没留下…
展开
-
记录一下剪切板功能
剪贴板原创 2022-11-08 14:18:40 · 204 阅读 · 1 评论 -
ES7+知识点整理使用
对es6以上内容的整理分享原创 2022-08-31 13:46:35 · 423 阅读 · 0 评论 -
搭建egg.js服务器
步骤两步1.安装cnpm i egg-init -g2.初始化egg-init --type=simple3.依赖cnpm i4.运行yarn dev原创 2020-06-01 10:46:24 · 115706 阅读 · 0 评论 -
前端axios+解决跨域proxyTable
使用proxyTable的理由很简单就是为了解决跨域在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,比如jsonp等等,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。如何使用proxyTable我采用的是vue init webpack xxx创建的项目在根目录下config文件夹下的index.js文件。由于我原创 2020-05-15 11:31:07 · 17780 阅读 · 0 评论 -
vuex初次尝试
vuex作为状态管理工具,对于父子组件通信有很多优势,初尝试代码:index.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './route原创 2020-05-15 11:21:48 · 102129 阅读 · 0 评论 -
ES6个人笔记记录——Reflect2
1.Reflect.get()Reflact.get 方法查找并返回target对象的name属性,如果没有该属性,则返回undefinedconst { get , set , defineProperty , deleteProperty , construct , getPrototypeOf ,} = Reflect;let myObject1 = { foo : 1, bar : 2, get baz(){ return this.foo + this.原创 2020-05-08 17:41:38 · 102249 阅读 · 0 评论 -
ES6个人笔记记录——Reflect1
概述Reflect对象和Proxy对象一样,也是ES6为了操作对象而提供的APIReflect对象的设计目的有以下几个:1.将Object对象的一些明显属于语言内部的方法 (比如:Object.defineProperty)放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只在Reflect对象上部署,也就是说:从Reflect对象上可以...原创 2020-05-08 16:14:53 · 102340 阅读 · 0 评论 -
ES6个人笔记记录——Proxy5
this问题虽然Proxy可以代理针对目标对象的访问,但他不是目标对象的透明代理,即不做任何拦截的情况下也无法保证与目标对象的行为一致。主要原因就是在Proxy代理的情况下,目标对象内部的this关键字会指向Proxy代理const target = { m : function(){ console.log(this === proxy); }};const handler =...原创 2020-05-08 14:29:15 · 88600 阅读 · 0 评论 -
ES6个人笔记记录——Proxy4
constructconstruct用于拦截new命令两个参数,target:目标对象,args:构造函数的参数对象let handler = { construct(target,args,newTargets){ return new target(...arguments); }}// eg1let p = new Proxy(function(){},{ const...原创 2020-05-08 14:26:37 · 89854 阅读 · 0 评论 -
ES6个人笔记记录——Proxy3
1.apply()apply方法拦截函数的调用、call和apply方法三个参数,目标对象,目标对象的上下文对象,目标对象的参数数组let handler = { apply(target,ctx,args){ return Reflect.apply(...arguments); }};// eg1let target1 = function(){ return 'I am...原创 2020-05-08 14:18:55 · 88390 阅读 · 0 评论 -
ES6个人笔记记录——Proxy2
Proxy实例的方法1.getlet person = { name: "wjy"};let proxy1 = new Proxy(person, { get: function(target, property) { if (property in target) { return target[property]; } else { // throw new ...原创 2020-05-08 14:14:43 · 88523 阅读 · 0 评论 -
ES6个人笔记记录——Proxy1
Proxy用于修改某些操作的默认行为,等同于在语言层面作做出修改,所以属于一种元编程,即对编程语言进行编程Proxy可以理解成在目标对象前架设一个"拦截"层,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机制可以对外界的访问进行过滤和改写。Proxy这个词原意是代理,在这里表示"代理"某些操作,可以译为"代理器"const { get , set } = Reflect;...原创 2020-05-08 14:10:48 · 88517 阅读 · 0 评论 -
ES6个人笔记记录——WeakMap
与Map两点不同1.WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名2.WeakMap设计的目的在于,有时我们想在某个对象上面存放一些数据,但是这会形成对这个对象的引用const wm1 = new WeakMap();// 使用setconst key = {foo : 1};wm1.set(key , 2);console.log(wm1.get(ke...原创 2020-05-08 14:00:19 · 88431 阅读 · 0 评论 -
ES6个人笔记记录——Map数据结构
Object结构提供了"字符串——值"Map结构提供了"值——值"的对应,是一种更完善的Hash结构实现const m = new Map();const o = { p : 'Hello World'};m.set(o, 'content');console.log(m.get(o), "has=>",m.has(o), "delete=>",m.delete(o)...原创 2020-05-08 13:55:13 · 88285 阅读 · 0 评论 -
ES6个人笔记记录——WeakSet数据结构
与Set类似,有两点不同1.WeakSet的成员只能是对象,而不能是其它类型的值2.WeakSet中的对象都是弱引用, 垃圾回收机制不考虑WeakSet对该对象的引用 就是说:如果其他对象都不再引用该对象, 那么垃圾回收机制会自动回收该对象所占用的内存, 不考虑该对象是否还存在于WeakSet之中// 1.const ws = new WeakSet();// ws.a...原创 2020-05-08 13:40:57 · 88308 阅读 · 0 评论 -
ES6个人笔记记录——Set数据结构
类似于数组,但是成员的值都是唯一的,没有重复const s = new Set();[2,3,1,2,5,6,7].forEach(x => s.add(x));console.log(s);for(let sv of s){ console.info(sv);}console.log([...s],s.size);去除数组中的重复元素因为向Setj加入值不会发生类型转换...原创 2020-05-08 13:39:15 · 88233 阅读 · 0 评论 -
ES6个人笔记记录——Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突比如,我们使用了一个他人提供的对象,但又想为这个对象添加新的方法Cmixin 模式〉,新方法的名字就有可能与现有方法产生冲突。 ES6引入了一种新的原始数据类型Symbol,表示独一无二的值是第七种数据类型1.Number2.String3.Undefined4.Null5.Boolean6.ObjectSymbol...原创 2020-05-08 13:30:59 · 88399 阅读 · 0 评论 -
ES6个人笔记记录——对象扩展
1.取值函数,存值函数const obj = { get foo(){}, set foo(x){}}// console.log(obj.foo.name);const descriptor = Object.getOwnPropertyDescriptor(obj,'foo');console.log(descriptor.get.name,descriptor.set.nam...原创 2020-05-08 13:25:27 · 88320 阅读 · 0 评论 -
ES6个人笔记记录——函数扩展
rest参数add = (...value) => { console.log(value instanceof Array);}add(1,2,3,4,5)name属性let add2 = function(...values) { let sum; for(let value of values){ sum += value; } return sum;}...原创 2020-05-08 11:50:53 · 88387 阅读 · 0 评论 -
ES6个人笔记记录——数组扩展
// 扩展运算符console.log(1,...[2,3,4],5);// ES5console.log(Math.max.apply(null,[14,2,48]));// ES6let { max } = Math;console.log(max(...[14,2,48]));// ES5var arr1 = [0,1,2];var arr2 = [3,4,5];co...原创 2020-05-08 11:47:51 · 73581 阅读 · 0 评论 -
ES6个人笔记记录——数组解构
function* fibs(){ let a = 0; let b = 1; while(1){ yield a; [a,b] = [b, a + b]; }}let[first,second,third,fourth,fifth,sixth] = fibs();console.log(sixth);let [a,b] = [3,4];console.log(typ...原创 2020-05-08 11:46:28 · 73714 阅读 · 0 评论 -
ES6个人笔记记录——字符串扩展
关于ES6的一些学习笔记// console.log("\u0061");console.log("\uD842\uDF02");let s1 = "好";console.log("好",s1.length);let s = "????";console.log(s,s.length,s.charAt(0),s.charAt(1),s.charCodeAt(0),s.charCodeAt(1...原创 2020-05-08 11:43:22 · 73408 阅读 · 1 评论 -
高阶函数应用5——惰性加载函数
在 Web 开发中,因为浏览器之间的实现差异,一些嗅探工作总是不可避免。比如我们需要一个在各个浏览器中能够通用的事件绑定函数 addEvent,常见的写法如下:var addEvent = function( elem, type, handler ){ if ( window.addEventListener ){ return elem.addEventListener( type, h...原创 2020-04-25 12:42:19 · 14622 阅读 · 1 评论 -
高阶函数应用4——分时函数
在前面关于函数节流的讨论中,我们提供了一种限制函数被频繁调用的解决方案。下面我们将遇到另外一个问题,某些函数确实是用户主动调用的,但因为一些客观的原因,这些函数会严重地影响页面性能。一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友,如果一个好友用一个节点来表示,当我们在页面中渲染这个列表的时候,可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加 DO...原创 2020-04-25 12:27:41 · 14618 阅读 · 0 评论 -
高阶函数应用3——函数节流
JavaScript 中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则我们一般不会遇到跟性能相关的问题。但在一些少数情况下,函数的触发不是由用户直接控制的。在这些场景下,函数有可能被非常频繁地调用,而造成大的性能问题。下面将列举一些这样的场景。1.函数被频繁调用的场景1.window.onresize 事件。我们给 window 对象绑定了 resize 事件,...原创 2020-04-25 12:21:05 · 14603 阅读 · 0 评论 -
高阶函数应用2—— uncurrying
在 JavaScript 中,当我们调用对象的某个方法时,其实不用去关心该对象原本是否被设计为拥有这个方法,这是动态类型语言的特点,也是常说的鸭子类型思想。同理,一个对象也未必只能使用它自身的方法,那么有什么办法可以让对象去借用一个原本不属于它的方法呢?答案对于我们来说很简单,call 和 apply 都可以完成这个需求:var obj1 = { name: 'sven'};var o...原创 2020-04-25 12:08:24 · 14667 阅读 · 3 评论 -
高阶函数应用1——函数柯里化
首先我们讨论的是函数柯里化(function currying)。currying 的概念最早由俄国数学家 MosesSchönfinkel 发明,而后由著名的数理逻辑学家 Haskell Curry 将其丰富和发展,currying 由此得名。currying 又称部分求值。一个 currying 的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚...原创 2020-04-25 12:03:10 · 14642 阅读 · 0 评论 -
javascript高阶函数实现AOP
AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。在 Java 语言中,可以通过反射和动态代理机制来实现 AOP 技术。而在 JavaScr...原创 2020-04-25 11:37:22 · 16731 阅读 · 0 评论 -
有关闭包的详细解释(主要摘自设计模式书)
对于 JavaScript 程序员来说,闭包(closure)是一个难懂又必须征服的概念。闭包的形成与变量的作用域以及变量的生存周期密切相关。下面我们先简单了解这两个知识点。1.1 变量的作用域变量的作用域,就是指变量的有效范围。我们最常谈到的是在函数中声明的变量作用域。当在函数中声明一个变量的时候,如果该变量前面没有带上关键字 var,这个变量就会成为全局变量,这当然是一种容易造成命名冲突...原创 2020-04-24 13:49:45 · 17186 阅读 · 0 评论 -
使用call改变this指向
call 和 apply 最常见的用途是改变函数内部的 this 指向,我们来看个例子:var obj1 = { name: 'sven'};var obj2 = { name: 'anne'};window.name = 'window';var getName = function(){ alert ( this.name );};getName(); // 输出: wi...原创 2020-04-24 12:21:15 · 18626 阅读 · 0 评论 -
JavaScript中this指向问题(4种)
this跟别的语言大相径庭的是,JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。this的指向除去不常用的 with 和 eval 的情况,具体到实际应用中,this 的指向大致可以分为以下 4 种。作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.cal...原创 2020-04-24 12:10:15 · 17979 阅读 · 0 评论 -
(JS)岛屿数量
给你一个由 ‘1’(陆地)和 ‘0’(水)组成的的二维网格,请你计算网格中岛屿的数量。岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。此外,你可以假设该网格的四条边均被水包围。示例一:输入:11110110101100000000输出: 1示例二:输入:11000110000010000011输出: 3解释: 每座岛屿只能由水...原创 2020-04-20 12:36:02 · 22877 阅读 · 0 评论 -
(JS)统计重复个数
由 n 个连接的字符串 s 组成字符串 S,记作 S = [s,n]。例如,[“abc”,3]=“abcabcabc”。如果我们可以从 s2 中删除某些字符使其变为 s1,则称字符串 s1 可以从字符串 s2 获得。例如,根据定义,“abc” 可以从 “abdbec” 获得,但不能从 “acbbe” 获得。现在给你两个非空字符串 s1 和 s2(每个最多 100 个字符长)和两个整数 0 ≤ ...原创 2020-04-19 11:35:18 · 23173 阅读 · 0 评论 -
(JS)最长公共前缀
编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串 “”。示例 1:输入: ["flower","flow","flight"]输出: "fl"示例 2:输入: ["dog","racecar","car"]输出: ""解释: 输入不存在公共前缀。采用es6进行:let longestCommonPrefix = (strs) => { ...原创 2020-04-18 14:45:50 · 26602 阅读 · 2 评论 -
(JS)整数转罗马数字
整数转罗马数字罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为...原创 2020-04-18 14:03:38 · 25043 阅读 · 0 评论 -
(JS)寻找两个有序数组的中位数
寻找两个有序数组的中位数给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n))。你可以假设 nums1 和 nums2 不会同时为空。/** * @param {number[]} nums1 * @param {number[]} nums2 * @return {number} ...原创 2020-04-18 13:44:33 · 25025 阅读 · 0 评论 -
(JS)回文数
回文数判断一个整数是否是回文数。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。var isPalindrome = function(x) { let len = (x+"").split("").length; let front,back,back2; if(len%2){ // 奇数 front = (x+"").split("...原创 2020-04-18 13:28:07 · 24859 阅读 · 0 评论 -
(JS)字符串转换整数 (atoi)
请你来实现一个 atoi 函数,使其能将字符串转换成整数。首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止。接下来的转化规则如下:1.如果第一个非空字符为正或者负号时,则将该符号与之后面尽可能多的连续数字字符组合起来,形成一个有符号整数。2.假如第一个非空字符是数字,则直接将其与之后连续的数字字符组合起来,形成一个整数。3.该字符串在有效的整数部分之后也可能...原创 2020-04-18 13:03:03 · 25698 阅读 · 0 评论