JavaScript中数组的方法总结(map,forEach,reduce,some,every,filter,indexOf...)

已于 2022-02-16 10:32:48 修改
阅读量253 收藏
点赞数
分类专栏： Array数组方法 文章标签： js 前端
于 2020-09-17 17:33:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Varilly/article/details/108648553
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //数组api
    //菜鸟教程 https://www.runoob.com/jsref/jsref-obj-array.html

    //1.concat 用于连接两个或多个数组，返回连接后的结果，不改变原数组
    //所有浏览器都兼容
    var arr1 = ["a", "b"];
    var arr2 = ["c"];
    var arr3 = ["d"];
    var arr4 = arr1.concat(arr2) //连接两个数组，
    var arr5 = arr1.concat(arr2, arr3) //连接三个数组
    console.log(arr4, arr5)//(3) ["a", "b", "c"] (4) ["a", "b", "c", "d"]
    console.log(arr1)

    //一道题：传递两个参数m，n，返回长度为m，所有元素都为n的数组，要求不能用循环。 利用函数的递归和 concat() 方法可以实现，代码如下：
    function fn(m, n) {
      return m ? fn(m - 1, n).concat(n) : []
    }
    console.log(fn(5, 2))

    //2.copyWithin 将数组的指定元素拷贝到另一个指定位置上
    //直接改变原数组,数组长度不会发生变化
    //ES6支持
    //语法：array.copyWithin(target, start, end)
    var arr6 = [1, 2, 3, 4, 5, 6]
    // arr6.copyWithin(3,0)
    // console.log(arr6);//[1,2,3,1,2,3]
    arr6.copyWithin(2, 0, 2)
    console.log(arr6);//[1,2,1,2,5,6]

    //3.entries 返回数组的可迭代对象，该对象包含数组的键值对(key/value)，key是数组索引，value是数组值
    //不改变原数组
    var arr7 = ["a", "b", "c"];
    console.log(arr7.entries(), arr7)

    //4.every 检测数组每个元素是否都满足条件
    //返回true/false
    //不改变原数组，不会对空数组进行检测
    //当有一个元素不满足条件，就会返回false，且剩下的元素就不再进行检测了
    //语法：array.every(function(currentValue,index,arr), thisValue)
    //检测是否所有年龄都小于18
    function fnEvery(ages) {
      return ages.every((item, index, arr) => {
        console.log(item, index, arr)
        // 12 0 (5) [12, 17, 19, 15, 16]
        // 17 1 (5) [12, 17, 19, 15, 16]
        // 19 2 (5) [12, 17, 19, 15, 16]
        return item < 18
      })
    }
    var ages = [12, 17, 19, 15, 16]
    var result = fnEvery(ages)
    console.log(result)//false
    console.log(ages);// (5) [12, 17, 19, 15, 16]

    //5.some 检测数组中是否有元素符合指定条件
    //类似every的语法，
    //当有一个元素满足条件，就会返回true，且剩下的元素就不再检测了
    function fnSome(ages) {
      return ages.some(item => item < 18)
    }   
    var ages = [12, 17, 19, 15, 16]
    var result = fnSome(ages)
    console.log(result)//true
    console.log(ages);// (5) [12, 17, 19, 15, 16]

    //6.fill 使用固定值填充数组(替换原数组元素)
    //IE11及以下版本不支持
    //ES6
    //直接改变原数组，和2copyWithin作比较
    //语法：array.fill(value, start, end) //start(可选)开始填充位置，end(可选)结束填充位置(默认是arr.length)
    var arr8 = ["a", "b", "c", "d"]
    arr8.fill("eee", 1, 2)
    console.log(arr8)//["a", "eee", "c", "d"]

    //7.filter 返回一个新数组，数组中包含符合筛选条件的所有元素
    //不会修改原数组
    //不会对空数组进行检测
    var arr9 = [12, 17, 19, 15, 16, 20]
    var arr10 = arr9.filter(item => item > 18)
    console.log(arr10)// [19, 20]

    //8.find 返回符合测试条件的第一个元素值，如果没有符合的就返回undefined
    //ES6
    //IE11及更早版本不支持
    //语法：array.find(function(currentValue, index, arr),thisValue)
    //不会修改原数组，返回一个元素值，而非数组
    var arr11 = [12, 17, 19, 15, 16, 20]
    var arr12 = arr11.find(item => {
      // console.log(this); //this指向window,使用非箭头函数this也指向window
      return item > 18
    })
    console.log(arr12) // 19

    //9.findIndex 返回符合测试条件的第一个元素值的索引,如果没有找到返回-1
    //找到之后，后面的元素就不会在调用执行函数
    //ES6
    //IE11及更早版本不支持
    //语法：array.findIndex(function(currentValue, index, arr), thisValue)
    //不会修改原数组，返回一个元素值，而非数组
    var arr11 = [12, 17, 19, 15, 16, 20]
    var arr12 = arr11.findIndex(item => item > 18)
    console.log(arr12) //2

    //10.forEach 数组中每个元素都执行一次回调函数
    // 没有返回值，直接修改原数组
    //https://www.runoob.com/jsref/jsref-foreach.html
    // 语法：array.forEach(function(currentValue, index, arr), thisValue)
    var arr13 = [12, 17, 19, 15, 16, 20];
    //计算数组中所有元素的和
    var sum = 0;
    arr13.forEach(item => {
      sum += item;
    })
    console.log(sum)
    //将数组中所有元素都*2
    arr13.forEach((item, index, arr) => {
      arr[index] = item * 2
    })
    console.log(arr13)//(6) [24, 34, 38, 30, 32, 40]

    // forEach不支持continue和break，
    // continue可以通过return或some实现
    arr13 = [12, 17, 19, 15, 16, 20];
    arr13.forEach(item => {
      if (item == 15) {
        return; //通过return结束当前循环，执行下一次循环
      }
      console.log(item)
    })

    arr13.some(item => {
      if (item == 15) {
        return;//不能为return false;some会根据return后的条件检测，返回bool值
      }
      console.log(item)
    })

    // break可以通过every实现
    arr13.every(item => {
      console.log(item)//12 17 19 15
      return item !== 15
    })

    //11.map 返回一个新数组，对每个元素调用处理函数，返回处理后的数组
    // 不会修改原数组
    // 不会对空数组进行检测
    // 语法：array.map(function(currentValue,index,arr), thisValue)
    // map和forEach的区别就是有没有返回值，map有，forEach没有
    var arr14 = [1, 2, 3, 4, 5, 6];
    var arr15 = arr14.map(item => item * 2)
    console.log(arr14, arr15);//[1, 2, 3, 4, 5, 6]  [2, 4, 6, 8, 10, 12]

    //12.from 将具有length属性的对象或可迭代对象转化为数组
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
    // 返回一个新数组,浅拷贝
    // ES6
    // 语法：Array.from(object, mapFunction, thisValue)
    var arr16 = Array.from("abcdef")
    console.log(arr16)//["a", "b", "c", "d", "e", "f"]
    arr16 = Array.from([1, 2, 3], item => item * 10)
    console.log(arr16)//[10,20,30]

    //13.includes 用来判断数组中是否包含执行的值，包含则返回true,不包含返回false
    // 返回bool值
    // 语法：arr.includes(searchElement)
    // 语法：arr.includes(searchElement, fromIndex) fromIndex默认为0，若为负数，就从fromIndex+arr.length开始
    //ES6
    var arr17 = ["a", "b", "c", "d", "e", "f"];
    var resultIncludes = arr17.includes("a")
    console.log(resultIncludes)//true
    resultIncludes = arr17.includes("a", 4) // 从下标为3的元素开始查找
    console.log(resultIncludes)//false
    resultIncludes = arr17.includes("b", -5) // 开始下标若为负数，就从fromIndex+arr.length(-5+6=1)开始
    console.log(resultIncludes)//true

    //14.indexOf 返回数组中某个指定元素的下标
    // 如果没找到就会返回-1
    // 语法：array.indexOf(item,start) //start默认为0
    // IE8及更早版本不支持
    var arr18 = ["a", "b", "c", "d", "e", "a", "f"];
    var resultIndexOf = arr18.indexOf("c")
    console.log(resultIndexOf) //2
    resultIndexOf = arr18.indexOf("y") //不存在，则返回-1
    console.log(resultIndexOf) //-1
    resultIndexOf = arr18.indexOf("a", 4) //从下标为4开始查找
    console.log(resultIndexOf) //5

    //15.lastIndexOf 返回一个指定的元素在数组中最后出现的下标，从后往前查找
    // 如果没找到就会返回-1
    // 语法：array.lastIndexOf(item,start) //start合法取值是 0 到 stringObject.length - 1
    // IE8及更早版本不支持
    // 与indexOf比较使用
    var arr19 = ["a", "b", "c", "d", "e", "a", "f"];
    var resultLastIndexOf = arr19.lastIndexOf("a")
    console.log(resultLastIndexOf) //5
    resultLastIndexOf = arr19.lastIndexOf("a", 3)//从下标为0-3中间进行查找
    console.log(resultLastIndexOf) //0

    //16.isArray 判断要判断的对象是否为数组，返回bool值
    // ES5
    // 语法：Array.isArray(obj)
    var arr20 = ["a", "b", "c", "d", "e", "a", "f"];
    console.log(Array.isArray(arr20))//true
    var obj1 = { a: 10 }
    console.log(Array.isArray(obj1)) //false

    //17.join 把数组中所有元素按照指定的分隔符(分隔符默认为,逗号)分隔成字符串
    // 返回一个字符串
    var arr21 = ["a", "b", "c", "d", "e", "a", "f"];
    var resultJoin = arr21.join()
    console.log(resultJoin, arr21) // a,b,c,d,e,a,f
    resultJoin = arr21.join(" and ")
    console.log(resultJoin) // a and b and c and d and e and a and f

    //18.keys 返回数组的可迭代对象，包含原始数组的key键
    // ES6
    var arr22 = ["a", "b", "c", "d"];
    var resultKeys = arr22.keys() // resultKeys是个可迭代对象
    console.log(resultKeys.next()) // {value: 0, done: false}
    console.log(resultKeys.next()) // {value: 1, done: false}
    console.log(resultKeys.next()) // {value: 2, done: false}
    console.log(resultKeys.next()) // {value: 3, done: false}
    console.log(resultKeys.next()) // {value: undefined, done: true}

    //19.map 对数组中每个元素都执行操作函数，返回操作后的新数组
    // 不会修改原数组，会返回新数组
    // 不会对空数组进行检测
    // 语法：array.map(function(currentValue,index,arr), thisValue)
    // IE9开始兼容
    var arr23 = [1, 2, 3, 4, 5, 6]
    var resultMap = arr23.map(item => item * 2)
    console.log(resultMap)//[2, 4, 6, 8, 10, 12]

    //20.push 用于从末尾添加一个或多个元素，返回操作后原数组新的长度
    // 会改变原数组
    // 语法：array.push(item1, item2, ..., itemX)
    var arr24 = [1, 2, 3, 4, 5, 6]
    console.log(arr24.push(8)) //7 现在数组的长度
    console.log(arr24) //[1, 2, 3, 4, 5, 6, 8]
    console.log(arr24.push(7, 8, 9, 10)) //11 可以添加多个数组
    console.log(arr24) //(11) [1, 2, 3, 4, 5, 6, 8, 7, 8, 9, 10]

    //21.pop 用于删除数组末尾最后一个元素，并返回删除的元素
    // 会改变原数组
    var arr25 = [1, 2, 3, 4, 5, 6]
    console.log(arr25.pop()) //6
    console.log(arr25) //[1,2,3,4,5]

    //22.unshift 用于向数组开头添加一个或多个元素，并返回新的数组长度
    // 会改变原数组
    // 语法array.unshift(item1,item2, ..., itemX)
    var arr26 = [1, 2, 3, 4, 5, 6]
    console.log(arr26.unshift(8)) //7 现在数组的长度
    console.log(arr26) //[8, 1, 2, 3, 4, 5, 6]

    //23.shift 删除数组的第一个元素，并返回删除的元素
    // 会改变原数组
    var arr27 = [1, 2, 3, 4, 5, 6]
    console.log(arr27.shift()) //1 返回删除的数组第一个元素
    console.log(arr27) //[2,3,4,5,6]

    //24.reduce 将数组元素计算为一个值
    // 不会改变原数组，会返回计算结果，一个值
    // 不会对空数组执行回调函数
    // 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    var arr28 = [1, 2, 3, 4, 5, 6]
    var resultReduce = arr28.reduce((total, item) => {
      console.log(total, item)
      // 1 2
      // 3 3
      // 6 4
      // 10 5
      // 15 6
      // 21
      return total + item
    })
    console.log(resultReduce);//21
    console.log(arr28);//[1,2,3,4,5,6]

    //25.reduceRight 和reduce作用一样，不过是从后往前累加
    var arr29 = [1, 2, 3, 4, 5, 6]
    var resultReduceRight = arr29.reduceRight((total, item) => {
      console.log(total, item)
      // 6 5
      // 11 4
      // 15 3
      // 18 2
      // 20 1
      // 21
      return total + item
    })
    console.log(resultReduceRight);//21
    console.log(arr29);//[1,2,3,4,5,6]

    //26.reverse 颠倒数组中的元素
    // 语法：array.reverse()
    // 直接修改原数组，并返回修改后的数组
    var arr30 = [1, 2, 3, 4, 5, 6]
    var resultReverse = arr30.reverse()
    console.log(resultReverse) //[6, 5, 4, 3, 2, 1]
    console.log(arr30) //[6, 5, 4, 3, 2, 1]

    //27.slice 截取数组中的一部分
    // 返回截取的新数组，不会修改原数组
    // 语法：array.slice(start, end) //包括start，不包括end
    var arr30 = [1, 2, 3, 4, 5, 6]
    var resultSlice = arr30.slice(0, 3)
    console.log(resultSlice, arr30) //(3) [1, 2, 3] (6) [1, 2, 3, 4, 5, 6]
    resultSlice = arr30.slice(-3, -1) //-3就是从倒数第三个取到倒数第一个,不包括倒数第一个
    console.log(resultSlice, arr30) // (2) [4, 5] (6) [1, 2, 3, 4, 5, 6]

    //28.splice 从数组中添加或删除元素
    // 会修改原数组
    // 返回被删除的元素组成的数组，没删除就返回[]
    // 语法：array.splice(index,howmany,item1,.....,itemX)
    //index 从何处开始添加或删除，必填
    //howmany 可选 删除元素的个数，不填会从index开始删到结尾
    //item1,...,itemX 可选 要添加的新元素
    var arr31 = [1, 2, 3, 4, 5, 6]
    var resultSplice = arr31.splice(2, 0, "7", "8")
    console.log(resultSplice, arr31) //[]  (8) [1, 2, "7", "8", 3, 4, 5, 6]
    resultSplice = arr31.splice(3, 2) //注意，现在的arr31是上次修改后的结果
    console.log(resultSplice, arr31) //(2) ["8", 3] (6) [1, 2, "7", 4, 5, 6]

    //29.sort 对数组进行排序
    // 返回数组的引用，对原数组进行排序，不生成副本
    // 会修改原数组
    var arr32 = [21, 19, 4, 8, 37, 24]
    var resultSort = arr32.sort((a, b) => a - b)//return a-b升序排序;return b-a 降序排序。
    console.log(resultSort, arr32, resultSort === arr32)//(6) [4, 8, 19, 21, 24, 37] (6) [4, 8, 19, 21, 24, 37] true

    //30.toString 将数组转化为字符串，并用逗号隔开，返回操作结果
    // 不会改变原数组
    var arr33 = [1, 2, 3, 4, 5, 6]
    var resultToString = arr33.toString();
    console.log(resultToString, arr33) // 1,2,3,4,5,6 (6) [1, 2, 3, 4, 5, 6]

    //31.valueOf 返回数组的原始值
    // 不会改变原数组,返回值和原数组一样
    var arr34 = [1, 2, 3, 4, 5, 6]
    var resultValueOf = arr34.valueOf()
    console.log(resultValueOf, arr34, resultValueOf === arr34)//(6) [1, 2, 3, 4, 5, 6] (6) [1, 2, 3, 4, 5, 6] true
  </script>
