JavaScript数组 几个常用方法总结
目录
- 1、前言
- 2、filter()
- 3、map()
- 4、sort()
- 5、reduce()
- 6、forEach()
- 7、方法列表
- 8、本文参考
1、前言
数组方法有太多了，本文记录一些本人容易记错的一些数组方法，用于巩固及复习。
后续会慢慢的将其他数组方法添加进来。
善用数组方法可以使数据处理变的优雅且简单。
那下面让我们开始吧:
2、filter()
描述：
filter() 方法创建一个新数组，并将符合条件的所有元素添加到创建的新数组中。
语法：
Array.filter(callback(element, index, array) { // 函数体 }, thisValue)
参数：
callback与thisValue:
| | 参数 | 是否可选 | 描述 |
|---|---|---|---|
| 参数一 | 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)
参数：
callback与thisValue
| | 参数 | 是否可选 | 描述 |
|---|---|---|---|
| 参数一 | 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)
参数：
callback与initialValue
| | 参数 | 是否可选 | 描述 |
|---|---|---|---|
| 参数一 | 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)
参数：
callback与thisValue
| | 参数 | 是否可选 | 描述 |
|---|---|---|---|
| 参数一 | 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面试之如何实现数组拍平（扁平化）方法
目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个
-
JavaScript数组Array的一些常用方法总结
目录 一.JavaScript中创建数组的方式 二.数组方法概括 三.方法详解 1.join() 2.pop() 3.shift() 4.push() 5.unshift() 6.concat() 7.slice() 8.sort() 9.reverse() 10.toString() 11.splice() 12.valueOf() 13.indexOf() 14.lastIndexOf() 15.forEach() 16.map() 17.filter() 18.every() 19.som
-
JS数组中常用方法技巧学会进阶成为大佬
目录 splice()方法 join()方法 reverse()方法 every()方法 reduce()方法 filter()方法 findIndex()方法 和find()方法 findIndex() find() forEach()方法 some()方法 indexOf()方法 sort ()方法 push()方法 pop()方法 unshift()方法 shift()方法 splice()方法 截取替换数组 第一个参数是起始位置,第二个是截取的个数,第三是替换的元素 ,返回值是截取的元素
-
js数组的 entries() 获取迭代方法
目录 1.entires() 方法语法详解 2.entires() 方法常见使用及注意 2.1 返回迭代器对象 2.2 for...of...的使用 2.3 二维数组行排序 1.entires() 方法语法详解 entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value) . 迭代对象中数组的索引值作为 key, 数组元素作为 value.它的原型(__proto__:Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的[key,v
-
JS数组方法some、every和find的使用详情
目录 1.some 2.every 3.find 1.some 在MDN中这样定义:some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试.它返回的是一个Boolean类型的值. 简而言之就是:它对数组中的每一项进行校验,只要有一项通过了就是true. 它只会返回true或false 它会对数组中的每一项进行检测,千万不要在some里面进行if else操作 不要在return后面写true或false,return后面跟的是你的条件 最近做后台管理系统遇到一个需求:弹出一个Dia
-
JavaScript数组去重的几种方法详谈
目录 一.Set去重 二.双重for循环去重 三.利用indexOf去重 四.利用icludes去重 五.filter 六.Map 总结 一.Set去重 function funSet(arr){ return Array.from(new Set(arr)); } 二.双重for循环去重 function funFor(arr){ for(let i=0,len=arr.length;i<len;i++){ for(let j=i+1,len=arr.length;j<len;j++){ i
-
浅谈JS数组内置遍历方法有哪些和区别
目录 forEach()(ES6)方法 map()(ES6) 方法 flatMap()方法 for...in... for...of... filter(ES6)遍历数组 every()函数(ES6) find()函数(ES6) findIndex()函数 (ES6) forEach()(ES6)方法 forEach()(ES6)方法对数组的每个元素执行一次给定的函数. 1. 数组里的元素个数有几个,该方法里的回调就会执行几次 2. 第一个参数是数组里的元素,第二个参数为数组里元素的索引
-
js 数组 fill() 填充方法
目录 1.fill() 语法 2.fill() 的使用 3.总结 前言: 我们知道了很多了初始化数组的方法,但是初始化数组之后,数组中的每一项元素默认为 empty 空位占位,如何对数组这些空位添加默认的元素,ES6提供了 fill() 方法实现这一操作.本文总结数组 fill() 方法的详细使用. 1.fill() 语法 fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素.不包括终止索引.返回修改后的原始数组,不创建新数组. 使用语法:array.fill( va
-
JavaScript数组 几个常用方法总结
目录 1.前言 2.filter() 3.map() 4.sort() 5.reduce() 6.forEach() 7.方法列表 8.本文参考 1.前言 数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习. 后续会慢慢的将其他数组方法添加进来. 善用数组方法可以使数据处理变的优雅且简单. 那下面让我们开始吧: 2.filter() 描述: filter() 方法创建一个新数组,并将符合条件的所有元素添加到创建的新数组中. 语法: Array.filter(callback
-
javascript数组去重常用方法实例分析
本文实例讲述了javascript数组去重常用方法.分享给大家供大家参考,具体如下: 数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍. 首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下: // 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组 //第一种方法,遍历,将没有的插入临时数组 function uniqArray1(arr) { var n=[]
-
javascript数组常用方法汇总
本文为大家总结了javascript数组常用方法,具体内容如下 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3"
-
JavaScript数组常用方法实例讲解总结
目录 数组常用方法 concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString() 方法 toLocaleString() 方法 unshift() 方法 valueOf() 方法 导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者
-
JavaScript数组常用方法解析及数组扁平化
目录 前言 一.常用数组操作方法 push末尾追加元素 pop删除数组末尾元素 sort排序 shift数组开头添加元素 && unshift数组开头删除元素 数组合并concat indexOf查找元素 && includes查找元素是否存在 reverse反转数组 数组切割成字符串join slice操作数组,替换,删除,新增 every校验数组所有元素 some 测试数组中是不是至少有1个元素通过了被提供的函数测试.返回值是布尔值 深层次递归数组flat map遍历数
-
Javascript中String的常用方法实例分析
本文实例讲述了Javascript中String的常用方法.分享给大家供大家参考.具体如下: // length属性:获取字符串的字符个数. var s='爱像一阵风'; alert(s.length); // charAt(index)方法:获取指定索引位置的字符,索引从0开始 var s1='我不要再想你'; alert(s1.charAt(4));//想 // indexOf('e',startIndex)方法:获取指定字符串第一次出现的位置.startIndex表示从第几个开始搜索. v
-
JS数组求和的常用方法总结【5种方法】
本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, 2, 3, 4 ]) 输出例子: 10 方法1. 不考虑算法复杂度,用递归做: function sum(arr) { var len = arr.length; if(len == 0){ return 0; } else if (len == 1){ return arr[0]; } else
-
JavaScript数组、json对象、eval()函数用法实例分析
本文实例讲述了JavaScript数组.json对象.eval()函数用法.分享给大家供大家参考,具体如下: 一.JavaScript中的数组 数组使用[].new Array()或new Array(count)进行创建 创建数组之后我们可以对其静态初始化,也可以对其动态赋值 数组的常用属性:length 数组的常用方法:toString().join().reverse().push().pop() <script type="text/javascript"> //静
-
JS数组求和的常用方法实例小结
本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: js数组求和的方法 var array = [1, 2, 3, 4, 5]; var sum = 0; 1.for循环 for (let i = 0; i < array.length; i++) { sum += array[i]; } console.log(sum) 运行结果sum为 15,如下图所示: 2.forEach array.forEach(ele => { sum += ele; }); 运行结果同样su