js
lianjiuxiao
这个作者很懒,什么都没留下…
展开
-
前端特定手机兼容问题汇总
1: iphone5 iphoneX 对象的结构赋值 会导致字段的顺序发生变化,后面赋值的会在最后面2: 红米K30 pro 微信公众号环境 css透明度 50% 不透明,必须为0.5原创 2021-09-26 17:43:34 · 350 阅读 · 0 评论 -
手写promise.all
promise.all 有以下特点promise.all()返回值是new Promise需要用一个数组存放每一个promise的结果值遍历参数数组,判断是否是promise,是的话执行得到结果后压入结果数组;否则直接放入结果数组。当每个都成功执行后,resolve(result)当有一个失败,rejectfunction isPromise(obj) { return !!obj && (typeof obj === 'object' || typeof原创 2021-04-29 09:58:50 · 179 阅读 · 0 评论 -
js 如何实现循环跳出请求
1.for方法跳出循环function getItemById(arr, id) { var item = null; for (var i = 0; i < arr.length; i++) { if (arr[i].id == id) { item = arr[i]; break; } } return item;原创 2021-04-22 14:32:17 · 543 阅读 · 0 评论 -
web前端柯里化面试题
定义实现柯里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。1.实现一个函数功能:sum(1,2,3,4…n)转化为 sum(1)(2)(3)(4)…(n)// 使用柯里化 + 递归function curry ( fn ) { var c = (...arg) => (fn.length === arg.length) ? fn (...arg) : (...arg1) =>原创 2021-03-26 11:22:50 · 390 阅读 · 0 评论 -
js实现deepCopy
function deepClone (data) { const type = metaType(data); let obj = null; if (type === 'array') { obj = []; for (let i = 0; i < data.length; i++) { obj.push(deepClone(data[i])); } } else if (type === '.原创 2021-03-25 15:47:10 · 496 阅读 · 0 评论 -
前端性能优化都有哪些
1,SEO优化 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减小, title 值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面 title 要有所不同; description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可 语义化的 HTML 代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前:搜索引擎原创 2021-03-24 18:06:40 · 280 阅读 · 0 评论 -
事件委托
什么是事件委托 事件代理 ( Event Delegation ) ,又称之为事件委托。是 JavaScript 中常用的绑定事件的 常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监 听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能 可以大量节省内存占用,减少事件注册,比如在 table 上代理所有 td 的 click 事件就非常棒 可以实现当新增子对象时无需再次对其绑定 ...原创 2021-03-18 19:48:38 · 102 阅读 · 0 评论 -
js new 手写实现 new做了哪些事情
new到底做了哪些事情(1) 创建一个新对象;(2) 将构造函数中的this指向该对象(3) 执行构造函数中的代码(为这个新对象添加属性) ;(4) 返回新对象。function _new(obj, ...rest){ // 基于obj的原型创建一个新的对象 const newObj = Object.create(obj.prototype); // 添加属性到新创建的newObj上, 并获取obj函数执行的结果. const result = obj.ap...原创 2021-03-18 10:12:56 · 211 阅读 · 0 评论 -
this, bind,call,apply 面试题
了解 this 嘛,bind,call,apply 具体指什么它们都是函数的方法call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2]) :ES6 之前用来展开数组调用, foo.appy(null, []),ES6 之后使用 ... 操作符New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定 如果需要使用 bind 的柯里化和 app原创 2021-03-16 16:24:38 · 266 阅读 · 0 评论 -
JS 隐式转换,显示转换
一般非基础类型进行转换时会先调用 valueOf,如果 valueOf 无法返回基本类型值,就会调用 toString字符串和数字"+" 操作符,如果有一个为字符串,那么都转化到字符串然后执行字符串拼接 "-" 操作符,转换为数字,相减 (-a, a * 1 a/1) 都能进行隐式强制类型转换[] + {} 和 {} + []复制代码布尔值到数字1 + true = 2 1 + false = 1转换为布尔值for 中第二个 while if 三元表达式 || ...原创 2021-03-16 15:26:40 · 194 阅读 · 1 评论 -
事件冒泡和事件捕获
1、事件阶段如下图所示一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。(1)捕获阶段(Capture Phase)事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。(2)目标阶段(Target Phase)当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆...原创 2021-03-15 17:01:39 · 986 阅读 · 0 评论 -
面试题: ListToTree AND TreeToList 实现 扁平结构和树状结构互转
const list = [ {id: 1, pid: 0}, {id: 2, pid: 0}, {id: 3, pid: 0}, {id: 11, pid: 1}, {id: 12, pid: 1}, {id: 13, pid: 1}, {id: 21, pid: 2}, {id: 22, pid: 2}, {id: 23, pid: 2}, {.原创 2020-12-21 17:12:42 · 993 阅读 · 0 评论 -
js 递归运用 求阶乘 求斐波那契数
//求阶乘function factorial(n) { if (n === 1 || n === 0) { // 基线条件 return 1; } return n * factorial(n - 1); // 递归调用}//求斐波那契数列function fibonacci(n){ if (n < 1) return 0; // {1} if (n <= 2) return 1; // {2} return fibonacci(n - 1) + .原创 2021-03-09 17:00:52 · 100 阅读 · 0 评论 -
Number.MAX_SAFE_INTEGER 后端long类型的ID 导致前端 精度丢失
Number.MAX_SAFE_INTEGERNumber.MAX_SAFE_INTEGER常量表示在JavaScript 中最大的安全整数(maxinum safe integer)(253- 1)。描述MAX_SAFE_INTEGER 是一个值为9007199254740991的常量。因为Javascript的数字存储使用了IEEE 754中规定的双精度浮点数数据类型,而这一数据类型能够安全存储-(253- 1)到253- 1 之间的数值(包含边界值)。这里安全存...原创 2021-03-09 11:22:42 · 707 阅读 · 1 评论 -
JS中Map,Set,Array,Object之间的相互转换
原生js能够支持这几种类型数据格式之间的转换,先了解下Object.entries和Object.FromEntries这两个原生方法的作用:Object.entries获取对象的键值对Object.FromEntries把键值对列表转成对象Object.entries和Object.fromEntries之间是可逆的。Object转Maplet arr={foo:'hello',bar:100};let map=new Map(Object.entries(arr));console原创 2021-03-08 20:50:30 · 2380 阅读 · 0 评论 -
set 快速实现 并集 交集 差集
// 并集const union = (setA, setB) => { return new Set([...setA, ...setB])}// 交集const intersection = (setA, setB) => { return new Set([...setA].filter(x => setB.has(x)))}//差集const difference = (setA, setB) => { return new Set([...原创 2021-03-08 20:31:40 · 510 阅读 · 0 评论 -
js使用类 实现链表
“我们先来看看它们的职责”push(element):向链表尾部添加一个新元素。 insert(element, position):向链表的特定位置插入一个新元素。 getElementAt(index):返回链表中特定位置的元素。如果链表中不存在这样的元素,则返回undefined。 remove(element):从链表中移除一个元素。 indexOf(element):返回元素在链表中的索引。如果链表中没有该元素则返回-1。 removeAt(position):从链表的特定位置移除一原创 2021-03-08 18:24:51 · 183 阅读 · 2 评论 -
AMD && CMD ES6 模块
前言JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可;随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀问题:这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码一、模块模块化:是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。在理想状态下我们只原创 2021-03-04 15:12:13 · 257 阅读 · 1 评论 -
原生js 知识图谱
目录JavaScript BOM对象JavaScript Dcoument对象JavaScript 事件处理JavaScript变量JavaScript函数基础JavaScript流程控制JavaScript数据类型JavaScript数组JavaScript运算符JavaScript正则表达式JavaScript字符串函数JavaScript BOM对象JavaScript Dcoument对象JavaScript 事件处理Jav..转载 2021-02-20 14:25:29 · 271 阅读 · 0 评论 -
js 捕获 资源加载错误
资源加载错误使用addEventListener去监听error事件捕获实现原理:当一项资源(如<img>或<script>)加载失败,加载资源的元素会触发一个Event接口的error事件,并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window,不过能被window.addEventListener在捕获阶段捕获。但这里需要注意,由于上面提到了addEventListener也能够捕获js错误,因此需要过滤避免重复上报,判断为资源错误的原创 2021-02-01 11:57:25 · 4486 阅读 · 1 评论 -
js 中 内置对象 Function Object 和 {} 对象之间的关系 及其 prototype constructor instanceof的使用
内置对象 Object 构造函数创建一个对象包装器。new Object() // {}内置对象 Function 构造函数创建一个新的 Function 对象。 new Function() //ƒ anonymous() {}Function // ƒ Function() { [native code] }Function.prototype // ƒ () { [native code] }Function.constructor // ƒ .原创 2021-01-28 15:34:05 · 268 阅读 · 0 评论 -
函数柯里化curry 与合成函数 compose
柯里化curry 实现JS 函数合成是把多个单一参数函数合成一个多参数函数的运算。例如,a(x) 和 b(x) 组合为 a(b(x)),则合称为 f(a,b,x)。注意,这里的 a(x) 和 b(x) 都只能接收一个参数。如果接收多个参数,如 a(x,y) 和 b(a,b,c),那么函数合成就比较麻烦。这时就要用到函数柯里化。所谓柯里化,就是把一个多参数的函数转化为单一参数函数。有了柯里化运算之后,我们就能做到所有函数只接收一个参数。var add = function (x) { ..原创 2021-01-14 17:49:35 · 358 阅读 · 0 评论 -
一个简单的例子了解闭包
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。function foo() { var i = 0; return function(){ i++; console.log(i); };}const bar = foo原创 2021-01-04 18:18:41 · 149 阅读 · 0 评论 -
typeof 判断类型拓展 区分不同的object
“typeof”的问题在于,将其用于某些原语和函数时效果很好,但对于数组和对象来说,由于它们都被视为“对象”,因此很难把握它们之间的区别。const isOfType = (() => { // create a plain object with no prototype const type = Object.create(null); // check for null type type.null = x => x === null; // check for原创 2021-01-04 16:13:00 · 219 阅读 · 0 评论 -
js 检查是否为空
有时你需要知道某些内容是否为空,并根据结果决定要使用的方法,例如检查长度、大小或是否包含任何子元素。下面这个工具打包了这些功能,你可以用它检查 String、Object、Array、Map 和 Set 的大小。function isEmpty(x) { if(Array.isArray(x) || typeof x === 'string' || x instanceof String ) { return x.length === 0; } if(x i原创 2021-01-04 16:10:22 · 104 阅读 · 0 评论 -
创建一个范围内的数字队列
function range(maxOrStart, end = null, step = null) { if(!end) { return Array.from({length: maxOrStart}, (_, i) => i) } if(end <= maxOrStart) { return []; } if(step !== null) { return Array.from( {length: Math.ceil(((e.原创 2021-01-04 16:02:30 · 100 阅读 · 0 评论 -
轮询函数封装
如果你需要持续检查数据更新,但系统中没有 WebSocket,则可以使用这个工具来执行操作。它非常适合上传文件时,想要持续检查文件是否已完成处理的情况,或者使用第三方 API(例如 dropbox 或 uber)并且想要持续检查过程是否完成或骑手是否到达目的地的情况。async function poll(fn, validate, interval = 2500) { const resolver = async (resolve, reject) => { try { // ca原创 2021-01-04 15:59:05 · 579 阅读 · 0 评论 -
js 深度克隆对象
开发人员通常会安装一些类似“lodash”的库来执行这一操作,但使用纯 JavaScript 来实现确实也很容易。这是一个简单的递归函数:只要是一个对象,就使用函数的构造器将其重新初始化为一个克隆,然后对所有属性重复该过程。const deepClone = obj => { let clone = obj; if (obj && typeof obj === "object") { clone = new obj.constructor(); Obje原创 2021-01-04 15:56:25 · 137 阅读 · 0 评论 -
js 内置对象目录
值属性这些全局属性返回一个简单值,这些值没有自己的属性和方法。Infinity NaN undefined globalThis函数属性全局函数可以直接调用,不需要在调用时指定所属对象,执行结束后会将结果直接返回给调用者。eval() uneval() isFinite() isNaN() parseFloat() parseInt() decodeURI() decodeURIComponent() encodeURI() encodeURIComponent()原创 2020-12-30 15:04:35 · 68 阅读 · 0 评论 -
判断一个数字是整数
x === Math.floor( x ); // 或者 Number.isInteger( 4 ); // 新增api在 JavaScript 中,4、4.、4.0 或者 4.0000 之间并没有区别。所有这些都会被 当作“整型”并且从 Number.isInteger(..) 中返回 true。原创 2020-12-29 18:28:27 · 273 阅读 · 0 评论 -
全面了解 ASCII编码 Unicode编码 URL编码 及其相关函数
一: ASCII码ASCII第一次以规范标准的型态发表是在1967年,最后一次更新则是在1986年,至今为止共定义了128个字符,其中33个字符无法显示(这是以现今操作系统为依归,但在DOS模式下可显示出一些诸如笑脸、扑克牌花式等8-bit符号),且这33个字符多数都已是陈废的控制字符,控制字符的用途主要是用来操控已经处理过的文字,在33个字符之外的是95个可显示的字符,包含用键盘敲下空白键所产生的空白字符也算1个可显示字符(显示为空白)ASCII控制字符二进制 十进制 十六进制原创 2020-12-28 10:32:27 · 710 阅读 · 0 评论 -
js 运算符优先级
优先级 运算类型 关联性 运算符 21 圆括号 n/a(不相关) ( … ) 20 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 从左到右 … (…) 可选链(Optional chaining) 从左到右 ?. 19 new(无参数列表) 从右到左 ...原创 2020-12-24 16:16:43 · 153 阅读 · 1 评论 -
迭代器 生成器 使用小技巧
迭代器1:是一个 iterable,它产生的迭代器可以消耗其自身值一些内置类型拥有默认的迭代器行为,其他类型(如Object)则没有。下表中的内置类型拥有默认的@@iterator方法:Array.prototype[@@iterator]() TypedArray.prototype[@@iterator]() String.prototype[@@iterator]() Map.prototype[@@iterator]() Set.prototype[@@iterator]()..原创 2020-12-23 16:22:15 · 61 阅读 · 1 评论 -
正则表达式总结
使用正则表达式的方法 方法 描述 exec 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。 test 一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。 match 一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。 matchAll 一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。 sear...原创 2020-12-22 16:59:20 · 129 阅读 · 0 评论 -
js 解构技巧和陷阱
// 定义function foo() { return [1,2,3]; }function bar() { return { x: 4, y: 5, z: 6 }; }// 1: 不只是声明var which = "x", o = {}; ( { [which]: o[which] } = bar() ); console.log( o.x ); // 4// 2: 重复复制var { a: { x: X, x: Y }, a } = .原创 2020-12-16 15:33:50 · 135 阅读 · 0 评论 -
js中判断相等(非严格 隐式转换)
非严格相等==相等操作符比较两个值是否相等,在比较前将两个被比较的值转换为相同类型。在转换后(等式的一边或两边都可能被转换),最终的比较方式等同于全等操作符 === 的比较方式。相等操作符满足交换律。相等操作符对于不同类型的值,进行的比较如下图所示: 被比较值 B Undefined Null Number String Boolean Object 被比较值 A Undefined true true ...原创 2020-12-04 18:19:15 · 142 阅读 · 0 评论 -
js中的假值 js 判断为空
js中的假值• undefined • null • false • +0、-0 和 NaN • ""拓展价值: [] {}/** * 判断变量是否空值 * undefined, null, '', false, 0, [], {} 均返回true,否则返回false */export const empty = (v) => { switch (typeof v) { case 'undefined' : return tr...原创 2020-12-04 18:30:24 · 185 阅读 · 0 评论 -
JS字符串截取函数slice(),substring(),substr()的区别
一、substring()substring()方法返回一个索引和另一个索引之间的字符串,语法如下:str.substring(indexStart, [indexEnd])下面有六点需要注意:substring()从提取的字符indexStart可达但不包括 indexEnd 如果indexStart 等于indexEnd,substring()返回一个空字符串。 如果indexEnd省略,则将substring()字符提取到字符串的末尾。 如果任一参数小于0或是NaN,...原创 2020-12-03 16:03:17 · 119 阅读 · 0 评论 -
前端常用函数实现
1:创建一个指定长度的可遍历的数组var a = Array.apply( null, { length: 3 } ); // [ undefined, undefined, undefined ]原创 2020-12-03 15:18:10 · 343 阅读 · 0 评论 -
即标量基本类型值 和 对象的复制差异
var a = 2;var b = a; // b是a的值的一个副本b++;a; // 2b; // 3var c = [1,2,3];var d = c; // d是[1,2,3]的一个引用d.push( 4 );c; // [1,2,3,4]d; // [1,2,3,4]简单值(即标量基本类型值,scalar primitive)总是通过值复制的方式来赋值 / 传递,包括 null、undefined、字符串、数字、布尔和 ES6 中的 symbol。复合值(co..原创 2020-12-03 10:18:32 · 191 阅读 · 2 评论