工作问题记录总结2021--2

1

问题：当时遇到的问题是，一个帖子下面的评论，控制评论是否需要进行展示？

解决方法：

在需要进行控制的地方，采用ref绑定index的方式进行控制

1 在循环列表中，循环的地方加index，并绑定ref

v-for="(i,index) in commentList"

:ref="index"

2 需要控制的地方，如按钮，

@click="showNav(index,i.id)"

3 主体函数，其中4是可变的，需要自己进行测试

showNav(index, id) {

if (this.$refs[index][0].childNodes[4].style.display === "none") {

this.$refs[index][0].childNodes[4].style.display = "block";

} else if (this.$refs[index][0].childNodes[4].style.display === "block") {

this.$refs[index][0].childNodes[4].style.display = "none";

}

},

2

问题：当遇到不同场景值，需要后台根据不同的值，进行对应的处理时。怎样进行处理？

解决方法

1 可以使用switch case 进行判断处理，需要注意的是，switch判断值是 === ，需要值和类型都相等

switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 }

2 如果要使用 if 进行判断，可以对后台返回的值进行修改，已达到相关目的

3 可以写一个方法，对后端的值进行整合判断。通过返回不同的值，处理不同的事

3

问题：怎么在数组中删除指定的值？

解决方法：

方法1：

remove(arr,val){

let index = arr.indexOf(val);

if (index > -1){

arr.splice(index, 1);

}

}

使用

this.remove(this.photoList,rmData);

this.photoList是数组，

rmData是需要删除的字符串

方法2 利用数组的filter方法--过滤

数组的filter方法处理数组内对象元素时，会改变原数组

一个

var value = 3 var arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(function(item) { return item !== value }) console.log(arr) // [ 1, 2, 4, 5 ]

多个

let forDeletion = [2, 3, 5] let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => !forDeletion.includes(item)) // !!! Read below about array.includes(...) support !!! console.log(arr) // [ 1, 4 ]

4

问题：怎么使用 async/await 来处理异步，使异步变同步？

解决方法：

1 在需要进行异步处理的函数中，先用async声明，如

 

2 在第一个执行函数中，返回一个promise对象，如下图

 

3 在程序执行成功后，定义一个resolve。表示这个是成功的

4 如果 this.getUseCollectList();

要接收返回值。可以在resolve（）的括号中定义

5

问题：js 怎么控制浏览器进行刷新？

解决方法：

location.reload()

6

问题：布局中，怎么使用css实现自适应高度?

解决方法：

height: calc(100vh - 465px);

记得calc前面有空格

7

问题：怎么出现滚动条？

解决方法

overflow:auto;

height:calc(100vh - 420px);

8

问题：怎么设置文字显示省略号？

解决方法？

.list-content-text{

width: 220px; //需要加宽度

overflow: hidden;

white-space: nowrap; /*当子元素超过父元素宽度的时候，不会折行*/

text-overflow: ellipsis;

}

9

问题：beforeMount 和 mounted 的区别是什么？

beforeMount 和 mounted 的区别是，beforeMount的el没有DOM，而mounted是已经渲染DOM了

10

问题：怎么使用SCSS ？

1 在styles下定义一个variables.scss文件

定义一个变量，使用 $符号 如

$blue:#324157;

使用变量的方式为：

color:$blue

2 在需要引入的vue 中，通过@import 进行引入，如

@import '../../../../../styles/variables.scss';

要点，后面跟的是路径。记得加分号加分号加分号

11

问题: vue的props怎么接收对象?

解决方法

props: {

pro: {

type: Object,

default() {

return {}

}

}

},

12

问题：js怎么保留2微信小数？

使用toFixed 方法

var num =2.446242342;

num = num.toFixed(2); // 输出结果为 2.45

13

问题： this.$route 和 this.$router 有什么区别？

this.$route 信息参数（query、prams）传参获取 this.$router 功能函数，go()，push()等方法调用

14

问题：在vue如果新开一个页面？

解决方法：

在vue中使用 this.$router.push（{ path:  '/home' }） 默认是替代本窗口

如果想新开一个窗口，可以使用下面的方式：

let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } }); window.open(routeData.href, '_blank');

15

问题：vue中bus的使用？

解决方法：

1 新建Bus.js

Bus.js

import Vue from 'vue' const Bus = new Vue() export default Bus

触发

import Bus from './Bus' （./Bus是具体js所在的位置）

Bus.$emit('log', 120)

接收

import Bus from './Bus' （./Bus是具体js所在的位置）

mounted () { Bus.$on('log', content => { console.log(content) }); }

注意点：记得方法名要保持一致，content 就是120，传过来的参数

16

问题：检测数据类型有哪些方法？

1 typeof ，如 typeof 1 ，返回number

局限性：

typeof可以用于检测基本类型，但碰到引用类型均返回为object。

2 instanceof， 如 "1" instanceof String ,返回false

局限性：

instanceof可以用于引用类型的检测，但对于基本类型是不生效的，另外，不能用于检测null和undefined。

3 constructor ，如 ("1").constructor === String ，返回true

局限性：

撇去null和undefined，似乎说constructor能用于检测js的基本类型和引用类型。但当涉及到原型和继承的时候，便出现了问题

4 Object.prototype.toString.call() ， 如 Object.prototype.toString.call("eee")，返回 [object String]

不存在局限性

Object.prototype.toString.call()可用于检测js所有的数据类型。

17

问题：num++ 和 ++num 的区别？

