javascript数组includes、reduce的基本使用


Posted in Javascript onJuly 02, 2021
目录
  • 前言
  • Array.prototype.includes
    • 语法
    • 参数
    • 返回值
    • 实例
  • Array.prototype.reduce
    • 语法
    • 参数
    • 返回值
  • 总结

 

前言

在过去的几年中,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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
常用的js方法合集
Mar 10 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
React 并发功能体验(前端的并发模式)
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
react中的DOM操作实现
Jun 30 #Javascript
elementui的el-popover修改样式不生效的解决
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
You might like
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
总结对比php中的多种序列化
2016/08/28 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
简单了解Python生成器是什么
2019/07/02 Python
python内存管理机制原理详解
2019/08/12 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
环保公益广告语
2014/03/13 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
地陪导游欢迎词
2015/01/26 职场文书
公司规章制度范本
2015/08/03 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书