javascript
HansExploration
这个作者很懒,什么都没留下…
展开
-
数组sort()方法中回调函数实现排序的原理
var arr = [2,34,242,12,3,2,23,3];// 定义一个数组 arr.sort(function (a,b) { // a -->代表每一次执行匿名函时候,找到的数组中的当前项; // b -->代表当前项的后一项; return a - b; // 升序时: 如果a>b,那么返回的值>0,a和b交换位置; ...转载 2018-06-04 17:19:47 · 1898 阅读 · 2 评论 -
正则表达式使用字符串创建的正则表达式_反斜杠也需要添加转义符
备注: 使用字符串创建的正则表达式:"\"也需要加转义符: var reg1=new RegExp("\\w+"); 这和 直接使用:var reg2= /\w+/ 他们是等价的。 A: var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if...转载 2018-05-23 22:37:55 · 773 阅读 · 0 评论 -
js中的事件委托或是事件代理详解
js中的事件委托或是事件代理详解起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们...转载 2018-06-04 23:28:44 · 185 阅读 · 0 评论 -
JS自动添加适配浏览器样式前缀的方法
const styleTest = document.createElement('div').styleconst render = { webkit: 'webkitTransform', ms: 'msTransform', Moz: 'MozTransform', O: 'OTransform', standard: 'transform'}const getPrefix = (...原创 2018-06-19 15:20:56 · 1802 阅读 · 0 评论 -
apply()与call()的区别
转自 https://www.cnblogs.com/lengyuehuahun/p/5643625.html一直都没太明白apply()与call()的具体使用原理,今日闲来无事,决定好好研究一番。JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:/*apply()方法*/function.apply(thisObj[, ar...转载 2018-07-10 22:28:05 · 139 阅读 · 0 评论 -
JS中的call、apply、bind方法详解
转自 https://www.cnblogs.com/moqiutao/p/7371988.htmlbind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。apply、call在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。JavaScript 的一大特...转载 2018-07-10 22:40:34 · 188 阅读 · 0 评论 -
vue双向绑定的实现原理
let obj = {}let get = ''Object.defineProperty(obj, 'get', { set: function(val) { document.getElementById('input').value = val document.getElementById('text').innerHTML = val }})document.get...原创 2018-07-12 18:12:22 · 214 阅读 · 0 评论 -
for in 与 for of, 与 hasOwnProperty
今天本来想尝试下HTML5的自定义属性<div data-name='byset1'>1</div><div data-name='byset'>2</div><div data-name='byset3'>3</div><div data-name='byset'>4</div>原创 2018-07-15 22:37:54 · 508 阅读 · 0 评论 -
AMD及requireJS
转自:https://www.cnblogs.com/xiaohuochai/p/6847942.html 前面的话 由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引。AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制,完整描述了模块的定义,依赖关系,引用关系以及...转载 2018-07-26 21:42:00 · 257 阅读 · 0 评论 -
document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)二是onload,指示页面包含图片等文件在内的所有元素都加载完成。 用jQ的人很多人都是这么开始写脚本的:$(function(){// do something});其实这个就是jq...转载 2018-11-06 11:31:22 · 207 阅读 · 0 评论 -
彻底理解js中的&&和||
来源: https://www.cnblogs.com/sgzs/p/7977208.html javascript中,&&和||的用法比较神奇,经常用在对象上,例如a || b,如果a不存在,则返回b。a && b,如果a存在,则返回b,否则返回a。光这样看,感觉他的概念还挺复杂的,这样去想的话,不但会在脑子里多出一个无用的概念,而且越记越混乱。看问题还是...转载 2018-12-15 19:32:11 · 359 阅读 · 0 评论 -
Object.defineProperty使用小记
本来想实现下vue的源码,结果刚开始就踩了个坑,记录下。let obj = { name: 'Han'}Object.defineProperty(obj, 'name', { get() { return obj.name }})控制台打了下报错说是栈溢出。原因是get方法不能直接返回obj.name,这样相当于又调用了一次get方法,然后继续返...原创 2019-01-26 19:40:14 · 331 阅读 · 0 评论 -
简单实现vue中的依赖收集与响应
开始声明一个对象man,可以视为vue中的datalet man = { height: 180, weight: 70, wealth: 100000000}添加Observer作用在于将参数对象的属性变为响应式,只要对象的属性被读取或者被修改都能观察到。然后新建一个Observer实例,将man作为参数扔进去。这里的proxyData是将man的属性代理到以m...原创 2019-02-02 15:58:16 · 438 阅读 · 0 评论 -
ES6 -- Set,reduce特性计算html中的标签类型数以及各标签的数量
let tags = document.querySelectorAll('*')let tagNames = Array.from(tags).map(tag => tag.tagName)// tag的类型数console.log(new Set(tagNames).size)// 每个tag类型各有多少个let res = tagNames.reduce((holder...原创 2019-02-03 11:05:06 · 435 阅读 · 0 评论 -
Javascript实现冒泡排序与快速排序以及对快速排序的性能优化
冒泡排序介绍重复遍历要排序的元素列,依次比较两个相邻的元素,前一个元素若比后一个元素大则互换位置。以升序排序为例,最大的元素会在第一次遍历后“冒泡”到数组的末端。假如数组长度为n,在n-1次遍历后可完成排序。实现let arr = [1, 5, 2, 9, 7, 4, 2, 3, 6, 8]function bubbleSort(arr) { let time = arr...原创 2019-02-10 15:01:55 · 421 阅读 · 0 评论 -
迭代器和for-of循环(转自wujunchuan 的github)
先说结论:推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of。for...in循环出的是key,for...of循环出的是value注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足for...of不能循环普通的对象,需要通过和Object.keys()搭配使用假设我们要遍历一个数组的valuelet aArray = ['...转载 2018-06-04 16:32:30 · 165 阅读 · 0 评论 -
ES6 类(Class)基本用法和静态属性+方法详解
转载请注明预见才能遇见的博客:http://my.csdn.net/原文地址:http://blog.csdn.net/pcaxb/article/details/53759637ES6 类(Class)基本用法和静态属性+方法详解JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例:[...转载 2018-06-04 14:25:12 · 248 阅读 · 0 评论 -
JS函数的四种调用方式
函数有下列调用模式函数调用模式方法调用模式构造器模式上下文模式1. 函数调用 模式要调用,就肯定要先定义,函数的定义方式:声明式: function fuc() {}表达式式: var func = function() {};Function: new Function( ‘参数’,…,’函数体’ );单独独立调用的,就是函数调用模式,即 函数名( 参数 ),不能加任何其他的东西, 对象 o.f...转载 2018-03-02 14:57:25 · 441 阅读 · 0 评论 -
JS函数中this的指向(深度解答--转载自追梦子)
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为什么要学...转载 2018-03-02 17:12:51 · 750 阅读 · 0 评论 -
面向对象,原型
如果要我总结一下学习前端以来我遇到了哪些瓶颈,那么面向对象一定是第一个毫不犹豫想到的。尽管我现在对于面向对象有了一些的了解,但是当初的那种似懂非懂的痛苦,依然历历在目。为了帮助大家能够更加直观的学习和了解面向对象,我会用尽量简单易懂的描述来展示面向对象的相关知识。并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛。jQuery的面向对象实现封装拖拽简易版运动框架封装这可能会花一点时间,...转载 2018-03-02 18:32:03 · 245 阅读 · 0 评论 -
js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别
js中有两种声明函数的方法,分别为:var functionOne = function() { // Some code};function functionTwo() { // Some code}为什么会有两种不同的方法?每个方法的优点和缺点分别是什么?有什么情况是一种方法能完成而另外一种方法不能完成的吗?答: by @Greg不同点在于functionOne只会在到...转载 2018-03-13 10:27:27 · 2670 阅读 · 1 评论 -
JS中最经典的全局变量和局部变量问题
话不多说,直接上例子:1、程序的运行结果为:100 10 1001 var a = 10;2 function test(){3 a = 100;4 console.log(a);5 console.log(this.a);6 var a;7 console.log(a);8 }9 test();解析:Javascript在执行前会对整个...转载 2018-04-11 13:52:46 · 237 阅读 · 0 评论 -
详解变量声明加 var 和不加 var 的区别
在全局作用域中声明变量加 var 关键字和不加 var ,js 引擎都会将这个变量声明为全局变量,在实际代码运行时,两种声明方式的变量的行为也几乎是一致的。但是在全局作用域下是否声明一个变量的时候加 var 和不加 var,js 引擎具体执行了哪些操作呢,其效果又是否完全一致?首先我们看在一个函数体内(局部作用域)声明变量,如下:// 变量声明不加 varfunction foo (a) { ...转载 2018-04-11 13:54:01 · 295 阅读 · 0 评论 -
js的函数作用域跟块级作用域(声明提升问题)
一,js中的作用域 js中除了全局作用域,还有函数作用域。 嗯,还有块级作用域。二,函数作用域跟块级作用域的区别 当将代码看成一个IIFE时,全局作用域其实就是一个函数作用域。 那么函数作用域跟块级作用域的区别是什么呢? 函数作用域:变量在定义的函数内及嵌套的子函数内处处可见; 块级函数域:变量在离开定义的块级代码后马上被回收。 那...转载 2018-04-20 09:41:38 · 1219 阅读 · 0 评论 -
禁止浏览器滚动
Pin body所以,还是要从根子抓起,比如,就固定body不让它滚!function toggleBody(isPin){ if(isPin){ document.body.style.height = '100vh' document.body.style['overflow-y'] = 'hidden' } else{ ...转载 2018-05-18 17:18:38 · 1183 阅读 · 1 评论 -
获取对象属性的点方法和中括号法的区别
转行干前端也有一段时间了,闲暇之余来复习一下原生js,总结一下碰到的一些疑问或者问题,我是小白,有不到位之处请指正;不废话,一般访问对象的属性,我们可以用点方法或者中括号法来获取,简单实例如下:var obj = {'name':'张三','age':'18'};var getName = obj.name;//点方法var getAge = obj['age'];//中括号法console...转载 2018-05-25 16:52:27 · 1162 阅读 · 0 评论 -
js中实例对象的__proto__与构造器函数的prototype
有一个构造函数,名字叫做Personfunction Person(name, age) { name = this.name, age = this.age}实例对象Mike由构造函数Person生成const Mike = new Person('Mike', 18)作为一个构造函数,他拥有prototype这一其他对象所没有的属性。“方法这个特殊的对象,除了和其他对象一样有__p...原创 2018-06-03 20:06:18 · 1215 阅读 · 0 评论