数组-map和filter

map() 修改数组 通过指定函数处理数组的每个元素，并返回处理后的数组。

1. 修改数组
2. return 执行return后操作出来的结果所组成的新数组
3. arr.map(function (item, key, arr) {}) item 必选 key 可选 arr 可选 当前元素属于的数组对象

• map 遍历修改数组的值 并返回新数组

// 初始数组
let arr = [1, 2, 3, 4, 5, 6];

// 操作-遍历 所以会log的次数则是被操作的数组长度
let newarr1 = arr.map(function (item, key, arr) {
    console.log('item', item); // 输出6次 每次分别是 1 2 3 4 5 6
    console.log('key', key); // 输出6次 每次分别是 0 1 2 3 4 5
    console.log('arr', arr); // 输出6次 重复6次 arr [1, 2, 3, 4, 5, 6] 
    return item; // 会返回一个新数组
})
console.log(newarr1); // [1, 2, 3, 4, 5, 6]

// 操作-修改数组的值
let newarr2 = arr.map(function (item, key, arr) {
    return item * 10; // 会返回一个新数组
})
console.log(newarr2); //[10, 20, 30, 40, 50, 60]

• map 遍历修改数组对象的值 并返回新数组

// 初始对象数组
let people = [{name: "小杨",age: 23},{name: '小肖',age: 30}];

// 操作-修改其中的对象的某个属性的值
let newpeople1 = people.map(item => {
    return {
        name: '这个人叫做' + item.name,
    }
});
console.log(newpeople1); // [{name: '这个人叫做小杨'}, {name: '这个人叫做小肖'}]

// 操作-修改其中对象的所有属性的值
let newpeople2 = people.map(item => {
    return {
        name: '这个人叫做' + item.name,
        age: '这个人的年龄' + item.age
    }
});
console.log(newpeople2); 
// [{name: '这个人叫做小杨', age: '这个人的年龄23' },{ name: '这个人叫做小肖', age: '这个人的年龄30'}]

filter() 过滤数组 检测数值元素，并返回符合条件所有元素的数组

1. 过滤数组
2. return 符合过滤条件的原数组数据组成的新数组
3. arr.fitler(function (item, key, arr) {}) item 必选 key 可选 arr 可选 当前元素属于的数组对象

• filter 遍历数组

// 操作-遍历数组
let arr = [1, 2, 3, 4, 5, 6];
let newarr = arr.filter(function (item, index, arr) {
    console.log(item); // 输出6次 每次分别是 1 2 3 4 5 6
    console.log(index); // 输出6次 每次分别是 0 1 2 3 4 5
    console.log(arr); // 输出6次 重复6次 [ 1, 2, 3, 4, 5, 6 ] 
});
console.log(arr, '原数组')
console.log(newarr); //[]

• filter 遍历操作过滤去重筛选数组，数组对象，返回新数组

// 操作-遍历过滤出所有偶数
let arr1 = [1, 2, 3, 4, 5, 6];
let newarr1 = arr1.filter(item => {
    return item % 2 === 0;
});
console.log('过滤出所有偶数', newarr1); // 过滤出所有偶数 [2, 4, 6]

// 操作-遍历过滤掉空字符串 undefined null 0
let arr2 = ['', 1, undefined, '小肖', 0, null];
let newarr2 = arr2.filter(item => item);
console.log(newarr2); // [ 1, '小肖' ]

// 操作-数组去重
let arr3 = [1, 1, '小杨', '小杨', null, 'undefined', '小肖', '105', null, undefined];
let newarr3 = arr3.filter(function (item, index, arr3) {
    // 当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr3.indexOf(item, 0) === index;
});
console.log(newarr3); 
// [ 1, '小杨', null, 'undefined', '小肖', '105', undefined ]

// 操作-筛选数组对象 单个条件筛选
let arr4 = [{name: '小肖',age: 30},{name: '小杨',age: 23}];
let newarr4 = arr4.filter(item => item.age == 23);
console.log(newarr4); // [{ name: '小杨', age: 23 }]

map和filter的异同点

• map：将每一项item取出 跟return后面的语句分别执行 将结果们一起返回以一个新数组形式显示
• map：是对原数组的加工,映射成一对一映射的新数组

let arr = [{name:'小肖',age:30},{name:'小杨',age:23},{name:'小悦',age:18}];

let mapArr1 = arr.map(item=>{
    return item.age > 18
});
console.log(mapArr1); // [true, true, false]

let mapArr2 = arr.map(item=>{
    return item.name == '小肖'
});
console.log(mapArr2); // [ true, false, false ]

• filter：将每一项item取出 跟return后面语句分别执行 过滤出来的数据合在一起以新数组形式显示
• filter：是满足条件的留下,是对原数组的过滤

let filterArr = arr.filter(item=>{
    return item.age >18
});
console.log(filterArr); // [{name: '小肖', age: 30}, {name: '小杨', age: 23}]

• 总结：map用于修改 filter用于过滤 都不改变原数组