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的一句代码实现表格的简单筛选
Jul 26 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
手把手教你使用TypeScript开发Node.js应用
May 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
外科实习自我鉴定
2013/10/06 职场文书
小小商店教学反思
2014/04/27 职场文书
大学活动总结模板
2014/07/10 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
国富论读书笔记
2015/06/26 职场文书
新店开张宣传语
2015/07/13 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android