by caix in 深圳
1、标识符及变量
标识符
1、所谓标识符，就是变量、函数、属性的名字，或者函数的参数。
标识符申明规则:
1、第一个字符必须是一个字母、下划线 _ 、或者一个美元符号 $;
2、其他字符可以是字符串、下划线美元符或者数字；
3、区分大小写
变量
变量是存储数据的容器
JavaScript变量是松散类型的，所谓松散类型就是可以用来保存任何数据类型的数据。
变量申明方法
1、ES5 有两种申明变量的方法: var 和 function
2、ES6 有 6 种 申明变量的方法: var 、function 、 let 、 const 、 import 、 class
2、语句
条件语句
1、if{}else{} 、 if{}else if{}else{}
2、switch(type){ case: 0: '' ; break;}
3、三目运算 a === 0 ? '' : ''
循环语句
1、for(let i = 0; i < arr.length; i++){}
2、do { do you code } while(condition)
3、while(condition){ do you code }
do while 中的语句至少会循环一次；
while 只要 condition 不满足的话就不会执行内部语句；
do while 先执行一次，再判断要不要再执行；
while 先判断再执行
4、for in
遍历对象返回对象的 key 值;
遍历数据返回数组的下标。
for in 可以 与 break、continue、return配合，该循环可以随时退出循环。
5、for of
一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以使用 for of 循环。
for of 用来获取一对键值对中的值。
for of 可以 与 break、continue、return配合，该循环可以随时退出循环。
注意: 普通对象没有 Symbol.iterator 属性
常见有 iterator 接口的数据结构有:
Array
Map
Set
String
arguments 对象
Nodelist 对象 （ dom 列表集合 ）
6、递归
退出循环语句
1、break 语句
break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个 switch 语句
2、continue 语句
continue 立即退出当前循环，但它不是退出循环，而是开始循环的一次新迭代
continue 语句只能用在 while 语句、do while 语句、for 语句、或者 for in 语句的循环体内
3、return 语句
renturn 语句就是用于指定函数返回值
return 语句只能出现在函数体内，出现在代码中的其他任何地方会造成语法错误
输出语句
1、alert()
2、console.log()
3、document.write('123')
4、prompt('请输入内容')
弹框输入内容
捕获异常语句
1、try {}catch(e) {发生异常执行} finally{最后都会执行}
2、try { throw '抛出异常'} catch() {}
3、throw ‘抛出异常’
能被 try catch 捕获的异常，必须是在报错的时候，线程执行已经进入 try catch 代码块，且处在 try catch 里面，这个时候才能被捕捉到。
3、操作符 [ 运算符 ]
操作符可以根据他们期待的操作符个数来分类，多数的JavaScript操作符都是二元操作符，二元操作符可以将两个表达式合成一个更复杂的表达式。
JavaScript也支持一元操作符，这些操作符可以将一个表达式转化为另一个更复杂的表达式。
JavaScript中也有一个三元操作符，就是条件操作符（?:），它用于将三个表达式组成一个表达式
一元操作符
特点:
最简单的操作符，用来操作一个表达式；
具有高优先级和右结合性；
在必要时将操作数自动转化为数值。
分类:
1、递增或递减操作符 ( ++ -- )
前置递增 ++i 后置递增 i++
前置递减 --i 后置递减 i--
注意:
前缀版（++i）：操作符位于变量的前面，表示先递增(递减)，后执行语句；
后缀版（i++）：操作符位于变量的后面，表示先执行语句，后递增(递减)；
这四个操作符可以作用于任何类型的数据。对于这些类型，JavaScript会将他们转化为数值，再在这个数值上进行加一或减一操作。
如果不能转化为一个数字，那么递增或递减的结果就是 NaN
2、加和减操作符
一元加运算符 （ + ）
一元减运算符 （ - ）
let a = -1; let b = "hello"; let c = BigInt;
console.log(+a) // -1 console.log(+b) // NaN console.log(+c) // NaN
注意:
一元加和减操作符主要用于基本的算术运算，也可以用于数据类型的转换，将不同类型的数据转化为数字类型，像Number()方法一样。
位操作符
......
加减乘除操作符
1、加法操作符 （ + ）
如果两个操作数都是数值或者都是字符串，那么执行结果就分别是计算出来的数值和拼接好的字符串。
加法操作符会优先进行字符串拼接，只要操作数是字符串或者是可以转化为字符串的对象，另一个操作数也会被转化为字符串，并执行拼接操作。
只有任何操作数都不是字符串时才会执行加法操作。
1 + 2 => 3
'1' + 2 => 12
1 + null => 1
[] + {} => '[object Object]'
{} + [] => 0
undefined + {} => 'undefined[object Object]'
null + {} => 'null[object Object]'
2、减法操作符 （ - ）
减法操作符只能用于数值的计算，不能用于字符串的拼接。
当进行减法操作时，如果两个操作数都是数值，就会直接进行减法操作。
如果有一个操作数是非数值，就会将其转化为数值，再进行减法操作。
如果转化结果为NaN，则运算结果也是NaN。
3 - true => 2
3 - "" => 3
3 - null => 3
3、乘法操作符 （ * ）
乘法操作符用于计算两个数的乘积。
如果两个操作数都是数值，则会执行常规的乘法运算。
如果不是数值，会将其转化为数值，在进行乘法操作。
4、除法操作符 （ / ）
除法操作符用于计算一个操作数除以第二个操作数的商。
如果两个操作数都是数值，则会执行常规的除法运算。
如果不是数值，会将其转化为数值，在进行除法操作。
取余操作符 （ % ）
取余操作符用于计算一个数除以第二个数的余数
10 % 3 => 1 5 % 3 => 2
指数操作符 （ ** ）
在ECMAScript 7中新增了指数操作符（**）
它的计算效果是Math.pow()是一样的
Math.pow(2,10) => 1024
2 ** 10 => 1024
逻辑操作符
1、逻辑非操作符 （ ！）
2、逻辑与操作符 （ && ）
逻辑与操作符是一种短路操作符，
只要第一个操作数为false，就不会继续执行运算符后面的表达式，直接返回false。
if(data) {
setData(data);
}
改写后:
data && setData(data);
这里当data为真时，也就是存在时，才会执行setData方法，代码就精简了很多。
3、逻辑或操作符 （ || ）
逻辑或操作符也是具有短路特性
如果第一个操作数为真，那么第二个操作数就不需要在进行判断了，会直接返回true
可以利用这个特性给变量设置默认值:
let datas = data || {};
如果data不存在，就会将datas赋值为第二个操作数（默认值）
比较操作符
1、相等操作符
等于（==）
不等于（!=）
全等（===）
不全等（!==）
注意:
如果其中一个操作数是NaN，相等运算符会返回false，不相等运算符会返回true。
2、关系操作符
小于（<）
大于（>）
小于等于（<=）
大于等于（>=）
注意:
如果这两个操作数都是数值，则执行数值比较；
如果两个操作数都是字符串，则比较两个字符串对应的字符编码值；
如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较；
如果一个操作数是对象，则调用这个对象的valueOf()或toString()方法，并用得到的结果根据前面的规则执行比较；
{} == {} => false
[] == [] => false
[] == ! [] -> [] == false -> [] == 0 -> '' == 0 -> 0 == 0 -> true
{} == ! {} -> {} == false -> {} == 0 -> NaN == 0 -> false
如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较。
扩展操作符 ( ... )
1、展开数组
const a = [1,2,3]
const c = [...a,4,5] => [1,2,3,4,5]
2、展开对象
const obj1 = {a:1,b:2}
const obj2 = {c:3,d:4}
const obj3 = {...obj1,...obj2} => {a:1,b:2,c:3,d:4}
3、展开字符串
const str = “caix”
const name = [...str] => ['c','a','i','x']
4、将类数组对象转为数组
const list = document.getElementsByTagName('a')
const arr = [...list];
5、用于函数传参
const f = (a,b) => {}
const a = [1,2]
f(...a)
6、用于具有 iterator 接口的对象
const s = new Set();
s.add(1);
s.add(2);
const arr = [...s] // [1,2]
如果是map，会把每个key 和 value 转成一个数组:
const m = new Map();
m.set(1,1)
m.set(2,2)
const arr = [...m] => [[1,1],[2,2]]
条件操作符 （ ?: ）
这里的条件运算符实际上就是我们常说的三元表达式
let res = num1 > num2 ? num1 : num2;
这里，将num1和num2中的最大值赋值给了res
赋值操作符
其实赋值操作符有很多种，包括简单的赋值操作符（=），以及一些复合赋值操作符
乘赋值操作符：*=
除赋值操作符：/=
模赋值操作符：%=
加赋值操作符：+=
减赋值操作符：-=
这些仅仅是他们对应的简写形式，并不会产生其他影响。
in 操作符 （ in ）
in 操作符可以用来判断一个属性是否属于一个对象:
它的返回值是一个布尔值
const author = {
name: "CUGGZ",
age: 18
}
"height" in author; => false
"age" in author; => true
in 操作符 还可以用来判断一个属性是否属于对象原型链的一部分:
它的返回值是一个布尔值
let arr = ["hello", "jue", "jin"];
"length" in arr; => true
delete 操作符 （ delete ）
const a = { x: 10 };
delete a.x
console.log(a.x) => undefined
delete 操作符用于删除对象的某个属性或者数组元素。
对于引用类型的值，它也是删除对象属性的本身，不会删除属性指向的对象。
原型中声明的属性和对象自带的属性无法被删除。
通过var声明的变量和通过function声明的函数拥有dontdelete特性，是不能被删除。
instanceof 操作符
instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上。
instanceof只能正确判断引用数据类型，而不能判断基本数据类型。
instanceof运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
console.log(2 instanceof Number); => false
console.log(true instanceof Boolean); => false
console.log('str' instanceof String); => false
console.log([] instanceof Array); => true
console.log(function(){} instanceof Function); => true
console.log({} instanceof Object); => true
空值合并操作符 （ ?? ）
如果某个属性不为 null 和 undefined，那么就获取该属性
如果该属性为 null 或 undefined，则取一个默认值
常规写法:
const name = dogName ? dogName : 'default';
const name = dogName || 'default'; // 简写
存在一定的缺陷，当 dogName 为 0 或 false 的时候也会走到 default 的逻辑。
所以 ES2020 引入了 ?? 运算符。
只有 ?? 左边为 null 或 undefined时才返回右边的值:
const dogName = false;
const name = dogName ?? 'default';
=> name = false;
可选链操作符 （ ?. ）
在开发过程中，我们可能需要获取深层次属性，例如
system.user.addr.province.name。
但在获取 name 这个属性前需要一步步的判断前面的属性是否存在，否则并会报错。
ES2020 引入了「可选链操作符」?.
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值
而不必明确验证链中的每个引用是否有效。
const name = system?.user?.addr?.province?.name || 'default';
可选链有以下三种形式:
a?.[x] 等同于
a == null ? undefined : a[x]
a?.b() 等同于
a == null ? undefined : a.b()
a?.() 等同于
a == null ? undefined : a()
逗号操作符 （ , ）
当同时声明多个变量时会用到
let a = 1, b = 2, c = 3;
有多个循环变量的 for 循环中:
for (let i = 0, j = 10; i < j; i++, j--){
console.log(i + j)
}
void操作符 （ void ）
void 是一元运算符
它可以出现在任意类型的操作数之前执行操作数
会忽略操作数的返回值，返回一个 undefined
void 常用于 HTML 脚本中执行 JavaScript 表达式
比如对于链接标签，我们并不想让它发生跳转，就可以设置 href="javascript:void(0)。
let a = 3; let e = void (a + 5);
console.log(e) => undefined
type 操作符
.... 参数 第一篇 数据类型