【面试题】查漏补缺散记_pinia面试题

1.讲讲闭包以及在项目中的使用场景

闭包可以理解为定义在一个函数内部的函数

它可以实现变量私有化但同时容易造成内存泄漏

使用场景主要有返回值、函数赋值、自执行函数、迭代器等等

例子：项目里面某个按钮计时器：发送短信验证码，会先定义一个变量timer
然后在设定时器

 const _this = this;
          let timer = setInterval(function() {
            if (_this.timerParams.timer > 0) {
              _this.timerParams.timer--;
            } else {
              _this.timerParams.showTimer = false;
              _this.timerParams.timer = 60;
              clearInterval(timer);
            }
          }, 1000)
1
2
3
4
5
6
7
8
9
10

2.谈谈Promise.all方法，Promise.race方法以及使用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。（Promise.all
方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。）

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Promise.all可以比作接力跑，必须都成功才能胜利
Promise.race可以比作短跑，谁跑的快睡就胜利

使用场景

在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

1
2
3
4
5
6
7
8
9
10
11

Promise.race则是在拼手速抢东西就可用到

3.谈谈依赖注入provide和inject

• 成对出现：provide和inject是成对出现的

• 作用：用于父组件向子孙组件传递数据

• 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

• 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

• provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据

4.说说Vuex

小项目没啥好用
大项目才用起来,大项目分module这样更方便

vue3后期会替换成pinia

5.JSON.stringify妙用

在日常编程中，我们经常 JSON.stringify 方法将某个对象转换成 JSON 字符串形式。

1.正常使用

const stu = {
    name: 'akacoder',
    age: 18
}

// {"name":"akacoder","age":18}
console.log(JSON.stringify(stu));
1
2
3
4
5
6
7

2.localStorage

localStorage 对象用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。通常我们以对象形式进行存储。

1.单纯调用 localStorage 对象方法

const obj = {
  name: 'akacoder',
  age: 18
}
// 单纯调用 localStorage.setItem()

localStorage.setItem('zc', obj);

// 最终返回结果是 [object Object]
// 可见单纯调用localStorage是失败的
console.log(localStorage.getItem('zc'))

1
2
3
4
5
6
7
8
9
10
11
12

2.localStorage 配合 JSON.stringify 方法

localStorage.setItem('zc', JSON.stringify(obj));

// 最终返回结果是 {name: 'akacoder', age: 18}
console.log(JSON.parse(localStorage.getItem('zc')))
1
2
3
4

3 .属性过滤

来假设这样一个场景，后端返回了一个很长的对象，对象里面属性很多，而我们只需要其中几个属性，并且这几个属性我们要存储到
localStorage 中。

• 方案一: 解构赋值+ stringify

// 我们只需要 a,e,f 属性
const obj = {
  a:1, b:2, c:3, d:4, e:5, f:6, g:7
}
// 解构赋值
const {a,e,f} = obj;
// 存储到localStorage
localStorage.setItem('zc', JSON.stringify({a,e,f}))
// {"a":1,"e":5,"f":6}
console.log(localStorage.getItem('zc'))
1
2
3
4
5
6
7
8
9
10

6、三的倍数

// 1.如果 n 是3的倍数，输出“Fizz”； // 2.如果 n 是5的倍数，输出“Buzz”； // 3.如果 n
同时是3和5的倍数，输出“FizzBuzz”。

function test(n) {
 for (let i = 1; i <= n; i++) {
  if (i % 3 === 0 && i % 5 === 0) console.log("FizzBuzz"); 
  else if (i % 3 === 0 ) console.log("Fizz");
  else if (i % 5 === 0)  console.log("Buzz");
  else console.log(i);
 }
}
console.log(test(15));
1
2
3
4
5
6
7
8
9

输出