![](https://img-blog.csdnimg.cn/20191016205732772.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js
文章平均质量分 51
JS基础知识及相关技巧
Garrettzxd
没有那么多可以说的
展开
-
JS局部变量改变全局变量
按钮1 按钮2 按钮3 这里是三个按钮,点击按钮1会做一些事,再次点击又会做另外一些事(比如打开关闭)由于在同一个按钮上绑定时间,这个时候就需要有个标志,用于判断当前状态(是开还是关?)代码可以这么写:$(document).ready(function(){ var state1 = 1, state2 = 1, state3 = 1; $(".原创 2016-08-10 09:41:40 · 8983 阅读 · 0 评论 -
JS实现集合类
集合是基本的数学知识,在程序应用中也十分的常见,但是通过js实现集合在网上查了下并不是很多,有些也是使用比较传统的方法实现,当然不是说传统的方法有什么缺点,传统方法兼容性更好我发现在ES6中天然适合做集合的Set类,由于Set具有元素唯一性,这个特性也正是集合的最基本特性之一,因此能够用简洁的代码实现类的抽象类常见的运算有查找、增加、删除、合集、并集、差集、子集等等操作,通过Set十分方...原创 2018-07-27 21:34:50 · 669 阅读 · 0 评论 -
vue过滤器filters
在vue中有个类似实例组件中computed的资源选项,那便是过滤器filters,为什么说类似呢,因为他们都可以对已有的数据进行加工再返回加工后的数据,但是两者又有着明显的区别,下面先阐述什么是vue过滤器1.用途:常在v-bind与{{}}里使用2.本质:是声明的函数,最终返回结果3.声明:可在实组件例局部声明也可在全局声明 使用方法如下声明过滤器<temp...原创 2018-08-06 22:18:42 · 422 阅读 · 0 评论 -
Promise回调执行顺序
ES6中的Promise十分的好用,可以在一定程度上有效的避免回调嵌套的尴尬境地,但是promise.prototype.then调用顺序却容易被忽视then()的执行顺序是在主要操作执行完成后再执行,即使代码顺序写在then()后面,也是先执行后再执行then()里面的回调console.log('before promise');function test() { return ...原创 2018-08-02 21:23:37 · 1674 阅读 · 0 评论 -
js深复制
JS深复制在业务场景中十分的常用,为什么要深复制,这涉及到JS的数据类型的问题JavaScript分为两种数据类型引用数据类型和非引用数据类型,引用数据类型常见的有object、array、null等,而string、number、Boolean、undefined等属于非引用数据类型,两者的差别之一是引用数据类型指向堆内存,非引用指向栈内存,明显的区别是在赋值的时候let a = 1;...原创 2018-08-12 10:59:10 · 1155 阅读 · 0 评论 -
JS实现链表类
最近在学习基础的数据机构,之前学校学的都差不多忘记了,现在都温故下并尝试着用JS来实现基本的数据结构类,有些地方可能有些不合理的地方链表不熟悉的可以自行温故链表的基础知识,就特性啦可以对链表哪些操作啦等等,首先链表是以节点为单位的,一个节点包含值和指向下一个节点的指针,因此需要一个节点类Node.jsexport default class Node { constructo...原创 2018-08-15 21:23:24 · 1345 阅读 · 0 评论 -
js函数节流
场景需求:有些事件监听触发的次数太过频繁,比如scroll、resize等事件,一秒内可触发数十上百次,实际上如此频繁的事件触发是没有必要的,因为对用户来说一秒内可能100次与5次没有任何感官上的差别,因此需要对时间节流,限制事件触发的次数,能够在一定程度上优化页面,尤其是在事件中触发DOM更新的操作话不多说上代码//节流函数function throttle(callback, wa...原创 2018-08-28 21:08:15 · 231 阅读 · 0 评论 -
js实现简易二叉树
树是数据结构基本的知识点,树里面有比较特殊的二叉树,这里就不详细讲解树的概念了,只是用js实现简易的二叉树1.新增节点2.移除节点3.节点最大/最小值4.中序遍历5.先序遍历6.后序遍历7.查找是否存在指定节点8.是否为空树话不多说,上代码,首先是树的基本单元节点类 /***left:左子树*right:右子树*value:节点值*/ex...原创 2018-08-21 21:38:42 · 4102 阅读 · 0 评论 -
js异或运算符^小技巧
这个运算符主要是在位运算的时候使用,但是在普通的数也能使用,且有一个转换过程,即将二进制的数转换为十进制var a = 1 ^ 2;//3//1 -> 01//2 -> 10//1 ^ 2 -> 11 -> 3如上所示,在十进制进行异或运算符操作时也是OK的,结果显示也是十进制的结果,示例中的转换过程只是我假象的转换过程,只是便于理解,假设由十进制到二进制...原创 2018-09-04 21:42:28 · 33303 阅读 · 5 评论 -
ES6 async await原则探索
ES6中新增异步函数,即在函数声明前加上async即可,使得异步操作更加方便简洁,其中await是在async函数中独有的在执行过程中一旦遇到await就会先返回,等到异步操作完成之后再接着执行函数后面的语句,这句话是什么意思呢一旦遇到await就立刻让出线程,阻塞后面的代码 如果不是promise,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完毕后再回到...原创 2019-02-15 21:27:38 · 337 阅读 · 0 评论 -
旋转矩阵
给定一个 n × n 的二维矩,将图像顺时针旋转90度,且必须原地旋转,即不能借助其他矩阵来完成旋转操作,示例如下matrix = [ [1,2,3], [4,5,6], [7,8,9]]//原地旋转输入矩阵,使其变为:matrix = [ [7,4,1], [8,5,2], [9,6,3]]1 2 3 4 5 6 7 ...原创 2019-02-21 21:10:14 · 1146 阅读 · 0 评论 -
整型大数相加(JS字符串)
由于语言本身的限制或者是机器本身的限制,整型数字通常都是有大小限制的,超过大小的数字没有办法正常计算比如在js里有安全整数的概念Number.MAX_SAFE_INTEGER与Number.MIN_SAFE_INTEGE分别是最大与最小安全整数但是很多情况下有大数相加需求的,这时通常采用字符串或者数组的方式来进行加法操作,按照四则运算的规则来计算结果如下:/** * [bigN...原创 2019-02-11 21:06:31 · 728 阅读 · 0 评论 -
JS事件循环优先级
由于JS是单线程的,但是JS又又异步处理概念,那么是怎么处理这个异步的东西的呢,这个时候就有了事件循环的概念在JS里事件循环是很重要的概念,代码的执行栈都是以事件循环为标准的具体的事件循环概念这里就不详细解释描述,主要讲述事件循环中的执行优先级问题,这里涉及到到概念还有宏任务、微任务等很多面试都遇到这段代码输出的顺序是什么这样的问题,下面就是这么一个简单的问题function tes...原创 2019-02-18 21:41:20 · 1158 阅读 · 0 评论 -
若干字符串公共前缀
有若干字符串,找出若干字符中最大相同的子串,例子如下:['flow', 'flew', 'fly'] => 'fl'此时上面字符串最大相同的子串就是'fl',示例代码如下/** * [longestCommonPrefix] * @param {string[]} strs * @return {string} */var longestCommonPrefix = ...原创 2019-02-13 21:07:55 · 737 阅读 · 0 评论 -
有效的数独
有9x9数量不变数独用二维数组表示,检查数独是否满足以下条件:数字1-9每行只能出现一次 数字1-9每列只能出现一次 数字1-9每3x3的框内只能出现一次数独空白部分用‘.’填充,列子如下var a = [ ["5","3",".",".","7",".",".",".","."], ["6&qu原创 2019-02-20 22:24:32 · 294 阅读 · 0 评论 -
有关setTimeout的输出
今天无意间看到有关setTimeout()的各种输出结果,常见如下//for在全局环境为前提for(var i = 0; i < 5; i++){ setTimeout(function(){ console.log(i); },1000);}//输出5个5以上代码输出5个5,而不是0,1,2,3,4;这是为什么呢,网上一大堆解释,但是很多都是一样的,我并不认同,网上...原创 2018-07-30 21:21:14 · 1108 阅读 · 0 评论 -
vue高级组件之provide / inject
在vue中不同组件通信方式如下1.父子组件,通过prop2.非父子组件,通过vuex或根vue转载器 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信1.下面是a.vue<template> <div class="test"> <son prop="data"></son> </原创 2018-08-04 09:30:06 · 35197 阅读 · 9 评论 -
其他标签浮动在object标签之上
很多时候都会用到标签这个标签用来盛放例如视频、flash、地图 等一些多媒体控件但是有一个问题就是本身优先级非常高,换句话说就是它总是浮在最上层,其他元素无法覆盖该元素即使设定z-index也还是不行的如果有元素浮动在上的需求,用标签是可行的比如爱奇艺视频就是如此操作只有使用或标签才能使相关内容浮动到标签之上但是这并不是完美的1.在IE9上面会出现标签时隐时现的情况原创 2016-08-11 17:04:29 · 1126 阅读 · 0 评论 -
Vue获取分发内容的宽度
Vue在需要获取分发内容的宽度(内容不换行的情况下)子组件有默认的内容(即在父组件没有分发内容时也会有内容)例: 这里是子组件默认内容 父组件分发到子组件的内容直接在子组件mounted函数中获取时获取不到detial正确的值:document.getElementById("detial").offsetWidth此时的offsetWidth为父组件分发原创 2017-11-15 21:43:17 · 2598 阅读 · 0 评论 -
Vue子组件状态更新
背景:在一个页面多次重复的使用同一个子组件(比如在列表里根据数据不同重复渲染该子组件)时,由于数据的改变子组件状态未能得到及时的更新例子如下:数据以表格的形式显示出来,循环的渲染若干行表格,七中有一列是引入子组件如下所示 子组件如下:export default{ props: ['name'], data() {原创 2017-12-11 20:53:06 · 12570 阅读 · 0 评论 -
前端懒加载(简易版)
懒加载 前端优化 图片加载原创 2017-12-14 21:50:32 · 763 阅读 · 1 评论 -
ES6 Object.assgin()详解
关于assgin()基本的这里就不讲解了,详细请参考阮一峰老师的ES6教程Object.assgin()文档大致是合并对象所用,但是合并有一下几点需要注意1.只有一个参数时返回原对象本身具体请参考如下代码let source = {a:1}; //原对象let target = {}; //目标对象target = Object.assgin(source); //只有...原创 2018-06-21 21:40:30 · 2093 阅读 · 0 评论 -
字符串拼接性能比较
话不多说直接上代码看一下拼接方法差异let arr = [];//数组有若干字符串for(let i=0;i<100000;i++){ arr.push(i+'A');}//性能计算原理//主要看同样遍历次数下时间消耗对比function add1(){ let str = null; let start_time = new Date().getTime(); for...原创 2018-06-14 21:13:57 · 776 阅读 · 0 评论 -
JS基本数据类型判断方法
通常来讲js有七种基本数据类型但是ES6又新增一种基本数据类型Symbol数据类型那么常见数据类型的判断使用typeof来判断以下是typeof判断数据类型结果表typeof操作表值操作结果说明123typeofnumber正常显示'str'typeofstring正常显示truetypeofboolean正常显示nulltypeofobject作为对象的引用undefinedtypeofunde...原创 2018-06-22 22:19:56 · 330 阅读 · 0 评论 -
JS遍历性能比较(for与for...in以及for...of)
话不多说,上代码及展示结果,let arr = new Array();for(let i = 0, len = 1000000;i < len; i++){ arr.push(i);}function foradd(my_arr){ let sum = 0; for(let i = 0; i < my_arr.length; i++){ sum += my_a...原创 2018-06-08 22:47:34 · 5907 阅读 · 0 评论 -
vue-router传参
vue-router可以在切换时携带参数从A页面到B页面由此可以实现两个页面之间的通信,vue-router目前可用路由方式如下1.普通路由,没有携带任何参数const router = new VueRouter({ routes: [ { path: '/', component: Hello }, ]})2.动态匹配路由const router = new VueRoute...原创 2018-06-29 21:15:28 · 275 阅读 · 0 评论 -
JS对象遍历
话不多说此篇阐述js对象遍历的常见方法以及遍历规则1.常见遍历方法 方法 说明 结果 for...in 常规遍历得到key值,遍历自身及继承的可枚举属性 String Object.keys(obj); 遍历返回由key组成的数组,自身可枚举属性键名 [key1,key2,...] Object.values(obj); 遍历返回由...原创 2018-06-25 21:54:57 · 381 阅读 · 0 评论 -
ES6学习---map数据结构
在传统JS操作对象是,通常只能用字符串来作为对象的键,在一定程度上是有限制的,在新的标准中,使用map数据结构可以放宽对象键的类型,理论上对象的键可以是任何类型,下面详细说明下map数据结构 。1.map的申明const map = new Map();//或const map = new Map([ ['name', 'smith'], ['age', 20]]);以上可...翻译 2018-07-16 21:30:12 · 241 阅读 · 0 评论 -
vue-router导航守卫
导航守卫这个名字听起来略微有点中二(手动滑稽)回归正题,导航守卫大体上分为以下三类:1.全局守卫钩子2.独享守卫钩子3.路由组件守卫钩子下面详细说明以上三种守卫钩子包含的方法及调用时序1.全局守卫钩子全局守卫顾名思义是在路由全局执行,即在路由切换时无差别的执行钩子(如果声明的话)全局守卫钩子函数有三种const router = new VueRouter({...});//全局前置守卫rou...原创 2018-07-03 22:37:48 · 848 阅读 · 0 评论 -
JS数组遍历
数组在JS中是十分常用的引用对象,数组占用着一整块的内存空间,数组的成员也是按照数组写入的顺序存入,遍历也自然是按照存入的顺序来遍历,一下罗列出常见的可以称之为对数组数组遍历的方法1.every检查数组每一项是否符合特定条件,都满足要求才返回true,否则返回falsevar arr = [1,2,3];arr.every((val,index,arr) => { ret...原创 2018-07-24 22:17:42 · 456 阅读 · 0 评论 -
JS与或运算
说来惭愧,JS基本的与或运算都没掌握完全,下面说一下与或运算的结果1.与运算(&&)与运算有可能返回五种结果,true、false、null、NaN、undefined运算规则如下1.与运算所有项为true情况下,返回最后一个值,注意是值,并不是truelet a = 11;let b = 'www';let c = false;let d = true...原创 2018-07-25 21:27:00 · 8358 阅读 · 3 评论 -
ES6箭头函数this指向
箭头函数是简化的回调函数,能够在一定程度上简化代码let num = [1,2,3];num.map(function(item) { return item * item;});num.map(item => item * item);以上两种写法结果是一样的,但是并不能说以上两种是完全等价的,其中之一便是两者的this指向问题箭头函数本身没有this,因此在t...原创 2018-07-21 22:39:25 · 282 阅读 · 0 评论 -
web页面回流与重绘
当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生,例如当一个交互式站点更新后,前面这段话是在MDN上对回流的表述,那么这段话啥意思呢,实际上就是当元素的内容、结构、位置、尺寸等发生变化时会引起回流,而回流必定会引起重绘页面初始化 DOM树发生变化(增删节点) render树变化(如padding变化) 窗口resize以上都会导致回流的产生...原创 2019-02-20 22:26:35 · 289 阅读 · 0 评论