React18学习笔记 第一篇：重要的js知识

Part1 重构

分为对对象的重构和对数组的重构

·对对象的重构：

对对象的重构依赖于属性名称，从对象中抽取所需要的属性

例如：

const title=book.title;

const author=book.author;

重构后变成const {title,author}=book;

·对数组的重构：

对数组的重构依赖于数组中元素的顺序

例如：

const title=book[0];

const author=book[1];

重构后变成const [title,author]=book;

---

Part2 rest和spread操作符（...）

·rest操作符:

注意：只能在重构操作最后使用！！

我们假设有一个数组为[1,2,3,4]，假设primaryGenre，secondGenre的值分别为1、2，则...otherGenres代表数组中其余的流派，例如：

const [primaryGenre,secondGenre,...otherGenres]=genres;

console.log(primaryGenre,secondGenre,otherGenres);

//1 2 [3,4]

·spread操作符:

可以给数组新增一个值，例如：

const newGenres=[5,...genres];

console.log(newGenres);

//[5,1,2,3,4]

注意：如果是const newGenres=[5,genres]; 那么结果为[5,[1,2,3,4]]

·在函数中的相关操作

假设有对象object=｛one:"1",tow:"2",three:"3"｝

const updatedObject={

    ...object, //把object原来的属性全部复制到updateObject中

    four:"4", //新添了一个属性在updateObject中

    three:5 //更改了object中的属性three的值

}

---

Part3 三元运算符

格式：a ？b ：c

翻译为判断a（问号前面）的真值，如果a为真，则b取b，如果a不真，则取c

---

Part4 模板字面

模板字面是ES6 JavaScript的一个特性，允许我们非常容易地创建包含一些JavaScript变量的字符串，或者在字符串中包含任何JavaScript表达式的字符串

格式：`${可变量}`

---

Part5 对象方法this

作为对象属性的函数被称为方法，this的作用就是调用该方法的对象

例如：

let user = { 

    name: "John", 

    age: 30, 

    sayHi() { 

    // "this" 指的是“当前的对象” user

        alert(this.name);

    }

 }; 

user.sayHi(); // John

注意：箭头函数没有自己的this！

---

Part6 箭头函数

·不带花括号

（...args）=＞expression 

右边是一个表达式，如果只有一个参数，括号也可以省略

·带花括号

（...args）=＞{body} 

右边花括号允许我们在函数中编写多个语句，但是我们需要显式地return来返回一些内容

---

Patr7 逻辑运算符的短路原理

·a && b

当a为真时，返回b；如果a为假，则返回a

·a || b

当a为真，则返回a；如果a为假，则返回b

---

Part8 可选链（?.）

·obj ?. prop

如果obj存在则返回obj.prop，否则返回undefined

·obj ?. [prop]

如果obj存在则返回obj[prop]，否则返回undefined

·obj.method ?. ()

如果obj.method存在则调用obj.method()，否则返回undefined

---

Part9 三种功能性数组方法

·map

在数组中，这是一个针对数组中每个元素都会调用的函数

例如：

const x=[1,2,3,4,5].map((el)=>el*2);

console.log(x);   //[2,4,6,8,10]

·filter

该方法用于过滤数组，这个过滤器会返回一个新数组，满足条件的元素会保留

例如：

const x=[1,2,3,4,5].filter((el)=>el>3);

console.log(x);   //[4,5]

·reduce

在JavaScript的所有数组方法中，reduce方法是用途最广、功能最强大的

reduce的目的基本上是将整个数组减少到一个值，它接受两个参数，第一个参数是一个函数，第二个参数是一个起始值（具体用法可以参考数字累加的例子）

---

Part10 数组的排序方法

该方法本质上是JavaScript对数组进行遍历，然后调用括号内的函数，例如：

const sorted=arr.sort((a,b)=>a-b);

此处的a和b始终是当前值和下一个值，所以当a减b时，将以升序方式排序，当b减a时，将以降序方式排序。但是，sort方法会改变原来数组的数据，这时候就可以用如下方法，可以返回一个新的数组，避免原数组的改变：

const sorted=arr.slice().sort((a,b)=>a-b);

---

Part11 Promise

在前端编程中，promise通常被用于网络请求

Promise对象的constructor语法如下：

let promise=new Promise(function(resolve,reject){

     //executor(生产者代码)

});

executor会自动运行并尝试执行一项工作，尝试结束后，如果成功则调用resolve，如果出现error则调用reject。

resolve(value) ——如果任务成功完成并带有结果value

reject(error) ——如果出现了error，error即为error对象

由new Promise构造器返回的promise对象具有一下内部属性：

state 初始值是“pending”，然后在resolve被调用时变成“fulfilled”，在reject被调用时变为“rejected”

result 初始值是“undefined”，然后在resolve被调用时变成value，在reject被调用时变成error

注意：一个executor只能调用一个resolve或一个reject，所有其他的再对resolve和reject的调用都会被忽略！

例如：

let promise = new Promise(function(resolve, reject) { 

    resolve("done"); 

    reject(new Error("…")); // 被忽略 

    setTimeout(() => resolve("…")); // 被忽略 

});

关于then，语法如下：

promise.then(

  function(result) { /* handle a successful result */ },

  function(error) { /* handle an error */ }

);

.then 的第一个参数是一个函数，该函数将在 promise resolved(即在executor调用resolve)且接收到结果后执行。

.then 的第二个参数也是一个函数，该函数将在 promise rejected(即在executor调用reject)且接收到 error 信息后执行。

关于.catch，如果只对error感兴趣，便可以使用catch

例如：

let promise = new Promise((resolve, reject) => { 

    setTimeout(() => reject(new Error("Whoops!")), 1000); 

}); 

promise.catch(alert); // 1 秒后显示 "Error: Whoops!"

---

Part12 async/await

async/await是以更舒适的方式使用promise的一种特殊语法

·async

它一般被放在一个函数前面，使这个函数总是返回一个promise

例如：

async function f() { 

    return 1; 

} 

f().then(alert); // 1

·await

它只在async函数内工作，它会暂停函数的执行，直到promise状态变为settled，然后以promise的结果继续执行。

例如：

async function f() { 

    let promise = new Promise((resolve, reject) => { 

        setTimeout(() => resolve("done!"), 1000) 

    }); 

    let result = await promise; // 等待，直到 promise resolve

    alert(result); // "done!" 

}