![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 69
若~~~
爱自己才是终身浪漫的开始。❤️
展开
-
Promise.all和Promise.race的区别
const f1 = new Promise(function (resolve, reject) { resolve('佳佳') }) const f2 = new Promise(function (resolve, reject) { reject('要') }) const f3 = new Promise(function (resolve, reject) { ...原创 2020-08-19 21:30:34 · 633 阅读 · 0 评论 -
判断数据类型的方法
1: typeof平时我们需要判断数据类型的时候,可能第一个想到的方法就是typeof,但是,我们都知道,是有点小缺陷的typeof null返回类型错误,返回object引用类型,除了function返回function类型外,其他均返回object。其中,null 有属于自己的数据类型 Null , 引用类型中的 数组、日期、正则 也都有属于自己的具体类型,而 typeof 对于这些类型的处理,只返回了处于其原型链最顶端的 Object 类型,没有错,但不是我们想要的结果。2:toStrin原创 2020-08-10 23:06:03 · 711 阅读 · 0 评论 -
在 ES5 中判断函数如何被调用
在 ES5 中判断函数是不是使用了 new 来调用(即作为构造器),最流行的方式是使用 instanceof ,例如: function Person(name) { if (this instanceof Person) { this.name = name; // 使用 new } else { throw new Error("You must use new with Person原创 2020-08-08 17:14:08 · 462 阅读 · 0 评论 -
一张图搞明白js中的new()到底做了什么
原创 2020-08-07 21:54:31 · 213 阅读 · 0 评论 -
彻底搞明白JS中的prototype、__proto__与constructor的关系
原创 2020-08-07 22:32:56 · 154 阅读 · 0 评论 -
JavaScript 判断 html 元素是否包含某个类名 class(3种方式)
第一种方法(HTML5中的classList API)如果不考虑兼容IE10以下的话,可以用HTML5中的classList API,非常方便:var node = document.getElementById('element');if(node.classList.contains('test')){ console.log('包含 test 这个class');}第二个...原创 2020-03-11 10:54:27 · 28445 阅读 · 0 评论 -
带你彻底了解闭包以及其原理
闭包一直是许多初学者的难题,网上对闭包的讲解也是众说纷纭,但还是许多人不能明白。下面我通过五个简单例子,让你明白闭包原理。第一个例子<script> var i = 0; document.onclick = addNumber; function addNumber(){ i++; document.tit...转载 2019-12-20 17:21:24 · 1261 阅读 · 0 评论 -
控制台Console统计淘宝页面使用了多少html标签,以及出现最多的标签是什么?出现多少次?
new Set( [...document.querySelectorAll('*')].map(v=>v.tagName))执行效果如下:查看到当前页面一共使用了33种标签; Object.entries([...document.querySelectorAll('*')].map(v=>v.tagName).reduce((a,b)=>{ a[b]...原创 2019-10-14 15:09:54 · 683 阅读 · 1 评论 -
正则格式化数据方法 对输入的内容小数位超出截取 不超出不作处理,开头为小数点,自动补
//传入要格式化的数据,和小数点后保留的个数即可 function limitNumByCur = (numString, cur) { numString = String(numString) numString = scientificToString(numString) let nums = numString.split('.') let flo...原创 2019-08-13 14:09:43 · 292 阅读 · 0 评论 -
Git的不同环境下安装方法
前言最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑。不过,慢慢地有人把它移植到了Windows上。现在,Git可以在Linux、Unix、Mac和Windows这几大平台上正常运行了。要使用Git,第一步当然是安装Git了。根据你当前使用的平台来阅读下面的文字:在Linux上安装Git首先,你可以试着输入git,看看系统有没有安装Git:$ ...转载 2019-08-08 15:00:36 · 118 阅读 · 0 评论 -
JS常用的三种继承方式
一、原型继承 // 父类 function Persion(name,age){ this.name = name; this.age = age; } // 父类的原型对象属性 Persion.prototype.id = 110; // 子类 f...原创 2019-06-23 21:24:48 · 643 阅读 · 0 评论 -
JS科学计数法转数字-----最简单的方法
function getFullNum(num){//处理非数字if(isNaN(num)){return num};//处理不需要转换的数字var str = ‘’+num;if(!/e/i.test(str)){return num;};return (num).toFixed(18).replace(/.?0+$/, “”);}...原创 2019-09-11 18:08:14 · 5245 阅读 · 0 评论 -
数组常用的方法和ES6新增的数组方法
1、push 在数组末尾添加一个或多个元素,并返回数组的长度, 可以添加任意类型的值作为数组的一个元素。语法:arr.push(newelement1,newelement2,....,newelementX)示例代码:var arr = [1,2];arr.push(6); // arr:[1,2,6];返回值为3arr.push('aa'); ...原创 2019-06-22 21:21:52 · 4499 阅读 · 1 评论 -
关于浏览器的缓存(强缓存和协商缓存的详解)
浏览器的缓存分为强缓存和协商缓存,当客户端请求某个资源的时候,获取缓存的流程如下(1)先根据这个资源的http header判断它是否命中强缓存,如果命中,则直接从本地缓存中获取资源,不会则向服务器请求 资源。(2)当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些request header验证这个资源是否命中协商缓存,这个过程成为http再验证,如果命中,服务器直接返回...原创 2019-06-17 21:49:20 · 3708 阅读 · 0 评论 -
理解Cookie和Session的区别及使用
HTTP是一种无状态的协议,为了分辨链接是谁发起的,需自己去解决这个问题。不然有些情况下即使是同一个网站每打开一个页面也都要登录一下。而Session和Cookie就是为解决这个问题而提出来的两个机制。应用场景登录网站,今输入用户名密码登录了,第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是cookie。session一个场景是购物车,添加了商品之后客户端处可以知道添加了哪些...转载 2019-06-17 21:46:20 · 604 阅读 · 0 评论 -
常见兼容问题
常见兼容问题如何处理兼容问题在Can I Use网站查询兼容情况在JS代码里使用对象检测,判断该特性是否支持 eg:‘XMLHttpRequest’ in window‘WebkitMask’ in document.documentElement.style使用postcss做样式的后处理样式问题清除浏览器默认样式引入common.css或reset.css重置默认样...原创 2019-06-13 09:32:28 · 139 阅读 · 0 评论 -
Promise
Promise/Aysnc1、es6定义变量varletimportclassfunctionconst2、Promise是异步编程的一种解决方案是一个对象缺点无法取消Promise.all() 会包装多个实例成为一个新的promise实例new Promise((resolve.reject) =>{ // do some async f...原创 2019-06-11 19:41:38 · 123 阅读 · 1 评论 -
正则格式化数据方法之----小数位超出截取 不足精度补0
//只需传入要格式化的数据和小数点后面保留个数function foramtNumByCur(numString, cur) { numString = String(numString) numString = scientificToString(numString) let nums = numString.split('.') if (cur === 0)...原创 2019-08-13 14:11:13 · 1182 阅读 · 0 评论 -
Input输入过的内容,当input再次聚焦的时候,显示之前输入的内容,如何隐藏
<input autocomplete="off" />加这个熟悉即可原创 2019-08-09 17:56:37 · 1968 阅读 · 0 评论 -
数组去重最简单方法
// 方法一:var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];for(var i = 0,len = arr1.length; i< len; i++){ if(arr2.indexOf(arr1[i]) < 0){ arr2.push(arr1[i]); }}document.write(arr2)...原创 2019-05-27 21:04:58 · 758 阅读 · 0 评论 -
浅拷贝与深拷贝的区别和实现方法
一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。基本数据类型的特点:直接存储在栈(stack)中的数据引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址...原创 2019-09-27 10:26:51 · 2059 阅读 · 0 评论 -
js数字限制总数据长度(若包含小数点)超过指定数量截取小数点面的,若不超出不处理(不进行四舍五入)
function cutXiaoNum(num,len) { let numStr = num.toString(); const flag=numStr.includes('.') let newNum if(flag){ newNum = numStr.substring(0, le...原创 2019-09-24 21:31:23 · 873 阅读 · 0 评论 -
20 个好用的 Web API
01、方法列表querySelector(元素向下查询,返回一个)querySelectorAll(元素向下查询,返回多个)closest(元素向上查询)dataset(获取元素以"data-"为前缀的属性集合)URLSearchParams(查询参数)hidden(隐藏元素)contenteditable(使元素可以被编辑)spellCheck(检...转载 2019-09-19 14:53:53 · 839 阅读 · 0 评论 -
Meta标签中 http-equiv属性详解
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。引用meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参数1、...转载 2019-09-17 11:53:20 · 593 阅读 · 0 评论 -
面向对象的四大特点
面向对象有四个特点:1. 抽象:抓住核心问题2. 封装:即把能够实现功能的函数写成封装起来,在面向对象里叫做方法。简单来说就是把实现功能的函数写成方法。3. 继承:继承的意思是,在实现同一种功能的前提下,新对象可以使用就对象的属性和方法。4. 多态:一个变量在引用不同类型的情况下的不同状态。多态开发在开发组件和模块化开发的时候能节省很多资源。...转载 2019-08-17 11:28:49 · 3000 阅读 · 0 评论 -
利用 Math.random() 实现通过随机数产生随机的颜色,一秒钟切换一个颜色最简单的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机产生颜色</title> <style> div { width: 200px; height: 200px; borde...原创 2019-08-22 10:19:15 · 1677 阅读 · 0 评论 -
获取当前日期,若月份和天不足两位时前面补0
// 获取当前日期nowTime () { const time = new Date() console.log (time) // Fri Aug 10 2018 21:28:59 GMT+0800 (中国标准时间)}// 日期格式化 const newTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '...原创 2019-08-22 10:06:37 · 7570 阅读 · 0 评论 -
Es6扩展方法
ES6扩展方法说明Number.isFinite()判断一个值是不是有限的Number.isNan()判断一个值是不是NaNNumber()类型转换Numbar.parseInt()将字符串转化为整数Numbar.parseFloat()将字符串转化为小数Numbar.isInteger()判断一个数是不是一个整数Number....原创 2019-06-11 19:41:03 · 368 阅读 · 1 评论 -
Es6常用知识点
ES61、声明变量// es5声明变量 var --- variable用大写的形式去声明常量:var PI = 3.14159255358;常量的值允许被修改// es6// 通过let 关键字代替 var 来声明变量,用发与var几乎一致当let/const遇到{}会形成这个变量的块级作用域声明变量 let --- 叫命令或关键字声明常量 const PI = 3.141...原创 2019-06-11 19:37:57 · 288 阅读 · 0 评论 -
Async/Await的优势与缺憾[译]
这可能会存在一些争议,据我所知 async/await 这个特性受到很多开发者的青睐。对于不熟悉的同学,简单讲,其实它就是一种让开发者处理 Promise 更漂亮点儿的原生语法。async/await 写法:async function doSomethingCool() { let someValue = await getSomePromise(); console.log(som...转载 2019-05-31 14:26:40 · 1265 阅读 · 0 评论 -
原型和原型链的关系,以及什么是原型和原型链
一、原型①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它构造函数的prototype二、原型链当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的proto...原创 2019-05-28 08:49:19 · 7357 阅读 · 1 评论 -
使用js 实现鼠标拖拽会用到哪些事件
拖拽会用到哪些事件dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.dragleave:拖拽时鼠标移出目标元素时在目标元素上触...原创 2019-05-27 21:09:34 · 3411 阅读 · 0 评论 -
面试常问问题:一次完整的HTTP事务是怎样的一个过程?
基本流程:a. 域名解析b. 发起TCP的3次握手c. 建立TCP连接后发起http请求d. 服务器端响应http请求,浏览器得到html代码e. 浏览器解析html代码,并请求html代码中的资源f. 浏览器对页面进行渲染呈现给用户...原创 2019-05-27 21:07:46 · 245 阅读 · 0 评论 -
清除字符串前后的空格。(兼容所有浏览器)
function trim(str) { if (str && typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符 }}原创 2019-05-27 21:06:59 · 6044 阅读 · 0 评论 -
统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数
var str = "aaaabbbccccddfgh";var obj = {};for(var i=0;i<str.length;i++){ var v = str.charAt(i); if(obj[v] && obj[v].value == v){ obj[v].count = ++ obj[v].count; }else...原创 2019-05-27 21:06:02 · 1830 阅读 · 0 评论 -
JS中attribute和property的区别
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。1.property是DOM中的属性,是JavaScript里的对象;2.attribute是HTML标签上的特性,它的值只能够是字符串;attribute和property介绍简单理解,Attribute就...转载 2019-05-30 11:51:06 · 128 阅读 · 0 评论 -
JavaScript函数节流和函数防抖之间的区别
一、概念解释函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片。由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的。反而形成一种视觉效果,就是一张图。就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样。 同理,可以类推到js代码。在一定时间内,代码执行的次数不一定要非常多。...原创 2019-05-23 09:46:57 · 1055 阅读 · 0 评论 -
cookie 和session 的区别和详解
cookie 和session 的区别详解当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来。当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie里的内容来判断使用者,送出特定的网页内容给你。 Cookie 的使用很普遍,许多有提供个人化服务的网站...转载 2019-05-20 08:20:18 · 96 阅读 · 0 评论 -
Generator函数的理解和使用
Generator函数的理解和使用Generator 函数是 ES6 提供的一种异步编程解决方案。一、异步编程1、所谓“异步”,简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。2、异步编程方式:(1)回调函数(2)事件监听(3)发布/订阅者(4)Promise对象3、所谓回调函数,就是把第二段单独写在一个函数里面,等到重新执行这个...转载 2019-05-09 14:57:56 · 110 阅读 · 0 评论 -
上传本地图片
<input type="file"></div><script> var ipt=document.getElementsByTagName('input')[0];//先获取标签 ipt.onchange=function(e){ var file=this.files[0];//获取文件信息 v...原创 2019-04-26 18:35:55 · 140 阅读 · 0 评论