js常用操作
文章平均质量分 58
小小飞肖
no pain,no gain
展开
-
async await 捕获promise reject error
function fn() { return new Promise((resolve,reject)=>{ // 抛出错误 reject('throw error') })}async function getres() { try { console.log('first') let res = await fn() // 捕获错误,遇到错误,中断下面输出语句的执行,直接走catch执行 .原创 2021-01-27 16:22:22 · 1886 阅读 · 1 评论 -
js函数声明提升优先级与变量声明提升优先级的关系
js中函数声明先提升还是变量先提升根据官方书籍《你不知道的javascript》(上卷)中写道:“函数会首先被提升,然后才是变量”。例子:console.log(foo);function foo(){ console.log("函数声明");}var foo = "变量";输出为:function foo(){ console.log("函数...原创 2019-08-11 18:15:19 · 2770 阅读 · 0 评论 -
JS中onclick与addEventListener绑定事件的区别
onclick()这种写法是DOM0级规范的写法,是所有的浏览器支持的,但是这种写法有不能同时绑定多个事件、使代码耦合在了一起的弊端。但是addEventListener() 是DOM2标准中定义的方法,它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。既然这个是DOM2标准中定义的,那么只有支持DOM2级事件处理程序的浏览器才支持这个方法(IE9,Firefox,Safari,Chro...原创 2019-08-20 16:51:22 · 413 阅读 · 0 评论 -
js 执行环境及作用域
执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访...原创 2019-08-17 09:34:55 · 78 阅读 · 0 评论 -
js 闭包应用场景
闭包就是返回的那个匿名函数,一直引用着外层函数的某个变量,导致那个变量无法销毁,闭包就可以一直调用,外层函数的活动对象已经销毁,但是闭包的活动对象并没有销毁应用场景一.页面有很多li元素,点击每一个li获取到该li标签的索引index。如下代码并不能获取到点击的li的索引使用闭包可以实现该需求应用场景二.延迟函数中的回调应用场景三应用...原创 2019-08-17 22:46:37 · 346 阅读 · 0 评论 -
js垃圾回收机制
垃圾回收对于开发者来说,JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当某个东西我们不再需要时会发生什么?JavaScript 引擎如何发现它、清理它?可达性JavaScript 中主要的内存管理概念是可达性。简而言之,『可达』值是那些以某种方式可访问或可用的值。它们保证存储在内存中。 这里列出固有的可达值基本集合,...原创 2019-08-18 10:49:50 · 82 阅读 · 0 评论 -
详细介绍js深拷贝与浅拷贝以及如何实现深拷贝
深拷贝与浅拷贝的区别假如复制A得到了B,如果B中的某个属性发生改变,与此同时如果A中的值也发生改变,叫浅拷贝;如果A中的值未发生任何变化,叫做深拷贝;为什么会发生如此变化主要是因为数据类型的原因js的数据类型只要分为两大类 基本数据类型(string,number,null,undefined,boolean)与引用类型(object)深拷贝代码如下...原创 2019-06-17 17:52:54 · 607 阅读 · 0 评论 -
js 10进制转换成64进制
var line = '666666'var count = 0var obj = {}var result = []for (var i = 0; i < line.length; i++) {if (obj[line[i]] !== undefined) {obj[line[i]]++} else {obj[line[i]] = 1}}for (var key i...原创 2019-09-01 17:40:07 · 1816 阅读 · 0 评论 -
echarts做数据统计,统计每月占总年份的比例,给的数组对象是具体的某年某月某天的人数
let arr = [ {year:2018,month:8,day:2,n_birth:6}, {year:2018,month:8,day:3,n_birth:6}, {year:2018,month:8,day:5,n_birth:6}, {year:2018,month:7,day:2,n_birth:6},...原创 2019-09-06 15:40:36 · 872 阅读 · 0 评论 -
li标签绑定事件比如有1000个li标签需要点击,显示对应li标签的内容,有什么高效的方法
关于在前端面试中,经常会被技术人员问道在ul标签中有一组li标签,你如何点击每个li并显示相应的内容,最初我的想法是用for循环给每个li添加click事件,然而产生了闭包的效果,为了解决这个问题,我又对代码进行了下面的更改。<ul><li>1</li><li>2</li><li>3</li>...原创 2019-09-11 13:52:41 · 1719 阅读 · 2 评论 -
同一个盒子,同时绑定事件冒泡与事件捕获两个事件
当同一个容器绑定两个事件,遵循先捕获,后冒泡 ,有一个前提是点击的事件先执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...原创 2019-09-23 10:35:08 · 670 阅读 · 0 评论 -
闭包让一个函数只能执行一次以及用闭包实现函数累加
一个函数只执行一次function countAdd(fn){ let result; return function(){ if(fn){ result = fn.call(this,arguments) fn = null } return result } }var countPrintOne = countAdd(...原创 2019-09-25 17:56:02 · 749 阅读 · 0 评论 -
前端 Web Workers 到底是什么?
以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API,我们一起来看一看 Web Worker 是什么,怎么去使用它,在实际生产中如何去用它来进行产出。1. 概述Web Workers...原创 2019-09-30 14:52:04 · 297 阅读 · 0 评论 -
Vue-封装-$on $emit $off(封装事件订阅)
vue封装 $on、$emit、$off1.$on 事件的订阅 1 2 3 4 5 6 7 8 9 10 11 $on(eventName,callback) 参数1:事件名称 参数2:事件函数 判断当前事件名称是否存在,如果不存在则创建一个key值为事件名称 v...原创 2019-09-30 20:59:47 · 429 阅读 · 0 评论 -
js封装map
js封装map/** **/function Map() { this.elements = new Array(); this.size = function() { return this.elements.length; } this.isEmpty = function() { return (t...原创 2019-10-03 21:12:20 · 717 阅读 · 0 评论 -
js设计模式:什么是单例模式?js单例模式的介绍
什么是单例模式定义:1.只有一个实例。2.可以全局访问主要解决:一个全局使用的类频繁地创建与销毁。js单例模式何时使用:当您想控制实例数目,节省系统资源的时候。如何解决:判断系统是否已经有这个单例,如果有则返回,如果没有则创建。js单例模式优点:1、在内存里只有一个实例,减少了内存的开销,尤其是频繁的创建和销毁实例(比如管理首页页面缓存)。 2、避免对资源的多重占用(比如写文...原创 2019-10-04 10:08:15 · 490 阅读 · 0 评论 -
JS隐式数据类型转换
隐式数据类型转换介绍前面有总结过JS数据类型转换Number(),toString(),parseInt()等都是属于强制转换。有时我们遇到当运算符在运算时,如果两边数据类型不统一,CPU无法计算,这是编译器会自动将运算符两边的数据做一个数据类型转换,转换成一样的数据类型在进行运算,这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。隐式转换规则1.转为number...原创 2019-10-04 14:35:18 · 177 阅读 · 0 评论 -
es6 promise.all封装以及promise.race封装
function promiseAll(promises){ return new Promise(function(resolve,reject){ if(!Array.isArray(promises)){ return reject(new TypeError("argument must be an array")) } ...原创 2019-10-07 09:58:40 · 1212 阅读 · 0 评论 -
js toString与valueOf什么时候会触发调用
var obj = { toString:function(){ console.log('toString') return Object.prototype.toString.call(this) }, valueOf:function(){ console.log('valueOf') return Object.prototyp...原创 2019-08-20 11:01:45 · 2039 阅读 · 0 评论 -
JavaScript AMD 与 CMD 规范
CMD 推崇依赖就近;AMD 推崇依赖前置 CMD 是延迟执行;AMD 是提前执行 CMD性能好,因为只有用户需要的时候才执行;AMD用户体验好,因为没有延迟,依赖模块提前执行了 //CMDdefine(function(require,exports,module){ var a=require('./a') a.doSomethimg() var b=req...原创 2019-08-14 20:37:35 · 285 阅读 · 0 评论 -
js generator 生成器生成迭代器
//生成器generator配合yeild来使用// 生成器生成迭代器每次踢一脚,继续往前走function* fn(){ yield 1; yield 2;}let it= fn();console.log(it.next())console.log(it.next())console.log(it.next())//{ value: 1, done: false ...原创 2019-07-07 17:22:53 · 311 阅读 · 0 评论 -
js map的妙用
原创 2019-07-02 10:05:27 · 1454 阅读 · 0 评论 -
js常用的数组去重方法大全,看了这篇就到了雷着面试官的时候了
// js 数组去重// 基础数据var arr = [1,1,3,3,6,7,9,9]var result = []//方法一:利用es6 Set // result = new Set(arr)// console.log([...result])// 方法二 利用indexOffunction unique(arr){ for(var value of arr){...原创 2019-07-02 14:56:27 · 118 阅读 · 0 评论 -
js对数组对象的值进行去重
// 对对象的值进行去重//方法一var arrObj = [{ name: 'xiaoxiao' }, { name: 'xiaoxiao' }, { name: 'lingling' }, { name: 'zhezhe' }, { name: 'keke' }];var obj = {};function objectUnique(arrObj){ newArrObj = ar...原创 2019-07-02 16:03:59 · 302 阅读 · 0 评论 -
js 防抖(debounce)与节流(throttle)
防抖与节流涉及到两个概念开始边界与结束边界防抖(debounce):(鼠标mousemove)search搜索,用户在不断输入值时,用防抖来节约请求资源;window触发resize的时候;不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来使其只触发一次防止重复提交。节流(throttle)(鼠标mousedown)鼠标监听滚动事件,比如是否滑动到底部或者加载更...原创 2019-07-06 14:47:37 · 315 阅读 · 0 评论 -
js 判断一个对象是否是数组
var arr = [1,2,3,4,5]方法一arr instanceof Array方法二Array.isArray(arr)方法三Object.prototype.toString.call(arr) === "[object Array]"console.log(Object.prototype.toString.call(123)) //[obje...原创 2019-07-07 14:04:10 · 87 阅读 · 0 评论 -
js symbol的作用
Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的symbol注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"。每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符;这是该数据类型仅有的目的。唯一性c...原创 2019-07-24 14:43:35 · 1908 阅读 · 0 评论 -
js parseInt解析
parseInt(string,radix)string为字符串,radix为介于2-36之间的数。使用者告诉这个函数string(比如11)是radix(比如2)进制的,函数将固定返回string以十进制时显示的数(3)参数string要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用 ToString抽象操作)。字符串开头的空白符将会被忽略。radix...原创 2019-07-29 13:58:18 · 261 阅读 · 0 评论 -
js原生实现不同页面之间的数据传递
1.URL传递参数;2.浏览器webstorage进行传递;3.利用cookie 进行传递;原创 2019-07-24 15:41:44 · 1542 阅读 · 0 评论 -
js事件流三个阶段
事件的处理过程主要有三个阶段:捕获阶段,目标阶段,冒泡阶段;捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段(Capture Phase)。事件由页面元素接收,逐级向下,到具体的元素。目标阶段:当事件不断的传递直到目标节点的时候...原创 2019-07-25 08:56:50 · 4330 阅读 · 0 评论 -
js 函数定义方式
一.函数声明a() // 可以打印出666function a(){ console.log(6666)}a() // 打印666函数声明会将函数体整体提升二.函数表达式b() //TypeError: b is not a functionvar b = function(){console.log(999)}b()函数表达式只会将变量...原创 2019-07-23 09:34:36 · 80 阅读 · 0 评论 -
js this指向问题
this一般有几种调用场景var obj = { a: 1, b: function(){ console.log(this); }}1、作为对象调用时,指向该对象 obj.b(); // 指向obj2、作为函数调用, var b = obj.b; b(); // 指向全局win...原创 2019-07-23 14:25:04 · 141 阅读 · 0 评论 -
js 类数组(argumens)转换成数组
类数组定义1.拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解;2.不具有数组所具有的方法shift,unshift,splice,slice,concat,reverse,sort...由于类数组不具有数组所具有的操作数组的方法,将类数组转换为数组之后就能调用如shift,unshift,splice,slice...原创 2019-08-13 13:45:23 · 185 阅读 · 0 评论 -
js继承常用的方式
一.原型链继承function SuperType(){ this.property = true;} SuperType.prototype.getSuperValue = function(){ return this.property}function SubType(){ this.subproperty = false;}// 继承了SuperType...原创 2019-08-14 11:25:30 · 110 阅读 · 0 评论 -
ES6的模块化规范和CommonJS的模块化规范的差异
ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成:export 和 import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。/** 定义模块 math.js **/var n = 1;function add(){ return 2+3}e...原创 2019-08-19 20:56:25 · 847 阅读 · 0 评论 -
箭头函数
箭头函数内部的this总是指向定义时所在的对象基本用法ES6 允许使用“箭头”(=>)定义函数。 var f = v => v;上面的箭头函数等同于: var f = function (v) { return v; }如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 var f = ...原创 2019-08-14 20:08:52 · 106 阅读 · 0 评论 -
js 各循环的区别
for in是ES5标准,遍历key.for of是ES6标准,遍历value. 2019拼多多提前批秋招就考了这两者区别 for...in循环会遍历一个object所有的可枚举属性。 for...of会遍历具有iterator接口的数据结构原生具备 Iterator 接口的数据结构如下。Array Map Set String TypedArray 函数的 ar...原创 2019-06-17 21:05:42 · 515 阅读 · 0 评论