资讯专栏INFORMATION COLUMN

js数组方法的总结

lufficc / 3020人阅读

摘要:例如会删除当前数组位置的项,然后再从位置开始插入字符串。对数组中的每一项运行给定函数,返回该函数会返回的项组成的数组。则从数组的最后一项开始,向前遍历到第一项。

1、队尾插入push

   var colors = ["red","green"];
   colors.push("black"):
   console.log(colors); //["red","green","black"]

2、队尾删除并返回删除的最后一项pop

   var colors = ["red","green","black"];
   var item = colors.pop();
   console.log(item); //"black"

3、队首插入unshift()

   var colors = ["red","green"];
   colors.unshift("black");
   var item = colors.pop();
   console.log(item); //"black"

4、队首删除shift()

   var colors = ["red","green","black"];
   colors.shift();
   console.log(colors); //["green","black"]

5、数组一添加数组二concat()

   var colors = ["red","green","black"];
   var colors2 = colors.concat("yellow",["blue","brown"]);
   console.log(colors); //["red","green","black"]
   console.log(colors2); //["red","green","black","yellow","blue","brown"]

6、数组的截取slice()
只传一个参数:从数组这个参数的下标开始截取一直到数组结束。

   var colors = ["red","green","black"];
   colors.slice(1); //["green","black"]
   console.log(colors); //["red","green","black"]

传两个参数:第一个是截取开始的位置,第二个是截取结束的位置

   var colors = ["red","green","black","yellow","blue","brown"];
   colors.slice(1,3)//从位置1开始,到位置2结束["green","black"];

7、数组的splice()方法

   有三种用法:

删除:可以删除任意数量的项,只需指定两个参数:第一个参数为删除开始的位置,第二个参数为删除项数。

插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项。例如:splice(2,0,"red","green"),会从当前数组的位置2开始插入字符串"red"和"green"。

替换: 可以向指定位置插入任意数量的项,且同事删除任意数量的项,只需提供3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除项数相等。例如:splice (2,1,"red","green") 会删除当前数组位置2的项,然后再从位置2开始插入字符串。

   var colors = ["red","green","black"];
   var removed = colors.splice(0,1);
   console.log(colors); //["green","black"]
   console.log(removed); //["red"]
    
   removed = colors.splice(1,0,"yellow","orange");
   console.log(colors); //["green","yellow","orange","black"]
   console.log(removed); //[]

   removed = colors.splice(1,1,"red","purple");
   console.log(colors); //["green","red","purple","orange","black"]
   console.log(removed); //["yellow"]

8、位置方法indexOf()和lastIndexOf()

indexOf()和lastIndexOf()都接收两个参数,第一个参数是要查找的项,第二个(可选)查找开始的位置,indexOf()是从数组头开始查,lastIndexOf()是从数组尾开始查找。
   var numbers = [1,2,3,4,5,4,3,2,1];

   console.log(numbers.indexOf(4)); //3
   console.log(numbers.lastIndexOf(4)); //5
   
   console.log(numbers.indexOf(4,4)); //5
   
   var person = {name: "vivi"};
   var people = [{name: "vivi"}];
   
   var morePeople = [person];
   console.log(people.indexOf(person)); //-1
   console.log(morePeople.indexOf(person)); //0

9、查找find()方法
查找符合条件的第一项

   var inventory = [
    {name: "apples", quantity: 2},
    {name: "bananas", quantity: 0},
    {name: "cherries", quantity: 5}
   ];
   const inventorItem = inventory.find((item) => item.name === "apples");
   console.log(inventorItem); //{name: "apples", quantity: 2}

10、迭代方法
传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。

every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

filter(): 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

forEach(): 对数组中的每一项运行给定函数,这个方法没有返回值。

map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

some(): 对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

   var numbers = [1,2,3,4,5,4,3,2,1];
   var everyResult = numbers.every((item, index, array) => {
        return item > 2;
   });
   console.log(everyResult); //false
   
   var someResult = numbers.some((item, index, array) => {
       return  item > 2;
   });
   console.log(someResult); //true
  var numbers = [1,2,3,4,5,4,3,2,1];
  var filterResult = numbers.filter((item, index, array) => {
    return item > 2;
  });
  console.log(filterResult); //[3,4,5,4,3]
   var numbers = [1,2,3,4,5,4,3,2,1];
   var mapResult = numbers.map((item, index, array) => {
    return item * 2;
  });
  console.log(mapResult); //[2,4,6,8,10,8,6,4,2]
   var numbers = [1,2,3,4,5,4,3,2,1];
   numbers.forEach((item, index, array) => {
       //执行某些操作
   });

11、归并方法reduce()和reduceRight()

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。
reduce()方法从数组的第一项开始,逐个遍历到最后。                                  
reduceRight()则从数组的最后一项开始,向前遍历到第一项。
   var values = [1,2,3,4,5];
   var sum = values.reduce((prev, cur, index, array) => {
       return prev + cur;
   });
   console.log(sum); //15
   var values = [1,2,3,4,5];
   var sum = values.reduceRight((prev, cur, index, array) => 
   {
       return prev + cur;
   });
   console.log(sum); //15

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96304.html

相关文章

  • js数组常用方法总结

    摘要:在为的位置,删除个元素,插入删了为的元素,替换为删了为的元素数组的增删改都可以用完成返回从原数组中指定开始下标到结束下标之间的项组成的新数组该方法不会改变原始数组。不传值表示克隆了除了正常用法,经常用来将对象转换为。 js 中数组的常用方法总结 arr.fill(a);//所有子元素 都改为 a; [{a: 1},{b: 2}, ...Array(8).fill({}, 0)] //...

    luckyw 评论0 收藏0
  • JS】JavaScript数组以及数组API学习总结

    摘要:返回数组内容的字符串表示形式将数组中每个元素转为字符串,并用逗号连接。拍照连接符将数组中每个元素转为字符串,用自定义的连接符连接每个元素需要用变量借助。 关于数组篇的记录,纯自己总结,会持续更新~ 原生js方法 1:创建数组的几种方法: var arr = []; var arr = new Array(); var arr = [1,2]; var arr = new Arr...

    roundstones 评论0 收藏0
  • JS数组去重方法总结

    摘要:第一种常规法最直观的思路创建一个新数组如果新数组中已经包含了当前的第个元素,那么跳过否则把当前项到新数组中输出这种方法用到了方法。特殊情况当数组中既有数字又有字符串的时候,如此时希望和都保留,那么上述的方法无法达到要求。 第一种:常规法(最直观的思路) function unique(arr){ var n = []; //创建一个新数组 for(var i = 0; ...

    Aldous 评论0 收藏0
  • js数组去重方法总结

    摘要:注方法可以返回某个指定字符串在字符串中首次出现的位置比如首次出现的位置是数组中的第一个,即下标为遍历数组使用标识符去重声明一个变量标识排序后遍历过滤数组思路先给数组排序,这样相同的项总是相邻。 假设我们有数组arr,并且声明新数组hash用来存放去重后的元素: var arr = [23,44,5,2,23,5,1,7,8,7]; //包含重复元素 var hash= [];...

    snowLu 评论0 收藏0
  • JS数组去重总结

    摘要:数组去重,一般会在面试的时候才会碰到,要求手写数组去重方法的代码。在实际项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。数组去重的方法一利用去重中最常用如果不考虑兼容性,这种去重的方法代码最少。 数组去重,一般会在面试的时候才会碰到,要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。 在实际项目中碰到的...

    whinc 评论0 收藏0

发表评论

0条评论

lufficc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<