项目难点知识点汇总(2)

内容总结:

• var/let/const区别
• vuex分模块调用
• filter/find/map/every/reduce讲解
• promise
• async/await

var/let/const

这应该是一个比较经典的问题了,不过还是想要搞清楚点

var和let的区别:

• var声明变量可以重复声明，重复声明后之前变量值被覆盖；而 let 不可以重复声明，重复声明会报错。
•  var声明的变量不受限于块级作用域，即 var 声明的变量是全局变量，不受当前（块级）作用域；let 声明的变量当前（块级）作用域限制，只在作用域内有效。
• let不存在变量提升：var 声明变量的代码上面可以访问变量，而 let 不可以，在 let 声明的上面访问变量会报错，这就我们说的暂存死区。
• var 会与 window 相映射（会挂一个属性），而let 不与 window 相映射。

const和let的异同:

• const 和 let 一样不会与 window 相映射、支持块级作用域、在声明的上面访问变量会报错（不能变量提升）
• const 声明之后必须赋值，否则会报错。而let可以只声明不赋值。
• const 定义常量，不可以改变他的值（即改变他的内存地址）。let定义变量。这里注意： 假如我们使用const声明了一个对象或者数组这样的引用类型,直接修改掉整个对象的值是不可以的, 但是可以修改他们的属性值,这不会使内存地址发生改变。例如const obj = {name:’yft’} 如果我们使得obj = {},那么这样就会报错，但是如果我们obj = {name: ‘Alice’}，那就没问题。

vuex分模块

在网上查了很多分模块相互调用的文章, 但是都讲的不是很清楚…所以打算自己来写。

首先来了解一下命名空间namespaced的作用: 命名空间，便于更快捷地访问内部模块。假如没有开启命名空间, 那么默认模块内部的actions/mutations等是注册在全局命名空间的, 但是如果不同的模块中有同名的属性,使用起来很可能会出错。总之，如果希望你的模块具有更高的封装度和复用性，请使用命名空间，将namespaced设置为true。

先说一下第一种情况的相互调用，即两个不同模块之间的调用。

getters跨模块获取state

注意都要开启命名空间!!!

首先先看下文件结构:

测试:

getters跨模块获取getters

在模块B中获取:

下面就不测试了吧,我都一个个试过啦。

actions跨模块获取getters

moduleA.js

moduleB.js

actions跨模块获取actions

这个和上面那个也差不多

差不多就是这样, 一般就是getters, mutations, actions跨模块获取state的数据,actions调用另一个模块的actions和mutations的方法。接下来再讲讲actions方法中的参数。

actions的第一个参数为context, 第二个参数为payload(就是简单的传递参数),其中context包含{commit, dispatch, state, rootState},所以我们可以直接解构context :

actions: {    getName({dispatch}, payload) {      dispatch('模块名/方法', ' ', { root: true })    }  }

而dispatch又包含三个参数: {mutationName, data, {root: true}}, 第一个是异步提交的mutations名,第二个就是传进来的参数,第三个是配置选项,声明不是执行当前模块。

第二种情况比较简单， 就是同一模块内的相互调用

getters调用同模块state

getters调用同模块中的getters

actions调用同模块mutations

调用actions的方法

打印一下:

顺便写一下怎么在模块中打印vuex内的数据:

打印state: {{ $store.state.m模块名.属性名 }}

打印getters: {{ $store.getters[‘模块名/属性名’] }}

在setup中调用mutations和actions:

import { useStore } from "vuex";setup(props, {emit}){    const store = useStore();    store.commit("模块名/方法名", "传递的参数");    store.dispatch("模块名/方法名", "传递的参数");}

find/filter/map/every/reduce

find(): 用于查找数组中符合条件的第一个元素，没有则返回undefined。

array.find(callback, thisArg)

filter(): filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： 不对空数组进行检测,，且不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue);

map(): 返回一个新数组，map()方法会按照原始数组元素顺序依次处理元素。

arr.map((item, index, array))// 接受三个参数,第一个参数是arr的当前一项的值，// 第二个参数当前索引值，// 第三个参数是本身数组对象。

every()：用来检测数组所有元素是否满足指定条件。如果有一个不满足则返回false，剩下的不再检测。反之则返回true。

