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

方法目录

• forEach 遍历数组
• every 是否所有元素都符合
• some 是否有元素符合
• filter 过滤
• map 映射
• reduce 迭代

forEach()

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

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

  • item 每一项元素
  • index 当前被遍历元素的索引值
  • 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，匿名函数的返回值就是判断条件

• 不改变原数组
• 返回值：布尔值 true || false

• 参数：function (匿名函数)

  • item：每一项元素

参数解释

• 每次遍历都会执行一次匿名函数，如果所有匿名函数的返回值都为true，也就是所有元素都符合判断条件，那么 every()会返回 true
• 只要有一个为 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

some()

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

• 不改变原数组
• 返回值：布尔值 true || false

• 参数：function (匿名函数)

  • item：每一项元素

参数解释

• 每次遍历都会执行一次匿名函数，如果有一个匿名函数的返回值为 true，即有一个符合条件，那么 some()会返回 true
• 若都为 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

filter()

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

• 不改变原数组
• 返回值：过滤出来的新数组

• 参数：function

  • item：每一项元素

参数解释

• 每次遍历都会执行一次匿名函数，其中函数返回值为 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()

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

• 不改变原数组
• 返回值：映射后的新数组

• 参数：function

  • item：每一项元素

参数解释

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

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));

reduce()

迭代数组

• 不改变原数组
• 返回值：迭代完成的结果

• 参数：function (匿名函数)、initial (初始值)

  • prev：上一次遍历函数的返回值 (上一次迭代结果)
  • item：当前元素
  • index：当前索引值
  • array：原数组本身

参数解释

• initial 为迭代的初始值，可以理解为第一次迭代时 prev 的值
• 如果 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