每天一个JS小知识点,加油!
文章平均质量分 58
日常积累,一起加油
Lhy@@
不写博客的程序媛不是记性好的程序媛。
展开
-
JS 字符串分割以及填充
涉及的知识点string.substr(start,len) //截取函数string.padEnd(targetLength,flag) //填充函数 // tag : 要拆解的目标字符串 // length : 将字符串按照几等份拆解 // flag : 自定义填充字符 function autoFill(tag, length = 5, flag = "0") { var len = tag.length; var sa =原创 2021-09-13 16:09:03 · 484 阅读 · 0 评论 -
JavaScript 原型链深入 与 instanceof
instanceof一、 instanceof 用法二、 原型链一、 instanceof 用法A instanceof BA.__proto__ 是否存在 B.prototype二、 原型链JavaScript 原型链,看下图:图片来自:点击这里原创 2021-09-09 09:40:36 · 106 阅读 · 1 评论 -
JavaScript this对象的产生
this对象的产生一、this 对象的产生一、this 对象的产生引用 阮一峰老师 的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。所以时刻提醒自己this是在函数执行时被绑定的,不要被任何赋值语句打乱阵脚。...原创 2021-09-02 11:00:19 · 328 阅读 · 0 评论 -
JS 对象数组中判断是否存在某个值
情景再现://是否存在 catvar arr = [{ name: "cat", value: "0"}, { name: "dog", value: "1"}];//使用Array.prototype.somevar result = arr.some(function(item) { if (item.name == "cat") { return true; }});...原创 2021-06-25 15:44:12 · 1065 阅读 · 0 评论 -
JavaScript 数组去重
NaN == NaN 为false,NaN === NaN 为falseindexOf(NaN) 返回 -1undefined == null 为true ;undefined === null 为 false数组去重var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’,0,0, ‘a’, ‘a’,{},{}];1.ES6的 Set..原创 2021-06-16 16:34:37 · 95 阅读 · 0 评论 -
JavaScript 精确取得 object 的类型
对于typeof 值为object,仍想进一步知道对象的类型时,可以使用:Object.prototype.toString.call() <script type="text/javascript"> console.log(Object.prototype.toString.call(123)) //"[object Number]" console.log(Object.prototype.toString.call('123'))原创 2021-06-16 14:30:18 · 779 阅读 · 0 评论 -
JavaScript 之属性描述符(数据属性 & 访问器属性)
目录一、属性描述符介绍二、数据属性描述符2.1、特性的默认值2.1、修改默认的特性三、访问器属性一、属性描述符介绍首先 ,我们创建对象常用的声明形式:// 1、对象字面量声明 { } var obj = { name: 'Lu', // ... } // 2、new 关键字声明 var otherObj = new Object(); otherObj.name = 'Lu';对象 obj 的属性 name 也有一些特性:ECMA-262 使用一些内原创 2021-06-05 16:03:01 · 441 阅读 · 1 评论 -
JavaScript 函数式编程 - - AOP (上)
目录1、案例情景需求2、解决方案3、完善解决方案(待续)4、讲讲AOP的理解4.1、编程思想类型4.2、 AOP的优点 关于 AOP(Aspect Oriented Programming) – 面向切面编程的官方解释,可移步到百度百科 AOP解释 本文以解决案例需求形式,阐述我对AOP编程的理解:1、案例情景需求首先以函数对象为例,有一个函数test,它的核心功能就是输出 2,但是,现在想在处理核心功能前,先处理 before 函数其的工作内容是输出 1,然后,执行核心功能函数最后,执行原创 2021-05-19 16:26:06 · 323 阅读 · 1 评论 -
JavaScript 假装了解 函数柯里化
目录一、什么是函数柯里化?1、柯里化?2、如何实现add(3)(4) ?二、实现函数柯里化三、增强版的curryAdd( )一、什么是函数柯里化?1、柯里化? 我第一眼看到它的想到的是:这名字也太高端了吧,这不会哪个伟人又整了什么高等数学的定理要我学?还好我的"闺蜜"之一(仅是我单方面认定的闺蜜关系) - - 维基百科,告诉了它的真实身份。 柯里化,英语:Currying(满满的英译中的既视感),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且原创 2021-05-17 18:30:33 · 148 阅读 · 1 评论 -
JavaScript 客户端存储之 sessionStorage + localStorage
1 背景两者目的是:解决,通过客户端存储不需要频繁发送回服务器的数据时,的问题。cookie是每次发送请求,cookie数据也会发送。sessionStorage 和 localStorage 统称为 Storage 类型。浏览器中两者均不受页面刷新影响2 特性Storage 实例与其他对象一样,但增加了一些方法?clear():删除所所有值;(不在Firefox中实现)getItem(name):取得给定 name 的值key(index):取得给定 index 的值,remov原创 2021-05-16 15:27:43 · 251 阅读 · 0 评论 -
JavaScript 客户端存储之创建cookie + 读取cookie + 删除cookie
1、创建 cookie (无过期时间)创建一个名为 username 的 cookie ,它的值为 Jack;注意 :一个创建表达式,只能创建一个cookie ,不能后面接着定义下一个cookie如果不设置 过期时间,浏览器关闭的时候 cookie 就会被删除 // 创建一个 username cookie ,它的值为 Jack; document.cookie = "username=Jack"; //创建一个 age cookie ,它的值为 18; docu原创 2021-05-15 16:37:25 · 488 阅读 · 0 评论 -
JavaScript async & await 执行顺序
仅以此篇加深记忆:1、什么是async、await? async / await 是Generator函数的语法糖,原理是通过Generator函数 + 自动执行器 实现的,这使得async / await 跟普通函数一样,不用一直 next( ) 执行了。例子1 function f(){ return new Promise((resolve,reject)=>{ resolve('f 函数执行成功的结果'); }); }原创 2021-05-11 11:45:17 · 413 阅读 · 1 评论 -
JavaScript 防抖 与 节流
目录一、防抖二、节流三、防抖和节流之间的区别一、防抖个人理解的防抖:将规定时间内的多次请求,最终执行一次请求,且是新计时区间的第一次。为什么防抖要用到 setTimeout ? 因为,需求是请求是多次,但是最终只执行一次; 我们阻止不了事件的触发次数(多次),但我需要控制触发事件的执行次数,而且是规定时间内,这时setTimeout是不是就很合适。setTimeout首先是在计时器线程里计时,时间到了再到事件队列等待执行,到了事件队列里的事件没办法控制它取消执行,但是计时器线程里的事件可原创 2021-04-29 17:14:27 · 152 阅读 · 0 评论 -
JavaScript setTimeout( ) 与clearTimeout( )
setTimeout( )setTimeout( ) 方法用于在指定的毫秒数后调用函数或计算表达式。返回: 整型数值 id ,是 setTimeout 的唯一标识符,可用于取消 setTimeout 设置的函数clearTimeout( )clearTimeout( id ) : 根据 id 取消相应的定时器...原创 2021-04-29 16:02:03 · 141 阅读 · 0 评论 -
JavaScript 继承 - - 寄生式组合继承(经典继承)
目录一、回顾 组合继承 (伪经典继承)二、寄生式组合继承一、回顾 组合继承 (伪经典继承)结合了构造函数继承+对象原型继承不足的地方是:每个实例对象 都执行了两次Super函数,一次是prototype赋值,一次是Super.call并且 我们预期是想继承 父级的原型属性,而Suber.prototype = new Super(); 还另外承了this 对象, // 组合继承 function Super() { this.pbrand = 'super'原创 2021-04-28 15:13:14 · 354 阅读 · 0 评论 -
JavaScript 继承 - - 原型式继承 & 对比 对象原型继承 & 寄生式继承
目录一、原型式继承二、原型式继承 与 对象原型继承一、原型式继承2006年,Douglas Crockford在《JavaScript中的原型继承》中提到:function object(o){ function F(){ }; //临时的构造函数, F.prototype = o; return new F();}我们来实践一下这个方案: // 原型式继承:当传入的参数为构造函数实例 // 写一个工具函数 object function obj原创 2021-04-28 10:38:27 · 132 阅读 · 1 评论 -
JavaScript 继承--组合继承(伪经典继承)
目录一、组合继承的实现二、缺点组合继承:对象原型继承 + 构造函数继承一、组合继承的实现首先,我有几个问题,对象原型继承会继承this对象+prototype对象,构造函数继承会继承this对象,那么这个this对象 以谁的为准? // 组合继承 function Super() { this.pbrand = 'super'; // 添加引用值 this.a = [1, 2, 3, 4, 5]; } function Sub原创 2021-04-27 17:27:09 · 207 阅读 · 0 评论 -
JavaScript 继承 - - 构造函数继承 + 缺陷
目录一、对比--对象原型继承(又称 原型链继承)二、构造函数继承 的实现三、Super.call(this)四、验证一下引用值不共享,五、缺点一、对比–对象原型继承(又称 原型链继承)对象原型继承的关键语句:Suber.prototype = new Super();存在的问题:引用值共享(无论是this对象 还是prototype对象上的引用值);构造函数继承:解决了 this对象上引用值共享的问题!二、构造函数继承 的实现- 特点:构造函数继承,继承的是原型的 this 对象原创 2021-04-27 16:43:01 · 185 阅读 · 1 评论 -
JavaScript new 实例对象的过程
一、new 实例化对象构造函数 跟 函数 没有什么形式区别,为了代码规范,构造函数名首字母会大写。//构造函数function Foo(){}//实例对象new Foo();//普通函数function running(){}构造函数 可以用 new 实例对象,1.1、new 实例对象过程首先,创建了一个新对象,如:var foo = {}然后,新对象的 _ proto _ 属性指向构造函数的原型对象prototype将构造函数的作用域赋值给新对象(也就是this对原创 2021-04-27 16:18:31 · 422 阅读 · 0 评论 -
JavaScript 继承 - - 对象原型继承 & 引用值共享的原因
目录一、对象原型继承1.1、对象原型继承的实现1.2、缺陷:原型上的引用值共享1.3、出现引用值共享的原因一、对象原型继承1.1、对象原型继承的实现 // 对象原型继承 function Super(){ this.pbrand = 'super'; } function Suber(){ this.bbrand = 'suber'; } // 对象原型Suber.prototype 继承 Super实例对象 // 原因: 因原创 2021-04-27 15:30:54 · 280 阅读 · 0 评论 -
JavaScript 理解__proto__ + prototype +constructor
目录一、new 实例化对象1.1、new 实例对象过程二、prototype (构造函数的属性)三、 _ _proto_ _ (实例对象的属性)四、constructor一、new 实例化对象构造函数 跟 函数 没有什么形式区别,为了代码规范,构造函数名首字母会大写。//构造函数function Foo(){}//实例对象new Foo();//普通函数function running(){}构造函数 可以用 new 实例对象,1.1、new 实例对象过程首先,创建了原创 2021-04-26 20:48:54 · 89 阅读 · 0 评论 -
JavaScript 彻底理解for循环、for...in、foEach()、for...of之间的本质区别
常见的 **for… ** 循环,是一种最简单的迭代,循环是迭代机制的基础,目录一、可迭代对象有哪些?简单的迭代(for循环)的对象,它有什么特点?为什么说forEach仅限数组使用?为什么说Array.prototype.forEach()方法向通用迭代需求迈进了一步,但仍不够理想?二、那来讲讲 for..in2.1 先讲讲对象类型的数据结构是怎样的?2.2 for...in **遍历的是什么?2.3 for...in 遍历顺序一、可迭代对象有哪些?Array 数组MapSet 集合(内容不原创 2021-04-16 08:54:29 · 463 阅读 · 0 评论 -
JavaScript let(块级作用域 { })进阶、函数默认值
通过例子深入了解 let / 块级作用域一、块级作用域 { }二、函数默认值三、函数参数作用域 与 函数内部的块作用域一、块级作用域 { } // 1、 var x = 2; { let x = 4; console.log(x); // 4 } // 2、块中 x 没有值,往外层查找; { let y = x; console.log(y); // 2 } //3、 = 右边的 x 访问的是块中原创 2021-04-10 17:40:34 · 309 阅读 · 0 评论 -
JavaScript const声明进阶 、对象冻结
目录一、const 声明1.1、对于原始值类型变量:值就等于值1.2、对于引用值类型:值等于地址二、对象冻结(Object.freeze())一、const 声明 都知道 const 是用来声明常量的,声明的时候必须初始化变量且不能修改1.1、对于原始值类型变量:值就等于值const j = 1;j = 2;console.log('j:', j); 修改的时候报错了:1.2、对于引用值类型:值等于地址下面的例子表明:对象内部的属性是可以修改,但是修改引用报错const obj =原创 2021-04-08 15:51:14 · 255 阅读 · 0 评论 -
JavaScript 预编译法则(自我理解)
自我整理的JS工作大致流程,方便查阅:首先检查通篇的语法错误,预编译操作,JS执行。其中预编译操作的法则:其中 函数声明是整体提升,变量只有声明提升,赋值不提升,1、全局上下文预编译流程寻找变量声明,var寻找函数声明,最后执行2、执行函数时,函数上下文预编译流程寻找函数的形参,和 var 变量声明实参 赋值给 形参寻找函数内部的函数声明执行函数...原创 2021-04-08 09:33:22 · 127 阅读 · 0 评论 -
JavaScript 浏览器多进程 + 进程与线程的理解 + JS运行机制
目录一、区分进程 、线程1.1 首先官方的定义1.2 结合例子理解前端方向上理解二级目录三级目录一、区分进程 、线程1.1 首先官方的定义进程:进程 是CPU资源分配的最小单位(是能拥有资源和独立运行的最小单位)线程:线程 是CPU调度的最小单位(线程 是建立在 进程 的基础上的一次程序运行单位,一个进程可以有多个线程)1.2 结合例子理解工厂里有多个车间,每个车间一个或多个员工,每进程 - - 工厂 ,工厂有独立的资源;工厂之间相互独立;进程 - - 车间,线程 -原创 2021-04-06 17:34:28 · 1327 阅读 · 1 评论 -
JavaScript 给对象写迭代器,使对象可以使用for...of
目录一、用到 对象 转 Map二、迭代器的编写一、用到 对象 转 Map var obj = { "a": 1, "b": 2, "c": 3 }; var map = new Map(); for(let key in obj){ map.set(key,obj[key]); } console.log(map); for(let item of obj){ console.log(i原创 2021-04-06 11:38:24 · 266 阅读 · 0 评论 -
JavaScript 函数对象的prototype属性和this属性
函数对象一、this 属性(对象类型)二、prototype 属性(对象类型)三、关于对象属性常见的方法3.1、delete 实例.属性:delete person1.age3.2、in 操作符3.3、for...in 遍历对象属性3.4、hasOwnProperty() 判断某个属性是否在实例上3.5、Object.keys() 获取实例上的属性数组函数也是对象的一种,函数执行的时候会创建 this 和 prototype 属性一、this 属性(对象类型)二、prototype 属性(对象类型)原创 2021-03-29 16:47:20 · 585 阅读 · 0 评论 -
JavaScript 理解 callee / caller / new.target 属性
JavaScript 理解 callee / caller / new.target 属性首先**callee** 和 **caller** 都是 **arguments** 对象的属性,caller 引用的是 调用当前函数的函数,值引用原创 2021-03-27 16:15:04 · 127 阅读 · 0 评论 -
JavaScript 理解 this对象(中)
理解函数中的this的指向原创 2021-03-27 14:57:49 · 112 阅读 · 0 评论 -
JavaScript -- 函数arguments 、形参、实参之间的关系
arguments 、形参、实参之间的关系一、arguments二、形参三、实参四、例子讲解arguments 与 实参 与 形参注意点一、argumentsarguments :是一个雷数组对象,包含调用函数时传入的所有参数(即实参)。arguments 对象 只有以function关键字 定义函数时才有。arguments 对象包含一个属性 callee - - 指向arguments对象所在的函数。二、形参声明函数时所有参数,称为形参。三、实参调用函数时传递的所有原创 2021-03-24 10:13:25 · 1274 阅读 · 0 评论 -
JavaScript--对象基础(上)
对象 一、理解对象1、创建对象1.1、实例方式--创建对象1.2、字面量形式 -- 创建对象2、属性的类型2.1、数据属性2.2 访问器属性二、一、理解对象定义为一组属性的无序集合,每一个属性或方法都是由一个名称来标识,这个名称映射到一个值,键值对形式值可以是 数据 或 对象1、创建对象1.1、实例方式–创建对象// 创建实例var obj = new Object();// obj对象添加 属性obj.name = 'lhy';obj.weight = 50;// obj对象添原创 2021-03-23 11:25:50 · 81 阅读 · 0 评论 -
JavaScript -- 闭包
闭包函数一、闭包是怎样子的?二、闭包的定义三、闭包的特点四、通过例子理解闭包1、学生名单累加器、解决方法之一、意料之外的方法()一、闭包是怎样子的?二、闭包的定义闭包:指得是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现的。三、闭包的特点当产生了闭包的内部函数被返回并在其他地方被使用后,它仍引用着的那个变量!产生了闭包的函数的作用域链包含外部函数的作用域。四、通过例子理解闭包1、学生名单累加器需求分析:原创 2021-03-22 12:34:09 · 103 阅读 · 0 评论 -
JavaScript -- IIFE 立即执行函数
immediately-invoked function expression一、立即执行函数的特点二、立即执行函数的编写三、语法编写展示四、经典案列一、立即执行函数的特点1. 执行完成后立即释放;2. 将函数声明转成表达式,就可以用 “()” 执行符号。3.()-- 括号里加值,(8)会被理解成表达式,详见 语法编写展示 例子 3二、立即执行函数的编写(function(形参){ statements; })(实参);(function ( 形参) { statemen原创 2021-03-21 19:16:55 · 115 阅读 · 0 评论 -
JavaScript 快速理解 this 对象(上)
this对象在标准函数和箭头函数中不同的行为一、 认清 -- 标准函数、箭头函数二、标准函数中 this 对象三、箭头函数中 this 对象一、 认清 – 标准函数、箭头函数标准函数:形如 function 关键字声明的函数。箭头函数: “=>” 声明的函数。标准函数二、标准函数中 this 对象this 引用的是把函数当方法调用的上下文对象总结:谁调用,this 指向谁。<body> <script> var color = 'red';原创 2021-03-20 17:26:50 · 155 阅读 · 0 评论 -
JavaScript 中的 “ => “ 箭头函数(上)
JavaScript (a)=> { b } 箭头函数 一、函数的定义语法有哪些?二、了解 " 箭头函数 "三、" 箭头函数 " 如何使用?一、函数的定义语法有哪些?1. 第一种,函数声明的方式定义function sum(a,b){ return a + b;}2. 第二种,函数表达式声明注意函数后面有分号 ;,因为是表达式。var a = function sum(a,b){ // 递归,sum(); return a + b;};如果在sum() 函数内部不原创 2021-03-20 11:03:55 · 1745 阅读 · 1 评论 -
JavaScript中操作符的优先级的顺序
操作符优先级关系操作符分类提升级别的方法操作符优先级别操作符分类算术操作符("+"、"-"、" * " 、"/")比较操作符(">"、"<"、"==" 、" === ")逻辑操作符("||"、"&&"、"!")赋值操作符("=")提升级别的方法小括号:小括号内部的内容执行级别高于外部的。操作符优先级别由高到低:小括号 > 算术操作符 > 比较操作符 > 逻辑操作符 > 赋值操作符经典案例:先想想打印结果? <scri原创 2021-03-19 20:01:41 · 422 阅读 · 1 评论 -
JavaScript 原始值 / 引用值的理解
交换两个变量的值典型案例变量的复制变量的分类原始值原始值 的复制引用值引用值 的复制交换两个变量的正确方法典型案例function exchange(a,b){ let c = a; a = b; b = c; console.log('函数内部a,b:',a,b); }let a = 3,b = 4;exchange(a,b);console.log('函数外部a,b:',a,b); 输出结果: 造成以上结果的原因:ECMAScript中所有函数的参数都是按值传递的原创 2021-03-17 20:24:25 · 219 阅读 · 0 评论 -
JavaScript for..in /for...of 区别
循环和迭代for...in 语句for...offor…in 语句for…in ** 指定一个变量来循环一个对象所有可枚举**的属性。JavaScript 会为每一个不同的属性执行指定的语句。Symbol() 数据类型定义的变量不可枚举。语法:for (variable in object) {statements}例子1function dump_props(obj, obj_name) { var result = ""; for (let i in obj) {原创 2021-03-17 16:54:28 · 181 阅读 · 0 评论 -
快速理解递增( a ++)/递减(-- a)前缀与后缀的区别
前缀、后缀简单前缀、后缀应用1、前缀与后缀无异的情况2、前缀:变量值会在语句被求值之前改变3、前缀:变量值会在语句被求值之后改变简单前缀、后缀应用1、前缀与后缀无异的情况let a = 10;let b = 10;a++;++b;console.log('a++',a);// 11console.log('++b',b);// 11发现:前缀与后缀的输出结果无异。2、前缀:变量值会在语句被求值之前改变例子let a = 10;let b = 10;console.log('a+原创 2021-03-16 17:29:59 · 437 阅读 · 0 评论