前言

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

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

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

那下面让我们开始吧:

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. chrome浏览器扩展的事件处理

    关于chrome扩展开发的栗子已经有很多了,问问度娘基本能满足你的欲望, 我想说的是扩展和页面间的数据传递问题. 我们知道写扩展有个必须的文件就是“manifest.json”, 这个里面定义了一个和 ...

  2. Spark 3000门徒第一课随笔

    昨晚听了王家林老师的Spark 3000门徒系列课程的第一课,把scala基础过了一遍,对ArrayBuffer有了新的认识: Array本身创建后不可修改ArrayBuffer可修改import s ...

  3. width100%,设置padding或border溢出解决方法

    .box { width: 100px; height: 100px; background: red;} .bd { width: 100%; padding: 10px; background: ...

  4. php快速定位多维数组的深度

    原文地址:php快速定位多维数组的深度作者:陌上花开 自定义一个函数: function array_depth($array)  { $max_depth = 1; foreach ($array ...

  5. Python数据库查询之组合条件查询-F&amp;Q查询

    F查询(取字段的值) 关于查询我们知道有filter( ) ,values( ) , get( ) ,exclude( ) ,如果是聚合分组,还会用到aggregate和annotate,甚至还有万能 ...

  6. 初始Spring MVC——练手小项目

    初始Spring MVC 前几天开始了我的spring学习之旅,由于之前使用过MVC模式来做项目,所以我先下手的是 Spring MVC,做个练手项目,非常简单 项目介绍: 用户输入信息 -> ...

  7. KindEditor自动过滤首行缩进和全角空格的解决方法

    KindEditor 4.1.11:kindeditor-all.js 文件中大致第752行: /(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?: ...

  8. newwork setup

    #-*-coding:utf-8-*- ######################################################################### # Copy ...

  9. 树莓派3中安装JDK

    一.简介 树莓派3(Raspbian系统,下载地址:https://www.raspberrypi.org/downloads/raspbian/),安装JDK8,直接运行:apt-get insta ...

  10. 前端小菜鸡使用Vue+Element笔记(二)

    记录一下在使用Vue和Element做项目时遇到过的难点... 1.在 <el-table>表格中嵌入 select下拉选择框,以及 tooltip提示框的使用 主要定义格式如红色标记代码 ...