JavaScript初学者必备ing

大家好，我是苏日俪格，下面来介绍几个面试和做项目都会遇到的知识点：

一、递增递减操作符

ECMAScript里面有个一元操作符，所谓一元操作符就是只能操作一个值的操作符，而递增递减就是其中之一，在for循环里面经常用的i++就是这个道理，这个只是操作符后置型，还有前置型是++i，那么两者的区别是什么呢？

1
2
3
4
let num1 = 10;
let num2 = 20;
console.log(num1++);
console.log(++num2);

看到这个先别慌，先仔细分析一下，这两个表达式分别都经历了哪些过程，后置型操作符无论是++还是–都是一个道理，先赋值再运算，而后置型操作符正好相反，是先运算再赋值。栗子中的num1++就是先赋的值，所以console出来的结果就是他的本身，而后又进行+1的运算：num1 = num1 + 1;这个时候如果再从控制台打印的话才是运算之后的结果：11；++num2则是先经过运算：num2 = num2 + 1;所以直接打印出运算后的结果：21。下面再来一个小小的栗子：

1
2
3
4
let num1 = 10;
let num2 = 20;
console.log(num1++ + num2);
console.log(++num1 + num2);

我没有直接将结果展示出来，大家现在多考虑一下，如果刚才那个栗子真的懂了的话，这个细心的话也应该没问题，没有难度，只不过对于小白的话确实在第二个console的时候有一个小小的坑而已，第一个打印出来的很明确了就是30，下面的那个难道是31？因为第一个num1赋值后的运算加在了第二个num1的身上，到这里细心的人会发现，第二个num1又进行了一次运算，两次+1之后才赋的值，所以第二个打印出来的是32。

二、加性操作符

无论是加法还是减法都属于加性运算符，在进行运算操作的时候，难免会有一些数据类型的转换是我们需要特别注意的：

1
2
3
4
let num1 = 10;
let num2 = '10';
console.log(num1++ - num2);
console.log(num2-- + ++num1);

这两个运算是把一元操作符的递增递减操作和加性操作符的观念相结合，加性操作符中的‘+’即是一种运算也是一个字符串连接符，num1是一个数组类型的10，而num2是一个字符串类型的10，那么第一个打印出来的肯定是0了，这个没什么难度；重点看第二个，num2–虽然是先赋的值再运算，但是这个加性操作符‘-’是会转换类型的，也就是说num2–这一步把num2的字符串类型的10已经转换成了数字类型，所以第二个打印出来的是22。

三、相等操作符

相等操作符有两种，一个是相等(==)和不相等(!==)，另一个是全等(===)和不全等(!===)，默认都是返回的true。
判断相不相等的时候，操作符两侧的操作数都会进行强制转换数据类型，怎么转换？转换成哪个类型呢？有人说了难道是ASCII码？不是。。ASCII码是在玩字符比较的时候，如果两个都是字符串采用的是ASCII码的大小的比较方式；玩这个也有一套自己的规则：

  • 只需要记住不管比较谁都是先转换成数字类型的数值；
  • 如果操作数含有布尔类型：true就是1，false就是0；
  • 含有对象的：都是对象就比较两个对象的指针是不是指向同一个对象，如果是就是true，否则就是false；有一个是对象就调用对象身上的valueOf方法，使其得到基本数据类型在进行下面的操作；
  • null和undefined是相等的；
  • null和undefined都不能转换成其他类型；
  • 按照规则NaN不等于任何类型的值包括自己，如果不等于则返回true；

全等和不全等的就很简单了，不需要考虑是怎么转换的，数据类型和值都必须相等，也就是长得一模一样的呗

四、break & continue

break语句会立即退出循环强制执行循环后面的语句
continue语句是立即退出循环后接着从循环的顶部继续执行

1
2
3
4
5
6
7
8
let num = 0;
for (let i=1; i<10; i++) {
	if (i % 5 == 0) {
		break;
	}
	num++;
}
console.log(num);

如果i的值模上5余数是0的时候，就执行break语句，跳出循环，与此同时num也就停止进行运算，所以打印出的结果是4。

1
2
3
4
5
6
7
8
let num = 0;
for (let i=1; i<10; i++) {
	if (i % 5 == 0) {
		continue;
	}
	num++;
}
console.log(num);

同样的栗子，换成了continue语句，那么此时的结果必然改变，由于中间i为5的时候跳出了一次循环，等于10的时候又跳出了一次循环，所以打印出的是8。
上面只是简单的一个循环语句，下面嵌套两个循环看看结果如何：

1
2
3
4
5
6
7
8
9
10
11
let num = 0;
Iterator:
for (let i = 0; i < 10; i++) {
	for (let j = 0; j < 10; j++) {
		if (i == 5 && j == 5) {
			break Iterator;
		}
		num++;
	}
}
console.log(num);

当i刚刚等于5的时候，循环体已经执行50次了，再到j等于5的时候又循环了5次，然后跳出循环，因此打印出的结果是55。
同样的把break语句换成continue，循环55次之后，由于跳出了整个大的迭代器，所以少循环了5次，结果就是95。

五、async & defer

既然题目中含有defer，因此这个async并不是异步函数，而是H5的一个异步脚本属性；而defer是一个延迟脚本属性。

先来看看这两个属性的相同点：都是为了处理脚本的行为而存在，都只适用于外部脚本文件；不同点在于他们执行脚本的时机不同。

async：通知浏览器立即下载文件并执行，由于这个是异步脚本，如果有多个异步脚本的话，就没办法保证他们之间的加载顺序，这一过程很有可能会造成页面阻塞，DOM构建和解析的问题，页面渲染不完整，用户体验度会大打折扣，async虽然权重较低，但也在onload事件之前执行，却不能保证和DOMContentLoaded事件的执行先后顺序，所以不建议大家使用
栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="1.js" type="text/javascript" charset="utf-8" async></script>
    <script src="2.js" type="text/javascript" charset="utf-8" async></script>
    <script src="3.js" type="text/javascript" charset="utf-8" async></script>
</head>

<body>
</body>

</html>

控制台：

defer：稳定得多，即使存在多个延迟脚本，依然会按顺序执行，并且在onload和DOMContentLoaded之前执行

至于具体的浏览器的加载、解析和对DOM的构建、渲染机制和读取事件的执行时机请看浏览器的执行机制

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注；
欢迎光临个人主页

等一下( •́ .̫ •̀ )，我还有最后一句话：
我爱你，
喜欢你的人很多，
不缺我一个，
我喜欢的人很少，
除了你就没了，
再见…