Javascript
关注
分享
扫一扫
Javascript
前端卡卡西呀
前端程序员。面向搜索引擎开发，熟练掌握CV大法的拷贝程序员---前端卡卡西
展开
-
巧用Es6解构赋值
1、常用解构赋值## 数组解构let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3// 忽略部分值let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3// 结合 rset 扩展运算符，分配其余值let [head, ...tail] = [1, 2, 3, 4];hea原创 2022-02-18 17:28:58 · 433 阅读 · 2 评论 -
特殊函数：纯函数
纯函数特征只要是同样的输入（实参），必定得到同样的输出（返回）约束条件不得改写参数数据；不会产生任何副作用，例如网络请求、输入和输出设备等；不能调用Date.now() 或者 Math.random()等不纯的方法；举例redux 的 reducer 函数必须是一个纯函数。纯函数：function test(x) { return 1;}非纯函数：function test1() { return new Date();}function test2(x) { re原创 2022-02-16 23:22:37 · 220 阅读 · 0 评论 -
前端超实用编码技巧
获取时间戳的 时:分:秒let timeStamp = new Date().getTime(); // 获得时间戳new Date(timeStamp).toTimeString().slice(0,8); // '13:44:41'时分秒 前补0 （倒计时）let hour = 9;// badhour = String(hour).length > 1 ? hour : '0'+hour;// goodhour = String(hour).padStart(2,.原创 2021-12-31 18:06:33 · 779 阅读 · 16 评论 -
const name=“global“； var obj ={ name: ‘123‘, getName:()=＞{ console.log(this.name)； } } obj.getName()
题目描述：如下代码，执行完 输出内容？const name="global";var obj = { name: '123', getName:()=>{ console.log(this.name); }}obj.c输出结果：空如下所示：易错项：“123”；“global”解析：1.为什么不是 “123”如 this指向这篇文章 第 3 条所示：3.函数是否在某个上下文对象中调用(隐式绑定)？如果是的话，this绑定的是那个上下文对象。如： v原创 2021-12-17 16:25:19 · 930 阅读 · 12 评论 -
算法系列：5. 二分搜索
/** * @Desc 二分搜索 * 二分搜索 前提是 有序数组 * 从数组中间值开始，如果中间值正好等于搜索值，结束搜索； * 如果搜索值比 中间值大或小，则在大于或小于中间值的那一半数组中继续搜索 */Array.prototype.binarySort = function (selector) { let low = 0; let high = this.length - 1; while(low <= high) { let midInd原创 2021-11-27 22:35:41 · 338 阅读 · 4 评论 -
算法系列：2. 插入排序
/** * @Desc 插入排序 * 时间复杂度：O(n^2) * 从第二个数开始往前比 * 有比第二个数小的，往后排 * 从第三个数开始往前比，有比它大的往后排 * 以此类推 进行到最后一个数 */Array.prototype.insertSort = function() { for (let i=1;i<this.length; i+=1) { let temp = this[i]; let j = i; while原创 2021-10-15 14:34:36 · 162 阅读 · 1 评论 -
前端获取网络时间的方法
使用场景：前端根据配置在 一个时间段内展示一个入口，直接通过 new Date() 获取的是本地时间，如果本地机器时间更改，该时间是不正确的，需要使用网络时间。解决办法：通过发xhr一个请求，从返回值中获取服务器时间。getNetTime.js// getNetTime.jsexport function getNowTime() { return new Promise((resolve) => { const xhr = new window.XMLHttpR原创 2021-06-07 09:48:35 · 4388 阅读 · 4 评论 -
页面滑动长弹窗，如何阻止页面滚动？
当页面弹层内容过长(如规则弹窗)，手动滑动时，经常是滚动页面内容，而非弹层内容，这种情况的用户交互不是太友好。解决办法：当弹出弹层时，手动将页面定住，禁止滚动。首先想到的就是 “fixed”：function stopMove() { // 滑动长弹窗时，阻止背景跟随滑动 var top = -$(window).scrollTop(); $('body').css({ 'position': 'fixed' }) setTimeou原创 2021-06-01 10:41:21 · 1622 阅读 · 5 评论 -
重新认识sort排序方法
作为一个前端开发人员，我们都知道数组 有个排序方法：sort，对于 arr.sort((a,b) => a-b) 这样的升序数组也是信手拈来，但是，sort背后到底是什么？ a-b 为什么就是升序呢？接下来我们全方面认识一下 sort：介绍：sort()方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。const months = ['...原创 2021-05-25 10:29:16 · 2424 阅读 · 2 评论 -
!function(){}() 什么意思
阅读 项目代码时，JS 文件中时常会遇到!function(){}()+function() {}()等写法，这到底是什么意思呢 ？含义：自执行函数我想大家都知道 (function() {})(). 的意思是 立即执行当前函数，也叫自执行函数，其实“!function(){}()” 跟它一样，也是 立即执行。原理：在javascript 中，!、+、() 这些 运算符 的优先级是很高的，所以会 优先执行他们后边的 function。最后还是推荐...原创 2021-05-06 13:23:32 · 1228 阅读 · 5 评论 -
JS 中ES模式的export 和export default 的区别
export 和export default 都在es6 中用来导出变量、方法、模块等，区别在于：同一文件中，可以 export 多个变量、方法、模块等；而同一文件中 export default 只能使用一次具体使用：1. export：// export.jsexport const name = '李白';export function say() { console.log('李白乘舟将欲行');}引入：// import.jsimport {na原创 2021-03-02 14:23:48 · 695 阅读 · 2 评论 -
高级程序设计学习笔记-第八章-8.2 location对象
1. location对象很特别，它既是 window 对象的属性，也是 document 对象的属性，即 window.location 和 document.location 引用的是同一个对象2. 查询URL 所有参数的方法function getQueryStringArgs() { // 取得查询字符串并去掉开头的问号 var qs = location.search.length > 0 ? location.search.substring(1) : ..原创 2021-02-24 12:48:12 · 240 阅读 · 1 评论 -
location.origin 兼容性处理
location.origin 可以获取 当前协议 + 域名，但是低版本IE是不支持这个属性的，需要做一下兼容：let origin = window.location.origin;// protocol 当前 URL 的协议// hostname 当前 URL 的主机名// port 当前 URL 的端口号if (!origin) { origin = window.location.protocol + '//' + window.location.hostname + (w.原创 2021-01-26 21:05:55 · 1481 阅读 · 0 评论 -
Js 实现dom元素拖动
原生Javascript实现元素随鼠标拖动而移动的效果：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </原创 2021-01-09 18:31:54 · 1337 阅读 · 1 评论 -
js实现 indexOf()
if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(selectElement,fromIndex) { if (this == null) { throw new TypeError('对象是null') } let k, o = Object.create(this); let len = o.length; if (!len) return -1; let n = +fromI原创 2020-12-28 16:00:26 · 789 阅读 · 0 评论 -
Js获取DOM元素宽高，Js获取不到DOM元素宽高
dom及css样式如下：<style> #element { background-color: aquamarine; width: 100px; }</style><div id="element" style="height: 100px;"></div>方法1: element.style.width/heightconst el = document.getElementById('原创 2020-12-24 15:32:08 · 1671 阅读 · 2 评论 -
js实现Promise.all 解析Promise.all 和race
Promise.all 接收一个 promise 对象的数组，等所有都完成之后，统一执行success；Promise.race 也接受一个 Promise 对象的数组，但是只要一个对象完成，就执行 success示例：let p1 = new Promise((resolve,reject) => { resolve('p1');});let p2 = new Promise((resolve,reject) => { resolve('p2');})原创 2020-07-26 16:58:02 · 837 阅读 · 0 评论 -
Js实现Promise（符合Promise/A+规范）
// 手写promise function Promise(executor) { var _this = this this.state = 'pending' this.value = undefined this.reason = undefined this.onFullfiledFun = [] // 存储异步 this.onRejectedFun = [] // 存储异步 .原创 2020-07-22 11:25:25 · 473 阅读 · 0 评论 -
原生js实现手写call、apply、bind
实现call()方法Function.prototype.mycall = (context,...args) { // 判断this是否函数，否返回typeerror if (typeof this !== 'function') { throw new TypeError('不是函数'); } context = context || window; context.fn = this; const res = context.f原创 2020-07-02 22:04:46 · 798 阅读 · 15 评论 -
到底什么是DOM0、DOM2、DOM3？？
dom事件有好几个级别，分别是DOM0级、DOM1级、DOM2级、DOM3级，每个级别的事件定义方式不同，特点也不同，下边就具体分析下：DOM0级分两种：在标签中直接写 onclick事件<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >在js中写 onclick=function() {} 函数document.getElementById("myButt.原创 2020-11-09 17:24:37 · 4871 阅读 · 0 评论 -
JS垃圾回收机制
摘自 《Javascript高级程序设计第3版》第四章 4.3节：垃圾收集正文：（无用内容略有删减） Javascript 具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。在编写 Javascript 程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作..原创 2020-11-04 11:46:52 · 406 阅读 · 1 评论 -
最常问的JS堆栈内存问题
JS中的变量有基本类型和引用类型两种。基本类型数据有包括Boolean、Number、String、Undefined、Null等，他们都是保存在栈空间，通过按值引用。引用类型就是一些对象类型，如Object对象等，他们存储在堆 中，Js不允许直接访问堆内存中的位置，所以操作对象时，实际是操作对象的引用。JS引擎的存储有两种：堆内存和栈内存。栈内存：存储基本类型的变量，还有对象的指针，也是存储在栈内存中。堆内存：存储引用类型数据，如Object对象等。使用 const...原创 2020-10-26 14:53:18 · 1145 阅读 · 48 评论 -
JS对象属性设置-《你不知道的JavaScript》
对 myObject.foo = 'bar' 这条赋值语句而言，会有三种情况：1.如果在 prototype 原型链上存在名为 foo 的普通数据访问属性并且没有被标记为只读（writable:true），那就会直接在myObject 中添加一个名为 foo 的新属性，它是 屏蔽属性；2.如果 在prototype 原型链上层存在 foo，但是它被标记为只读（writable: false），那么无法修改已有属性或者在 myObject 上创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误，否则原创 2020-08-27 11:51:47 · 368 阅读 · 0 评论 -
JS中判断this指向问题总结
我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则，可以按照下面的顺序进行判断：1.函数是否在new中调用(new 绑定)？是的话 this 绑定的是新创建的对象。var bar = new foo();2.函数是否通过 call、apply（显示绑定）或者硬绑定调用？如果是的话，this绑定的是指定的对象。var bar = foo.call(obj2);3.函数是否在某个上下文对象中调用(隐式绑定)？如果是的话，this绑定的是那个上下文对象。var bar = o原创 2020-08-21 14:24:11 · 389 阅读 · 0 评论 -
new new Foo().getName()面试题解析
经典面试题 Foo().getName() 解析题目如下，写出输出内容（注释：abcde为步骤标号，便于下边分析定位）解析：1. Foo.getName(); // 2Foo为一个函数对象，对象都可以有属性，题目 b 处定义Foo的getName属性为函数，输出22. getName(); // 4这里看d、e处，d为函数表达式，e为函数声明，两者区别在于变量提升，这两处可以等价于可见函数声明的 5 会被后边函数表达式的 4 覆盖。3. Foo().getName(); // 1这里要看原创 2020-08-12 14:17:06 · 2522 阅读 · 2 评论 -
js将数据转成树形结构
有如下数据，数组中为一条条单个数据，每条数据都有唯一的ID标识，pid表示此条数据的父级 ID，根据pid和id的对应关系，实现一个函数将数据转成树形结构数据。var data = [ {'id':101,'name':'语文','pid': -1}, {'id':102,'name':'语文知识点1','pid': 101}, {'id':103,'name':'语文知识点11','pid': 102}, {'id':104,'name':'语文知识点2','pid': 101},原创 2020-08-11 12:37:38 · 5018 阅读 · 1 评论 -
js实现new关键字
对new关键字的描述：引自MDNnew关键字会做以下操作：1.创建一个空的简单Javascript对象 （即{}）;2.链接带对象（即设置该对象的构造函数）到另一个对象；3.将步骤1新创建的对象作为this的上下文；4.如果该函数没有返回对象，则返回this；function myNew(fn) { // 以构造函数fn的prototype为原型 创建一个新的简单对象 let o = Object.create(fn.prototype) // 改变f.原创 2020-08-04 21:29:48 · 2040 阅读 · 0 评论 -
js实现instanceof+实现原理
instanceof是干什么的？instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。只要遍历实例对象的原型，看看是否跟构造函数的prototype相等，即可实现。function instance_of (obj, Fn) { // 判断传入的构造函数是不是函数类型 if (typeof Fn !== 'function') { throw new TypeError('不是函数'); } ...原创 2020-08-04 21:06:16 · 1507 阅读 · 25 评论 -
js数组全排列（leetcode 46题）
题目链接问题描述：给定一个没有重复数字的序列，返回其所有可能的全排列。示例：输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]]思路：让每一个元素放一次第一位，后边元素排列组合var permute = function(nums) { let res = []; per(nums,0,nums.length-1,res); retur...原创 2020-07-16 13:11:22 · 1401 阅读 · 1 评论 -
剑指 Offer 38. 字符串的排列
问题描述：输入一个字符串，打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组，但里面不能有重复元素。示例：输入：s = "abc"输出：["abc","acb","bac","bca","cab","cba"]var permutation = function(str) { let res = new Set(); // 使用set结构去重存储 let path = []; // 存储路径 let visited = []; // 标记访问原创 2020-07-16 12:55:16 · 184 阅读 · 0 评论 -
js实现Ajax
Ajax是基于 XMLHttpRequest实现的function ajax(options) { let params = { url: '', type: 'get', data: {}, sucess: function(data) {}, error: function(err) {} } options = Object.assign(params,options); if (o原创 2020-07-12 13:25:17 · 306 阅读 · 0 评论 -
typeof和instanceof区别
typeof用于判断js数据类型，返回值为string、number、boolean、undefined、function、object注意，typeof校验数组、对象、null都会返回objectinstanceof 是判断实例是否是构造函数的实例使用方法，obj1 instanceof obj2它的判断根据原型链搜寻，在实例对象obj1的原型链上如果存在另一个对象obj2的原型属性，那么上边表达式返回 true例如：function func() {...原创 2020-07-08 17:16:40 · 248 阅读 · 0 评论 -
a == 1 && a == 2 && a == 3
如果a是一个对象，那在执行a==的时候首先会去先执行valueOf方法，如果没有value方法，就会去执行toString方法。因此我们可以改写a对象的valueOf和toString方法：1. 1.1改写对象的valueOflet a = { valueOf: (function() { let i = 1; // 闭包，i不会被清除 return function() { return i ++;原创 2020-07-06 23:10:48 · 652 阅读 · 0 评论 -
前端面试 页面通信
1.什么是同源策略及限制同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互。（请求协议、域名、端口不同，都算跨域）Cookie、LocalStorage和IndexDB无法读取 DOM无法获得 AJAX请求不能发送2.前后端通信Ajax WebSocket不受同源策略限制 CORS 允许跨域通信3.创建Ajax// 第一步，创建一个XHR对象 IE不支持XMLHttpRequest，所以要做兼容性校验var xhr = XMLHttpRequest.原创 2020-06-09 18:53:53 · 292 阅读 · 0 评论 -
JS面向对象 继承的几种方式
1. 借助构造函数实现继承function Parent1() { this.name = 'Parent1';}Parent1.prototype.say = function() { console.log('你好');}function Child1() { Parent1.call(this); // ！！！关键点 apply也可以 this.type = 'child1';}let s1 = new Child1();console.lo原创 2020-06-09 16:13:48 · 412 阅读 · 0 评论 -
前端面试 DOM事件
1.事件级别DEMO0 element.onclick=function() {};DEMO1 element.addEventListener('click', function(){},false)DEMO2 element.addEventListener('keyup', function(){},false)2.事件模型事件捕获（自上向下），时间冒泡（自下向上）事件流：事件捕获 -> 目标阶段 -> 事件冒泡描述事件捕获的具体流程wind...原创 2020-06-08 23:50:48 · 296 阅读 · 0 评论 -
前端跨域三种解决方式（CORS、JSONP、代理跨域）
什么是跨域？跨域是浏览器为了安全而作出的限制策略（所以服务端不涉及到跨域）； 浏览器请求必须遵循同源策略，即同域名、同端口、同协议；例如：http://www.abc.com到http://www.def.com的请求会出现跨域（域名不同） http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域（端口不同） http://www.abc.com到https://www.abc.com的请求会出现跨域（协议不同）解决方法：1. ..原创 2020-05-12 11:59:18 · 21640 阅读 · 1 评论 -
前端面试cookie localStorage和sessionStorage区别
区别：存储大小：Cookie 是4K大小，Storage是5M； 有效期：Cookie可以设置有效期；loocalStorage永久存储，除非手动清除；sessionStorage是会话缓存，关闭浏览器就会清除； Cookie会发送到服务器端，存储在内存中，Storage只存储在浏览器端； 路径：Cookie有路径限制（即 www.baidu.com/a.html下的缓存，在www.ba...原创 2020-05-08 10:15:55 · 348 阅读 · 0 评论 -
节流防抖原理及简单实现
最直观的是百度的搜索框，肯定不是输入一个字母就立即查询，而是等你输完一小段时间才会发起请求。防抖：基本思路：定义一个定时器，假设延时1000ms，如果你正在输入内容，定时器不断刷新，不断延时1000ms，不触发请求，当停止输入时，定时器生效，发送请求Html：<input type="text" id="input1" />JS如下// 定义防抖函数f...原创 2020-04-29 18:05:55 · 913 阅读 · 0 评论 -
JS获取时间戳的几种方式
JS获取时间戳（精确到秒/毫秒）的几种方式Date.parse(new Date())如上图，精确到秒（毫秒位均为0，可通过字符串截取截掉）2. 精确到毫秒Date.now()Date.now()(new Date()).getTime()(new Date()).getTime()(new Date()).valueOf()(new Date()).valueOf()...原创 2019-11-21 16:25:15 · 1790 阅读 · 0 评论