JavaScript数组 几个常用方法总结


Posted in Javascript onNovember 11, 2021

1、前言

数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习。
后续会慢慢的将其他数组方法添加进来。
善用数组方法可以使数据处理变的优雅且简单。

那下面让我们开始吧:

2、filter()

描述:

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

语法:

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

参数:

callbackthisValue:

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

callback的参数列表:

参数 是否可选 描述
参数一 element 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 filter 的数组本身

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

3、map()

描述:

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

语法:

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

参数:

callbackthisValue

参数 是否可选 描述
参数一 callback 必选 数组中的每个元素都要运行的回调函数。它接收三个参数。
参数二 thisValue 可选 执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"

callback的参数列表:

参数 是否可选 描述
参数一 element 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 filter 的数组本身

thisValue的参数:

执行 callback 时,用于 this 的值。

返回值:

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

示例:

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

4、sort()

描述:

map() 方法在原数组上进行修改更改元素的顺序

注:默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时

语法:

Array.sort( compareFunction )

参数:

compareFunction

参数 是否可选 描述
参数一 compareFunction 可选 规定排列顺序的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

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

5、reduce()

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

注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

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

参数:

callbackinitialValue

参数 是否可选 描述
参数一 callback 必选 执行数组中每个数组元素的函数 (如果没有initialValue初始值那么第一个值不会执行改函数)它接收四个参数。
参数二 initialValue 可选 callback函数的初始值

callback的参数列表:

参数 是否可选 描述
参数一 accumulator 必选 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue。
参数二 currentValue 必选 当前元素
参数三 index 可选 当前元素的索引值
参数四 array 可选 调用了 reduce() 的数组本身

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

6、forEach()

描述:

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

注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

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

参数:

callbackthisValue

参数 是否可选 描述
参数一 callback 必选 执行数组中每个数组元素的函数,它接收三个参数。
参数二 thisValue 可选 执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"

callback的参数列表:

参数 是否可选 描述
参数一 currentValue 必选 当前元素
参数二 index 可选 当前元素的索引值
参数三 array 可选 调用了 forEach() 的数组本身

thisValue的参数:

执行 callback 时,用于 this 的值。

返回值:

该方法没有返回值。

示例:

let number = [1, 2, 3, 4];

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

7、方法列表

方法属性:

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

到此这篇关于JavaScript数组 几个常用方法总结的文章就介绍到这了,更多相关JavaScript数组 几个常用方法 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

8、本文参考

MDN中文官网https://developer.mozilla.org/zh-CN/
W3School 简体中文版https://www.w3school.com.cn/

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JavaScript 事件捕获冒泡与捕获详情
JavaScript 定时器详情
Nov 11 #Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
实现一个简单得数据响应系统
Nov 11 #Javascript
JavaScript函数柯里化
Nov 07 #Javascript
JS数组去重详情
Nov 07 #Javascript
手写实现JS中的new
Nov 07 #Javascript
You might like
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP使用函数用法详解
2018/09/30 PHP
列表内容的选择
2006/06/30 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python切片用法实例教程
2014/09/08 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
会议邀请书范文
2014/02/02 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书