JavaScript Async/Await和Promise的对比
从Node 8 LTS开始，Node完全支持Async/Await。这里通过示例的方式对比Async/Await和Promise。简单介绍下Async/Await:Async/Await是一种新的编写异步代码的方式。其他方式是回调或者Promise。Async/Await实质是构建在Promise之上，它不能用于纯的回调或者Node.js的回调中。和Promise一样，Async/Await是非阻
javascript
JavaScript转换boolean值为数字的几种方法
方法一：三元运算var i = result ? 1 : 0;方法二：+号操作符+ true; // 1+ false; // 0方法三：Number构造函数Number(true)//1Number(false)//0方法四：或运算result | 0;其中，方法一和方法四是相对另两种方法要快。
JavaScript查找第一个内容为空的html元素
使用jQuery的:empty选择器很简单就实现：$("p:empty:first").text("hello world");也可以写成：$("p:empty").first().text('hello world');
Vue 2属性插值： Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
Vue 2在组件模板上使用双大括号{{}}对属性赋值：<div id="{{ item.id }}"></div>报语法错误：Vue template syntax error:id="{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon short
动态加载JS文件，避免Error : xxx is undefined
我们可以在页面动态添加<script>标签来动态加载js文件：function loadScript(url){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'
浏览器页面间通信新接口BroadcastChannel的用法
Broadcast Channel API允许同源（同一站点）的浏览器上下文（包括窗口，标签，框架或iframe）之间的简单通信。通信的方式如图： 用法构建channelvar bc = new BroadcastChannel('test_channel');test_channel参数用来指定channel的名称，连接到相同名称的BroadcastChannel，可
ES6简化版的JavaScript中间件模式的实现
JavaScript中间件模式的目的是分解前端业务逻辑，通过next方法层层传递给下一个业务。比较经典的是express和koa。这是使用ES6实现的一个简版的中间件模式：class Middleware { use(fn) { this.go = (stack => next => stack(fn.bind(this, next.bind(this))))(this.go)
JavaScript检测Chrome浏览器是否在隐身窗口
浏览器在隐身模式下，它的FileSystem API是禁用的，可以通过检测FileSystem API来判断浏览器是否在隐身窗口。function isIncognito() { var fs = window.RequestFileSystem || window.webkitRequestFileSystem;
JavaScript停止setInterval的执行
setInterval()是会返回一个interval id，可以调用clearInterval()来停止setInterval()的执行：var refreshIntervalId = setInterval(fname, 10000); /* 在不需要执行Interval */ clearInterval(refreshI
JavaScript获取Object类名的几种方法
有以下几种方法可以用来获取Object的类名：typeofinstanceofobj.constructorfunc.prototype, proto.isPrototypeOffunc.name（ES6）使用示例：function Foo() {} var foo = new Foo(); typeof Foo;
Laravel使用laracasts/utilities转换PHP变量为JavaScript变量
laracasts/utilities是开源的项目，项目地址：https://github.com/laracasts/PHP-Vars-To-Js-Transformer。它提供了将PHP变量转换为JavaScript变量的工具。安装使用composer安装：composer require laracasts/utilities Laravel 4： 安
JavaScript计算点到线的最短距离
点到线的最短距离实际上就是点到线的垂直距离。点坐标为(x,y),取线上的两点(x1,y1)和(x2,y2)来计算它们的距离。/** * 点到线的最短距离实际上就是点到线的垂直距离。 * (x,y)为点的坐标 * (x1,y1)为线段上点的坐标 * (x2,y2)为线段另外一点的坐标 */ function distanceOfPoint2Line(x, y, x1, y1,
JavaScript检测页面是否为当前的窗口（兼容多浏览器）
可以使用Page Visibility API来检测页面是否为当前的窗口。当浏览器不兼容page visibility api时，可以监听window的blur/focus事件.Page Visibility API兼容的浏览器：Chrome 13+Internet Explorer 10+Firefox&n
IndexDB快速入门
IndexDB是适用于浏览器的文档数据库，它有以下特点：兼容所有现代的浏览器支持事务以及版本控制支持无限数量的数据。很多浏览器会限定localStorage或者sessionStorage的存储空间为2M到10MIndexDB是异步的API，它不会阻塞浏览器UI的渲染下面介绍下它的使用。安装依赖包idb需要把idb的js库添加到依赖。有几种方式添加idb到依赖。yarnyarn add&
JavaScript 图片与Base64数据互相转换脚本
图片转换为Base64数据方法一：非Html 5使用FileReader使用XMLHttpRequest将图像加载为blob，接着使用FileReader API将其转换为dataURL。function toDataURL(url, callback) { var xhr = new
React Router 4 表单提交后重定向示例
表单设置fireRedirect为发起从定向的标记，当表单提交后，更新它的值为fireRedirect=true。当fireRedirect为true时，重定向到原来的页面。import React, { Component } from 'react' import { Redirect } from 'react-router' export default class MyForm
html给文本输入框添加自定义的清除按钮
使用HTML 5，如果对清除按钮的样式不介意的话，可以使用search类型的输入框，它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮，则需要自己实现，这里使用jquery给出一个实现的方案：<!DOCTYPE h
JavaScript（ES6/ES6之前）对函数参数设置默认值
ES6对函数参数设置默认值使用=号对参数设置默认值function myfunc(message, flag = false) { // Code } myfunc("hello"); 当flag没有传递值时，默认为false也可以使用解构赋值：function myfunc({&n
FastClick用法
为什么要使用FastClick移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。项目地址：https://github.com/ftlabs/fastclickFastClick的使用安装fastclick安装fastclick可以使用npm，Component和Bower。另外也提供
纯JavaScript检测页面是否加载完成（理解JavaScript页面加载事件）
JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件：document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值：loading：文档正在加载interactive：文档已加载完成且已被解析，但子资源（如image，css，iframe等）仍在加载。comple
JavaScript版身份证验证
这是用于验证身份证的工具函数，支持15位或18位省份证。/** * 身份证号码结构： * * 根据〖中华人民共和国国家标准GB11643-1999〗中有关公民身份号码的规定，公民身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成。 * 排列顺序从左至右依次为：6位数字地址码，8位数字出生日期码，3位数字顺序码和1位数字校验码。 * * 地址码（前6位）：表示对
Javascript检测开发者工具Devtools是否打开（Chrome/Firefox/IE）
首先要确定一点：是没有统一标准的方法来检测各个浏览器的devtools是否打开。所以只能针对不同的浏览器使用不同的方案，当然随着浏览器能的升级，有可能目前的方案也是会不适用的。这里列出目前各个浏览器可用的方案。方案一console.log隐式调用元素的idfunction isDevToolsOpened() { var opened = fal
ES6 函数使用解构赋值（Destructuring ）的几点好处
解构赋值（Destructuring ）是ES6新增的特性。使用解构赋值有以下几点好处：命名参数设置默认参数多个返回值命名参数在传统的函数定义如下：function findUsersByRole ( role, withContactInfo, includeInactive )&
JavaScript里null与undefined的区别与相似点
初次看，null和undefined看似是一样的，但远非如此。 本文将探讨JavaScript中null和undefined的区别和相似之处。null是什么？有两个你应该理解的null特性：null是空的或不存在的值。null必须显式赋值。将null的值赋给a示例：let a = null; console.log(a); // 输出null un
JavaScript ES6扩展运算符（...）用例
ES6新增了扩展运算符，它的语法很简单，使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1：插入数组如果我们要在一个数组插入另外一个数组的元素，可以结合splice和apply使用，如：a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n
JavaScript使用URLSearchParams获取查询字符串的值（query string）
Firefox 44+, Opera 36+ and Chrome 49+ 已经支持 URLSearchParams API。基本用法let params = new URLSearchParams(location.search.slice(1)); 直接使用location.searc
JavaScript使用for循环和splice删除数组指定元素的注意点
在JavaScript里可以结合for循环和splice来删除数组指定的元素。但是要注意删除元素后，数组索引会发生改变示例var arr = ["a","b","c","a",'a',"b"]; var ele = "a"
PC端禁止页面缩放（原生JavaScript）
在PC端缩放浏览器的页面主要有三种方式：Ctrl + （+/-）组合Ctrl + 鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面，只能通过对有键盘或鼠标事件的快捷方式做监控，从而实现禁止缩放的快捷方式。禁止Ctrl + （+/-）组合document.addEventListener('keydown', functio
有意思的JavaScript面试题：如何让(a ==1 && a== 2 && a==3) 的值为true
这是一道在StackOverflow上看到的面试题，内容主要为：JavaScript如何让(a ==1 && a== 2 && a==3)的值为true。StackOverflow上的几个答案：重写Object的toString或者valueOfconst a = { &nbs
JavaScript在严格和非严格模式下，call()函数传递null或undefined的区别
Function.prototype.call()函数使用给定的this值和提供的参数来调用函数。语法function.call(thisArg, arg1, arg2, ...) 在非严格模式下，如果thisArg为null或者undefined，它们会被转换为全局的对象作为this的值，如Window。非严格模式function test(){
JavaScript根据userAgent获取浏览器名及版本信息（支持Edge）
获取浏览器的类型及版本信息主要通过浏览器的userAgent属性，函数如下：function getBrowserInfo() { var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\
JavaScript统计数组元素出现次数的最简单方法
这主要是基于对象的动态添加属性的思路 var counts = {}; array.forEach(function(item) { counts[item] = (counts[item] || 0) + 1; });
JavaScript删除数组里重复的元素
JavaScript里有多种方法可以用来对数组元素去重。ES6 SetES6提供了一个Set对象，用它可以很简单便可以对数组元素去重。function uniq(arr) { return Array.from(new Set(arr)); } filter另外也可以通过filter来对数组元素去重。functi
JavaScript检查Date对象是否为Invalid Date
使用Date()构造日期对象，如果传入非日期格式的字符串，仍然能构造出Date对象。在chrome控制台>var date = new Date("hello"); >date Invalid Date >typeof date “object” >date instanceof&nb
在iOS Safari，JavaScript使用Date.parse或Date()转换日期返回NaN或Invalid Date
Chrome>Date.parse("2018-01-11 20:00:00"); 1515672000000 Safari>Date.parse("2018-01-11 20:00:00"); NaN 同样的日期字符串在Chrome解析正确，而在Safari返回NaN。这个主要原因是Safari要求Date.parse()或
JavaScript使用Date.parse()或new Date()解析字符串日期的格式要求
在JavaScript里，Date.parse()会接收一个字符串作为参数，根据字符串格式返回：如果字符串符合日期格式，返回自1970-01-01 00:00:00 UTC时间起的毫秒数。如果字符串不符合格式，返回NaN。new Date(str)，构造函数也可以接收一个字符串作为参数，把字符串转换为表示的日期。构造的日期对象为：如果字符串符合日期格式，返回自1970
JavaScript判断两个数组是否相等
首先判断两个数组是否相等时不能直接使用==var array1 = []; var array2 = []; console.log(array1 == array2); //输出false 对于对象来说，==比较的是两个对象是否为同一个对象。数组属于对象类型，尽管数组元素是相同的，但这两个数组属于不同的对象
JavaScript使用window.print()打印页面：样式设置、精确分页以及局部打印
大部分浏览器提供打印页面的功能，直接使用浏览器的打印功能是直接将整个页面打印出来，并且是自动分页。很多时候直接打印整个页面并不能满足我们的需要。有三方面的需求我们可能要考虑：样式设置：打印的样式和页面显示的样式不同，需要对设置打印样式。精确分页：需要根据具体的内容进行精确分页。局部打印：不需要打印整个页面，只需要打印页面的部分。html示例<!doctype html> &l
Vue实例里this的使用
要理解Vue实例里this的使用，首先要理解this在JavaScript里的用法，可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话：All lifecycle hooks are called with their 'this' context pointing
理解JavaScript普通函数以及箭头函数里使用的this
this普通函数的this普通函数的this是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项：this总是指向它的直接调用者， 例如 obj.func() ,那么func()里的this指的是obj。在默认情况(非严格模式,未使用 'use strict')，如果函数没有直接调用者，this为window在严格模式下,如果函数没有
数据加载中