JS for in 循环中的key ,value 详解。

JavaScript017

JS for in 循环中的key ,value 详解。,第1张

一、PHP根据数据的值获取密钥:有两个函数可用。

二、定义一个数组,其中值具有重复部分。

三、使用array_keys()获取密钥名。

四、保存文件并在浏览器中查看array_keys()的输出。

五、使用array search()获取密钥名。

六、保存文件并在浏览器中查看array search()的输出结果。

1. key有什么用?

    为了提升渲染速度。当两个元素位置发生改变时vue不会对整个列表进行重新渲染,而只是更换一下dom的顺序,这样可以减少资源消耗。

2. 不加key会导致什么问题?

    循环渲染后,如果有一项被删掉了,那么会出现以下问题

    第n项的属性num为1,我们执行n.num - 1,然后判断如果n.num为0则删掉n这一项。

    n被删掉后,的n+1便被排到了原本n的位置上,这时候,会出现一个问题,n.num在页面上显示 成了0,

    虽然打印n.num是1,但是页面上却显示为0,我猜测应该是由于vue的更新机制导致复用了之前被删除的那个n的num值。

3. key应该设置为什么?

    (1)首先,如果你不存在上述这种位置变更或者元素被删除的需求,就不需要设置key,虽然vue会报警告。

    (2)key的设置,要保证其唯一性,也就是说要保证每一项的key永远都不一样,我习惯性用:key="index"来设置key。

    (3)但是我今天发现一个问题,当出现上述情况的时候,:key="index"会出现上述结果。因为n+1的index由n+1变为了n,导致他复用了原本的n的num属性。所以应当用item.id这种唯一的属性值来设置key,比如商品id。

    (4)最近在写外卖项目的时候,由于加入了周来区分商品,所以就算商品id一样,周不同的话也属于不同的商品,会同时出现在列表里,

        所以我使用了:key="item.week+item.id"这样的拼接值来保证key的唯一性,否则还是会出现列表里的多项是同样的id或者week

(下面是vue官方对key的解释)