疑难杂症、易混淆、易遗忘的知识点记录

ace_TiAmo

已于 2023-02-20 12:45:17 修改

阅读量429

点赞数 1

文章标签： javascript vue

于 2022-11-29 15:44:55 首次发布

本文链接：https://blog.csdn.net/ace15824843202/article/details/128097748

版权

数组方法之slice和splice

slice：不会改变原数组，Array.slice(start,end)

start：开始截取的下角标，可以使用负索引。 slice(-1) 提取数组的最后一个元素。
end：结束的下角标（截取的数组中不包括end），可选参数，若无，则取到末尾。
返回值：截取出来的新数组

splice：改变原数组，Array.splice(index,howmany,item1,…,itemX)

index：开始的索引值
howmany：要删除多少个元素，可选。若无，则删除从 index 开始到原数组结尾的所有元素。
item：从删除的位置插入的元素，可选。

数值转换 Number和parseInt的区别

Number()：从翻译中看语义，number就是数字的之意。
它意味着无论给Number()传入任何参数，它可以把内容转换为数字

Number("123")       //123     字符串
Number("")          //0       字符串
Number(true)        //1       布尔
Number(null)        //0       对象
Number(1.1)         //1.1     浮点数
Number('123aa')     //NaN     当遇到无法转换的字符串输出NaN

parseInt()：在英语上，分析词句之意，而 Int 则是我们定义变量时的整数类型。
显而易见，则是通过分析把词句转换为整型。就是把字符串转换为整型之意

parseInt("123"）  //123       字符串
parseInt("");     //NaN       字符串
parseInt(true)    //NaN       Boolean
parseInt(null)    //NaN       对象
parseInt(1.1)     //1         浮点数
paraeInt('123aa')  //123   转换到无法转换为止

NaN详解

数字类型的非数字

 - typeof NaN   //number
 - NaN == NaN    //false  NaN是唯一不等于自身的值
 - NaN + 1      // NaN    任何数字和NaN计算都是NaN
 - isNaN()     //因为不等于自身，用isNaN判断是否为NaN
 - Boolean(NaN) // false

改变原数组和不改变原数组

改变原数组方法

pop()：删除数组最后一个元素，并返回该元素
push()：在数组尾部添加元素，并返回更新后的数组长度
shift()：删除数组的第一个元素，并返回该元素
unshift()：在数组第一位添加元素，并返回更新后的数组长度
sort()：对数组排序（按字符ASCII进行排序），也可添加回调函数按照想要的规则排序
reverse()：数组反转
splice(index, howmany, 新数据)：返回被删除元素所组成的数组。

不改变原数组的方法

concat() ：方法用于连接两个或多个数组。
join()：将数组的所有元素转化为字符串
slice()：截取数组，返回数组的一部分。
every()：方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true

filter()：返回满足断言函数的数组元素
forEach()：为数组的每一个元素调用指定函数。
indexOf()：在数组中查找指定元素。如果找到的话返回该元素的索引没找到返回-1
lastIndexOf()：在数组中反向查找。
map()：从数组的元素中，计算出新的数组。
some()：测试是否至少有一个数组元素能让断言函数为真。
reduce（）从数组的元素中，计算出一个值。
reduceRight（）从右往左计算数组

mouseover、mouseout和mouseenter、mouseleave

mouseover、mouseout支持事件冒泡、而另外两个不支持
冒泡事件会导致，移入移出在同一个元素上触发时导致来回闪动，更换成mouseenter和mouseleave就能解决

display：inline-block 出现间隙问题

出现的原因可能有多种，解决的办法可参考

Cannot read properties of null (reading ‘pickAlgorithm‘)解决方法

错误产生原因

npm install的执行过程：
发出npm install命令
npm 向 registry 查询模块压缩包的网址
下载压缩包，存放在~/.npm(本地NPM缓存路径)目录
解压压缩包到当前项目的node_modules目录
实际上说一个模块安装以后，本地其实保存了两份。一份是 ~/.npm 目录下的压缩包，另一份是 node_modules 目录下解压后的代码。但是，运行 npm install 的时候，只会检查 node_modules 目录，而不会检查 ~/.npm 目录。如果一个模块在 ~./npm 下有压缩包，但是没有安装在 node_modules 目录中，npm 依然会从远程仓库下载一次新的压缩包。
简单来说就是缓存的问题

解决方法：

在终端输入 npm cache clear --force，然后重新运行npm install

Vue控制台异常：sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT

首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。
与vue的热更新有关
原因：
配置proxy代理的原因，出现了跨域问题

解决：vue.config.js中配置

module.exports = {
...
  devServer:{
    host: '0,0,0,0'
  }
  ...
}

也可参考此篇文章排除

vue修改部分文件热更新失效

传送门

动态ref(循环数组)

问题：

this.$refs[`editInput${item.aid}`].focus()

vue 报错Error in nextTick: “TypeError: that.$refs[“editInput“.concat(…)].focus is not a function“

原因：

这是一个关于动态使用refs控制循环组件的问题：

在循环的组件上绑定一个动态的ref，需要注意：

:ref=““时候，里面是一个字符串，

this. $re f [‘$ {var}`][0].clickFun();

解决：

this.$refs[`editInput${item.aid}`][0].focus()