vue中数组加Key方式

vue中数组加Key

代码： 

const numberList = list.map(item => ({value: item}))

 其中 list是原数组，numberList是转化后的数组，value是key的名称

在使用element的el-autocomplete远程搜索组件时，普通的数组不能匹配，需要带有可以的数组才可以。

这是普通数组

转化成key为value的数组：

vue数组操作

1、数组的响应式方法

• push(value)：从数组最后面添加元素
• unshift(value)：从数组最前面添加元素
• pop()：从数组最后一个元素开始删除
• shift()：从数组第一个元素开始删除
• splice(start,deleteCount)：从start开始删除deleteCount个元素
• splice(start,deleteCount,…value)：从start开始替换deleteCount个元素，后面跟上要替换的元素。
• splice(start,0,…value)：从start开始插入value,后面跟上要添加的元素。

splice说明：

在进行数组的中间插入操作时，vue是依次替换每一个数，然后再在最后添加一个新空间存储原数组最后的元素。

这样做是很没有效率的，因此在进行数组遍历时，若想从中间插入一条数据，需要使用到key属性。

如：

< li v-for=“item in arrays” :key=“item” >{{ item }}

所以，一句话概括，key的作用是为了高效的更新虚拟DOM.

2、数组的非响应式方法

arr[0]=“aaa”，列表不会随着数组的改变而响应式渲染到页面上。

3、数组的高阶函数

类似lambda表达式函数时编程：

• filter()：过滤数组，参数传递一个回调函数，回调函数返回true时，函数内部自动讲这次回调的数据保存到新数组中；当回调函数返回false时，函数内部过滤掉该数据。
• map()：遍历操作数组，参数传递一个回调函数，可在回调函数中操作遍历的每一个数组值，如加减乘除。
• reduce()：对数组中所有的内容进行汇总。

案例：

对数组进行操作：

• 1，取出小于100的数
• 2，每个数乘2
• 3，汇总

newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。