文章目录
- Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
- 一、 数组常用的函数/方法
- 1. push(Element): 向数组末尾添加元素（更新原数组），并且会返回更新后数组的长度
- 2. pop（Element): 删除数组的最后一个元素（更新原数组），并且会返回更新后数组的长度
- 3. shift(Element): 删除数组的第一个元素（更新原数组），并且会返回更新后数组的长度
- 4. unshift(Element)：向数组的开头添加一个或多个元素（更新原数组），并且会返回更新后数组的长度。
- 5. splice(index,len,[item])： 可以 替换/删除/添加 数组内某一个或者几个值（该方法会改变原始数组）
- 5-1 删除
- 5-2 替换
- 5-3 添加
- 6. slice：从某个已有的数组返回选定的元素，请注意，该方法并不会修改数组，而是返回一个子数组，可以通过使用负值从数组的尾部选取元素
- 7. reverse：反转：颠倒原数组元素位置，并且会返回更新后数组的长度
- 8. sort：排序，通过函数的方式规定排序方式，修改的是原数组；(默认是升序排列)
- 9. join：把数组的所有元素放入一个字符串中，元素通过指定的分隔符进行分割，此方法有一个参数，即指定分隔符，形成新的字符串，不修改原数组；
- 10. concat：连接两个或多个数组，并返回连接后的新数组，不修改原数组
- 二、常见的迭代器forEach,map,filter,some,every等
- 1. filter：过滤出满足条件的部分数据，不会改变原数组，返回符合条件的新数组
- 1-1 filter案例二：筛选数组中满足某条件的集合组成新数组
- 1-2 filter案例一：巧妙的去重
- 2. forEach: 全部循环，可以重新给原数组赋值，遍历数组， 没有返回值
- 3. map: 全部循环，有返回值，不改变原数组，生成新的数组
- 4. every：全部满足条件，返回true，否则返回false
- 5. some：由一个对象满足条件，返回true，否则返回false
- 6. reduce：常用于累加计算，可以代替forEach等，返回值为计算后的数值
- 7. find：在数组中找到符合要求的对象
- 8. findIndex返回第一个符合条件的索引号
- 三. Vue修改或添加data中的元素: Vue.set(target,propertyName/index,value) 或者写成 vm.$set(target,propertyName/index,value);
Vue中数组常用操作函数/迭代器使用总结 – 数组亦可称为集合
一、 数组常用的函数/方法
1. push(Element): 向数组末尾添加元素（更新原数组），并且会返回更新后数组的长度
let arr = ['first','second','third','last']
arr.push('new');
console.log(arr);
result----->Array(5)
0: "first"
1: "second"
2: "third"
3: "last"
4: "new"
length: 52. pop（Element): 删除数组的最后一个元素（更新原数组），并且会返回更新后数组的长度
let arr = ['first','second','third','last']
arr.pop();
console.log(arr);
result------Array(3)
['first', 'second', 'third']
0: "first"
1: "second"
2: "third"
length: 33. shift(Element): 删除数组的第一个元素（更新原数组），并且会返回更新后数组的长度
let arr = ['first','second','third','last']
arr.shift('newFirst');
console.log(arr);
result------Array(3)
['second', 'third', 'last']
0: "second"
1: "third"
2: "last"
length: 34. unshift(Element)：向数组的开头添加一个或多个元素（更新原数组），并且会返回更新后数组的长度。
- 注意这里的添加可以是多种类型的
let arr = ['first','second','third','last']
arr.unshift(4,[1,2,1],' ','char');
console.log(arr);
result------ Array(8)
0: 4
1: (3) [1, 2, 1]
2: " "
3: "char"
4: "first"
5: "second"
6: "third"
7: "last"
length: 85. splice(index,len,[item])： 可以 替换/删除/添加 数组内某一个或者几个值（该方法会改变原始数组）
5-1 删除
// 实例一: 删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
var arr = ['a','b','c','d'];
arr.splice(1,1);
console.log(arr);
//['a','c','d'];
// 实例二： 删除起始下标为1，长度为2的一个值(len设置2)
var arr2 = ['a','b','c','d']
arr2.splice(1,2);
console.log(arr2);
//['a','d']5-2 替换
// 实例一： 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
console.log(arr);
//['a','ttt','c','d']
// 实例二： 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
var arr2 = ['a','b','c','d'];
arr2.splice(1,2,'ttt');
console.log(arr2);
//['a','ttt','d']
// 实例三： 将第三个元素'third'替换成‘newEle’
let arr = ['first','second','third','last']
arr.splice(2,1,'newEle');
console.log(arr);
result------ Array(4)
0: "first"
1: "second"
2: "newEle"
3: "last"
length: 45-3 添加
// 实例： 在下标为1处添加一项'ttt'
var arr = ['a','b','c','d'];
arr.splice(1,0,'ttt');
console.log(arr);
//['a','ttt','b','c','d']6. slice：从某个已有的数组返回选定的元素，请注意，该方法并不会修改数组，而是返回一个子数组，可以通过使用负值从数组的尾部选取元素
var arr = [1,2,3,4,5,6];
var arr2 = arr.slice(-4,-2); //返回的arr2结果是:[3,4]
// 说明：负值从-1开始计算，slice的结果是含头不含尾7. reverse：反转：颠倒原数组元素位置，并且会返回更新后数组的长度
let arr = ['first','second','third','last']
arr.reverse();
console.log(arr);
result------ Array(4)
(4) ['last', 'third', 'second', 'first']
0: "last"
1: "third"
2: "second"
3: "first"
length: 48. sort：排序，通过函数的方式规定排序方式，修改的是原数组；(默认是升序排列)
arr=[1,9,3,7,3,2]
arr.sort(function(a,b){
if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
})
或者
arr.sort(function(a,b){
return a-b; //升序排列
return b-a;//降序排列
})
console.log(arr)9. join：把数组的所有元素放入一个字符串中，元素通过指定的分隔符进行分割，此方法有一个参数，即指定分隔符，形成新的字符串，不修改原数组；
var arr = ['a','b','c'];
var arrStr = arr.join("-"); // 结果是a-b-c
var arrStr = arr.join(""); // 结果是abc
var arrStr = arr.join(","); // 结果是a,b,c10. concat：连接两个或多个数组，并返回连接后的新数组，不修改原数组
var arr1 = [1,2,3];
var arr2 = ['a','b','c']
var arr3 = arr1.concat(arr2);// 对应的结果是 [1,2,3,'a','b','c']二、常见的迭代器forEach,map,filter,some,every等
1. filter：过滤出满足条件的部分数据，不会改变原数组，返回符合条件的新数组
1-1 filter案例二：筛选数组中满足某条件的集合组成新数组
data = [
{ id:1, name:'小馨', tel:'136****123', time:'2022-04-12', tag:'0',age:'20' },
{ id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' },
{ id:3, name:'大航', tel:'152****789', time:'2022-04-16', tag:'1',age:'22' }，
{ id:4, name:'小艺', tel:'158****987', time:'2022-04-14', tag:'0',age:'21' }]
// 已审核数组okList tem.tag='1'--已审核
this.okList = this.data.filter(item => item.tag === '1')
console.log(this.okList)
/**
[{ id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' },
{ id:3, name:'大航', tel:'152****456', time:'2022-04-16', tag:'1',age:'22' }]
*/1-2 filter案例一：巧妙的去重
data = ['小馨','小白','小张','小航','小馨','小航']
// 筛选后新数组为newData
this.newData = this.data.filter((item,index,self) => self.indexOf(item)===index)
console.log(this.newData)
// 控制台输出
// ['小馨', '小白', '小张', '小航']2. forEach: 全部循环，可以重新给原数组赋值，遍历数组， 没有返回值
// 需要一个回调函数作为参数
// array.forEach(callback(currentValue, index, array){
//do something
// })
// 回调函数的形参说明如下：
// value: 遍历数组的内容 index: 对应数组的索引 array: 数组本身
// forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。
var a = [1,2,3,4,5]
var b = a.forEach((item) => {
item = item * 2
})
console.log(a) // [2,4,6,8,10]
console.log(b) // undefined3. map: 全部循环，有返回值，不改变原数组，生成新的数组
var a = [1,2,3,4,5]
var b = a.map((item) => {
return item = item * 2
})
console.log("a--:", a) // [1,2,3,4,5]
console.log("b--:", b) // [2,4,6,8,10]4. every：全部满足条件，返回true，否则返回false
test(){
let arr=[0,1,2,3,4];
let every_result = arr.every(one => one>2);
console.log(every_result); //false
},5. some：由一个对象满足条件，返回true，否则返回false
test(){
let arr=[0,1,2,3,4];
let some_result = arr.some(one => one>2);
console.log(some_result);//true
},6. reduce：常用于累加计算，可以代替forEach等，返回值为计算后的数值
test() {
let arr = [0, 1, 2, 3, 4];
// reduce的第二个参数0：代表sum的起始值是0
var sumValue = arr.reduce(function (sum, number) {
// 第一个参数为叠加总值，需要初始化，第二个参数是当前项
return sum + number;
}, 0); //sum的初始化
console.log(sumValue); //10
},7. find：在数组中找到符合要求的对象
// 和filter的区别就是找到符合要求的对象就停止寻找了，
// 返回的是一个对象，而filter返回的是所有符合要求的对象组成的新数组
test() {
let arr = [0, 1, 2, 3, 4];
var big = arr.find(val => val>2);
console.log(big); //3
},8. findIndex返回第一个符合条件的索引号
test1() {
let arr = [1, 1, 2, 0, 4];
var big = arr.findIndex(val => val>2);
console.log(big); // 下标为4
},三. Vue修改或添加data中的元素: Vue.set(target,propertyName/index,value) 或者写成 vm.$set(target,propertyName/index,value);
// 实例： 通过Vue.set或者vm.$set修改data中student对象的age值
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
student: {
name: '小王',
age: 18,
}
},
mounted() {
Vue.set(this.student, 'age', '20')
}
});
result------>
学生姓名：小王
学生年龄：20
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
