码迷,mamicode.com
首页 > 其他好文 > 详细

前端100问,这些问题你都会了吗?

时间:2020-03-09 13:14:59      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:target   targe   目的   node   运行   glob   lis   sam   引用   

第 1 题:(滴滴、饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

1. 更准确
因为带key就不是就地复用了,在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

2. 更快
利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。(从这个角度看,map会比遍历更快。)
同时我们也需要知道不使用Key的默认模式在某些情况下会更快,引用VUE官网中的原话来解释: 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出
 

第 2 题:[‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?

第一眼看到这个题目的时候,脑海跳出的答案是 [1, 2, 3],但是真正的答案是[1, NaN, NaN]。

首先让我们回顾一下,map函数的第一个参数callback:
var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。

而parseInt则是用来解析字符串的,使字符串成为指定基数的整数。
parseInt(string, radix)
接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。

了解这两个函数后,我们可以模拟一下运行情况

parseInt(‘1‘, 0) //radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回1
parseInt(‘2‘, 1) //基数为1(1进制)表示的数中,最大值小于2,所以无法解析,返回NaN
parseInt(‘3‘, 2) //基数为2(2进制)表示的数中,最大值小于3,所以无法解析,返回NaN
map函数返回的是一个数组,所以最后结果为[1, NaN, NaN]

最后附上MDN上对于这两个函数的链接,具体参数大家可以到里面看
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

前端100问,这些问题你都会了吗?

标签:target   targe   目的   node   运行   glob   lis   sam   引用   

原文地址:https://www.cnblogs.com/advanceCabbage/p/12448099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!