JS数组常用方法及其遍历

谁践踏了优雅 2021-09-21 09:04 607阅读 0赞

Array 对象用于在单个的变量中存储多个值。数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
JS数组实现了多种数据结构，它还具有栈和队列的功能。使用pop、push方式对数组尾部操作实现栈操作，使用shift和push实现队列操作。

创建一个数组

  1. //1
  2. var arr = ["data1","data2","data3"];
  4. //2
  5. var arr = new Array();//arr为一个空数组
  6. var arr = new Array("data1","data2","data3");

创建数组时避免 new Array()，没有必要使用 JavaScript 的内建数组构造器 new Array()。请使用 [] 取而代之！

基本操作

  1. var d = arr[0];//获取一个元素
  2. arr[0] = "data";//修改元素
  3. var len = arr.length;//获取数组长度

数组与对象的区别

在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。
伪数组是什么？伪数组是一个对象，只有有数组的”形”., 不具有数组的常用方法（如map，filter，forEach，push等），未实现遍历接口(iterable)，forEach、map、filter、增强for不能遍历。

  1. //伪数组
  2. var arr= { 0:"data1",1:"data2",2:"data2",length:3};

常用方法

  • concat() 连接两个或更多的数组，并返回结果。

    var arr1 = [1,2,3];
    var arr2 = [4,5];
    var arr3 = arr1.concat(arr2);//
    //arr3 = [1, 2, 3, 4, 5]

  • join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

    var arr = [1,2,3];
    var str = arr.join(‘-‘);
    //str = 1-2-3

  • pop() 删除并返回数组的最后一个元素

    var arr = [1,2,3];
    var val = arr.pop();
    //val = 3;

  • push() 向数组的末尾添加一个或更多元素，并返回新的长度。

    var arr = [1,2,3];
    var len= arr.push(4);
    //len = 4

  • reverse() 颠倒数组中元素的顺序。

    var arr = [1,2,3];
    arr.reverse();
    //after: arr=[3,2,1]

  • shift() 删除并返回数组的第一个元素

    var arr = [1,2,3];
    var val = arr.shift();
    //val = 1

  • slice() 从某个已有的数组返回选定的元素

    var arr = [1,2,3,4,5,6];
    var arr2 = arr.slice(2,4);//slice(fromIdx,toIdx)
    //arr2 = [3,4]

  • sort() 对数组的元素进行排序

  • unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

    var arr = [1,2,3];
    var len = arr.unshift(0);
    //len=4

遍历

可以遍历伪数组。
1.for循环

  1. for(var i=0;i<arr.length;i++){ 
  2.     //arr[i]
  3. }

2.forEach循环
遍历时元素只读，修改元素无效。

  1. //org_arr为原数组，org_arr=arr
  2. arr.forEach((item,index,org_arr)=>{ 
  3.     //TODO
  4. });
  6. arr.forEach(function(item,index,org_arr){ 
  7.     //TODO
  8. });

3.map
遍历过程中可以修改元素。

  1. arr.map((item,index,org_arr)=>{ 
  2.     //TODO
  3.     return item;
  4. });
  6. arr.map(function(item,index,org_arr){ 
  7.     //TODO
  8.     return item
  9. })

4.增强for

  1. for (var item of arr) { 
  2.     console.log(item);
  3. }

5.filter
用于过滤数组中的元素，filter的回调函数返回值是boolean，决定当前元素是否被加入到新的数组中。
遍历过程中不能改变原数组元素。

  1. //newArr和arr是两个不同的数组
  2. var newArr = arr.filter(item=>{ 
  3.     return true/false;
  4. });
  6. var newArr = arr.filter(item=>item>3);
  8. var newArr = arr.filter(function(item){ 
  9.     return true/false;
  10. })

6.every
判断数组元素是否都满足某个条件，每一项的回掉函数返回true，则every函数返回true，否则返回false。

  1. var arr = [ 1, 2, 3, 4, 5, 6 ]; 
  2. var boo = arr.every((item,index,arr)=>item>3);
  3. var boo = arr.every( function( item, index, org_arr){  
  4.         return item > 3; 
  5. }); 
  6. //boo = false

7.some
判断数组元素是否存在某一个元素满足条件，若有一个满足条件则some返回true，若都不满足则返回false。

  1. var arr = [ 1, 2, 3, 4, 5, 6 ]; 
  2. var boo = arr.some((item,index,org_arr)=>{ return item>3});
  3. var boo = arr.some((item,index,org_arr)=>item>3);
  4. var boo = arr.some(function(item,index,org_arr){ 
  5.     return item>3
  6. })
  7. //boo = true

8.reduce
从左向右累加值。

  1. var arr = [ 1, 2, 3, 4, 5, 6 ]; 
  2. //preVal为之前的值，curVal为当前被加的值
  3. var sum = arr.reduce((preVal,curVal)=>{ return preVal+curVal})
  4. //No1: preVal=1,curVal=2
  5. //No2: preVal=3,curVal=3
  6. //No3: preVal=6,curVal=4
  7. //No4:...
  8. //sum=21

9.reduceRight
从右往左累加。使用同上。

10.find
在数组中查找满足条件的第一个元素并返回。

  1. var itm = arr.find(item=>{ return boo_express});
  2. var itm = arr.find(function(item){ return true/false})

11.findIndex
在数组中查找满足条件的第一个元素的索引值并返回。

  1. var idx = arr.findIndex(item=>{ return item ===3});
  2. var idx = arr.findIndex(function(item){ 
  3.     return item===3;
  4. });

想了解作者更多，请移步我的个人网站，欢迎交流、留言~
极客技术空间：https://elltor.com/

发表评论

表情：
评论列表 （有 0 条评论，607人围观）

还没有评论，来说两句吧...

相关阅读