JavaScript数组进阶操作--some、reduce、forEach、every、filter、map

some()

遍历数组，判断元素是否符合判断条件，若有一个符合就返回 true，若都不符合则返回 false，匿名函数的返回值就是判断条件

1. 不改变原数组
2. 返回值：布尔值 true || false
3. 参数：function (匿名函数)，item：每一项元素

参数解释

1. 每次遍历都会执行一次匿名函数，如果有一个匿名函数的返回值为 true，即有一个符合条件，那么 some()会返回 true
2. 都为 false，才会返回 false

 

var lesson = [
    { name: "Vue", type: "前端", people: 786 },
    { name: "Nodejs", type: "服务端", people: 452 },
    { name: "React Native", type: "移动端", people: 165 },
    { name: "Electron", type: "桌面端", people: 153 }
];
// 执行some()，检验是否有学习人数 > 500 的课程
var result = lesson.some(function(item){
    return item.people > 500
});
console.log(result); // true

// ES6箭头函数，简介写法
console.log(lesson.some(item => item.people > 500)); // true
console.log(lesson.some(item => item.people > 10000)); // false

reduce()

迭代数组

1. 不改变原数组
2. 返回值：迭代完成的结果
3. 参数：参数：function (匿名函数)、initial (初始值)、prev (上一次迭代结果)、item（当前元素）、index（当前索引值）、array：（原数组本身）

参数解释

1. initial 为迭代的初始值，可以理解为第一次迭代时 prev 的值
2. 如果 initial 不传，则默认从索引为 1 的元素开始遍历，且第一次迭代时 prev 默认为第 0 项元素

// 数字迭代计算
var arr = [1, 7, 5, 4];

// 获取最大值
var maxNum = arr.reduce(function(prev, item){
    return prev > item ? prev : item;
});
console.log(maxNum); // 7

// 获取总和
var sum = arr.reduce(function(prev, item){
    return prev + item;
});
console.log(sum); // 17

// ES6箭头函数，简介写法
console.log(
    arr.reduce((prev, item) => (prev > item ? prev : item), arr[0])
); // 7
console.log(arr.reduce((prev, item) => prev + item, 0)); // 17

 

var lesson = [
    { name: "Vue", type: "前端", people: 786 },
    { name: "Nodejs", type: "服务端", people: 452 },
    { name: "React Native", type: "移动端", people: 165 },
    { name: "Electron", type: "桌面端", people: 153 }
];

// 计算所有课程的学习人数总和，传递起始值为0
var peopleArray = lesson.reduce(function(prev, item) {
    return prev + item.people;
}, 0);
console.log(peopleArray); // 1538

// ES6箭头函数，简洁写法
console.log(
    lesson.reduce((prev, item) => prev + item.people, 0)
); //1538

forEach()

遍历数组，每遍历一次就执行一次传递的匿名函数

匿名函数中有三个可选参数，分别是 item、index、array

1. item 每一项元素
2. index 当前被遍历元素的索引值
3. array 该数组本身

var arr = ["js", "node", "vue"];
arr.forEach((item, index, array) => {
    console.log(index + ":" + item);
    if (index == array.length) console.log("数组的长度为:" + array.length);
}); // js node vue 数组的长度为:3

every()

遍历数组，判断元素是否符合判断条件，如果都符合则返回 true，否则返回 false，匿名函数的返回值就是判断条件

1. 不改变原数组
2. 返回值：布尔值 true || false
3. 参数：function (匿名函数)，item：每一项元素

参数解释

1. 每次遍历都会执行一次匿名函数，如果所有匿名函数的返回值都为true，也就是所有元素都符合判断条件，那么 every()会返回 true
2. 只要有一个为 false，即只要有一个不符合，就会返回 false

 

var lesson = [
    { name: "Vue", type: "前端", people: 786 },
    { name: "Nodejs", type: "服务端", people: 452 },
    { name: "React Native", type: "移动端", people: 165 },
    { name: "Electron", type: "桌面端", people: 153 }
];
// 执行every()，检验所有课程的学习人数 > 100
var result = lesson.every(function(item){
    return item.people > 100
});
console.log(result); // true

// ES6箭头函数，简洁写法
console.log(lesson.every(item => item.people > 100)); // true
console.log(lesson.every(item => item.people > 500)); // false

filter()

过滤数组，把符合规则的元素组合成一个新数组

1. 不改变原数组
2. 返回值：过滤出来的新数组
3. 参数：function，item：每一项元素

参数解释

1. 每次遍历都会执行一次匿名函数，其中函数返回值为 true 的元素，也就是符合条件的元素，就会被过滤出来，放到新数组中

var lesson = [
    { name: "Vue", type: "前端", people: 786 },
    { name: "Nodejs", type: "服务端", people: 452 },
    { name: "React Native", type: "移动端", people: 165 },
    { name: "Electron", type: "桌面端", people: 153 }
];
// 执行filter()，过滤学习人数 > 300 的课程
var newArray = lesson.filter(function(item){
    return item.people > 300
});
console.log(newArray);
/** 过滤的新数组
 * [
 *    {name: "Vue", type: "前端", people: 786},
 *  {name: "Nodejs", type: "服务端", people: 452}
 * ]
*/ 

// ES6箭头函数，简洁写法
console.log(lesson.filter(item => item.people > 300));

map()

映射数组，将原数组的每一项元素按照规则进行改变，将所有改变的结果组合成一个新数组

1. 不改变原数组
2. 返回值：映射后的新数组
3. 参数：function，item：每一项元素

参数解释

1. 每次遍历都会执行一次匿名函数，每一项元素进行相应的改变

var arr = [12, 45, 56, 6];
console.log(arr.map(item => item * 2)); // [24, 90, 112, 12]

var lesson = [
    { name: "Vue", type: "前端", people: 786 },
    { name: "Nodejs", type: "服务端", people: 452 },
    { name: "React Native", type: "移动端", people: 165 },
    { name: "Electron", type: "桌面端", people: 153 }
];
// 将每一项元素映射为该元素的name值
var nameArray = lesson.map(function(item){
    return item.name
});
console.log(nameArray);
// ["Vue", "Nodejs", "React Native", "Electron"]

// ES6箭头函数，简介写法
console.log(lesson.map(item => item.name));