《前端100问》学习（第一篇）

前言：

前端100问来源于掘金，《前端 100 问：能搞懂 80% 的请把简历给我》

带着这些问题，探索学习。加油~

题1：（滴滴、饿了么）写React/Vue项目时为什么要在列表组件中写key，其作用是什么？

答：（以Vue举例回答）

1.维护状态。

Vue默认使用“就地更新”策略，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

2.key的特殊属性主要用在Vue的虚拟DOM算法，再新旧nodes对比时辨识VNodes。

使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

它也可以用于强制替换元素/组件而不是重复使用它。场景如下：

• 完整地触发组件的生命周期钩子
• 触发过渡

例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当text发生改变时，<span>会随时被更新，因此会触发过渡。

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

答：看到这题的时候，我快速按下f12打开开发者工具，console打印结果是[1, NaN, NaN]，纳尼~

当时我就懵了。于是我又去看了下map方法的文档，没毛病，常用的~等等，就在最下面，竟然出现了和题目一样的代码~

MDN开发者文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

见最下面的【使用技巧案例】

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

《前端100问》学习（第一篇）

原文：https://www.cnblogs.com/cathy1024/p/11171762.html