博主信息
Lon
博文
22
粉丝
0
评论
0
访问量
2529
积分:0
P豆:48

JavaScript常用的数组方法

2021年10月06日 17:37:04阅读数:46博客 / Lon/ JavaScript

JavaScript常用的数组方法

了解更多请访问https://mp.weixin.qq.com/s/oAkSLSGROv0DHvTDeMVdzA

1、Array.push()

它的作用:push()获取你的数组并将一个或者多个元素添加到数组的末尾,然后返回数组的新长度。此方法将修改你现有的数组。

通过运行 push() 将数字 20 添加到数组中,使用 20 作为参数。

  1. let myArray = [2,4,6,8,9,11,14];
  2. myArray.push(20);
  3. console.log(myArray);// [2, 4, 6, 8, 9, 11, 14, 20]

2、Array.concat()

它的作用:concat() 可以将两个或多个数组合并为一个新数组。它不会修改现有数组,而是创建一个新数组。

取 myArray 并将名为 newArray 的数组合并到其中。

  1. let myArray = [2,4,6,8,10,12];
  2. let newArray = [1,2,3,4,5,6];
  3. let res = myArray.concat(newArray);
  4. console.log(res);// [2, 4, 6, 8, 10, 12, 1, 2, 3, 4, 5, 6]

3、 Array.join()

它的作用:join() 接受一个数组并连接数组的内容,用逗号分隔。结果放在一个字符串中。如果要使用逗号的替代方法,可以指定分隔符。

看看它是如何使用 myArray 工作的。首先使用没有分隔符参数的默认方法,它将使用逗号。

  1. let myArray = [2,4,6,8,9,11,14];
  2. let str = myArray.join();
  3. console.log(str);// '2,4,6,8,9,11,14'

JavaScript 将输出一个字符串,数组中的每个值用逗号分隔。你可以在函数中使用参数来更改分隔符。

  1. let myArray = [2,4,6,8,9,11,14];
  2. let str1 = myArray.join(' ');
  3. console.log(str1);//'2 4 6 8 9 11 14'
  4. let str2 = myArray.join('|');
  5. console.log(str2);//2|4|6|8|9|11|14

4、 Array.forEach()

它的作用:forEach() (区分大小写!)对数组中的每个元素执行一个函数,并将元素传递给回调函数。

将每个值加 15,并让控制台显示结果。

  1. let myArray = [2,4,6];
  2. myArray.forEach(function (item){
  3. console.log(item + 15);
  4. })
  5. //打印结果为
  6. //17
  7. //19
  8. //21

5、Array.map()

它的作用:map() 对数组中的每个元素执行一个函数,原数组不变 ,并将结果放入一个新数组中。
在每个元素上运行一个函数听起来像 forEach()。这里的区别是 map() 在运行时创建一个新数组。forEach() 不会自动创建新数组。

  1. let myArray = [2,4,6,8,10,12];
  2. let newArray = myArray.map(function (item){
  3. return item * 2;
  4. })
  5. console.log(newArray);//[4, 8, 12, 16, 20, 24]

6、Array.unshift()

它的作用:与 push() 方法的工作方式类似,unshift() 方法接受你的数组并将一个或多个元素添加到数组的开头而不是结尾,并返回数组的新长度。此方法将修改你现有的数组。

  1. let myArray = [2,4,6,8,10,12];
  2. myArray.unshift(0);
  3. console.log(myArray);//[0, 2, 4, 6, 8, 10, 12]

7、Array.sort()

它的作用:排序是对数组执行的最常见操作之一,非常有用。JavaScript 的 sort() 数组方法可用于仅用一行代码对数字,甚至字符串数组进行排序。这个操作到位,通过修改初始数组返回排序后的数组。这次为 myArray 取一组不同的数字。

  1. let myArray = [12,35,10,54,8,61];
  2. myArray.sort((a,b) => a - b);
  3. console.log(myArray);// [8, 10, 12, 35, 54, 61]

8、Array.reverse()

它的作用:顾名思义,reverse() 方法用于反转数组中元素的顺序。请注意,这不会反转数组的内容,而只会反转顺序本身。这是一个可以更好地理解此方法的示例:

  1. let myArray = [2,4,6,8,10,12];
  2. myArray.reverse();
  3. console.log(myArray);//[12, 10, 8, 6, 4, 2]

9、 Array.slice()

它的作用:slice() 用于检索数组一部分的浅拷贝。简单来说,此方法允许你通过索引从数组中选择特定元素。你可以传递要从中检索的元素的起始索引和元素以及可选的结束索引。

如果不提供结束索引,则将检索从开始索引到数组末尾的所有元素。此方法返回一个新数组并且不会修改现有数组。

  1. let myArray = [2,4,6,8,10,12];
  2. let slicedArray = myArray.slice(2);
  3. console.log(myArray);//2, 4, 6, 8, 10, 12]
  4. console.log(slicedArray);//[6, 8, 10, 12]
  5. //
  6. slicedArray = myArray.slice(4,5);
  7. console.log(slicedArray);//[10]

10、Array.splice()

它的作用:splice() 是一种有用的数组方法,用于删除或替换数组中的元素。通过指定要删除的元素的索引和数量,它修改了数组。

  1. let myArray = [2,4,6,8,10,12];
  2. myArray.splice(2,3);
  3. console.log(myArray);//[2, 4, 12]

在上面的例子中,myArray 数组是从索引 2 拼接而成的,并且从中删除了 3 个元素。

要替换元素而不是仅仅删除它们,你可以使用要替换的元素传递任意数量的可选参数,如下所示:

  1. myArray.splice(2,3,1,2,3);
  2. console.log(myArray);//2, 4, 1, 2, 3, 12]

