JS数组常用方法及其遍历

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

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

### 创建一个数组 ###

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

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

### 基本操作 ###

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

### 数组与对象的区别 ###

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

//伪数组
    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循环**

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

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

//org_arr为原数组，org_arr=arr
    arr.forEach((item,index,org_arr)=>{ 
        //TODO
    });
    
    arr.forEach(function(item,index,org_arr){ 
    	//TODO
    });

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

arr.map((item,index,org_arr)=>{ 
    	//TODO
    	return item;
    });
    
    arr.map(function(item,index,org_arr){ 
    	//TODO
    	return item
    })

**4.增强for**

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

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

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

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

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

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

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

**8.reduce**  
从左向右累加值。

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

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

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

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

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

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

--------------------

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

[https_elltor.com]: https://elltor.com/