js

2021.8.19

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}    // 输出3个3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}    // 0 1 2

setTimeout 是未来事件，每次都向未来事件里存放一个i, 只不过不同的是，第一个for循环中的i用var声明，是同一个i,第二个for循环中的i用let声明，是不同的i.

2021.8.20

如何判断数组

let a = [1, 2, 3, 4];
Object.prototype.toSting.call(a);    //"[object Array]" 

let a = [1, 2, 3, 4];
Array.isArray(a);    // true

let a = [1, 2, 3, 4];
a instanceof Array    // true

let a = [1, 2, 3, 4];
a instanceof Array    // true

let a = [1, 2, 3, 4];
a.__proto__ == Array.prototype    // true

new 关键字操作

1. 创建一个空的简单JavaScript对象。即{}
2. 为步骤1新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象
3. 将步骤1新创建的对象作为this的上下文
4. 如果该函数没有返回对象，将返回this

2020.8.23

任务分解

一个比较耗时的任务可能造成浏览器卡死现象，我就经常写这样的代码。

console.time("runtime");
function hd(num) {
  let count = 0;
  for (let i = 0; i <= num; i++) {
    count += i;
  }
  console.log(count);
  console.timeEnd("runtime");
}
let num=987654321;
hd(num);
console.log("test");    // 这里需要等待上面的执行完才会执行

交给微任务处理是更好的选择

async function hd(num) {
  let res = await Promise.resolve().then(_ => {
    let count = 0;
    for (let i = 0; i < num; i++) {
      count += num--;
    }
    return count;
  });
  console.log(res);
}
hd(987654321);
console.log("test");    // 这里立刻显示出来

2020.8.24

<div class="test">这里是测试</div>

.test {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid #000;
}

这里盒子的宽度为350+252+52=410px 这里盒子的高度为150+252+52=210px

盒子的宽度为 本身声明的宽度+padding+border,盒子的高度为 本身的高度+padding+border

box-sizing 属性为content-box 会有一个误区，即使给元素写了宽度为350px,实际宽度为加上了padding和border.修改box-sizing 属性为border-box，可以解决这个问题

2020.8.25

行内元素

<span>这是一个span标签</span>
<span>这是另外一个span标签</span>

span{
    margin: 20px;
    padding: 20px;
    width: 800px;
    height: 0px;
    border: 2px solid #000;
}

行内元素的宽度和高度被忽略了。外边距、内边框、和边框 设置的属性已生效

 <div>这是一个div</div>
 <span>这是一个span标签</span>
 <span>这是另外一个span标签</span>
 <div>这是另外一个div</div>
 
 span{
    margin: 20px;
    padding: 20px;
    width: 800px;
    height: 0px;
    border: 2px solid #000;
}

这个例子说明 设置的垂直方向的属性失效

修改display: inline-block

2020.8.27 动态加载： 是一种程序运行机制，能让计算机程序在运行时(而不是编译时) 装载库到内存中，然后检索库中函数和变量的地址，并执行这些函数或访问这些变量，且能在不需要时将库从内存中卸载。动态加载可以理解为运行时加载

2020.9.6 1.