JavaScript数组操作全指南：创建、检测、增删改查与迭代方法

JavaScript数组基础与创建

Array类型是ECMAScript中最常用的引用类型。与大多数编程语言中的数组不同，ECMAScript数组的每一项可以存储任意类型的数据，无论是数值、字符串还是对象。此外，ECMAScript数组的大小是动态调整的，能够根据数据的添加自动增长以容纳新增数据。下文将总结JavaScript中数组常用的操作函数及其用法。

创建数组

创建数组主要有两种方法：使用构造函数或使用数组字面量，具体示例如下。


var arr = new Array(); 
var arr = [];

对于构造函数方式，可以传递一个数值来创建包含指定项数的数组，示例如下：


var arr = new Array(3);  //数组长度为3

也可以直接向构造函数传递数组中存放的值，示例如下：


var arr = new Array("red","green","blue");

无论采用哪种方式，都推荐使用数组字面量的形式来创建数组。

数组检测与字符串转换

检测数组

在单一的全局执行环境中，使用instanceof操作符即可检测对象是否为数组，例如：


var arr = [1,2,3]; 
console.log(arr instanceof Array);  //true

但如果网页中包含多个框架，即存在多个全局执行环境，ES5新增了Array.isArray()方法来确认某个值是否为数组，无论它是在哪个全局执行环境中创建的，示例如下：


if(Array.isArray(arr)){ 
    //执行某些操作 
}

数组字符串转换

每个对象都具有toLocaleString()、toString()和valueOf()方法。调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成并以逗号分隔的字符串；调用数组的valueOf()方法返回的仍是数组，实际上调用的是数组每一项的toString()方法，示例如下：


var arr = ["red","green","blue"]; 
console.log(arr.toString());  //red,green,blue 
console.log(arr.valueof());  //red,green,blue 
console.log(arr);       //red,green,blue

而调用数组的toLocaleString()方法，与toString()不同的是，它会调用数组每一项的toLocaleString()方法，将每一项toLocaleString()方法的返回值以逗号分隔拼接成一个字符串。若使用join()方法，则可以使用不同的分隔符来构建这个字符串，示例如下：


var arr = ["red","green","blue"]; 
console.log(arr.join(","));  //red,green,blue 
console.log(arr.join("||"));  //red||green||blue

数组元素的增删操作

数组的添加和删除

push()方法接收任意数量的参数，将它们逐个添加到数组末尾，并返回修改后数组的长度，例如：


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

与push()相对的是pop()方法，它从数组末尾移除最后一项，并返回被移除的项，例如：


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

另外两个常用的方法是shift()和unshift()，它们与pop()和push()类似。shift()方法用于从数组的起始位置移除项并返回被移除的项，例如：


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

unshift()方法与shift()用途相反，它能够在数组前端添加任意个项并返回新数组的长度，例如：


var arr = [1,2,3]; 
arr.unshift(4);  //返回长度4 
arr.unshift(5);  //返回长度5 
console.log(arr);  //[1,2,3,4,5]

数组排序、翻转与拼接

数组的翻转与排序

数组提供的翻转方法为reverse()，它会反转数据项的顺序，例如：


var arr = [1,2,3]; 
arr.reverse(); 
console.log(arr);  //[3,2,1]

sort()也可以对数组进行排序，不过它的默认排序方式并不是按大小，而是根据对应字符串逐个编码排序。sort()方法可以接收一个比较函数进行自定义排序，例如：


function compare(value1,value2){ 
  return value1-value2; 
} 
var arr = [1,3,2,5,4]; 
arr.sort(compare); 
console.log(arr);  //[1,2,3,4,5]

数组连接

concat()方法会创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，原来的数组保持不变，例如：


var arr = [1,2,3]; 
var arr2 = arr.concat(4,[5,6]); 
console.log(arr);  //[1,2,3] 
console.log(arr2);  //[1,2,3,4,5,6]

数组切片与splice高级操作

数组分割

slice()方法接收一个或两个参数，即要返回项的开始位置和结束位置。如果只接收一个参数，则返回从指定位置开始到数组结束的所有项。如果接收两个参数，则返回起始和结束位置之间的所有项，但不包括结束位置的项，例如：


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

