本地种cookie

document.cookie = "name=value;path=path;domain=domain"

微信URl自带参数

原来微信会在原来的网页网址后面加上一个参数，朋友圈、好友分享和微信群的参数各不同：
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

滚动区域css背景设置

滚动区域设置background-color，不可见区域没有生效。
办法是加float: left

object[key]

eval(“myValue = myObject.” + myKey + “;”);
可以直接写成
myValue = myObject[myKey];

纯函数

一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。

深拷贝

Object.assign({},obj) 只深拷贝第一层！！！！
JSON.parse(JSON.stringfy(obj)) 完全深拷贝

因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略。用于拷贝的对象中只能是Number, String, Boolean, Array, 扁平对象，即那些能够被 JSON 直接表示的数据结构。JSON.parse(JSON.stringfy(obj)) 缺陷：

如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式。
如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；
如果obj里有函数，undefined，file数据流，则序列化的结果会把函数或 undefined丢失；
如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null；
如果对象中存在循环引用的情况也无法正确实现深拷贝；

参考文档JSON.stringify深拷贝的缺点

获取元素位置的快速方法

使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
所以，网页元素的相对位置就是：

  var X= this.getBoundingClientRect().left;
  var Y =this.getBoundingClientRect().top;

再加上滚动距离，就可以得到绝对位置

  var X= this.getBoundingClientRect().left + document.documentElement.scrollLeft;
  var Y =this.getBoundingClientRect().top + document.documentElement.scrollTop;

IOS Universal Links

Universal Links是iOS9推出的一项功能，使你的应用可以通过传统的HTTPS链接来启动APP(如果iOS设备上已经安装了你的app，不管在微信里还是在哪里)，或者打开网页(iOS设备上没有安装你的app)。官网配置如下：
Adding support for universal links is easy. There are three steps you need to take:

Create an apple-app-site-association file that contains JSON data about the URLs that your app can handle.
Upload the apple-app-site-association file to your HTTPS web server. You can place the file at the root of your server or in the .well-known subdirectory.
Prepare your app to handle universal links.

const 定义的数据也可变

对象这种引用类型可以：

// allowed
const helloWorld = {
text: 'Welcome to the Road to learn React'
};
helloWorld.text = 'Bye Bye React';

箭头函数 this

一个普通的函数表达式总会定义它自己的 this 对象。this指向函数被调用时候的作用域。
但是箭头函数表达式仍然会使用包含它的语境下的 this 对象。this指向函数被定义时候的作用域。

ES6 自动属性名

// ES5
var user = {
name: 'Robin',
};
// ES6
const key = 'name';
const user = {
[key]: 'Robin',
};

import export

导入全部变量：

//file1
const firstname = 'robin';
const lastname = 'wieruch';
export { firstname, lastname };
// file2
import * as person from './file1.js';

在导入 default 输出时省略花括号。default 语句，可以被用在一些使用情况下：

为了导出和导入单一功能
为了强调一个模块输出 API 中的主要功能
这样可以向后兼容 ES5只有一个导出物的功能

//file1
const firstname = 'robin';
const lastname = 'wieruch';
const person = {
firstname,
lastname,
};
export {
firstname,
lastname,
};
export default person;
// file2
import developer, { firstname as fname, lastname } from './file1.js';

chrome 浏览器截取页面

首先按下 ⌘Command + ⌥Option + I（Windows 为 F12）快捷键，召唤出调试界面。
按下 ⌘Command + ⇧Shift + P（Windows 为 Ctrl + Shift + P），输入命令 Capture full size screenshot（只输前几个字母就能找到），敲下回车，Chrome 就会自动截取整个网页内容并保存至本地。

axios fetch 区别

Axios是对XMLHttpRequest的封装，而Fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装。
Fetch唯一碾压Axios的一点就是现代浏览器的原生支持，而Axios需要引入Axios库。他们都基于promise。

为什么 Element.getBoundingClientRect() 可能引发重绘/回流？

浏览器都会优化重绘和回流的操作。浏览器会把所有会引起回流、重绘的操作放入1个队列中，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。另外，当我们取一些属性值时，类似offsetWidth、clientWidth、width等，只为了取到正确的值，浏览器可能提前执行 flush 队列，即便是队列里的操作不影响所取的值。