javascript
文章平均质量分 64
Steven--Lee
这个作者很懒,什么都没留下…
展开
-
leetcode 977 有序数组的平方 [双指针]
一、题目描述:leetcode NO.977 有序数组的平方给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。示例 1:输入:nums = [-4,-1,0,3,10]输出:[0,1,9,16,100]解释:平方后,数组变为 [16,1,0,9,100]排序后,数组变为 [0,1,9,16,100]示例 2:输入:nums = [-7,-3,2,3,11]输出:[4,9,9,49,121]提示:1 <=原创 2021-03-02 01:04:39 · 348 阅读 · 0 评论 -
函数柯里化理解及最简实现
一、描述官方描述:函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。换一种更准确的解读:用闭包把参数保存起来,当参数的数量足够执行函数了,就开始执行函数二、实现代码及分析const curry = (fn, ...args) => fn.length <= args.length // 判断参数的数量足够执行函数 ? fn(...args) // 执行函数 : curry.bind(null, fn, ...args) // 使用bind的原创 2020-12-30 02:27:38 · 658 阅读 · 0 评论 -
手写call、apply与bind及实现逻辑分享
const isFunction = fn => typeof fn === "function"/** * 模拟call实现步骤 * 1.判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可 能出现使用 call 等方式调用的情况。 * 2.判断传入上下文对象是否存在,如果不存在,则设置为 window 。 * 3.处理传入的参数,截取第一个参数后的所有参数。 * 4.将函数作为上下文对象的一个属性。 * 5.使用上下文对象来调用这个方法,并保存返回结果。 *原创 2020-12-30 01:58:12 · 302 阅读 · 0 评论 -
dom事件模型详解
一. dom0事件模型(原始事件模型)当时还没有形成正式的W3C标准,但该事件模型仍在早起广泛应用。一个dom节点只能绑定一个事件再次绑定会覆盖之前的事件二. dom2事件模型因为DOM于1998年10月1日成为W3C的推荐标准,但是该标准并没有定义事件相关的内容,所以新的标准直接从DOM2开始。DOM2规范是从2000 年 11 月开始(于2003 年 1 修订确认),关于事件模型新增了addEventListener方法…详情如下新增冒泡和捕获的概念一个元素节点支持绑定..原创 2020-12-13 23:50:48 · 574 阅读 · 0 评论 -
原生JS多线程解决方案:Worker
一、简介一般情况下我们使用JS都是单线程的模式,也就是前边的代码执行完,才能轮到后边的代码执行。后来因为电脑计算能力的增强,单线程模式对于多核CPU的计算机计算能力便出现了一些浪费。web Worker是H5新增的功能,可以手动创建一个或多个额外线程来优化我们的页面。一般我们的主线程来处理UI展示、交互等方面的任务,Worker 线程可以用来完成一些耗时的操作,可以明显的提升用户体验。nodeJS请直接使用worker_threads模块二、用法1.主线程创建额外线程(接收的参数只能是一原创 2020-11-08 22:09:33 · 646 阅读 · 0 评论 -
小白也能彻底理解的prototype原型链第二篇
前言回顾一下,上一篇文章主要通过构造函数与其实例对象讲解了原型对象、构造函数和隐式原型链之间的关系及用法,希望没看过的同学去先去看看第一篇再来。这一篇我们主要是来完整的学习下原型链。首先需要了解的__proto__和constructor属性是一般对象所独有的函数也是一种对象,且独有prototype属性null和undefined不属于一般对象1.构造函数与实例对象之间的原型链function Person () {}let person1 = new Person()以上代码大原创 2020-07-09 00:51:16 · 1182 阅读 · 0 评论 -
小白也能彻底理解的prototype原型链第一篇
前言原型链这部分的概念对于前端开发人员,一直是一个难点,尤其是es6语法中还引入了class关键字,我们可以通过更直观的方式使用js对象继承等功能。本以为原型链相关知识现在只有在面试中用到了,但最近发现在研究lodash、vue等项目的源码架构时,才发现原型链相关知识点是必知必会的...原创 2020-07-03 00:25:38 · 1734 阅读 · 2 评论 -
过滤数组中为falsey的对象
falsy定义falsy可以直译为假值,包含false,'',"",null,undefined与NAN这几种数据类型。思路第一步使用filter过滤falsy类型的数据这一点应该很容易想到,第二步就是考虑如何将数组中每一项转化为Boolean值。其中Boolean作为一种数据类型,同时Boolean()也是一种构造函数,可以将接收到的第一个参数转化为boolean值返回,那么第一种解法来了(idea来自freecodecomp算法篇)const noFalsy = arr => arr.f原创 2020-06-14 23:19:30 · 2943 阅读 · 0 评论 -
js图片下载(支持跨域/解决Access-Control-Allow-Origin)
一、思路使用canvas绘制图片使用toBlob方法将canvas图片转换为文件使用a标签的download属性下载这个canvas转化生成的图片文件canvas.toBlob()将canvas图像转换为文件参数一为可操作的blob对象构成的的回调函数参数二为生成的图片后缀名,默认为png参数三为生成图片的质量,比如0.9二、源码const imageDownload ...原创 2020-01-12 23:34:59 · 9256 阅读 · 1 评论 -
解决iframe跨域传参(Blocked a frame with origin)
一.问题描述使用iframe通过iframe子页面调用父页面或父页面调用iframe子页面时,因为违反了浏览器安全策略,无法跨iframe获取到另一页面的数据,在控制台中可以看到如下报错Blocked a frame with origin “http://localhost:****” from accessing a cross-origin frame.二.解决方案以上问题可通过...原创 2019-09-24 16:05:19 · 139802 阅读 · 39 评论 -
vue实现dom元素拉伸
一、实现效果封装了三个methods方法,传入对应节点即可实现对应元素节点的拉伸收缩。二、代码1. 函数封装/**** 让指定的dom元素支持沿x轴的拉伸收缩* oBox为指定的dom节点* e为鼠标按键默认传入的对象*/ moveX(oBox, e) { let x = e.clientX; let oBoxW = oBox.offsetWidth; ...原创 2019-09-17 00:21:45 · 4425 阅读 · 2 评论 -
实例方法、实例属性、静态方法与静态属性的创建与使用(es5 vs es6)
一、es5版本相关知识点构造函数原型链const Person = function (name, age) { this.name = name // 实例属性,可以通过对象.属性访问的属性叫实例属性 this.age = age}// 静态属性,挂载在构造函数Person.info = 'nice'// 实例方法,挂载在原型链,生成的对象可直接点方法的方式调用...原创 2019-05-30 22:18:52 · 2065 阅读 · 2 评论 -
无node环境如何在js中引入JSON、txt、md等文件
解决的问题后端接口未实现时,直接调用JSON定义好的模拟数据信息,从而继续开发其他功能。解决方案使用ajax请求要获取的模拟数据,url是json文件的相对路径,返回值就是json文件内容。代码示例项目使用mui构建,以为为mui语法的ajax请求。// get mock datamui.get('../mock/template.json', res => { ...原创 2019-05-21 16:48:44 · 1129 阅读 · 0 评论 -
页面/元素/鼠标坐标位置相关总结
一.获取鼠标位置获取鼠标移动事件的event对象通过对象可获取当前鼠标的x,y坐标let x, y;function mouseMove(e) { e = e || window.event; if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; console...原创 2018-09-13 01:45:36 · 558 阅读 · 0 评论 -
commonJS、AMD与CMD区别表格对比
一、对比总览 名称 同步异步 规范文件 应用场景 加载速度 描述 CommonJS 同步 CommonJS nodejs 平均加载速度最慢 最早版本的js模块化编程规范,同步下载所有依赖后才能继续向下执行。 AMD 异步 requireJS 依赖前置 平均加载速度最快 CommonJS的异步js加载模块解决方...原创 2018-08-30 16:36:48 · 736 阅读 · 0 评论 -
js数组去重、获取重复数据以及获取非重复数据--一句话函数
数组去重let arr = [11, 23, 26, 23, 11, 9]const deduplication = arr => [...new Set(arr)]console.log(deduplication(arr)); // [ 11, 23, 26, 9 ]保留数组中非重复数据let arr = [11, 23, 26, 23, 11, 9]cons...原创 2018-08-02 02:04:00 · 10966 阅读 · 0 评论 -
rgb颜色与16进制颜色相互转化函数-javascript
rgb颜色转化为16进制颜色传入rgb颜色(数组类型),将会得到16进制颜色的字符串当传入的数值不符合规范,将会返回字符串Invalid data/** * @param rgb [] * @returns {string} * * eg. * input: [220,20,60] * output: #dc143c */const convertRGBToHex ...原创 2018-07-07 20:25:27 · 2327 阅读 · 0 评论 -
一行代码实现输入框的全选反选
先说句题外话,使用了es6的新语法让我们可以写出更简洁高效的代码,当然相对于习惯老版本的写法的童鞋来说看起来很反人类。开始我也是这么觉得,但是后来逐渐熟悉了这些语法我才发现这么写真的很爽。核心代码const selectAll = () => [...$('.index')].map(v => v.checked = $('#selectAll').checked);看...原创 2018-03-23 01:07:45 · 844 阅读 · 0 评论 -
toLocalString与toString方法比较
作用两种方法的作用都是将传入的值转化为字符串类型。 分别传入的数字、字符串、数组与简单对象进行比较...原创 2017-11-07 12:22:22 · 2571 阅读 · 0 评论 -
区分与检测null,undefined 与 undeclared
null 作为js原始类型之一,表示对象值为空。 使用typeof类型判断结果为Object与' '和" "不等价,这两个指的是字符串为空undefined 只定义未赋值会得到undefined 使用typeof类型判断会得到字符串类型的'undefined'undeclared 没有定义之前直接使用变量或函数会得到undeclared报错至于怎么以下代码用于区分这三种类型...原创 2017-11-17 18:29:04 · 1222 阅读 · 2 评论 -
ASI(Automatic semicolon insertion-自动分号插入)
javascript中,许多语句必须以分号结束,因此使用自动分号插入(ASI)可以保证程序的正常运行。当遇到以下情况会触发自动分号插入。......原创 2017-11-20 21:24:34 · 723 阅读 · 0 评论 -
基本运算符总结
&按位与运算符,对两个数字转化为32位表达式,按位做与运算。// 9 is 00000000000000000000000000001001var expr1 = 9;// 5 is 00000000000000000000000000000101var expr2 = 5;// 1 is 00000000000000000000000000000001原创 2017-09-27 19:41:25 · 565 阅读 · 0 评论 -
数组操作总结(javascript)
数组的添加arr.push();将一个或多个元素放入数组尾部,返回新数组的长度arr.unshift();将一个或多个元素放入数组头部,返回新数组的长度arr.splice(startposition,endposition,item1,item2);将起始位置到终止位置的元素删除,再插入指定的项目(item1,item2),返回值为删除的元素(可进行的操作有:添加、删除、原创 2017-01-03 20:48:24 · 486 阅读 · 0 评论 -
踩坑之后对于对象与数组深度复制的总结
坑点先说说这个我花了两天才跳出的坑,程序运行是需要一些模拟数据(mockData),包含其中对象、数组,本来引用来直接使用没有问题,知道开发后期发现我引用数据使用的是浅克隆,就像是这样(以数组为例,对象也一样):var arr=[10,20,30];var newArr=arr1;arr[0]='40';console.log(arr); //[40,20,30]...原创 2017-07-13 18:28:15 · 1112 阅读 · 0 评论 -
简单的js验证码
登录注册页面非常实用的验证码函数,直接上代码:function createCode(len) { var seed = new Array('abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ','0123456789'); //创建需要的数据数组 //原创 2017-01-15 16:54:43 · 657 阅读 · 0 评论 -
通过对象深入了解prototype
先来点概(gan)念(huo)对象属性分为数据属性与访问器属性数据属性属性特性描述 - configurable(true):能否通过delete删除属性从而重新定义 - enumerable(true):能否通过for-in循环遍历到属性 - writable(true):能否修改属性的值 - value(undefined):包含这个属性的数据值注:数据属性的设定需使用原创 2017-08-25 00:52:48 · 534 阅读 · 0 评论 -
reduce方法
### 关于reduce方法 用于:遍历处理数组可以看到reduce方法的第一个参数必须是一个函数(必填)此函数第一个参数默认为上一次reduce遍历的返回值,初始值为数组第一项const arr = [1, 2, 3, 4, 5];const sum = arr.reduce(function(prev, cur, index, arr1) { console.log(prev)原创 2017-11-25 14:37:16 · 1880 阅读 · 0 评论 -
call与apply简单总结
概念call与apply用于使用函数时改变this(函数运行时的 context),当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。用法call接收多个参数 第一个参数为被调用对象指定的this之后的参数为调用时传入的参数apply接收两个参数 第一个参数为被调用对象指定的this第二个参数为一个数组,调用时将数组的每一项作为一个参数原创 2018-01-02 16:39:16 · 552 阅读 · 0 评论 -
javascript中的bind方法
简介javascript与原生支持的bind()函数会创建一个新函数(称为绑定函数)。新函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。fn.bind(obj)当bind只有一个参数时相当于给某个函数的this绑定为指定值。原创 2017-12-28 17:49:43 · 1003 阅读 · 0 评论 -
务必搞懂的setter与getter
大体描述setter用于在一个对象伪属性改变时添加验证。getter用于在使用到这个伪属性时执行定义好的方法。setter方法会在getter调用之前调用。settersetter概念在 javascript中,如果试着改变一个属性的值,那么对应的setter将被执行。setter经常和getter连用以创建一个伪属性。不可能在具有真实值的属性上同时拥有一个setter器。原创 2018-01-17 16:18:49 · 7968 阅读 · 0 评论 -
JSON数据转化总结以及angular内置的转化方法
js原生JSON转化方法JSON.parse()将JSON数据(字符串)转化为JavaScript对象/数组JSON.parse()第二个参数JSON.parse()第二个参数为选填,用于将转换后的每个成员变量都调用此函数。 - 以下为权限树json的转化代码 - 每个被转化的对象属性都会被遍历 - 被遍历的每一项都是一个js对象 -...原创 2018-02-27 14:36:31 · 14370 阅读 · 0 评论 -
标签移除属性--removeAttribute与removeAttributeNode方法
removeAttribute移除节点指定名称的属性。示例如下document.getElementById('riskTypePie').removeAttribute("style");removeAttributeNode注:此方法不兼容IE。使用方法:获取要删除属性的元素获取该元素要删除的属性<元素>.removeAttributeNo...原创 2018-03-07 20:44:36 · 6824 阅读 · 0 评论 -
如何将普通字符串转化为dom节点插入页面
主要转化原理将存储在存储在字符串中的XML或HTML解析为一个DOM文档,然后使用parseFromString方法将这个DOM文档转化为一个DOM对象。选择到要插入的节点后使用append方法插入到对应的位置即可。有点懵?没关系,继续往下看。主要操作创建DOMParser()文档使用parseFromString()方法将DOMParser()文档转化为DOM对象选择D...原创 2018-03-13 00:08:36 · 7095 阅读 · 0 评论 -
循环遍历总结(for/foreach/forin/forof/map/some/filter)
for-of 循环代码示例for (var value of myArray) {console.log(value);}循环的对象需为一个数组无法记录索引可以相应break、continue、return语句可用来遍历对象属性可用来遍历对象的自值无法获取到对象或数组遍历的索引.......原创 2017-10-27 16:52:32 · 2113 阅读 · 0 评论