VUE中常见操作数组的方法 |
您所在的位置：网站首页 › vue中遍历数组的方法 › VUE中常见操作数组的方法 |
VUE中常见操作数组的方法
|
在使用Vue开发Web应用程序时，经常需要对数组进行操作以实现相应的功能，而使用原生的JavaScript数组方法时需要手动更新DOM，显得比较繁琐。Vue的部分数组方法（主要有：pop push unshift shift splice reverse sort方法）可以自动触发DOM更新，省去了手动更新DOM的步骤，使得开发者可以更加高效地操作数组数据，提高开发效率和代码质量。下面我们将较为全面的介绍一些常见的数组操作方法。但是需要注意的是，如果我们向数组中添加对象类型的元素，那么这个对象必须是响应式的。否则，这个对象的属性变化时不会触发DOM更新。为了避免这种情况，我们应该在添加对象前先使用Vue.set或者this.$set方法将其转换为响应式对象。 一：将数组转换成字符串的方法： 1、join('参数')方法：join（’参数‘）把数组的元素以传入的参数为分割符，转换成字符串，代码示例如下： let a=[1,2,3] let b=a.join('') let c=a.join(':') console.log(a) console.log(b,typeof(b)) console.log(c,typeof(c))输出结果如下：
二：删除或者增加数组元素的方法： 1、push():可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度，同时也可以将不同数据类型的数据放入加入数组中，代码示例如下： let a=[1,2,3] //加入不同类型的数据，添加数组 a.push([4,5]) console.log(a) //加入多个元素，当然也可以只添加一个元素 a.push(4,5) console.log(a) //加入不同类型的数据，添加对象 a.push({'key':'name','value':26}) console.log(a)输出结果如下：
2、pop()方法：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。代码示例如下： let a=[1,2,3] console.log(a) let b=a.pop() console.log(a) console.log('移除的元素：',b)输出结果如下：
3、shift()方法：shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。代码示例如下： let a=[1,2,3] console.log(a) let b=a.shift() console.log(a) console.log(b)输出结果如下：
4、unshift()方法：unshift()方法可向数组的开头添加一个或者更多元素，同样也可以添加不同类型的复杂数据，并返回新的长度。代码示例如下： let a=[1,2,3] console.log(a) let b=a.unshift(16,7) console.log(b) let c=a.unshift([0,0],{'key':'name','value':26}) console.log(c) console.log(a)输出结果如下：
5、splice(index,howmany,item1, …, itemX) 方法向/从数组中添加/删除元素，然后返回被删除的元素列表（元素数组）； 第一个参数：表示从哪个索引位置（index）添加/删除元素； 第二个参数：可选，要删除的项目数量。如果设置为 0，则不会删除项目。如果不设置，则表示从第一个参数表示的下标位置开始删除后面所有元素； 从第三个参数开始：可选。向数组添加的新项目。 代码示例如下： let a=[1,2,3,4,5,6] console.log('原始数组a:',a) // let b=a.splice(0)//从数组a的下标0开始删除，默认删除全部元素 // console.log('返回的数组b:',b) // console.log('经过删除操作后的数组a:',a) // let c=a.splice(0,2)//从数组a的下标0开始删除，删除2个元素，第二个参数2表示要删除的元素数量 // console.log('返回的数组c:',c) // console.log('经过删除操作后的数组a:',a) // let d=a.splice(1,2,20,30)//第三个参数和第四个参数用于替换掉删除的两个元素 // console.log('返回的数组d:',d) // console.log('经过删除操作后的数组a:',a) // let e=a.splice(1,2,90)//第三个参数用于替换掉第一个被删除的元素位置上 // console.log('返回的数组e:',e) // console.log('经过删除操作后的数组a:',a) // let f=a.splice(1,2,90,100,120)//从数组a的下标1开始删除两个元素，并从下标1开始依次添加90，100，120这三个元素 // console.log('返回的数组f:',f) // console.log('经过删除操作后的数组a:',a) // let g=a.splice(1,2,{'key':'name','value':26})//添加复杂数据对象，同样也可以添加数组 // console.log('返回的数组g:',g) // console.log('经过删除操作后的数组a:',a) let h=a.splice(0,1) console.log('返回数组h:',h) console.log('删除后的数组a:',a)三：数组排序操作 1、sort()方法：sort()方法对数组进行排序，默认是升序排列。代码示例如下： // let a=[1,2,3,4,6,5] // let b=a.sort()//对数组默认升序排序，返回的数组b其实指向数组a，对数组b改变会影响原始数组a // console.log(b) // console.log(a) // b[0]=90 // console.log(b) // console.log(a) //首先按照第一个字母进行升序排序，第一个字母相同的情况下，再按照第二个字母升序排序 // let a=['ab','aB','Ab','AB','ba','bA','Ba','BA'] // a.sort() // console.log(a) //自定义回调函数决定升序还是降序 // let a=[2,1,4,3,6,5] // a.sort(function(m,n){ // return m-n//升序 // }) // console.log(a) // a.sort(function(m,n){ // return n-m//降序 // }) // console.log(a) //对元素是对象的数组进行排序 let obj=[ {'name':'Huawei','age':90}, {'name':'xiaomi','age':78}, {'name':'apple','age':60}, {'name':'vivo','age':71}, {'name':'oppo','age':63}, ] let objData=obj.sort(function(itema,itemb){ // return itema.age-itemb.age//按照年龄进行升序排序 // return itemb.age-itema.age//按照年龄进行降序排序 // return itema.name>itemb.name ? 1 : -1//对姓名也就是字符串进行升序排序 return itema.nameitem.name) console.log(newData1) let newData2=dataL.map(item=>{ return{ NAME:item.name, age:26 } }) console.log(newData2) let newData3=dataL.map(function(item){ let str="员工姓名"+item.name return { name:str } }) console.log(newData3)输出结果：
2、filter()方法：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 回调函数返回true则将这一项放入新数组中 let dataL=[{'name':'hhh'},{'name':'hello'},{'name':'www'}] let data=dataL.filter(item=>item.name==='hello') console.log('过滤的结果1：',data) let data2=dataL.filter(item=>{ return item.name==='hello' }) console.log('过滤的结果2：',data2) let data3=dataL.filter(function(item,index,arr){ if(item.name==='www'){ console.log('找到了'+item.name+'，其所在位置为'+index) console.log('遍历的数组：',arr) return item } }) console.log('过滤的结果3：',data3)输出的结果为：
3、every()方法：every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），every() 方法使用指定函数检测数组中的所有元素： 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。 如果所有元素都满足条件，则返回 true。every()方法要求每一项都要满足条件才会返回true。 let dataL=[2,4,6,8,10] let data=dataL.every(item=>item%2==1) console.log(data) let data2=dataL.every(item=>{ return item%2===0 }) console.log(data2) let data3=dataL.every(function(item,index,arr){ if(item===10){ console.log('其所在位置为'+index) console.log('遍历的数组：',arr) } return item%2===0 }) console.log(data3)输出结果为：
4、some()方法：some() 方法用于检测数组中的元素是否满足指定条件（函数提供），some() 方法会依次执行数组的每个元素： 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 也就是说，some()方法只需要找到有一项满足条件的就会返回true。 let dataL=[{'name':'hhh'},{'name':'hello'},{'name':'www'}] let data=dataL.some(item=>item.name==='hello') console.log(data) let data2=dataL.some(item=>{ console.log(item.name) return item.name==='hello' }) console.log(data2) let data3=dataL.some(function(item,index,arr){ if(item.name==='www'){ console.log('找到了'+item.name+'，其所在位置为'+index) console.log('遍历的数组：',arr) return true } }) console.log(data3)输出结果为：
5、forEach()方法：它是遍历数组的方法:，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 let dataL=[{'name':'hhh'},{'name':'hello'},{'name':'www'}] dataL.forEach(item=>console.log(item.name)) dataL.forEach(item=>{ if(item.name==='hhh'){ console.log('找到了'+item.name) } }) dataL.forEach(function(item,index,arr){ if(item.name==='hhh'){ console.log('找到了'+item.name+'，其所在位置为'+index) console.log('遍历的数组：',arr) } })输出结果为：
6、reduce()方法：arr.reduce(callback,[initialValue])： reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。 callback （执行数组中每个值的函数，包含四个参数） initialValue （作为第一次调用 callback 的第一个参数。） 四个参数如下： 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调用 reduce 的数组） let dataL=[2,4,6,8,10] let num=dataL.reduce(function(pre,cur){ return pre+cur })//此时pre默认值是第一项的值，cur为第二项的值 console.log(num) let num2=dataL.reduce(function(pre,cur){ return pre+cur },6)//pre初始值为6 console.log(num2)输出结果为：
reduce函数常用于计算每一项在数组中出现的次数。代码示例如下： const str = "jshdjsihh"; const obj = str.split("").reduce((pre, item) => { console.log(pre); console.log("itm：" + item); console.log(pre + "[" + item + "]" + "：" + pre[item]); //在遍历字符串中的每個字符的過程中，查看对象pre中是否包含该字符，包含的话说明之前已经出现， //pre[item]为true，执行pre[item]++语句，相当于改变对象pre中属性是当前该字符的值，其值加一， //表示次数加一， //不包含显示undefined的情况下，说明是第一次出现该字符，则三目表达式中执行pre[item]=1 //第一次出现，pre[item]=1语句相当于为对象增添新属性并设置其初始值为1 pre[item] ? pre[item]++ : (pre[item] = 1); return pre; }, {});//pre初始值是一个空对象 console.log(obj); // {j: 2, s: 2, h: 3, d: 1, i: 1}7、fill()方法：fill() 方法用于将一个固定值替换数组的元素。 let dataL=[2,4,6,8,10] // let a=dataL.fill(66) // console.log(dataL,a) let b=dataL.fill(66,1,5)//从下标为1的位置开始替换，到下标为4的位置结束，不包括5 console.log(dataL,b)输出结果为：
8、toString()方法：toString()方法将每个元素转化为字符串，类似于不传参的join()方法。 toLocaleString()方法是toString()的本地化版本。 let dataL=[2,4,6,8,10,['a','b']] let data=dataL.toString() console.log(data)输出结果为：
|
【本文地址】
今日新闻 |
推荐新闻 |