唯品秀前端博客

刚开始接触这几个方法倒也记得不是很清楚,在此纪录一下以加深印象,主要从两个角度来理解和记忆吧,一个是API的使用,一个是内部实现

函数简述

  • forEach():没有返回值,只是针对每个元素调用function
  • map():返回一个新的Array,每个元素为调用function的结果
  • filter():返回一个符合function过滤条件的元素数组
  • some():返回一个boolean,判断是否有元素是否符合function条件
  • every():返回一个boolean,判断每个元素是否符合function条件

API的区别

不生成新数组的迭代器方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//数组操作之迭代器方法(这些方法可以对数组中的每一个元素运用某个方法)
//1、forEach方法(接收一个函数作为参数)
function square(num) {
    console.log(num * num);
}
var nums = [1, 2, 3, 4, 5];
console.log(nums.forEach(square));

//2、every方法(接收一个返回值为布尔值的函数,对数组中的每一个元素使用该函数)
function isEven(num) {
    return num % 2 == 0;
}
var evens = [2, 4, 6, 8, 10];
var isAllEven = evens.every(isEven); //当且仅当数组中的所有的元素返回为真,every函数才会返回为真
if (isAllEven) {
    console.log("all is even");
} else {
   console.log("not all is even");
}

//3、some方法(只要数组中有一个元素使用方法返回为真,some函数就会返回真)
var nums = [1, 2, 3, 5, 7, 9];

function isEven(num) {
    return num % 2 == 0;
}
console.log(nums.some(isEven)); //true

//4.reduce方法
//用法一:为数组中的元素求和
function add(currentTotal, currentValue) {
    //console.log(currentValue);
    //console.log(currentTotal);
    return currentTotal + currentValue;
}
var nums = [1, 2, 3, 4, 5, 6, 7];
console.log(nums.reduce(add));
//用法二:将数组中的元素连接成一个长的字符串
function linkStr(foreStr, currentStr) {
    return foreStr + currentStr;
}
var strings = ["nolan", "is", "studying", "javascript"];
console.log(strings.reduce(linkStr));

生成新数组的迭代器方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//1.map方法(类似于不生成新数组中的forEach方法),注意,它返回的数组是循环后每一项的结果
//用法一:取数组中每个单词的第一个字母
function firstAlpha(item) {
    return item[0];
}
var words = ["nolan", "is", "studying", "javascript"];
var firstAlphas = words.map(firstAlpha);
console.log(firstAlphas);
//输入结果:['n', 'i', 's', 'j']

function firstAlpha(item) {
    return item.a == 1;
}
var words = [{a:1}, "is", {c:2}];
var firstAlphas = words.map(firstAlpha);
console.log(firstAlphas);
// 结果:[true, false, false]

//2.filter方法(类似于every方法)
//用法一:筛选出符合条件(即返回值为true)的元素
function isEven(num) {
    return num % 2 == 0;
}
var nums = [1, 2, 4, 6, 8, 10];
var evens = nums.filter(isEven);
console.log(evens);
//案例:随机生成一些成绩,挑选出大于六十分的成绩
function pass(grade) {
    if (grade > 60) {
        return true;
    } else {
        return false;
    }
}
var grades = [];
for (var i = 0; i < 20; i++) {
    grades[i] = Math.floor(Math.random() * 101);
}
console.log(grades);
var passedGrades = grades.filter(pass);
console.log(passedGrades);
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"JS中常见的迭代器forEach(),map(),filter(),some(),every()区别"

表情

最新评论

    暂无留言哦~~