javascript

ES6使用展开运算符（spread operator）向JavaScript的数组头部添加元素

ES6之前，如果我们想向一个JavaScript的数组的头部添加元素，可以按以下方法：unshiftvar a = [123, 35, 12, 67];a.unshift(10);console.log(a); // [10, 123, 35, 12, 67]concatvar arr = [1, 2, 3, 4, 5, 6, 7];console.log([0].concat(arr));ES6

java

用bootstrap代码做棋牌游戏网站

思路用bootstrap做棋牌游戏网站首先要引进文件<script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="styl

nodejs写入json文件--引入fs，是实体写入的

book.json:[{"name":"book1","category":"1","quantity":"27","allowlend":"1"},{"name":"book2","category":"2","quantity":"27","allowlend":"1"},{"name":"book3","category":"3","quantity":"27","allowlend":"1

务必要解决效率的问题

1

地方

阿斯顿发放

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转换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