• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript数组 几个常用方法总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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/


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
浅谈JavaScript数组简介发布时间:2022-02-05
下一篇:
用JS创建一个录屏功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap