数组函数有哪些用处

很多时候你可能很纠结,你应该使用reduce更多或者你不应该使用filter,更应该使用map;或者是for,为什么不使用forEach?是不是太纠结了。

事实上呢?数组和数组的迭代函数对于初学者来说都会感到困惑,所以我将试着为每个简化问题,最后提出的问题是:你想要返回什么?

简介

为每个现有的东西返回一个东西:map()

只返回一些现有的东西:filter()

只返回一个东西:reduce()

不要返回任何东西,而是对每个已存在的东西做一些事情:forEach()

接下来一个个介绍这些数组相关的函数,并且使用一个非箭头函数示例,另外同时用一个箭头函数的示例。

为每个现有的东西返回一个新东西:map()

如果你有一个数组,燕且希望对该数组中的每一项执行一些操作,返回一个带有新值的数组,那么使用map()是最合适不过。这里有一个简单的函数,它接受数组并将数组每个项做翻倍运算:

const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) {    return item * 2;});console.log(newArray); // -> [2, 4, 6]

登录后复制

使用ES6的箭头函数:

const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2);console.log(newArray); // -> [2, 4, 6]

登录后复制

注意:使用新的箭头函数语法,我们不需要使用function、return关键词或者花括号{}。这是因为箭头函数提供了像这样的simple()函数的隐式返回。你可以从Wes Bos阅读更多关于箭头函数的信息。

返回一个新数组,只包含一些符合条件的现有数组项:filter()

filter()可能是最容易理解的数组函数,因为它的命名非常好。filter()接受一系列的值,对每个值执行一个函数或比较,然后返回一个新的数组。这些值通过它的测试(我们称之为truthy值)。

这里有一个示例,从一个数组中取出大于5的数,然后返回一个符合条件的新数组:

const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) {    return item > 5;});console.log(newArray); // -> [9, 42]

登录后复制

使用ES6的箭头函数:

const newArray = originalArray.filter(item => item > 5);

登录后复制

只返回一个新东西:reduce()

有时候你有一个系列的值,但你只想从它们当中返回一个新东西。数组中的reduce()函数会对数组中的每个项目执行一个函数或比较,然后对所谓的累加器执行一些操作。这是一个更容易用一个例子来描述的函数,因为它描述的术语和函数本身一样让人困惑。

假设你有名字的数组,你想数一下Bob这个名字出现的次数:

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) {    if (item === "Bob") {        return accumulator + 1;    } else {        return accumulator;    }}, 0);console.log(numberOfBobs); // -> 3

登录后复制

使用ES6的箭头函数:

const numberOfBobs = originalArray.reduce((accumulator, item) => {    if (item === "Bob") {        return accumulator + 1;    } else {        return accumulator;    }}, 0);

登录后复制

正如你看到的一样,这个箭头函数并没有节省我们的时间,因为我们必须为函数提供两个参数,然后在返回之前有逻辑,所以我们仍需要花括号{}。

在reduce()函数末尾的0是我们累加器的开始值,如果我们遇到的值是Bob,则添加1,否则我们将返回当前的累加器。如果你不返回任何东西,那么下一次运行该函数的时候将返回undefined。

对数组中每个值做一些事情,但不返回任何值:forEach()

有时,你会有一系列想要处理的值,但不是需要跟踪每个函数调用的返回值。这就是forEach()的意思。

const originalArray = [1, 2, 3];originalArray.forEach(function(item) {    doSomething(item);});

登录后复制

使用ES6箭头函数:

originalArray.forEach( item => doSomething(item); );

登录后复制

总结

简单而甜蜜的。这些是我们为每个函数提供的最简单的示例,让它尽可能地简单,主要是便于理解何时应该使用它们。你可以用这些函数做大量的工作,而且每个函数都有一个高级形式,它也提供了当前的索引:

arr.map((item, index) => {})arr.filter((item, index) => {})arr.reduce((accumulator, item, index) => {})arr.forEach((item, index) => {})

登录后复制

相关推荐:

php数组函数实现关联表的编辑

最实用的JS数组函数整理

常用数组函数有哪些

以上就是数组函数有哪些用处的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2786059.html

(0)
上一篇 2025年3月8日 17:39:17
下一篇 2025年3月8日 17:39:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Generator函数详细解析

    generator 函数是 es6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。这篇文章给大家介绍es6 generator函数的相关知识,希望能帮助到大家。 ECMAScript 6 (简称 ES6 )作为下一代 JavaSc…

    编程技术 2025年3月8日
    200
  • 前端常用方法函数实例详解

    本文主要和大家分享前端编写过程常用方法函数实例详解,希望能帮助到大家。 1. push() 方法 定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 语法 arrayObject.push(newelement…

    编程技术 2025年3月8日
    200
  • JS中的常用函数汇总

    这次给大家带来js中的常用函数汇总,使用js中的常用函数的注意事项有哪些,下面就是实战案例,一起来看一下。 //数字每隔三位加’,’,如1000变为’1,000’function numFormat( params ) {    var v…

    编程技术 2025年3月8日
    200
  • 基础的JavaScript知识总结(六)函数、初始作用域(下)

    这次给大家带来基础的javascript知识总结,总共有十一个知识点,基础的javascript知识总结(六)函数、初始作用域(下)下面就是实战案例,一起来看一下。 作用域初探 作用域定义: 变量(变量作用于又称上下文)和函数生效(能被访问…

    编程技术 2025年3月8日
    200
  • JS的日常常用函数整合

    这次给大家带来js的日常常用函数整合,使用js日常常用函数整合的注意事项有哪些,下面就是实战案例,一起来看一下。 直接下载min目录下的lutils.min.js或lutils.full.min.js   推荐根据自己的的实际需求,自行进行…

    编程技术 2025年3月8日
    200
  • js中数组函数和注意事项

    本文主要和大家分享js中数组函数和注意事项,首先我们先和大家分享js 的数组对象有哪些,希望能帮助到大家。 js 的数组对象有哪些 push       — 向数组的末尾添加一个或更多元素,并返回新的长度。 pop        — 删除并…

    编程技术 2025年3月8日
    200
  • ajax请求data会遇到哪些问题

    这次给大家带来ajax请求data会遇到哪些问题,ajax请求data的注意事项有哪些,下面就是实战案例,一起来看一下。 使用jquery,post请求data:那里要使用data:JSON.stringify(data) $.ajax({…

    编程技术 2025年3月8日
    200
  • C3+jQuery做出动画效果及回调函数

    这次给大家带来c3+jquery做出动画效果及回调函数,c3+jquery做出动画效果及回调函数的注意事项有哪些,下面就是实战案例,一起来看一下。 写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上…

    2025年3月8日
    200
  • 完全掌握js回调函数

    一、前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果。 function say (value) {    alert(value);}alert(say);alert(say(‘hi js.’)); 登录后复制 如果你…

    2025年3月8日
    200
  • js的内置对象有哪些

    这次给大家带来js的内置对象有哪些,使用js内置对象的注意事项有哪些,下面就是实战案例,一起来看一下。 Js之内置对象和浏览器对象 1、String对象: String对象用于处理已有的字符串 字符串可以使用双引号或者单引号 1)index…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论