11、 Array.filter()

它的作用:filter() 方法是一个有用的数组方法,它接受一个包含测试的函数并返回一个包含所有通过该测试的元素的新数组。
顾名思义,此方法用于从其他元素中过滤你需要的元素。过滤是使用返回布尔值的函数完成的。
下面是一个 filter() 方法的示例,该方法用于仅从数组中获取可被 2 整除的元素。

  1. let myArray = [12,35,10,54,8,61];
  2. let newArray = myArray.filter((number) => number % 2 === 0);
  3. console.log(newArray);//[12, 10, 54, 8]

在上面的例子中,一个箭头函数作为参数传递,它从原始数组中获取每个数字,并使用除 (%) 和相等 (===) 运算符检查它是否可以被 2 整除

12、Array.reduce()

它的作用:reduce() 是一个数组方法,它接受一个 reducer 函数并在每个数组元素上执行它以在返回时输出单个值。
它需要一个带有累加器变量和当前元素变量的 reducer 函数作为必需的参数。累加器的值在所有迭代中都会被记住,并最终在最后一次迭代后返回。
此方法的一个流行用例是计算数组中所有元素的总和。该功能的实现如下:

  1. let myArray = [2,4,6,8,10,12];
  2. let sum = myArray.reduce((sum,curren) => sum + curren,0);
  3. console.log(sum);//42

0 作为上面例子中的第二个参数传递,用作累加器变量的初始值。sum 变量将包含 reduce() 方法的返回值,该值预计是数组中所有元素的总和。

13、Array.includes()

它的作用:在数组中搜索一个元素以检查它是否存在是一个经常使用的操作,因此,JavaScript 有一个内置的方法,以 contains() 数组方法的形式。使用方法如下:

  1. console.log(myArray.includes(2))
  2. console.log(myArray.includes(4,1))
  3. console.log(myArray.includes(5))

此方法接受一个必需参数(要搜索的元素)和一个可选参数(从其开始搜索的数组索引)。

根据该元素是否存在,它将分别返回 true 或 false。因此,输出将是:

  1. true
  2. true
  3. false

14、 Array.indexOf()

它的作用:indexOf() 方法用于找出可以在数组中找到第一次出现指定元素的索引。尽管它类似于includes() 方法,但如果元素不存在于数组中,则此方法返回数字索引或-1。

  1. console.log(myArray.indexOf(4))
  2. console.log(myArray.indexOf("4"))
  3. console.log(myArray.indexOf(8,2))

indexOf() 方法使用严格相等来检查元素是否存在,这意味着值以及数据类型应该相同。可选的第二个参数采用索引开始搜索。根据这些标准,输出将如下所示:

  1. 1
  2. -1
  3. 3

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 本篇文章给大家分享一些JavaScript求和。有一定参考价值,有需要朋友可以参考一下,希望对大家有所帮助。
    javascript中,map于对每个元素调指定回调函,并返回包含结果;语格式为“array.map(callbackfn[, thisArg]);”。
    本篇文章给大家分享5种JS求和。有一定参考价值,有需要朋友可以参考一下,希望对大家有所帮助。
    和对象在各种编程语言中都充当着至关重要角色,本篇文章给大家介绍一下JavaScript遍历、对象遍历和对比下各性能差异,以及使注意事项。
    Java语言中提供来存储固定大小同类型元素。本文为大家介绍了10种java,希望对大家有一定帮助。
    php有:1、is_array;2、in_array;3、array_key_exists;4、array_search;5、array_keys。
    javascript有:1、【isArray()】来判断变量是否是一个js;2、【forEach()】主要于遍历;3、【map()】对每个里面元素执行相同来创建新
    javascript中定义:1、使“var 名=[值列表]”语句;2、使“var 名 = new Array(值列表)”语句;3、使“var 名 = new Array(长度值
    javascript去重复:1、利“indexOf()”去除重复值;2、利splice去除重复值;3、利es6新增集合Set去除重复值。
    javascript排序:1、sort()于对元素进行排序,语“arrayObject.sort(sortby)”;2、reverse()于颠倒中元素顺序,即倒序,语
    javascript清除:1、使splice,代码为【ary.splice(0,ary.length)】;2、length赋值为0,代码为【ary.length = 0;】。
    javascript有:concat()、join()、pop()、push()、reverse()、shift()、slice()、sort()、splice()、toSource()、toString
    javascript中dom有:1、getElementById;2、getElementsByClassName;3、getElementsByTagName;4、getAttribute;5
    JavaScript删除:1、按索引删除,代码为【someArray.shift()】; 2、按条件删除,代码为【johnRemoved = someArray.filter(function
    本文主要内容则是通过两种教大家如何使JavaScript获取关联键。首先给大家简单介绍一下什么是关联
    下面本篇文章给大家通过实例分析一下JavaScriptslice()使。有一定参考价值,有需要朋友可以参考一下,希望对大家有所帮助。
    本文将要讲解内容则是教大家如何使JavaScript中删除最后一项。下面我将通过3个示例来讲解使JavaScript中删除最后一项.
    JavaScript属性有:1、JS中注释为【//】;2、字符型转换成值型【parseInt()】;3、取字符串长度【length】;4、声明变量使var;5、判断语句结构【if(condition
    javascript中,map()于返回一个新元素为原始元素调处理后值;map()会按照原始元素顺序依次处理元素,语“array.map(function(值
    javascript中调:1、使“对象.函名()”语句调;2、使“函名().call(调者,参1 ,参2 , .....);”语句调;3、使“函名().apply(调