需要注意的是，slice()方法不会影响原来的数组。

splice()方法

由于splice()方法功能非常强大，因此单独总结如下。它可以接收三个参数：第一个参数表示添加或删除项目的位置，第二个参数表示要删除的项目数量，第三个参数（可选）表示向数组中添加的新项目。通过提供不同的参数可以实现删除、插入和替换等功能，例如：


var arr = [1,2,3,4,5]; 
arr.splice(2,0,11,22);  //从位置2插入两项，没有删除 
console.log(arr);  //[1,2,11,22,3,4,5] 
 
arr.splice(2,2,33,44);  //从位置2开始删除两项，插入两项，返回被删除的项 
console.log(arr);  //[1,2,33,44,4,5] 
 
arr.splice(1,1);  //从位置1开始删除1项，返回被删除的项 
console.log(arr);  //[1,33,44,4,5]

数组位置查找与迭代方法

数组的位置方法

ES5提供了两个位置方法：indexOf()和lastIndexOf()。这两个方法都接收两个参数：要查找的项和表示查找起点位置的索引（可选）。indexOf()方法从数组的开头向后查找，lastIndexOf()则从数组的末尾向前查找，例如：


var arr = [1,2,3,4,5,4,3,2,1]; 
console.log(arr.indexOf(4));  //3 
console.log(arr.lastIndexOf(4));  //5 
 
console.log(arr.indexOf(4,4));  //5 
console.log(arr.lastIndexOf(4,4));  //3

数组的迭代方法

ES5定义了5种迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和（可选）运行该函数的作用域对象——用于影响this的值。传入这些方法的函数可以接收三个参数：数组项的值、该项在数组中的索引和数组对象本身。

其中，every()方法和some()方法是相似的。对于every()方法来说，传入的函数必须对每一项都返回true，这个方法才返回true。而对于some()，只要传入的函数对数组中的任意一项返回true，该方法就返回true。例子如下：


var arr = [1,2,3,4,5,4,3,2,1]; 
var everyResult = arr.every(function(item,index,array){ 
  return (item>2); 
}); 
console.log(everyResult);  //false，并不是全部大于2 
 
var someResult= arr.some(function(item,index,array){ 
  return (item>2); 
}); 
console.log(someResult);  //true，某一项大于2即可

filter()方法根据给定的函数确定是否在返回的数组中包含某一项，例如：


var arr = [1,2,3,4,5,4,3,2,1]; 
var filterResult = arr.filter(function(item,index,array){ 
  return (item>2); 
}); 
console.log(filterResult);  //[3,4,5,4,3],返回所有数值都大于2的一个数组

map()方法对于数组中的每一项都会运行给定的函数，然后将每一项函数运行结果组成的数组返回，例如：


var arr = [1,2,3,4,5,4,3,2,1]; 
var mapResult = arr.map(function(item,index,array){ 
  return item*2; 
}); 
console.log(mapResult);  //[2,4,6,8,10,8,6,4,2]，原先数组每一项乘以2后返回

最后一个方法是forEach()，它只对数组中的每一项运行给定函数，没有返回值，例如：


var arr = [1,2,3,4,5,4,3,2,1]; 
arr.forEach(function(item,index,array){ 
  //执行某些操作 
});

数组归约与总结

数组的缩小方法

ES5还提供了两个缩小数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组中的所有项，然后返回一个最终的值。reduce()从第一项开始逐渐遍历到最后一项，reduceRight()从最后一项开始遍历到第一项结束。这两个函数都接收四个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。例如，使用reduce()方法求数组所有项的和：


var arr = [1,2,3,4,5]; 
var sum = arr.reduce(function(pre,cur,index,array){ 
  return pre+cur; 
}); 
console.log(sum);  //15

第一次执行回调函数，pre是1，cur是2。第二次，pre是3（1+2），cur是3。这个过程会把数组的每一项都访问一遍，最后返回结果。reduceRight()方法与reduce()类似，只不过方向相反而已。

这篇笔记主要是根据JavaScript高级程序设计和网上资源总结出来的，如果有不完善的地方还请指出。

以上这篇基于JavaScript Array数组方法(新手必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。

JavaScript Array数组常用方法详解：从创建到迭代