2022秋招-前端学习记录2-JS的运算符

JS的运算符（并不全，待补充中…）

① …运算符

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax
特别好用！！！用它！！！
比如：

function myFun(a,b,c){######}
var arr = [1,2,3]
myFun(...arr) // 效果和myFun(1,2,3)一样的

var arr1 = [0,1,2];
var arr2 = [3,4,5];
var arr3 = [...arr1, ...arr2] // [0,1,2,3,4,5] 效果和arr1.concat(arr2)一样的

var obj1 = {a: 'a111', b: 11}
var obj2 = {a: 'a222', c: 34}
var obj3 = {...obj1, ...obj2} //{a:'a222',b:11,c:34} 后面的a覆盖掉了前面的a

函数的参数里的 arguments
也可以很方便转为正常数组。

function fun(){
	let arr = [...arguments]
	console.log(arr[1])
}
fun(2,3,4); // 3

 
 

② typeof运算符

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof
typeof对某对象/数据进行类型判断。
常见的输出结果一共8种(快捷记忆：nfusbsbo)：
number、function、undefined、string、boolean、symbol、bigint、object
注意：typeof无法检查 Array、Set、Map、Date、WeakMap、WeakSet，这些统统都是"object"

// 此处省略console.log(xxx)
typeof 12; // "number"
typeof NaN; // "number"
function fun01(){}; typeof fun01; //"function"
typeof a; // "undefined"
typeof ''; // "string" 
typeof true; // "boolean"
typeof Symbol(); // "symbol"
typeof 12n; // "bigint" 近几年才新出的特性，表示很大很大的数
typeof null;//"object"
typeof {};//"object"
typeof [];//"object" 无法判断数组

③ in 运算符

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in

prop in object
左边为一个对象的属性，右边必须为一个对象
作用是 如果左边的属性在右边的对象里或对象的原型链里，那么返回true

const obj = {a:1,b:2,c:3};
console.log('b' in obj); // true  注意是'b' in obj; 而不是 b in obj。
delete obj.b; // 删掉以后，就没了，下面的显示false
console.log('b' in obj); // false
// in不能检测到第二层的属性，只能测到一层
const obj2 = {a:1,aa:{b:2},c:3};
console.log('b' in obj2); // false

// 数组也可以，左边的就是索引号
const arr = ['','','',undefined,''];
console.log(0 in arr); // true
console.log(3 in arr); // true 其值为undefined也是true
console.log(9 in arr); // false
delete arr[3]; // 给删掉之后，就找不到了
console.log(3 in arr); // false

其他的一些使用例子：

// 此处省略console.log(xxx)
'PI' in Math; // true
let str = new String('strrrrr');
'toString' in str; // true
//上面的用了new的是字符串对象，下面的直接写字符串就不是对象，所以会报错的
let str2 = 'teriri';
'toString' in str2; // Cannot use 'in' operator to search for 'toString' in teriri

④ async和await 运算符

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function

async和await一起用就是为了替代promise的then.then.then。
那为什么要这么用？就要从js是单线程的语言讲起，所以代码跑起来很容易被阻塞，也没办法，只能等着。所以js有了一个多线程的概念：一些重要的步骤的确都要在主线程这个单线程里运行，但是加载文件什么的耗时间的事情，可以分给别的线程来做，就不用堵着主线程了，因此有了异步的概念。
主线程里的代码是从上到下顺序执行的，遇到异步代码，就会丢进分支线程里运行，主线程继续运行，而主线程里同时有多个异步的时候，主线程里普通地这么从上到下排列代码是无法控制异步结果顺序的，一般就是哪个异步先跑完哪个就出结果了。那万一这些异步之间也有顺序呢，必须这个异步跑完出了某个结果后才能再跑下一个异步呢？
所以，用异步套着异步就能解决异步的顺序执行问题，就像下面的代码：

const fs = require('fs')

// 2. 调用方法读取文件，原生的，回调地狱！
fs.readFile('./resources/为学.md', (err, data1)=>{
    fs.readFile('./resources/插秧诗.md', (err, data2)=>{
        fs.readFile('./resources/观书有感.md', (err, data3)=>{
            let result = `${data1}\r\n${data2}\r\n${data3}`
            console.log(result)
        })
    })
})

结果如图：

可以把这三首诗按顺序去读取出来。
但是这样的代码 会产生回调地狱以及代码可读性很差的弊端。
因此，引入了promise和 async和await的概念，为了把异步的代码写得像同步的顺序执行那样。

// 引入 fs模块 
const fs = require('fs')

// 调用fs模块来读取文件
function readword(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, (err, data1)=>{
            if(err) reject(err)
            resolve(data1)
        })
    })
}
// 声明一个 async 函数
async function main() {
    let weixue = await readword('./resources/为学.md')  
    // 这里用await是为了顺序地去执行这几个读文件的操作，
    // 规定读完了为学的数据后 才能去读取插秧诗的数据。
    let chayang = await readword('./resources/插秧诗.md')
    let guanshu = await readword('./resources/观书有感.md')

    console.log(weixue.toString())  
    // 不用toString的话会输出字节流<Buffer 20 20 20 e4 b8 ba e5 ad a6......这种
    console.log(chayang.toString())
    console.log(guanshu.toString())

}
main()

结果如下：

 
 
注意点：
加了async的function，返回值一定是一个 Promise对象，如果return一个非Promise类型的数据，也会隐式得给包一层promise再返回：

async function foo() {
   return 'okkkk'
   // return function(a,b){return a+b} // 结果详见下面的图片
}
console.log(foo()) // Promise {<fulfilled>: "okkkk"}

return function的结果图片：

当然，直接返回Promise，就不给包了，是啥返啥：

async function foo() {
   return new Promise((resolve, reject) => {
       resolve('OK'); // Promise {<fulfilled>: "OK"}
       //reject('Error'); // Promise {<rejected>: "Error"} 同时控制台报错
   });
}
console.log(foo()) // 结果见上面几行的注释

 
 
注意点：
await用法：[返回值] = await 表达式;
await表达式会暂停当前的async function的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。
另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

await后面的表达式，如果返回是Promise，会被隐式地解析，如果是非Promise，就直接输出。
比如：

async function foo() {
   let a = await new Promise(resolve => {
	   setTimeout(() => {
	     resolve('teriri okk');
	   }, 0);
   });
   console.log(a); // 下面foo()运行以后 控制台输出的是 'teriri okk'，说明a被赋值的是await解析promise的值
}
foo()

async function foo() {
   let a = await 'okk'
   console.log(a) // 下面foo()运行以后 控制台输出的是 'okk'
}
foo()