</body>

</html>

总结：会改变原数组的有：copyWithin,fill,forEach(无返回值),push,pop,unshift,shift,reverse,splice,sort
不会改变原数组的有：concat，entries,every,some,filter,find,findIndex,map,from,includes,indexOf,lastIndexOf,join,keys,map,reduce,reduceRight,slice,toString,valueOf
返回boolean值，可用于判断的有：every,some,includes,isArray
转换为字符串：toString,join
赛里木湖畔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组的some,every,find,map,filter,reduce,forEach比较
qq_39141511的博客
09-25 249
不改变原数组，不创建新数组：some，every，find 不改变原数组，创建新数组：map，filter，reduce 遍历：forEach some： 若目标数组中有一个或一个以上的对象符合条件的返回true，否则返回false var computers = [{ name: "Apple", ram: 8 }, { name: "IBM", ram: 4 }, { name: "Acer", ram: 32 }, ]; var some = computers.so
ES6 数组 forEach(),Map(),filter(),reduce()
weixin_44978975的博客
09-27 278
forEach() 长久以来我们用for(var i = 0 ; i < arr.length ; i ++){}来遍历数组。 但是今天，我们有了forEach()函数，今天开始再也不用for循环遍历数组了！ var arr = ["白板","幺鸡","二条","三万","四筒"]; arr.forEach(function(item , index){ console.log(item ...
谈谈JavaScript数组常用方法总结
10-20
本篇文章主要介绍了谈谈JavaScript数组常用方法总结，在JavaScript中，我们需要时常对数组进行操作。一起跟随小编过来看看吧
IE11中Array的find()方法、String的repeat()方法 等兼容性问题
carcarrot的博客
09-08 1003
最近有个在Chrome浏览器正常运行的项目，客户需要用IE浏览，发现在IE11及以下版本浏览异常，有两个原因： 1.IE11不支持箭头函式表达式=>，改成function匿名函数解决； 2. IE11中Array没有此项目中使用到的find方法，也没有String.prototype.repeat方法，因此兼容的写一个【需放在引用的地方之前，比如在“$(document).ready(function(){})”中】
js中filter,map,forEach,indexOf的用法和区别详解
Br不二
04-07 551
在JavaScript中，`filter()`, `map()`, `forEach()`, 和 `indexOf()` 是数组对象常用的方法，它们各自具有特定的用途
Javascript数组去重【set+map+indexOf+filter+splice+includes+hasOwnProperty七种方法去重】
hannah2233的博客
07-02 350
1、ES6:set去重 2、 ES5中常见： 利用for嵌套for，然后splice去重 3、 indexOf去重 4、 includes 5、 利用hasOwnProperty 6、利用filter 7、 利用Map数据结构去重
JavaScript：indexOf()方法
KaiSarH
11-25 1510
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 语法 stringObject.indexOf(searchvalue,fromindex) 参数 描述 searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省...
数组常见的问题（数组求和、reduce的用法、Math、数组去重、sort（）方法）
weixin_64899102的博客
08-04 719
满满都是干货
JavaScript中数组的22种方法必学(推荐)
10-21
- `indexOf()`：返回指定元素在数组中的第一个出现的索引，否则返回-1。 - `lastIndexOf()`：返回指定元素在数组中的最后一个出现的索引，否则返回-1。 9. **数组归并方法** - `reduce()`：对数组中的每个元素...
JavaScript数组方法大全(推举)_.docx
10-09
在JavaScript中，数组是一种特殊的...了解并熟练掌握这些数组方法，将极大地提高你在JavaScript编程中的效率，同时也能在面试中展现出扎实的编程基础。在实际开发中，合理利用这些方法可以解决各种复杂的数据处理问题。
javaScript数组迭代方法详解_.docx
10-09
此外，还有其他一些 JavaScript 数组迭代方法，例如reduce()、reduceRight()、indexOf()、lastIndexOf() 等。 在实际开发中，掌握这些数组迭代方法可以帮助我们更方便地操作数组，并提高代码的可读性和可维护性。
《ES6基础教程》之 map、forEach、filter indexOf 用法
weixin_30655219的博客
08-04 163
1，map,对数组的每个元素进行一定操作，返回一个新的数组。 1 var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}]; 2 function getNewArr () {...
JavaScript中常用数组方法以及是否改变原数组的总结
yizhimiaomiaoa的博客
11-18 861
方法 1.push():最后一位新增 var arr = ["hello",true,45,{},"world"]; console.log(arr.push("123")); //6 console.log(arr); // ["hello", true, 45, {…}, "world", "123"] arr.p...
用JavaScript中的示例数组every（）方法
cumt30111的博客
07-01 380
JavaScript every()方法 (JavaScript every() method) every() method is used to check a condition on all array elements (or specified elements) and returns true if all elements match the condition and ret...
JavaScript中数组的迭代方法：forEach、map、filter、reduce、every、some、for in、for of...
weixin_34234829的博客
02-28 113
JavaScript中有非常多数组迭代方法，这里基本上吧所有的都介绍全了，我项目中比较喜欢的是forEach。 　　7、for in （for-in循环实际是为循环对象而设计的，for in也可以循环数组，但是不推荐这样使用， 　　　for–in是用来循环带有字符串key的对象的方法）。 　　　缺点：只能获得对象的键名，不能直接获取键值。 　　　var obj = {a:1, b:2,...
IE11遍历js Map
gucapg的专栏
03-31 721
谷歌等浏览器可以使用多种方式，比如以下： //方式1： ideaMap.forEach((item,k)->{ console.log(k);//map k值 console.log(v);//map 值 }); //方式2： for (let key of ideaMap.keys()) { } 。。。。 IE11以上多种方式都不适用，IE11采用方式为： ideaMap.forEach(function(item,k,
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 410
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 193
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 271
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
Node.js编程：深入理解ECMAScript数组操作
迭代方法如`every()`、`some()`、`forEach()`、`filter()`和`map()`提供了对数组元素进行判断、筛选、修改等操作的便利。`reduce()`和`reduceRight()`则用于对数组中的所有元素进行累积计算。 总结本课程，重点学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值