iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript数组includes、reduce的基本使用
  • 425
分享到

javascript数组includes、reduce的基本使用

2024-04-02 19:04:59 425人浏览 泡泡鱼
摘要

目录前言Array.prototype.includes 语法 参数返回值 实例 Array.prototype.reduce 语法 参数返回值 总结前言 在过去的几年中,javas

前言

在过去的几年中,javascript语言进行了多次更新。为了跟上技术更新的脚步,时刻保持一颗学习的心。趁着休息的时间学习熟悉一下数组的includes、reduce的使用。

Array.prototype.includes

ES7添加对此方法的支持,includes() 方法用来判断一个数组是否包含一个指定的值的元素,并返回布尔值true或false,如果包含则返回 true,否则返回 false。

语法

arr.includes(valueToFind[, fromIndex])

参数

  • valueToFind(必须):需要查找的元素值,比较字符串和字符时是区分大小写。
  • fromIndex(可选):从数组 fromIndex 索引处开始查找 valueToFind。
    • 负数 ,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。
    • 默认值为 0。

返回值

包含则返回 true,否则返回 false。

实例


// ES5 Code
const numbers = ["一", "二", "三", "四"];
console.log(numbers.indexOf("一") > -1); // true
console.log(numbers.indexOf("六") > -1); // false

// ES7 Code
console.log(numbers.includes("一")); // true
console.log(numbers.includes("六")); // false

console.log(numbers.includes("一",1)); // false,从数组索引为`1`往后找
console.log(numbers.includes("一", -3)); // true,从 `array.length + fromIndex` 的索引开始完后找,跟上面从索引为1开始等效

使用 includes 方法可以使代码简短易懂。include 方法在比较值时也很方便,如下代码。


// 过去
const day = "星期二";
if (day === "星期二" || day === "星期三" || day === "星期四") {
    console.log(day);
}

// 现在
if (["星期二", "星期三", "星期四"].includes(day)) {
    console.log(day);
}

Array.prototype.reduce

reduce() 方法对数组中的每个元素执行reducer函数(升序执行),将其结果汇总为单个返回值。

语法

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素。

参数

  • callback(必须):执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的reducer函数,包含四个参数
    • accumulator(必须):累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,初始值可以通过initialValue定义,默认为数组的第一个元素值,累加器将保留上一个操作的值,就像静态变量一样
    • currentValue(必须):数组中正在处理的元素
    • index(可选):数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为 0,否则从索引 1 起始。
      注意:如果没有提供 initialValue,reduce 会从索引 1 的地方开始执行 callback 方法,跳过第一个索引。如果提供 initialValue,从索引 0 开始。
    • array(可选):调用 reduce() 的数组
  • initialValue(可选):作为第一次调用 callback 函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值

函数累计处理的结果。

实例


const arrNumbers = [1, 2, 3, 4, 5];
const reduceNumbers = (arrayNumbers, accumulatorInitVal = false) => {
    const reduceCallback = (accumulator, currentVal, currentIndex) => {
        console.log(`当前索引:${currentIndex}`);
        return accumulator + currentVal;
    };
    return accumulatorInitVal
        ? arrayNumbers.reduce(reduceCallback, accumulatorInitVal)
        : arrayNumbers.reduce(reduceCallback);
};

console.log(reduceNumbers(arrNumbers)); // 15,累计器初始值为数组的第一个元素的值1
console.log(reduceNumbers(arrNumbers, 10)); // 25,累计器初始值为10

console.log(当前索引:${currentIndex}),是为了更加直观的看到索引值。

第一次未定义初始值输出如下:

当前索引:1
当前索引:2
当前索引:3
当前索引:4

第二次定义了累计器初始值输出如下:

当前索引:0
当前索引:1
当前索引:2
当前索引:3
当前索引:4

接下来我们来看一个奇葩需求,出于某种原因,需要一个包含所有用户全名的新数组(他们的姓,加上他们的名字),但只有当他们是20多岁,并且他们的全名是3个字的时候才需要。不要问我们为什么需要这么奇葩的数据子集,产品经理问了,我们很乐意帮忙^_^


const users = [
    {
        firstName: "坚",
        lastName: "孙",
        age: 37,
    },
    {
        firstName: "策",
        lastName: "孙",
        age: 21,
    },
    {
        firstName: "葛亮",
        lastName: "诸",
        age: 28,
    },
    {
        firstName: "备",
        lastName: "刘",
        age: 44,
    },
    {
        firstName: "统",
        lastName: "庞",
        age: 22,
    },
    {
        firstName: "维",
        lastName: "姜",
        age: 19,
    },
    {
        firstName: "伯温",
        lastName: "刘",
        age: 22,
    },
];
const getFullName = (user) => `${user.lastName}${user.firstName}`;
const filterByAge = (user) => user.age >= 20 && user.age < 30;