array.every(callback[, thisObject]);

reduce()：方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。这个用的场景比较多

语法：

array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)

其中total为初始值或者计算后的返回值（必须）在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。currentValue为当前元素（必须）、currentIndex为当前元素索引（可选）、arr为当前元素所属的对象（可选）、initialValue为传递给函数的初始值。

promise

promise这个东西吧，用的话还行，但是还是一知半解吧

一、为什么使用Promise?

我们知道 js 执行的时候，一次只能执行一个任务，它会阻塞其他任务。由于这个缺陷导致 js 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以使用回调函数执行。

promise是一个对异步操作进行封装并返回其结果的构造函数.

使用

promise的参数是一个函数，函数里有两个参数，这两个参数也是函数。resolve和reject这两个参数都是函数，名字随意。resolve是成功时的回调，reject是失败时的回调

  const a = new Promise((resolve, reject) => {    if(xxx) {      resolve('如果执行成功时返回的信息')    }    else {      reject('执行失败时返回的信息')    }  })

new Promise中的函数是同步函数promise共有三种状态，pending,fulfilled,rejected状态只能从pending变为fulfilled状态，成功状态。
或者从pending变为rejected状态，失败状态。promise只有这两种转变状态，是转变状态哈。再无其他状态。
而一旦转变状态确定，就不可更改。
例如：pending转变到fulfilled，状态就确定了，只能是fulfilled状态；如果想转成rejected状态，是不能转的。
Promise 实例化时，传入的回调会立即执行，而Promise 的 then 回调会被放到微任务队列中，等待执行。

接收结果

res函数和rej函数返回的数据，用then函数。来接收结果
then函数里的参数是两个异步回调函数，是异步的，第一次参数函数用于接收res返回来的数据，第二个参数函数用于接收rej返回的数据。

then的第一个参数函数里的形参用来接收res返回的数据。

const a = new Promise((resolve, reject) => {      if (xxx) {        resolve("成功时返回的信息");      } else {        reject("失败时返回的信息");      }    }).then(      (res) => {      //接收resolve返回来的结果, 即"成功时返回的信息"        console.log(res);      },      (err) => {      // 接收reject返回来的结果, 即"失败时返回的信息"        console.log(err);      }    );

Promise.catch

执行 reject 时，Promise 状态从 pending 变为 rejected，会执行 catch 方法，catch 方法接收的也是一个函数，函数中携带一个参数，该参数为 reject(err) 返回的数据。

    const a = new Promise((resolve, reject) => {      if (xxx) {        resolve("如果执行成功时返回的信息");      } else {        reject("执行失败时返回的信息");      }    })      .then((res) => {        console.log(res);      })      .catch((err) => {        console.log(err);      });

这时候就有一个疑问了, 在then中的err获取到的错误和catch有什么区别呢?

首先reject 是用来抛出异常的，catch 才是用来处理异常的。类比传统的 try catch 写法，reject 就相当于 throw。

其次：reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

async / awaitasync 和 await 在干什么任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

async

async 是“异步”的简写， async 用于声明一个异步的 function。

async是一个加在异步函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。async声明的函数的返回本质是一个Promise。

await

await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），

且取到值后语句才会往下执行；如果不是Promise对象：把这个非promise的东西当作await表达式的结果。

 const startRoll = () => {      return new Promise((resolve, reject) => {        console.log("这一行会自动立即执行");        let num = 100;        setTimeout(() => {          resolve((num += 100));        }, 2000);      });    };    // 用async来说明这个函数是特殊的    async function getNum() {      const result = await startRoll();      console.log(`点数为${result}`);          }    getNum();

在这个代码中还需要注意的是，getNum(n)得到的结果会返回给 const result = await startRoll();里面的result 。在const result = await startRoll();这行代码中，等号左边和等号右边是分离的。右边是1秒之前执行的，左边赋值1s之后执行的，等号两边不是在同一时间执行的，左边要等右边执行完再执行。所以getNum函数也是要等1s才执行的，所以getNum函数是异步的，所以function前面必须加一个async，表示它的特殊性，让引擎对它进行特殊处理，如果不标记，则报错。