JavaScript
文章平均质量分 69
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
innerHTML和creatElement创建元素的区别
innerHTML与createElement创建dom元素的区别:可以从innerHTML是采用字符串拼接还是数组形式拼接和其结构来说原创 2022-10-24 22:01:18 · 370 阅读 · 0 评论 -
类与继承
类的声明原生方法:function Animal(name){ this.name = name;}ES6方法:class Animal{ constructor(name){ this.name = name; }}类与继承实现继承的原理就是原型链。继承的几种方式第一种:借助构造函数实现继承function Parent(name...原创 2019-12-29 12:42:45 · 178 阅读 · 0 评论 -
原型链
创建对象的几种方法: //第一种:字面量,这种方式创建的对象,对象的原型链默认指向Object var o1 = { name: 'happychen' }; //字面量方式创建的对象,对象的原型链默认指向Object var o2 = new Object({ name: 'happychen' }); //第二种:构造函数创建对象 var M ...原创 2019-12-27 14:16:34 · 299 阅读 · 0 评论 -
js原型在jQuery和zepto中的使用
原型的实际应用zepto库中实现原型的方式:index.hmtl代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-12-16 17:45:29 · 99 阅读 · 0 评论 -
Class和普通构造函数的区别
JS构造函数//JS构造函数function MathHandle(x,y){ this.x = x; this.y = y;}MathHandle.prototype.add = function(){ return this.x + this.y;}let test = new MathHandle(1,2);console.log(test.add())...原创 2019-12-16 15:40:31 · 1918 阅读 · 0 评论 -
webpack简单使用
npm initnpm install --save-dev @babel/core babel-preset-es2015 babel-preset-latest @babel/preset-env --registry=https://registry.npm.taobao.orgnpm install babel-cli -g文件目录:运行:babel src/index.js...原创 2019-12-16 14:39:58 · 136 阅读 · 0 评论 -
CSS工程化
CSS工程化主要包括 组织,优化,构建和维护。这里主要介绍两个工具:PostCSS和PostCSSpost是 后面,后置 的意思,它跟预处理器的概念是相对的。预处理器是把不是css的语言 经过处理后 变成css,也就是先有预处理语言再有css。postcss是把css变成css,是先有css再对代码进行处理。这里需要说明的是,前面提到postcss是先有css然后postcss再处理转换变...原创 2019-12-06 13:56:16 · 519 阅读 · 0 评论 -
async function
这篇文章多看几遍加深理解async function 声明定义了一个异步函数,它返回一个AsyncFunction对象。异步函数 是指通过 事件循环(event loop) 异步执行的函数,通过返回一个隐式的 Promise 作为其结果。使用异步函数的代码的语法和结构更像使用标准同步功能。(The async function declaration defines an asynchron...翻译 2019-11-14 10:15:56 · 16125 阅读 · 2 评论 -
AsyncFunction构造函数
AsyncFunction 构造函数用来创建新的 异步函数 对象,JavaScript 中每个异步函数实际上都是 AsyncFunction 的对象。(The AsyncFunction constructor creates a new async function object. In JavaScript every asynchronous function is actually an...翻译 2019-11-12 18:16:38 · 740 阅读 · 0 评论 -
生成器对象(Generator)
生成器对象(Generator )是由一个 generator function 返回的,它同时符合可迭代协议和迭代器协议。语法function* gen() { yield 1; yield 2; yield 3;}var g = gen(); // "Generator { }"方法Generator.prototype.next():返回yield表达式的值。(...翻译 2019-11-12 15:04:55 · 1741 阅读 · 0 评论 -
生成器对象(Generator)的Generator.prototype.throw()方法
throw() 方法用来向生成器抛出异常,并恢复生成器的执行,返回带有 done 及 value 两个属性的对象。语法gen.throw(exception)参数:exception 抛出的异常。 使用 Error 的实例对调试非常有帮助.返回值:返回一个包含两个属性(done和value)的对象done (布尔类型):– 如果迭代器超过迭代序列的末尾,则值为 true。 在这种...翻译 2019-11-12 15:01:51 · 199 阅读 · 0 评论 -
生成器对象(Generator)的Generator.prototype.return()方法
return() 方法返回给定的值并结束生成器。语法gen.return(value)举例:function* gen(){ yield 1; yield 2; yield 3;}let g = gen();console.log(g.next());console.log(g.return('happy chen'));console.log(g.n...翻译 2019-11-12 14:50:57 · 232 阅读 · 0 评论 -
生成器对象(Generator)的Generator.prototype.next()方法
next() 方法返回一个对象,这个对象包含两个属性 done 和 value。可以向该方法传递一个参数以向生成器传值。语法gen.next(value)参数:要发送给生成器(Generator)的值。该值将作为yield表达式的结果进行赋值。比如在 [variable] = yield [expression]中,传递给.next()函数的参数值将分配给[variable]。(The v...翻译 2019-11-12 14:39:27 · 561 阅读 · 0 评论 -
Promise对象
本文介绍了 Promise构造函数以及此类对象的方法和属性;语法:new Promise(executor);executor 参数 是一个 函数,这个函数又有两个函数类型的参数 resolve 和reject(即 resolve 和reject 都是函数)。new Promise( function(resolve, reject) {...} /* executor */ );...翻译 2019-11-12 10:43:25 · 414 阅读 · 0 评论 -
Promise 原型方法Promise.prototype.finally()
finally() 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式,避免了同样的语句需要在then()和catch()中各写一次的情况。语法p.finally(onFinally);p.finally(function() { // set...翻译 2019-11-12 10:41:41 · 1992 阅读 · 0 评论 -
Promise构造函数的Promise.prototype.catch()方法
catch() 方法返回一个Promise,并且只处理拒绝(rejected )的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。 (事实上, calling obj.catch(onRejected) 内部调用obj.then(undefined, onRejected))。这意味着即使返回undefined也要提供onRej...翻译 2019-11-11 18:15:24 · 541 阅读 · 0 评论 -
Promise 原型方法Promise.prototype.then()
then() 方法返回一个 Promise。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。语法p.then(onFulfilled[, onRejected]);p.then(value => { // fulfillment}, reason => { // rejection});参数:onFulfilled |可选。是一个函数,当 ...翻译 2019-11-11 16:26:29 · 1315 阅读 · 0 评论 -
Promise构造函数的Promise.resolve()方法
Promise.race(iterable) 方法返回一个 promise,一旦迭代器(iterable)中的某个promise解决(fulfill)或拒绝(reject),返回的 promise就得到那个promise解决(fulfill)的返回值(value)或拒绝(reject)的原因(reason)。语法Promise.race(iterable);参数:iterable可迭代对象...翻译 2019-11-10 13:02:06 · 350 阅读 · 0 评论 -
Promise构造函数的Promise.resolve()方法
Promise.resolve(value)方法返回一个由 给定的value 决议的Promise对象。如果value的值为promise,返回这个promise;如果value的值是thenable(即,带有then方法的对象),返回的Promise对象的最终状态由then方法执行决定;否则的话(即value为 空,基本类型或者不带then方法的对象),返回的Promise对象状态为ful...翻译 2019-11-09 17:02:12 · 6551 阅读 · 0 评论 -
Promise构造函数的Promise.reject()方法
Promise.reject(reason)方法返回一个带有拒绝原因(reason参数)的Promise对象。语法Promise.reject(reason);参数:reason 表示Promise被拒绝的原因。返回值:一个被拒绝的 Promise对象。静态函数Promise.reject返回一个被拒绝的Promise对象。通过使用 Error的实例 获取错误原因(reason)对调试...翻译 2019-11-09 16:08:00 · 7616 阅读 · 0 评论 -
Promise构造函数的Promise.all()方法
Promise.all(iterable) 方法返回一个 Promise 实例。语法Promise.all(iterable);参数:iterable是一个可迭代对象(如 Array 或 String等)。返回值:如果传入的参数是一个 空的可迭代对象,则返回一个已完成(already resolved)状态的 Promise。如果传入的参数 不包含任何 promise,则返回一个异...翻译 2019-11-09 15:30:40 · 1514 阅读 · 0 评论 -
yield 和 yield*
yieldyield 关键字用来暂停和恢复一个生成器函数(function*)举例:function* gen(index) { while (index < 2) { yield index++; }}const iterator = gen(0);console.log(iterator.next().value);console.log...翻译 2019-11-08 18:04:51 · 4181 阅读 · 0 评论 -
迭代器和生成器(Iterators and generators)
处理集合中的每个项(the items in a collection)是非常常见的操作。JavaScript提供了许多迭代集合的方法,从简单的for循环到map()和filter()。迭代器和生成器将迭代的概念直接引入到核心语言中,并提供了一种自定义for...of循环行为的机制。迭代器(Iterators)在 JavaScript 中,迭代器是一个对象,它定义了一个序列,并在其终止时可能返...翻译 2019-11-08 14:25:29 · 262 阅读 · 0 评论 -
Map对象
Map对象保存键值对,并记住键的原始插入顺序。任何值(对象或者基本值)都可以用作键或值。语法new Map([iterable])参数:[iterable]:Iterable 是一个数组或者其他 可迭代的(iterable)对象,其中元素为键值对(如果是数组则为两个元素,比如:[[ 1, 'one' ],[ 2, 'two' ]])),每个键值对都会添加到新的 Map。null 会被当做...翻译 2019-11-07 15:44:51 · 529 阅读 · 1 评论 -
迭代协议(Iteration protocols)
迭代协议(Iteration protocols)并不是 ECMAScript 2015新增项中的 内置功能 或 语法,而是协议。这些协议可以由遵守约定的任何对象来实现。迭代协议有两种协议:可迭代协议(iterable protocol) 和 迭代器协议(iterator protocol)可迭代协议(iterable protocol)可迭代协议允许JavaScript对象定义或自定义其迭...翻译 2019-11-07 11:48:28 · 510 阅读 · 0 评论 -
节流、防抖及使用场景
函数防抖(debounce)概念:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。//模拟一段ajax请求function ajax(content) { console.log('ajax request ' + content)}let inputa = document.getElementById('unDebounce')inputa.addEv...原创 2019-11-03 15:32:36 · 2019 阅读 · 0 评论 -
JavaScript 事件循环机制
JavaScript 是单线程的,JavaScript 代码在执行的时候,只有一个主线程来执行所有的任务,同一个时间只能做同一件事情。为什么 JavaScript 不设计成多线程的语言?在其执行的环境浏览器中。试想一下如果 JavaScript 是多线程语言的话,那么当两个线程同时对 Dom 节点进行操作的时候,则可能会出现有歧义的问题,例如 一个线程 操作的是在一个 Dom 节点中添加内容,...原创 2019-11-03 11:52:08 · 129 阅读 · 0 评论 -
任务、微任务、队列和调度
外文链接:Tasks, microtasks, queues and schedules事件循环如何处理任务和微任务每个``线程’'都有自己的事件循环,因此每个Web worker都有自己的事件循环,所以每个Web worker都可以独立运行,而同一源上的所有窗口都可以共享事件循环,因此Web worker之间是可以同步通信。事件循环持续运行,执行所有排队的任务。一个事件循环有多个任务源,...翻译 2019-11-02 15:55:51 · 584 阅读 · 0 评论 -
async await异步
介绍Promise既然有了promise 为什么还要有async await ? 因为promise 不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解。Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。Promise 对象是由关键字 new 及其 构造函数 来创建的。构造函数会 把一个叫“处理器函数”(executor fu...原创 2019-10-31 16:58:00 · 2110 阅读 · 0 评论 -
Object.prototype.toString方法精确判断对象的类型
在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 "number","string","undefined","boolean","object","function","symbol" (ES6新增)七种。对于 数组、null、对象,使用 typeof 都会统一返回 "object" 字符串。要想区别 对象、数组、函数 单纯使用 typeof 是不行的,J...原创 2019-10-31 10:57:10 · 322 阅读 · 0 评论 -
JavaScript递归理解(一)
先举个栗子:求n个数字的和 n=5 ------->5+4+3+2+1function getSum(x) { if (x==1){ return 1 } return x+getSum(x-1); }; var sum=getSum(5); console.log(sum); conso...原创 2019-10-30 17:18:48 · 1639 阅读 · 2 评论 -
JSON.parse(JSON.stringify(obj))实现深拷贝的弊端
JSON.parse(JSON.stringify(obj))我们一般用来深拷贝,其过程说白了 就是利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象;序列化的作用是存储(对象本身存储的只是一个地址映射,如果断电,对象将不复存在,因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输(例如 如果请求的Content-Ty...原创 2019-10-30 15:31:44 · 16507 阅读 · 5 评论 -
js判断用户的浏览器设备是移动端还是pc端
判断移动设备还是电脑浏览器访问的 function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == “ipad”; var原创 2017-04-19 13:23:06 · 320 阅读 · 0 评论 -
理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
这个语法其实不难理解,只是它有些不好看。Array 是 JavaScript 的基本类型,你可以使用 Array.prototype 获取它的属性值,在这里我假设你已经了解了 prototype 的概念。slice 是 JavaScript 的一个方法,用于选取一个数组的一部分数据,并返回一个新的数组。它可以接收两个参数,startIndex(必选)和 endIndex。因此:var a = [“a原创 2017-04-27 14:19:27 · 562 阅读 · 0 评论 -
取出两个数组不相同的元素并返回到新的数组里面
function arrComparison(oldArr, newArr) { var oldArr = oldArr; var newArr = newArr; var distinct = []; var tmp = oldArr.concat(newArr); var o = {}; for (v原创 2017-09-22 09:52:12 · 1292 阅读 · 0 评论 -
对变量提升以及作用域链的理解
函数里面变量声明加var在函数作用域里存在变量提升,此时在声明并给b赋值的时候只是在testResult方法里声明了变量a但是并没有赋值所以此时a的值是undefined,赋值是在后面var a = 200;才赋值的。var a = 100;function testResult(){ var b = 2 * a; var a = 200;//这里a是函数作用...原创 2018-08-22 16:26:57 · 185 阅读 · 0 评论 -
闭包
JS 的闭包包含以下要点:函数声明的时候回生成一个独立的作用域;同一作用域下的对象可以相互访问;作用域呈层级包含状态,形成作用域链,子作用域的对象可以访问父作用域的对象,反之却不行;而且子作用域会使用最近的父作用域的对象。 建议把 GC 也搞清楚,为什么闭包有时候可能导致内存泄漏,怎么处理?哪些浏览器会发生哪些不会发生,这样自己写起代码来也更容易操作。//循环里面...原创 2018-08-22 17:18:16 · 117 阅读 · 0 评论 -
ES6中对Promise的理解
Promise是什么MDN解释:The Promise object is used for asynchronous computations.A Promise represents a value which may be available now,or in the future,or never.按照用途来解释:主要用于异步计算。可以将异步操作队列化,按照期望...原创 2018-09-06 11:27:15 · 539 阅读 · 0 评论 -
移动web开发----Tab基础事件
移动web页面上的click事件响应会慢300ms。 300ms延迟怎么办?使用Tap事件代替click事件,Tap事件是一个自定义事件。 自定义Tap事件原理: 在touchstart,touchend时记录时间,手指位置,在touchend时进行比较,如果手指位置为同一位置(或允许移动一个非常小的位移值)且事件间隔较短(一般认为是200ms),且过程中未曾触发过touchmove,即可认...原创 2018-09-07 14:03:13 · 1003 阅读 · 0 评论 -
鼠标拖拽小知识
三个关键鼠标事件:在标题栏上按下:鼠标在标题栏上按下时,要计算鼠标相对拖拽元素左上角的坐标,并且标记元素为科拖动。开始移动:鼠标开始移动,要检测登录浮层是否标记为可拖动,如果是,则更新元素的位置到当前鼠标的位置(注意:要减去第一步中获得的偏移)。这里增加了范围限定放开:鼠标松开时,标记元素为不可拖动状态。总结:获取元素对象的通用函数g(k)自动剧中元素 对象函数 autoCen...原创 2018-09-17 19:15:37 · 252 阅读 · 0 评论