只有参与运算才有区别，什么叫参与运算，如 num++ + 8 这样的表达式就参与了运算

在表达式中，如果num++参与运算，num是先参与运算，后++，参与运算后，num再自动加1

在表达式中，如果++num参与运算，num是先++,后参与运算，记住

18

问题：JS删除String里某个字符的方法

解决方法：

var str = "abcdaabbssaaa";

var reg = new RegExp("a","g");

var a = str.replace(reg,"");

console.log(a)

还有一种比较取巧的方法，就是分割成数组，再重新拼接成新的字符串。

var str = "abcdaabbssaaa";

var a = str.split("a").join("");

console.log(a);

19

问题： 对map方法的理解

数组map（fn）方法，参数 fn 为函数

 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

 

20

问题：new Date()在IOS中的坑

第一次遇到，记录一下

要创建一个指定时间的new Date对象时，通常的做法是：

new Date("2018-04-27 11:11");然后就可以根据这个获取年月日等信息

这种格式在chrome,firefox,Android中都没有问题。。。。。。但是，但是，但是在IOS中就出问题了，该对象返回的是valid Date??????为什么会返回这个值，这不是有效的意思吗。。。。

结果发现。。。在IOS中，new Date中指定的字符串还有格式。。。

new Date("2018/04/27 11:11")，这样才能正确返回结果。。。。。。。。。。。

Safari和IE没有测试过，不知道是否也会出现这种问题，如果有类似情况出现，那么可以用下面的方法来解决

var obj=new Date("2018-04-27 11:11").replace(/-/g, "/");

毕竟 在new Date里面的2018/04/27 这种格式在其它浏览器中也支持。。。。。。

还有，在安卓和IOS上的微信中的浏览器内核是不一样的，这也会导致上面的安卓和IOS中new Date的差别：

安卓6.1版本以上都是使用QQ浏览器的X5内核，5.4-6.1之间的版本如果安装了QQ浏览器的话就是使用X5内核，如果没安装，就是使用的系统内核

IOS有两种，一种是WKWebview，一种是UIWebview，从IOS8版本开始支持WKWebview

21

问题：数字的相关方法

// 1.只保留整数部分（丢弃小数部分）

parseInt(5.1234);// 5

// 2.向下取整（<= 该数值的最大整数）和parseInt()一样

Math.floor(5.1234);// 5

// 3.向上取整（有小数，整数就+1）

Math.ceil(5.1234);

// 4.四舍五入（小数部分）

Math.round(5.1234);// 5

Math.round(5.6789);// 6

// 5.绝对值

Math.abs(-1);// 1

// 6.返回两者中的较大值

Math.max(1,2);// 2

// 7.返回两者中的较小值

Math.min(1,2);// 1

// 随机数（0-1）

Math.random();

22

问题：编程思路分享

对于某个方法，如果需要对某个值进行判断，只有当某个值==2时，才能进入方法内部，那么。

可以先设置一个flag，变量为false,

不符合条件的时候，把这个变量设置为true

如果flag 是true ,则return 掉

只有flag还是false，才能进入方法内部

如以下代码

 var flag = false

    if (!data.real_name) {

      flag = true

      $("#nameErr").html('请输入名字')

    }else if(!/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/.test(data.real_name)){

      flag = true

      $("#nameErr").html('您的姓名格式不正确，请重新输入')

    }

    if (!data.id_number) {

      flag = true

      $("#numberErr").html('请输入身份证号码')

    }else if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(data.id_number)){

      flag = true

      $("#numberErr").html('您的身份证号码格式不正确，请重新输入')

    }

    if (flag) return

23

问题：怎么去除左右两端的空格

　 function trim(str){ //删除左右两端的空格

　　     return str.replace(/(^\s*)|(\s*$)/g, "");

　　 }

　　 function ltrim(str){ //删除左边的空格

　　     return str.replace(/(^\s*)/g,"");

　　 }

　　 function rtrim(str){ //删除右边的空格

　　     return str.replace(/(\s*$)/g,"");

　　 }

函数调用  trim(str)

24

问题:点击刷新图片验证码怎么实现？

解决方法：

给图片链接地址添加时间戳，每次都进行替换就行

  getImgCode() {

      let t = new Date().getTime()

      this.imgSrc = this.imgSrc.replace(/t\=(\d)+$/, 't=' + t)

    },

25

问题：怎么生成二维码？

二维码生成地址

https://api.qrserver.com/v1/create-qr-code/?size=430x430&data=Example

26

问题：前端怎么生成设备指纹？

js设备指纹

https://github.com/fingerprintjs/fingerprintjs

vue-fingerprintjs2使用指南

https://www.xiedandan.com/post-11.html

27

问题：怎么把网页变黑白

解决方法

html {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

_filter:none;

}

28

问题：vue 要在模板内容出现后，才显示页面。需要怎么进行设置？

解决方法

1 对应标签中加入 v-cloak:，如下

　<div id="wrap" v-cloak>

2 然后在css中给定义属性选择器 

　　[v-cloak]{

　　display:none

}

29

问题：说说你对类Class的理解

解决：

1 类的定义，如

使用 Class Box {

}

2 每一个类都有 constructor 构造器，他可以用来接收传入参数，如

class Coder{

constructor(a,b){

this.a=a;

this.b=b;

}

}

let shuang=new Coder(1,2);

console.log(shuang.add());

3 类的继承，使用 class xx extends yyy

class shuang extends Coder{ }

30

问题：怎么实现文字拷贝？

解决方法：

使用 clipboard.js

clipboard.js