循环遍历:map(),filter(),for循环,forEach(),entries(),Set(arr),数组去重，every()，some()

原生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

循环遍历:map(),filter(),for循环,forEach(),entries(),Set(arr),数组去重，every()，some()

猜你喜欢