原生JS forEach()和map()遍历
共同点:
1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。
3.匿名函数中的this都是指Window。
4.只能遍历数组。
一:map() 不改变原始数组
有返回值,可以return 出来。
map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),不改变原来的数组,一般用来处理需要修改某一个数组的值。
取对象数组的字段值,重新赋值健值对成新的数组
var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1];
//根据属性值查找,并更改该属性值
oldArry: [
{ id: 0, flag:false},
{ id: -2, flag:true},
],
mounted(){
let newArry = this.oldArry.map(item => {
if (item.flag === true) {
item.flag = false;
}
return item;
});
}
}
//打印结果
//console.info(newArry)//newArry:[{id:0,flag:false}, { id: -2, flag:fasle},]
//console.info(this.oldArry)//[{id:0,flag:false},{ id: -2, flag:true},]
二:foEach() 改变了原数组
没有返回值
// 循环遍历
traversal(){
var arr = [1,2,3,4,5,6,7]
var res = arr.forEach(function (item,index,input) {
input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(arr);//-->会对原来的数组产生改变[10, 20, 30, 40, 50, 60, 70]
},
三:for循环
四:filter() 不改变原始数组
filter函数可以看成是一个过滤函数,返回符合条件的元素的数组
(1)filter() 过滤不符合项
let arr = [1,2,3,4,5,6,7]
let newArr = arr.filter(item => item>=3)
console.log(newArr)//[3, 4, 5, 6, 7]
arr = [1,2,3,4,5];
console.info(arr.filter(item => ![1,2,3].includes(item)));
----> [4, 5]
(2)js去除数组中的空值,假值
var arr=[undefined,undefined,1,'','false',false,true,null,'null'];
let newArr = arr.filter(item => item)
console.log(newArr)//newArr = [1, "false", true, "null"]
(3)filter() 数组去重
let arr = [1, 2, 2, 3, 4, 5, 5, 6,6];
let newArr = arr.filter((x, index,self)=>self.indexOf(x)===index)
console.log(newArr)//newArr = [1, 2, 3, 4, 5, 6]
//对象数组去重 根据id去重
newArr = [
{id:1, name:'Amy'},
{id:2, name:'Tom'},
{id:3, name:'Sunny'},
{id:1, name:'Amy'}
];
newArr = arr.filter((x, index)=>{
let ruleIds = [];
arr.forEach((item) => {
ruleIds.push(item.id);
});
return ruleIds.indexOf(x.id) === index;
});
console.info(newArr);//结果如下图
数组去重可推荐使用方法:
let arr = [1, 2, 2, 3, 4, 5, 5, 6,6];
let newArr =Array.from(new Set(arr))
console.log(newArr)//newArr = [1, 2, 3, 4, 5, 6]
(4)filter() 筛选数组对象----->单个条件筛选:
let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},]
let newArr = arr.filter(item => {
return item.a === '苹果'
})
console.log(arr)
console.log(newArr)
第二种写法
let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},
]
let newArr = arr.filter(item => item.a === '苹果')
console.log(arr)
console.log(newArr)
}
结果一致
------->多个条件筛选
let a = '苹果'; //筛选参数a
let b = '面包'; //筛选参数b
let c = '' //筛选参数c
let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},
];
let newArr = arr.filter( item => (a?item.a === a : true) && (b?item.b === b : true) && (c?item.c === c : true))
console.log(newArr);
写法二:
let a = '苹果'; //筛选参数a
let b = '面包'; //筛选参数b
let c = '' //筛选参数c
let arr = [
{a:'苹果',b:'面包',c:'吃'},
{a:'香蕉',b:'面包',c:'不吃'},
{a:'香蕉',b:'苹果',c:'吃'},
{a:'苹果',b:'香蕉',c:'不吃'},
];
let newArr = arr.filter(item => {
return (a?item.a === a : true) && (b?item.b === b : true) && (c?item.c === c : true)
})
console.log(newArr)
结果一致:
五、Array.prototype.entries()
Object.entries(),方法返回一个给定对象自身可枚举属性的键值对数组
对象:Object.entries()
dataFruits:{"a":"Banana", "b":"Orange", "c":"Apple", "d":"Mango"}
console.log(Object.entries(this.dataFruits));//结果图1
//key-value
for (const [key, value] of Object.entries(this.dataFruits)) {
console.log(key,value);// 结果 图3
}
数组 array.entries()
fruits: ["Banana", "Orange", "Apple", "Mango"],
for(let [index,value] of this.fruits.entries()){
console.info(index,value);//结果 图2
}
注意 :对象和数字在使用entries()的时候,写法是不一样的
如果对象在使用entries()的时候如图写就会报错
六、every() , some()数组的迭代方法。
some一直在找符合条件的值,一旦找到,则不会继续迭代下去。
every从迭代开始,一旦有一个不符合条件,则不会继续迭代下去。
every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。
1.如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
2.如果所有元素都满足条件,则返回 true。
some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。
1.如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
2.如果没有满足条件的元素,则返回false。
var arr = [1, 2, 3, 4, 5]
console.log(arr.some((item, index, array) => {
return item > 3
})) // true
console.log(arr.every((item, index, array) => {
return item > 3
})) // false