前言

数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习。

后续会慢慢的将其他数组方法添加进来。

善用数组方法可以使数据处理变的优雅且简单。

那下面让我们开始吧:

filter()

描述:

filter() 方法创建一个新数组,并将符合条件的所有元素添加到创建的新数组中。

语法:

Array.filter(callback(element, index, array) { // 函数体 }, thisValue)

参数:

callback与thisValue

参数 是否可选 描述
参数一 callback 必选 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接收三个参数。
参数二 thisValue 可选 执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"
  1. callback的参数列表
参数 是否可选 描述
参数一 element 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 filter 的数组本身
  1. thisValue的参数

执行 callback 时,用于 this 的值。

返回值:

是一个由 filter() 参数一函数的返回值组成的新数组

示例:

let users = [
{id: 11, name: "孙悟空"},
{id: 21, name: "猪八戒"},
{id: 31, name: "沙和尚"}
]; // 返回前两个用户的数组
let filterUsers = users.filter(item => item.id < 31); console.log(filterUsers.length); // 2

map()

描述:

map() 方法创建一个新数组,新数组的每个元素是调用一次给定函数的返回值。

语法:

Array.map(callback(currentValue, index, array) { // 函数体 }, thisValue)

参数:

callback与thisValue

参数 是否可选 描述
参数一 callback 必选 数组中的每个元素都要运行的回调函数。它接收三个参数。
参数二 thisValue 可选 执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"
  1. callback的参数列表
参数 是否可选 描述
参数一 element 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 filter 的数组本身
  1. thisValue的参数

执行 callback 时,用于 this 的值。

返回值:

是一个由原数组每个元素执行回调函数的结果组成的新数组。

示例:

let number = [1, 2, 3].map(item => item + 1);
console.log(lengths); // 2, 3, 4

sort()

描述:

map() 方法在原数组上进行修改更改元素的顺序
注:默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时

语法:

Array.sort( compareFunction )

参数:

compareFunction

参数 是否可选 描述
参数一 compareFunction 可选 规定排列顺序的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
  1. compareFunction的参数列表
参数 是否可选 描述
参数一 firstEl 必选 第一个用于比较的元素。
参数二 secondEl 必选 第二个用于比较的元素。

compareFunction返回值
返回一个说明这两个值顺序的数字

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。

返回值:

返回值为排序后的数组,但是返回值通常会被忽略,因为修改了原数组。

示例:

let number = [1, 2, 3].map(item => item + 1);
console.log(lengths); // 2, 3, 4

reduce()

描述:

reduce() 方法为数组中的每一个元素依次执行(升序执行)回调函数,不包括数组中被删除或从未被赋值的元素。将其结果计算为一个值。
注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

Array.reduce(callback(accumulator, currentValue, index, array), initialValue)

参数:

callback与initialValue

参数 是否可选 描述
参数一 callback 必选 执行数组中每个数组元素的函数 (如果没有initialValue初始值那么第一个值不会执行改函数)它接收四个参数。
参数二 initialValue 可选 callback函数的初始值
  1. callback的参数列表
参数 是否可选 描述
参数一 accumulator 必选 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue。
参数二 currentValue 必选 当前元素
参数三 index 可选 当前元素的索引值
参数四 array 可选 调用了 reduce() 的数组本身
  1. initialValue的参数

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素作为初始值。 在没有初始值的空数组上调用 reduce 将报错。

返回值:

函数累计处理后的结果
执行完所有callback函数的accumulator参数
注:您的 reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

示例:

let number = [1, 2, 3, 4];
let result = number.reduce((sum, current) => sum + current, 0);
console.log(result); // 10

forEach()

描述:

reduce() 方法为数组中的每一个元素依次执行(升序执行)回调函数,不包括数组中被删除或从未被赋值的元素。将其结果计算为一个值。
注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

Array.forEach(callback(currentValue , index , array), thisValue)

参数:

callback与thisValue

参数 是否可选 描述
参数一 callback 必选 执行数组中每个数组元素的函数,它接收三个参数。
参数二 thisValue 可选 执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"
  1. callback的参数列表
参数 是否可选 描述
参数一 currentValue 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 forEach() 的数组本身
  1. thisValue的参数

执行 callback 时,用于 this 的值。

返回值:

该方法没有返回值。

示例:

let number = [1, 2, 3, 4];
number.forEach((item, index ,array) =>{
console.log(item); // 1/2/3/4
});

方法列表

方法属性:

方法 改变原数组 返回值描述 描述
filter() 过滤后的新数组 过滤器
map() 循环后的新数组 循环
sort() 为排序后的数组 排序
reduce() 为函数累计处理后的结果 累加器
forEach() 没有返回值为undefined 循环

本文参考:
_MDN中文官网 _https://developer.mozilla.org/zh-CN/
_W3School 简体中文版 _https://www.w3school.com.cn/

JavaScript数组 几个常用方法的更多相关文章

  1. JavaScript数组与字符串常用方法总结

    先来一段代码引子: var str='hello world'; alert(str.charAt());//通过下标查找值: alert(str.indexOf());//通过值查找字符串下标:没有 ...

  2. JavaScript数组对象常用方法

    JavaScript数组对象常用方法 方法 形式 返回值 是否改变原数组 描述 concat -items: ConcatArray[] 追加之后的数组 否 连接两个或更多的数组,并返回结果.注意 c ...

  3. 关于javascript数组的定义与其一些常用方法总结

    由于JavaScript是一门宽松的语言,这种宽松可能会带来更加麻烦的事情.比如JavaScript的数组,定义与使用的方式太灵活有时候让人迷惑.下面将JavaScript中关于数组常用的方法.定义之 ...

  4. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

  5. JavaScript数组中的22个常用方法

    数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍. ...

  6. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  7. 第七章:Javascript数组

    数组是值的有序结合.每个值叫做一个元素,而每个元素在数组中都有一个位置,用数字表示,称为索引. javascript数组是无类型的:数组的元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类 ...

  8. 10分钟弄懂javascript数组

    建议阅读时间 : 10分钟 主要内容:javascript数组的基本概念.属性.方法 新建数组: var arr01 = ["a","b","c&qu ...

  9. javascript数组的属性、方法和清空-最全!!!(必看)

    今天经理要我从新看一遍js,当我再看<精通js和jquery>这本书时,发现关于数组的这章节讲的很少,于是想自己总结一下数组的常用方法. 定义数组: var arr = new Array ...

  10. Javascript数组操作(转)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

随机推荐

  1. Sort Colors

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  2. 【WCF--初入江湖】11 安全

    11 安全 前言 [1]传输安全  传输安全模式  传输安全与绑定协议   [2]身份验证  身份验证分类  证书  示例:传输安全匿名客户端证书的使用 1. 传输安全     保证信息在传输过程中的 ...

  3. jquery 浏览器放大缩小函数resize

    <script> $(function(){ $(window).resize(function(){ var _height = $(window).height(); var _con ...

  4. 转载:Raspberry Pi 树莓派入门

    转载说明: 整理转载,原文链接http://www.eeboard.com/bbs/thread-5191-1-1.html 这篇帖子我打算用Q&A的方式来编写,这样大家更容易一目了然的看明整 ...

  5. [转]Go语言(golang)开源项目大全

    内容目录 Astronomy 构建工具 缓存 云计算 命令行选项解析器 命令行工具 压缩 配置文件解析器 控制台用户界面 加密 数据处理 数据结构 数据库和存储 开发工具 分布式/网格计算 文档 编辑 ...

  6. Caused by: java.lang.ClassNotFoundException: org.springframework.integration.handler.support.HandlerMethodArgumentResolversHolder

    <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring ...

  7. /etc/resolv.conf

    /etc/resolv.conf它是DNS客户机配置文件,用于设置DNS服务器的IP地址及DNS域名,还包含了主机的域名搜索顺序.该文件是由域名解析 器(resolver,一个根据主机名解析IP地址的 ...

  8. 图论-最短路径--3、SPFA算法O(kE)

    SPFA算法O(kE) 主要思想是:     初始时将起点加入队列.每次从队列中取出一个元素,并对所有与它相邻的点进行修改,若某个相邻的点修改成功,则将其入队.直到队列为空时算法结束.     这个算 ...

  9. SpringBoot专题2----springboot与schedule的激情相拥

    Schedule:计划,任务.就是我们常说的定时任务.这在我们做一些系统的时候,是经常需要用到的.比如:定时更新一些数据,定时更新索引,都需要这样的一个功能. 第一:创建一个名为springboot- ...

  10. UML建模概述

    UML的组成主要有事物.图.关系. UML中的事物: (1)构件事物:UML模型的静态部分,描述概念或物理元素,包括以下 a. 类:类是对一组具有相同属性.相同操作.相同关系和相同语义的对象的抽象.包 ...