// 常规实现
const getFilterResult = users
    //  第一步筛选年龄20-30之间的用户
    .filter((user) => filterByAge(user))
    //  拼接全名
    .map((user) => getFullName(user))
    //  筛选
    .filter((fullName) => fullName.length === 3);

console.log(getFilterResult);   // [ '诸葛亮', '刘伯温' ]

// 迭代方式实现
const iterationsFilterResult = (arrayResult, currentUser) => {
    const fullname = getFullName(currentUser);
    if (filterByAge(currentUser) && fullname.length === 3) {
        arrayResult.push(fullname);
    }
    return arrayResult;
};
console.log(users.reduce(iterationsFilterResult, []));  // [ '诸葛亮', '刘伯温' ]

总结

到此这篇关于javascript数组includes、reduce基本使用的文章就介绍到这了,更多相关javascript数组includes、reduce内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: javascript数组includes、reduce的基本使用

本文链接: https://www.lsjlt.com/news/129701.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript数组includes、reduce的基本使用
    目录前言Array.prototype.includes 语法 参数返回值 实例 Array.prototype.reduce 语法 参数返回值 总结前言 在过去的几年中,JavaS...
    99+
    2024-04-02
  • javascript数组includes、reduce的基本使用方法
    这篇文章主要讲解了“javascript数组includes、reduce的基本使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript数组includes、reduce的...
    99+
    2023-06-20
  • 如何在JavaScript数组中使用reduce
    如何在JavaScript数组中使用reduce?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。JavaScript的特点1.JavaScript主要用来向HTM...
    99+
    2023-06-14
  • JavaScript数组reduce()方法怎么使用
    这篇文章主要介绍了JavaScript数组reduce()方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组reduce()方法怎么使用文章都会...
    99+
    2024-04-02
  • JavaScript数组reduce方法如何使用
    今天小编给大家分享一下JavaScript数组reduce方法如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。redu...
    99+
    2023-07-05
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2024-04-02
  • JavaScript高阶API数组reduce函数使用示例
    目录正文1.求数组中所有对象的年龄和2.按照年龄分组3.将数组对象转化为对象4.参数打印总结正文 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面...
    99+
    2022-11-13
    JavaScript数组API reduce JavaScript API reduce
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2024-04-02
  • Javascript数组方法reduce怎么用
    这篇文章主要为大家展示了“Javascript数组方法reduce怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Javascript数组方法reduce怎...
    99+
    2024-04-02
  • JavaScript数组reduce()方法怎么用
    本篇内容主要讲解“JavaScript数组reduce()方法怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法怎么用”吧!将某个值减去数组中的每个...
    99+
    2023-06-26
  • JavaScript如何利用includes实现数组去重
    这篇文章主要为大家展示了“JavaScript如何利用includes实现数组去重”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何利用includes实现数组去重”这篇文章...
    99+
    2023-06-03
  • 怎么使用javascript数组求和中的reduce()方法
    这篇文章将为大家详细讲解有关怎么使用javascript数组求和中的reduce()方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝...
    99+
    2023-06-14
  • JavaScript如何使用reduce实现数组的flat方法
    这篇文章主要介绍了JavaScript如何使用reduce实现数组的flat方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大...
    99+
    2024-04-02
  • JavaScript数组reduce()方法的语法和应用
    本篇内容主要讲解“JavaScript数组reduce()方法的语法和应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript数组reduce()方法的语法和应用”吧!前言redu...
    99+
    2023-06-20
  • JavaScript如何使用reduce实现数组filter方法
    这篇文章主要为大家展示了“JavaScript如何使用reduce实现数组filter方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何...
    99+
    2024-04-02
  • JavaScript中如何使用reduce实现数组扁平化
    这篇文章主要为大家展示了“JavaScript中如何使用reduce实现数组扁平化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用r...
    99+
    2024-04-02
  • JavaScript中如何使用reduce实现数组map方法
    这篇文章主要介绍了JavaScript中如何使用reduce实现数组map方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家...
    99+
    2024-04-02
  • javascript数组reduce高级用法有哪些
    本篇内容介绍了“javascript数组reduce高级用法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2024-04-02
  • JavaScript中的reduce()怎么使用
    本篇内容介绍了“JavaScript中的reduce()怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2024-04-02
  • JavaScript中怎么使用includes()判断数组是否含有指定值
    这期内容当中小编将会给大家带来有关JavaScript中怎么使用includes()判断数组是否含有指定值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。已知,我们有一个包...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作