JavaScript中Array类型数组的一些方法小结

时间：2023-02-13 08:09:05

检测数组

对于一个网页或者全局作用域而言，使用instanceof操作符就可以达到我们的检测对象是否是数组的目的。而如果网页中包含多个框架，则实际上就存在了多个不同的全局执行环境，故存在多个不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别有不同的构造函数。而为了解决这个问题，ES5新增了Array.isArray()方法，用于确定某个值到底是不是数组，而不论其在哪个全局执行环境中创建。
PS：支持Array.isArray()方法的浏览器有：IE9+,Firefox 4+,Safari 5+,Opera 10.5+和Chrome。

//判断示例
var arr = [1,2];
console.log(Array.isArray(arr)); //true

//在不支持Array.isArray()方法的浏览器中，使用以下方法
//在任何值上调用Object原生的toString()方法，
//都会返回一个[object NativeConstructorName]格式的字符串
function isArray(value) {
return Object.prototype.toString.call(value) == "[object Array]";
}

isArray([1,2]);  //true

join()方法

数组继承的toLocaleString()和toString()方法，在默认情况下都会以逗号分隔的字符串的形式返回数组项。而join()方法可以使用不同的分隔符来构建这个字符串。join()方法接收一个用作分隔符的字符串作为参数，然后返回包含所有数组项的字符串。

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

//如果不给join()传入参数或传入undefined，则使用逗号分隔符
console.log(arr.join()); //1,2,3
console.log(arr.join(undefined)); //1,2,3

栈方法

以栈方法（后进先出）对数组进行插入或移除操作。

//push()方法向数组末尾插入值
var arr = new Array(1,2);
console.log(arr); //[1,2]
//插入3
arr.push(3); 
console.log(arr); //[1,2,3]
//插入4,5,6三个数
arr.push(4, 5, 6);
console.log(arr); //[1,2,3,4,5,6]

//pop()方法删除最后一项
arr.pop();
console.log(arr); //[1,2,3,4,5]

队列方法

以队列方法（先进先出）对数组进行插入或移除操作。

//unshift()方法向数组前端插入数据
var arr = new Array("red");
//插入"blue"
arr.unshift("blue");
console.log(arr); //["blue","red"]
//插入"green"和"orange"
arr.unshift("green", "orange");
console.log(arr); //["green","orange","blue","red"]

//shift()方法移除数组前端第一个值
arr.shift();
console.log(arr); //["orange","blue","red"]

重排序方法

reverse()方法将原数组倒序。

var arr = [3,1,4,7];
arr.reverse(); //[7,4,1,3]

sort()方法默认情况下会调用数组的每一项的toString()方法，然后比较得到的字符串对数组进行升序排序。

var arr = [0, 23, 5, 40, 15];
value.sort(); //[0,15,23,40,5]

从上述结果可以看出这不是我们想要的结果，因此，我们需要向sort()传入一个比较函数作为参数。

function compare(value1, value2) {
if(value1 < value2) {
return -1;
    }
else if(value1 > value2) {
return 1;
    }
else {
return 0;
    }
}
var arr = [0, 23, 5, 40, 15];
arr.sort(compare); //[0,5,15,23,40]

操作方法

concat()方法

使用这个方法会创建一个原数组的副本，然后再在改副本末尾插入传给它的参数，该方法不会改变原数组。

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

slice()方法

slice()方法能基于当前数组中的一或多个项创建一个新数组。

var arr = [0,1,2,3,4,5];
//不传参数时创建当前数组的一个副本
var arr2 = arr.slice();
console.log(arr2); //[0,1,2,3,4,5]

//传一个参数时，返回由从原数组该参数索引开始到数组结尾的项组成的新数组
var arr3 = arr.slice(2);
console.log(arr3); //[2,3,4,5]

//传两个参数时，返回由第一个参数到第二个参数（含第一个参数）的项组成的新数组
var arr4 = arr.slice(1,4);
console.log(arr4); //[1,2,3]

splice()方法

splice()方法有多种用法，而其最主要的用途是向数组的中部插入项。

var arr = [0,1,2,3,4];
//删除，只传入两个参数，第一个参数为要删除的第一项的位置，第二个参数为要删除的项数
arr.splice(1, 2);
console.log(arr); //[0,3,4]

//插入，传入3个参数或以上：起始位置，0（要删除的项数），要插入的项
arr.splice(1, 0, 1, 2);
console.log(arr); //[0,1,2,3,4]

//替换，可以向指定位置插入任意数量的项，且同时删除任意数量的项
//传入3个或以上参数：起始位置，删除项数，要插入的项
arr.splice(1, 1, 8, 8);
console.log(arr); //[0,8,8,2,3,4]

位置方法

ES5为数组实例新添了两个位置方法：indexOf()和lastIndexOf()，这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。indexOf()从数组开头开始向后查找，而lastIndexOf()方法则从数组末尾开始向前查找。在没找到匹配项时，返回-1，找到后返回要查找的项在数组中的位置（索引值）。

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

迭代方法

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

/* 这5个方法都对数组中的每一项运行给定函数 */
var arr = [1,2,3,4,5,6,7];

//every()：如果该函数对每一项都返回true，则返回true
var everyResult = arr.every(function(item, index, array) {
return (item > 2);
});
console.log(everyResult); //false

//some()：如果该函数对任意一项返回true，则返回true
var someResult = arr.some(function(item, index, array) {
return (item > 2); 
});
console.log(someResult); //true

//过滤方法filter()：返回该函数会返回true的项组成的数组
var filterResult = arr.filter(function(item, index, array) {
return (item > 2);
});
console.log(filterResult); //[3,4,5,6,7]
console.log(arr); //[1,2,3,4,5,6,7]

//map()：返回每次函数调用的结果组成的数组不改变原数组
var mapResult = arr.map(function(item, index, array) {
return item * 2;
});
console.log(mapResult); //[2,4,6,8,10,12,14]

//forEach()：没有返回值
arr.forEach(function(item, index, array) {
array[index] = item * 2; //改变了原数组
});
console.log(arr); //[4,8,12,16,20,24,28]

归并方法

ES5新增两个归并数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组所有项，然后构建一个最终返回的值。reduce()从前往后遍历，reduceRight()从后往前遍历。这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给它们的函数接收4个参数：前一个值，当前值，项的索引和数组对象。这个函数返回的每一个值都会作为第一个参数自动传入下一项。

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

相关文章