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优缺点分析说明
Jun 09 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 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模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python去掉行尾的换行符方法
2017/01/04 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python numpy数组复制使用实例解析
2020/01/10 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
企划经理的岗位职责
2013/11/17 职场文书
人力资源总监工作说明
2014/03/03 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
委托书格式
2014/08/01 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015入党自荐书范文
2015/03/05 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技