ES6(四) 数组的方法

本节主要讲解数组的方法

• forEach
• map
• filter
• find
• every
• some
• reduce

先说原始的方法

var arr = [1,2,3,4,5];
 for(var i=0;i<arr.length;i++)
{
  console.log(arr[i]);
}

ES6 的方法

(1)forEach 方法

//第一种写法:
let arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index) => {
    console.log(item + "||" + index);
})
//第二种写法:
let arr = [1, 2, 3, 4, 5, 6];
function abc(item, index) {
    console.log(item + "||" + index);
}
arr.forEach(abc);

(2)map 方法

• 有 map 必有 return 否则和 foreach 一样,因为 map 有返回值,要是不写新的数组存的就是 undefined
  map 第一种写法

let arr = [1, 2, 3, 4, 5, 6];

function abc(item, index) {
    return item + 1;
}
let arr1 = arr.map(abc);
console.log(arr1);

map 第二种写法

let arr2 = [3, 4, 5, 6, 7];
let arr3 = arr2.map((item, index) => {
    return item * 2;
})
console.log(arr3);

map 第三种写法

let arr4 = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿", sex: "女" },
    { id: 4, age: 11, name: "啪啪", sex: "男" },
];

let arr5 = arr4.map((item, index) => {
    return item.name;
})
console.log(arr5);

(3)filter 过滤器

• filter 必有 return

//场景一
//假定有一个对象数组(A)获取数组中指令类型的对象放到数组B中
let arr = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿", sex: "女" },
    { id: 4, age: 11, name: "啪啪", sex: "男" },
];

let arr2 = arr.filter((content, index) => {
    return content.sex == "男"
})
console.log(arr2);
//场景 二
//假定有一个数组(A)过滤掉不满足一下条件的。
//条件：性别男，并且年龄大于20的
let arr = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿", sex: "女" },
    { id: 4, age: 11, name: "啪啪", sex: "男" },
];
let arr3 = arr.filter((item, index) => {
    return item.sex === "男" && item.age > 20
})
console.log(arr3);

//场景三
//假定两个数组(a,b)根据A中id值，过滤掉B数组中不符合的数据
let arr = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" }
];
let arr2 = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
    { id: 4, age: 11, name: "啪啪2", sex: "男" },
];

function filter(arr, arr2) {
    let result = [];
    arr2.filter((content, index) => {
        result.push(arr.filter((item, index2) => {
            return item.age == content.age && item.name == content.name;
        })[0]);
    })
    let result2 = result.filter((item, index) => {
        return item
    })
    return result2;
}
console.log(filter(arr, arr2));
//场景四
//去掉undefined
let arr4 = [1, 2, 3, undefined, undefined];
let arr3 = arr4.filter((content, index) => {
    return content;
})
console.log(arr3);

无论是 map 还是 filter 他返回的都是一个新的数组

(4) find 找到符合条件的

find 必有 return 并且他找到以后就不会往下执行了，也就是说要是有 2 个符合条件的，他只能找到第一个,返回的不是数组

---

/*假定有一个对象数组A找到符合条件的对象*/
let arr2 = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
    { id: 4, age: 23, name: "啪啪2", sex: "男" },
];
let arr3 = arr2.find((item, index) => {
    return item.age == 23;
})
console.log(arr3);  //   { id: 1, age: 23, name: "哈哈", sex: "男" }, 符合的第二个就找不到
/*场景2有一个对象数组A，根据指定对象的条件找到数组中符合条件的对象*/
/*假定有一个对象数组A找到符合条件的对象*/
let arr2 = [
    { id: 1, age: 23, name: "哈哈", sex: "男" },
    { id: 2, age: 20, name: "呵呵", sex: "女" },
    { id: 3, age: 15, name: "嘿嘿2", sex: "女" },
    { id: 4, age: 23, name: "啪啪2", sex: "男" },
];
let arr = { id: 1, title: "Node.js" }
let arr3 = arr2.find((item, index) => {
    return arr.id == item.id;
})
console.log(arr3);

every 和 some

• every 和 some 返回就是布尔值
• every 指的是每一项都要求符合条件就是逻辑与&&一假都假
• some 指的是有一个符合就可以了||一真都真

let computers = [
    { "name": "APPLE", ram: 16 },
    { "name": "IBM", ram: 4 },
    { "name": "Acer", ram: 32 }
];
let state = true;
let somestate = false;
let every = computers.every(function(item, index) {
    return item.ram > 2;
})
console.log(every);

(5) reduce 一般求综合的时候使用 2 个参数，前面第一个是回调函数，第二个是 all 的初始值。回调函数的参数也不一样。第一个是合集，第二个是每一个分项。reduce 必须有 return

比如:

/*场景一*/
/*计算数组中所有值得和*/
let arr = [1, 2, 3];
let b = arr.reduce(function(all, item) {
    return all + item;
}, 0);
console.log(b);
//老办法
let a = 0;
arr.forEach(function(item, index) {
    a += item;
})
console.log(a);

再比如:

/*场景二*/
/*假将数组中某个属性抽离到另外的数组中*/
let a2 = [
    { color: "red", id: 1 },
    { color: "blue", id: 2 },
    { color: "yellow", id: 3 },
    { color: "green", id: 4 }
];
let b3 = a2.reduce(function(all2, item) {
    all2.push(item.color);
    return all2;
}, []);
console.log(b3);