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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue-test-utils初使用详解
May 23 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
前端开发基础javaScript的六大作用
Aug 06 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
菜单效果
2006/10/14 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js实现图片轮播效果
2015/12/19 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
python中黄金分割法实现方法
2015/05/06 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python实现身份证号码解析
2015/09/01 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python设置随机种子实例讲解
2019/09/12 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
小学毕业感言500字
2014/02/28 职场文书
文体活动实施方案
2014/03/27 职场文书
啤酒节策划方案
2014/05/28 职场文书
假面舞会策划方案
2014/05/29 职场文书
买卖合同协议书范本
2014/10/18 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
python实现双向链表原理
2022/05/25 Python