javaScript
关注
分享
扫一扫
文章平均质量分 56
javascript
我在人间贩卖青春
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
客户端存储三种方式（cookie、localStorage、sessionStorage）用法及区别
客户端存储cookiecookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。原生js设置cookie document.cookie="key=value";原生js获取cookieconsole.log(document.cookie);koa中使用cookiectx.cookies.set(name, value, [options])ctx.cookies.get(name, [options])常用配置key和 value是包含在一个原创 2020-12-15 11:53:03 · 831 阅读 · 0 评论 -
正则表达式（二）正则对象下的方法、字符串方法、元字符
正则匹配方法正则对象底下的方法test匹配到返回true；匹配不到返回falselet str = "abc123fda123";// let reg = /\d+/g;let reg = /efg/g;console.log( reg.test(str) );exec匹配到返回第一次匹配到的结果、索引、匹配对象；匹配不到返回nulllet str = "abc123fda1234";let reg = /\d+/g;console.log(reg.exec(s原创 2021-02-28 21:46:59 · 157 阅读 · 0 评论 -
正则表达式（一）正则表达式的创建
正则表达式能干什么查找替换验证分割为什么要学正则表达式let str = "afdsa234fda231dfsa111fdsaf444";从以上字符串中找出数子串，返回数组如果采用函数实现function getNumber(str){ let arr = []; let temp = ""; for(let i=0;i<str.length;i++){ if(!isNaN(str[i])){ // 数字原创 2021-02-28 20:59:31 · 149 阅读 · 2 评论 -
数据劫持（数据代理）、vue中v-model实现的原理
数据劫持数据劫持，其实就是数据代理。数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。实现方法：definePropertyproxyObject.observe（已废弃，暂不研究）大厂面试题！！！vue中的v-mode双向绑定是如何实现的？数据劫持defineProperty实现数据劫持let obj = { myname:"张三"}console.log(obj); //张三let value = obj[原创 2020-12-05 22:53:20 · 1037 阅读 · 0 评论 -
数据劫持(三)实现简易MVVM、插值、v-model
实现MVVM实现大胡子语法（插值）思路：通过Object.defineProperty观察数据，获取DOM元素node节点，通过正则匹配将{{message}}替换为data里的值index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"原创 2022-03-15 22:44:29 · 737 阅读 · 0 评论 -
数据劫持(二)理解Proxy
Proxy文章目录Proxy了解Proxyget与setgetsetproxy与Object.defineProperty对比对象监听数组监听Proxy的其他捕获器hasgetPrototypeOf5 种触发 getPrototypeOf 代理方法的方式2种情况下的异常setPrototypeOfisExtensiblepreventExtensionsgetOwnPropertyDescriptordefinePropertydeletePropertyownKeysapplyconstruct了解P原创 2022-03-13 00:35:11 · 1284 阅读 · 0 评论 -
数据劫持(一)由浅入深理解Object.defineProperty
Object.defineProperty文章目录Object.defineProperty理解数据劫持了解Object.defineProperty() 方法添加对象属性通过数据描述符创建通过存取描述符修改修改对象属性值通过数据描述符修改writable通过存取描述符修改配置对象属性configurableenumerable数据描述符中的属性默认值问题自定义一个getters和settersObject.defineProperty的应用监听对象上的多个属性深度监听一个对象Object.defineP原创 2022-03-09 23:16:22 · 3397 阅读 · 0 评论 -
javaScript之js模拟封装一个promise
myPromise.jsclass Kpromise { constructor(handle) { this.status = "pending"; this.value = undefined; // 数组队列保存 this.resolveQueue = []; this.rejectQueue = []; handle(this._resolve.bind(this), this._rejec.原创 2020-12-05 20:36:07 · 544 阅读 · 0 评论 -
javaScript之async-await及try...catch
在ES7更新了基于promise的同步改写和异步改写，async 函数 和 await 来改造promise。ES6 promise const p1 = function myp1() { return new Promise(resolve => { setTimeout(() => { resolve("p1"); }, 1000) }) } const.原创 2020-12-05 20:26:14 · 901 阅读 · 0 评论 -
javaScript之promise
promiseES6的Promise对象是一个构造函数，用来生成Promise实例。所谓Promise对象，就是代表了未来某个将要发生的事件（通常是一个异步操作）。它的好处在于，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。Promise对象的三种状态 pending（等待） 、resolve(fulfilled) （成功）和 rejected（失败）。两种参数：then的2个参数；onresolove 和 onreject；then 方法then原创 2020-12-05 20:13:44 · 136 阅读 · 0 评论 -
javaScript之深入理解同步与异步
同步和异步同步，可以阻塞也可以非阻塞；异步可以阻塞也可以非阻塞;但是同步和异步都是是一种消息通知机制。js中是同步阻塞，异步非阻塞。同步阻塞: A调用B，B处理获得结果，才返回给A。A在这个过程中，一直等待B的处理结果，没有拿到结果之前，需要A（调用者）一直等待和确认调用结果是否返回，拿到结果,然后继续往下执行。异步非阻塞: A调用B，无需等待B的结果，B通过状态，通知等来通知A或回调函数来处理。主线程和异步线程console.log(111);function test(){ c原创 2020-12-05 17:15:28 · 140 阅读 · 0 评论 -
javaScript之for...in和for...of的用法与区别
for…infor … in 如果是对象，则循环的是键；如果是数组，则循环的是下标。let arr = ["a","b","c","d"];let obj = { a:1, b:2, c:3,}for(let attr in arr){ console.log(attr); //0,1,2,3}for(let objVal in obj){ console.log(objVal); // a,b,c}for…of如果是对象，原创 2020-12-05 16:54:36 · 576 阅读 · 2 评论 -
javaScript之Generator函数
Generator 函数在形式上，Generator是一个普通函数，但是有两个特征。一是，function命令与函数名之间有一个星号；二是，函数体内部使用yield语句，定义遍历器的每个成员，即不同的内部状态。Generator 语法function* fn() { yield 1; yield 2; yield 3;}Generator 基本用法// Generator函数function*fn(){ yield 1; yield 2; yield原创 2020-12-05 16:43:42 · 161 阅读 · 0 评论 -
javaScript之迭代器
迭代器常用的迭代语句for…in：以原始插入的顺序迭代对象的可枚举属性 对象 循环的是key值， 数组 循环的是下标for…of：根据迭代对象的迭代器具体实现迭代对象数据迭代器迭代对象值let obj = { a: 1, b: 2, c: 3};obj[Symbol.iterator] = function(){ // 迭代协议 let values = Object.values(obj); let index = 0;原创 2020-12-05 16:27:27 · 157 阅读 · 0 评论 -
javaScript之原生js封装一个jQuery
知己知彼，百战不殆；想要知道jq功能如何实现，先要了解其特性；class Jq { constructor(arg,root) { if (typeof arg === "function") { // dom加载完毕 // 方式一 window.addEventListener("DOMContentLoaded", arg); } else if (typeof arg === "str.原创 2020-11-30 20:50:01 · 398 阅读 · 0 评论 -
javaScript之通过webComponent自定义组件
webComponent自定义组件自定义独立元素Autonomous custom elements<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti原创 2020-11-29 23:21:54 · 356 阅读 · 0 评论 -
javaScript之原生js封装组件（弹窗为例）
组件封装html调用组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-11-29 23:13:59 · 5414 阅读 · 0 评论 -
javaScript之常用设计模式（工厂模式、单例模式、观察者模式、装饰者模式）
1、工厂模式原料 --> 加工 --> 出厂 封装实例，创建了逻辑和过程ES5工厂模式function Factory(){ let obj = {}; obj.name = "张三"; obj.age = 20; return obj;}let zhangsan = Factory();console.log(zhangsan);ES6工厂模式class Luban{ constructor(){ thi原创 2020-11-29 22:57:55 · 551 阅读 · 1 评论 -
javaScript之模块化（ES6）
es6模块化浏览器默认模块化 script 里加入 “type=module”；导出 关键字 export导出 方式一 ：export { a ,b , c}导出方式二 关键字 “as”export { a as aa ,b , c}导出方式三export let c = ()=>{console.log("I am c function...")}导出方式四export default a;等同export {a as defa原创 2020-11-29 22:14:41 · 168 阅读 · 0 评论 -
javaScript之类、继承、合并空运算符（ES5、ES6、ES2020静态属性、私有属性、继承）
类ES5中的类构造函数模拟类的概念 function Person(name){ this.name = name; this.age = 20;}Person.prototype.fn = function(){ console.log("fn...");}// es5 静态属性；Person.num = 10;let zhangsan = new Person("张三");console.log(zhangsan);zhangsan.fn();consol原创 2020-11-29 22:07:35 · 320 阅读 · 1 评论 -
javaScript之构造函数继承（call、apply、bind）、原型继承、传值和传址、深拷贝继承、组合继承
javaScript之构造函数继承（call、apply、bind）、原型继承、传值和传址、深拷贝继承、组合继承构造函数继承继承：子类继承父类所有属性和行为，父类不受影响。目的：找到类之间的共性精简代码。function Person(name){ this.name = name; this.eyes = "两只"; this.legs = "两条";}function Student(name){ Person.call(this,name); /原创 2020-11-29 17:51:32 · 308 阅读 · 1 评论 -
javaScript之原型链
原型链对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，称之为原型链；1.当访问一个对象的属性或方法时，会先在对象自身上查找属性或方法是否存在，如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找 ，依此类推，直到找到为止。如果到顶层对象中还找不到，则返回 undefined。2.原型链最顶层为 Object 构造函数的 prototype 原型对象，给 Object.p原创 2020-11-29 16:31:06 · 207 阅读 · 0 评论 -
javaScript之prototype原型（constructor）
prototype原型通过new实例化出来的对象其属性和行为来自两个部分，一部分来自构造函数，另一部分来自原型。当声明一个函数的时候，同时也申明了一个原型 。原型本身是一个对象。原型中的this也会指向实例化对象。原型的固有属性,constructor属性指向构造函数。constructor可以找到构造函数的实例化对象。function Person(name){ this.name = name; this.age = 20; // this.hobby = fu原创 2020-11-28 23:35:37 · 276 阅读 · 0 评论 -
javaScript之构造函数
构造函数1、构造函数要通过new来调用 this指向实例化对象2、约定俗成构造函数首字母大写 function Person(name){ this.name = name; this.age = 20; this.hobby = function(){ console.log("喜欢美女"); } } // new 实例化 let zhangsan = new Person("小陈")原创 2020-11-28 22:31:48 · 220 阅读 · 0 评论 -
javaScript之new运算符
new 运算符1、new的特点：1.new执行函数2.自动创建空对象；3.this绑定到空对象；4 隐式返还this；5.通过new来改造工厂模式2、 new创建对象let str1 = "";let str2 = new String();str2.name = "小陈";console.log(str2.name); //小陈3、new执行函数 function test(){ console.log("test"); } test(); //原创 2020-11-28 22:04:52 · 325 阅读 · 0 评论 -
javaScript之工厂模式
工厂模式工厂模式其实就是一个类，主要解决了代码复用的问题； function person(name,age,hobby){ let obj = {}; //添加原料 obj.name = name; obj.age = age; obj.hobby = function(){ console.log(hobby); } // 加工原料 return obj; //出原创 2020-11-28 21:48:30 · 159 阅读 · 0 评论 -
javaScript之对象
对象Javascript 是一种基于对象的语言，几乎所有东西都是对象；对象：具体的某个事物；(如：小陈、橘猫)1、对象创建方法：字面量创建let obj1 = { name:"小陈", age:"20", hobby:function(){ console.log("喜欢篮球"); }} console.log(obj1);new Object()创建：构造函数let obj2 = new Object(); obj2.name =原创 2020-11-28 21:42:54 · 128 阅读 · 0 评论 -
ES6 新增对象方法
ES6 新增对象方法Object.assignObject Object.assign(target, …sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象参数:target 目标对象sources 源对象返回值：目标对象Object.isBoolean Object.is(value1, value2) 判断两个值是否是相同的值。规则：两个值都是 undefined两个值都是 null两个值都是 true 或者都是 false原创 2020-11-19 22:34:21 · 164 阅读 · 0 评论 -
ES6 新增数组方法
ES6 新增数组方法Array.fromArray Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组转换成数组参数：arrayLike 类数组可选参数:mapFn 类似 map 方法，循环类数组时的回函函数，返回值组成新数组thisArg mapFn 函数执行时的 this 指向返回值根据 arrayLike 生成的新数组Array.isArrayBoolean Array.isArray(data) 检测数据是原创 2020-11-19 22:26:07 · 218 阅读 · 0 评论 -
ES6 新增字符串方法
ES6 新增字符串方法str.includesBoolean str.includes(valueToFind[, fromIndex]) 判断字符串是否包含一个指定的值详细： 参考数组的 includesstr.endsWithBoolean str.endsWith(searchString[, length]) 判断当前字符串是否是以另外一个给定的子字符串“结尾”参数searchString 要搜索的子字符串。可选参数length 作为 str 的长度。默认原创 2020-11-19 22:07:51 · 204 阅读 · 0 评论 -
ECMAScript 6基础应用（es6）
ECMAScript 6 基础应用ECMAScript 6 简介JavaScript 三大组成部分ECMAScriptDOMBOMECMAScript 发展历史ECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算……ECMAScript 6let 和 constlet 和 var 的差异let 允许声明一个在作用域限制在块级中的变量、语句或者表达式即块级作用域 {} 和 全局作用域let 不会被预解析let 同一作用域不可原创 2020-11-19 21:58:35 · 206 阅读 · 0 评论 -
javaScript实现键盘控制元素移动位置及缩放
原生js实现键盘控制元素移动位置及缩放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-11-14 21:37:51 · 547 阅读 · 0 评论 -
javaScript实现指定范围内鼠标对元素拖拽
原生js实现指定范围内鼠标元素拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-11-14 21:29:26 · 1476 阅读 · 0 评论 -
javaScript实现通过鼠标滑轮改变元素大小
原生js实现通过鼠标滑轮改变元素大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-11-14 21:19:05 · 483 阅读 · 0 评论 -
javaScript之Event事件
javaScript之Event事件事件监听器Event 事件对象contextmenu事件 自定义右键菜单键盘事件拖拽思路详解鼠标滚动事件其他常用事件事件监听器事件绑定和事件监听的区别事件绑定：两个相同事件绑定事件，后边的会覆盖前边的，只会执行最后一个事件监听：两个相同事件绑定事件，会依次执行addEventListener(type,lister[,options|useCapture])第三个参数：默认不给布尔值，默认是冒泡事件。如果布尔值是true，进行捕获，false不捕获原创 2020-11-14 21:10:05 · 470 阅读 · 0 评论 -
javaScript之navigator 对象判断设备、客户端（微博、QQ、微信）、浏览器
javaScript之navigator 对象判断设备、应用客户端、浏览器1、判断PC2、判断设备3、判断不同应用客户端4、区分各个浏览器话不多说，直接上代码1、判断PCfunction IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPa原创 2020-11-11 20:38:58 · 977 阅读 · 1 评论 -
javaScript之DOM
DOMjavascript 的组成部分DOM (document object model) 文档对象模型BOM (browers object model) 浏览器对象模型ECMAScript js 的核心DOM 节点节点分类元素节点：每个 HTML元素属性节点：HTML元素的属性文本节点：HTML元素内的文本注释节点：注释 文档节点：整个文档document节点类型 — nodeType元素节点：1属性节点：2文本节点：3注释节点：8原创 2020-11-11 08:56:00 · 102 阅读 · 0 评论 -
JSON字符串转化（和其他语言数据对接）
JavaScript之JSON字符串转化JSON数据操作1、JSON字符串转为对象、数组2、转为JSON字符串JSON数据操作为了和其他语言进行数据接通，JS提供了JSON对象来方便操作JSON数据1、JSON字符串转为对象、数组var _json1 = '{"name":"xiaochen"}';var _json2 = '[1,2,3]';console.log(JSON.parse(_json1));console.log(JSON.parse(_json2));output:原创 2020-11-02 17:27:37 · 405 阅读 · 0 评论 -
javaScript之BOM
BOMjavascript 的组成部分DOM (document object model) 文档对象模型BOM (browers object model) 浏览器对象模型ECMAScript js 的核心BOM 下五大对象1、window 对象innerWidth/innerHeight 可视区宽高open 方法 打开新的窗口window.open(URL,target,specs,replace)URL 新窗口地址target 属性 新窗口打开方式_原创 2020-11-11 20:24:57 · 157 阅读 · 1 评论 -
JavaScript之Math方法
JavaScript之Math方法math方法1、圆周率2、ceil 向上取整3、floor 向下取整4、round 四舍五入5、random 随机数6、Math.max()与Math.min()5、abs 绝对值math方法不能把math当作函数进行调用，math只是一个对象，提供了一些和数学操作相关的属性和方法。1、圆周率console.log(Math.PI);output: 3.1415926.......2、ceil 向上取整得到一个比当前值大的整数或者和当前一样的数值原创 2020-11-03 11:17:06 · 270 阅读 · 0 评论