Vue循环创建列表为什么需要key///for in和for of的区别

2023-03-13 14:24| 来源: 网络整理| 查看: 265

Vue循环创建列表为什么需要key 1.vue在循环创建列表的时候需要添加key let arr =[ {id:0,name:'a'}, {id:1,name:'b'}, {id:2,name:'c'} ]; {{value.name}} 2.为什么需要添加key？

（1）为了性能优化因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。

（2）key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了

for in和for of的区别 1、for...in 循环：只能获得对象的键名，不能获得键值 for...of 循环：允许遍历获得键值 var arr = ['red', 'green', 'blue'] for(let item in arr) { console.log('for in item', item) } /* for in item 0 for in item 1 for in item 2 */ for(let item of arr) { console.log('for of item', item) } /* for of item red for of item green for of item blue */

2、对于普通对象，没有部署原生的 iterator 接口，直接使用 for...of 会报错

var obj = { 'name': 'Jim Green', 'age': 12 } for(let key of obj) { console.log('for of obj', key) } // Uncaught TypeError: obj is not iterable

可以使用 for...in 循环遍历键名

for(let key in obj) { console.log('for in key', key) } /* for in key name for in key age */

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组，然后遍历这个数组

for(let key of Object.keys(obj)) { console.log('key', key) } /* key name key age */

3、for...in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for...of 则不会这样

let arr = [1, 2, 3] arr.set = 'world' // 手动添加的键 Array.prototype.name = 'hello' // 原型链上的键 for(let item in arr) { console.log('item', item) } /* item 0 item 1 item 2 item set item name */ for(let value of arr) { console.log('value', value) } /* value 1 value 2 value 3 */

4、forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效

let arr = [1, 2, 3, 5, 9] arr.forEach(item => { if(item % 2 === 0) { return } console.log('item', item) }) /* item 1 item 3 item 5 item 9 */

for...of 循环可以与break、continue 和 return 配合使用，跳出循环

for(let item of arr) { if(item % 2 === 0) { break } console.log('item', item) } // item 1

5、无论是 for...in 还是 for...of 都不能遍历出 Symbol 类型的值，遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

{ let a = Symbol('a') let b = Symbol('b') let obj = { [a]: 'hello', [b]: 'world', c: 'es6', d: 'dom' } for(let key in obj) { console.info(key + ' --> ' + obj[key]) } /* c --> es6 d --> dom */ let objSymbols = Object.getOwnPropertySymbols(obj) console.info(objSymbols) // [Symbol(a), Symbol(b)] objSymbols.forEach(item => { console.info(item.toString() + ' --> ' + obj[item]) }) /* Symbol(a) --> hello Symbol(b) --> world */ // Reflect.ownKeys 方法可以返回所有类型的键名，包括常规键名和Symbol键名 let keyArray = Reflect.ownKeys(obj) console.log(keyArray) // ["c", "d", Symbol(a), Symbol(b)] }

for...in 循环主要是为了遍历对象而生，不适用于遍历数组

for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

【本文地址】

公司简介

联系我们