先说一个众所周知的作用域问题，看一下代码：

var a = [];
for (var i = 0; i < 5; i++) {
  a.push(function () {
    console.log(i)
  });
}
a[0]();
a[1]();

以上期望输出0, 1，实际输出则是 5，5。因为i的作用域是window（global）全局。

ES6有个解决办法，把var关键字改为let关键字，即可解决作用域问题。原理可以通过babel转换一下源码探知：

var a = [];
var _loop = function _loop(i) {
  a.push(function () {
    console.log(i);
  });
};
// 源码是let声明，此处经过了babel转换
for (var i = 0; i < 5; i++) {
  _loop(i);
}

通过循环体封装为_loop函数，把i转为一个函数内部变量，不再受循环外变量影响。

而此时也该点题了，本文题目说的是另外一个隐藏的坑。见以下代码：

const a = [];
for (let i = 0; i < 5; ) {
  a.push(function () {
    console.log(i)
  });

  i++; // 条件改变放到循环体内
}
a[0](); 
a[1]();

不同之处也已标明：i++的条件改变位置换到了循环体内执行，这时预期结果也不一样了。
执行预期应该是输出0, 1，实际却输出的是 1, 2。

这是为什么呢？同样通过babel转换源码后探知：

var a = [];

var _loop = function _loop(_i) {
  a.push(function () {
    console.log(_i);
  });
  _i++; // 循环体内的条件改变影响到循环体函数内的局部变量

  i = _i;
};

for (var i = 0; i < 5;) {
  _loop(i);
}

a[0]();
a[1]();

最近也是在写一个比较复杂的业务逻辑时，发现这种写法的问题，好在花费了一些时间总算是搞清楚了。

如果循环体是即时执行是不会有问题的，如果是延迟执行的则会暴露该问题。

使用Image对象预加载图片：

const img = new Image();
img.crossOrigin = 'anonymous';

如果设置了crossOrigin，就要小心了。若在html <img/>标签内没有使用该属性，会造成两次图片请求，达不到预加载的效果。

原理是crossOrigin属性会在http请求头增加Origin头，导致两次请求是不同的（类似请求地址增加随机数去缓存效果）。

但是crossOrigin在处理canvas图片跨域报错时，是有用的。

function increaseNumbers(length, startNumber = 0) {
  return Array.from(new Array(length + startNumber).keys()).slice(startNumber);
}

今天发现vue实现动态组件的内置标签<component>有点特殊性，当使用自闭方式使用它时（<component />）对同级的兄弟标签，在component前的可以渲染出来，在component后的则不能渲染。

例如：

<div>
<p>aaaa可以渲染出来</p>
<component />
<p>bbbb渲染不出来</p>
</div