JavaScript 数组方法小结

Array，ECMAScript的引用类型，数组。ECMAScript数组都是有序列表，而且每一项都可以保存任何类型的数据。数组的大小根据内容自动扩展。

创建数组

创建数组的两种方式：

第一种：使用Array构造函数

var colors = new Array();

例如：

var colors = new Array(3);     //创建一个包含3项的数组
var colors = new Array("red","green","yellow");   //创建包含3个字符串的数组
//或者
var colors = Array(3);    
var colors = Array("red","green","yellow");

方式二：使用数组字面量

var colors = ["red","green","yellow"];

检测数组（经典问题）

先写两种吧

第一种： instanceof

对于网页和全局作用域而言，使用instanceof操作符就能得到满意的结果：

if(value instanceof Array){
	// 对数组执行某些操作
}

这种方法在只有一个全局作用域的环境下是可以的，但是如果一个网页中包含多个框架，那么就会存在不同的全局环境，不同的环境 Array 构造函数是不同的，所以要在两个框架下传递数组时就会出现问题，在某个框架里检测出来是数组但是在另一个框架里检测出来并不是数组。

第二种：Array.isArray()

这个方法的目的最终是确定某个值到底是不是数组，而不管它在哪个全局执行环境中创建的。

if(Array.isArray(value)){
	// 对数组执行某些操作
}

但是有兼容性问题。

 

转换方法

将数组转换为字符串

1.toLocalString()、toString() 和  valueOf()

toLocalString()、toString() 和  valueOf() 这三个方法在默认情况下，会以逗号分隔的字符串的形式返回数组项。

2.join()

方法可以使用不同的分隔符来构建这个字符串。

var colors = ["red","green","yellow"];
console.log(colors.join(""));    // redgreenyellow
console.log(colors.join("||"));   // red||green||yellow

 

添加一下这二者（toLocalString()、toString() ）区别：

直接看例子

var a=1234;
console.log(a.toString());    // "1234"
console.log(a.toLocaleString());  // "1,234"

var sd = new Date();
console.log(sd.toString());    // Thu May 28 2020 22:45:48 GMT+0800 (中国标准时间)
console.log(sd.toLocaleString());    // 2020/5/28 下午10:45:48

这样总结以上就是toString()和toLocaleString()两点区别：

1.当数字是四位数及以上时，有区别

2.当目标是标准时间格式时，用以上两种方法是有区别的

 

栈方法

ECMAScript数组也提供了一种能让数组的行为类似其他数据结构的方法。具体来说，数组可以表现得像栈一样，栈是一种可以限制插入和删除项的数据结构。栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最先被移除。

发生位置是在 栈的顶部 。

push()

可以接收任何数量的参数，把他们逐个添加到末尾，并返回修改后数组的长度。

pop()

方法从数组末尾移除最后一项，返回移除后的值。

var colors = ["red","blue"];
colors.push("brown");
colors[3] = "black";
alert(colors.length);    //4

var item = colors.pop();
alert(item);   //"black"

队列方法

队列的数据结构的访问规则是FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。

模拟队列：

shift()    

移除数组中第一项，并返回该项，长度减1。

var colors = new Array();
var count = colors.push("red","green");
alert(count);   //2

count = colors.push("black");
alert(count);  //3
var item = colors.shift();
alert(item);       // "red"
alert(colors.length);   // 2

unshift()

在数组前端添加任意项，并返回新数组长度。

继续添加代码，接上部分：

var unres = colors.unshift("white","yellow");
alert(unres);    //4 

 

重排序方法

reverse() 和 sort() 方法的返回值是经过排序后的数组。

reverse()  倒序

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);    // [5,4,3,2,1]

sort()

在默认情况下，sort()方法按升序排列数组项，即最小的值在最前面，最大的值在最后面。

sort()方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组的中的每一项都是数值，sort()方法比较的也是字符串。

var value1 = [4,3,2,12];
console.log(value1.sort());     // [12, 2, 3, 4]
var value2 = ["b","a","c","A"];
console.log(value2.sort());     // ["A", "a", "b", "c"]

sort()可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数，如果位于第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等，则返回0，如果第一个参数应该位于第二个之后，则返回一个正数。

function compare(value1, value2){
	if(value1 < value2){
		return -1;
	}else if(value1 > value2){
		return 1;
	}else{
		return 0;
	}
}

使用：

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);     // 0, 1, 5, 10, 15 

操作方法

concat()

concat() 方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

示例：

var colors = ["red","green","blue"];
var colors1 = colors.concat();
var colors2 = colors.concat("yellow",["white","black"]);

console.log(colors);     // ["red", "green", "blue"]

console.log(colors1);    // ["red", "green", "blue"]
console.log(colors == colors1);   //false

console.log(colors2);	 // ["red", "green", "blue", "yellow", "white", "black"]

alert(colors2);          // red,green,blue,yellow,white,black
// alert()隐式转换为字符串

可以看到  concat() 未影响原数组，并将后面的参数或数组中的值都添加到结果数组中。colors1为复制的colors的副本，所以二者不相等，colors2为添加的后的新数组。

slice()

.slice()基于当前数组 中的一或多项创建一个新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

当 slice()  内出现负数，则用该数组长度加上该数来确定相应的位置。

var colors = ["red", "green", "blue", "yellow", "white", "black"];
var colors1 = colors.slice(1);
var colors2 = colors.slice(1,4);
var colors3 = colors.slice(-4,-1);
var colors4 = colors.slice(1,-1);

console.log(colors1);     // ["green", "blue", "yellow", "white", "black"]
console.log(colors2);     // ["green", "blue", "yellow"] 
console.log(colors3);	  // ["blue", "yellow", "white"]
console.log(colors4);	  // ["green", "blue", "yellow", "white"]

colors1 参数传入1，是这个数组从位置1处开始复制到数组末端。

colors2 参数传入1和4，是这个数组从位置1处开始复制到数组位置4，但是不包含位置4的数据。

colors3 参数分别为-4和-1，加上数组长度后等价于 （2, 5）

colors4 同上。

splice()    最强大的数组方法

主要用途是向数组中部插入项，使用这种方法的方式有如下三种：

• 删除：可以删除任意数量的项，只需要指定 2 个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中得到前两项。
• 插入：可以向指定位置插入任意数量的项，只需要提供 3  个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以传入多个项，可以再传入第四、⑤，乃至更多项。例如，splice(2, 0, "red","green")会从当前数组的位置2开始插入字符串"red"和"green"。
• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定三个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2, 1, "red","green")删除位置2的项，然后从位置2开始插入字符串"red"和"green"。

 splice() 始终返回一个数组，该数组包含从原始数组中删除的项（如果没删除数任何项，则返回一个空数组）

var colors = ["red", "green", "blue"];
var removed = colors.splice();
console.log(colors); 		// ["red", "green", "blue"]
console.log(removed);		// []

removed = colors.splice(0, 1);    //删除第一项
console.log(colors);		// ["green", "blue"]
console.log(removed);		// ["red"]

removed = colors.splice(1, 0, "white", "black");    //从位置1处添加两项
console.log(colors);		// ["green", "white", "black", "blue"]
console.log(removed);		// []

removed = colors.splice(1, 1, "orange","purple");    // 替换：插入两项删除一项
console.log(colors);		// ["green", "orange", "purple", "black", "blue"]
console.log(removed);		// ["white"]

位置方法

indexOf()和lastIndexOf() 这两个方法都接收两个参数：要查找的项和（可选的）表示起点位置的索引。这两个方法均返回要查找的项在数组中的位置，在没找到的情况下返回  -1。在查找时是严格相等的（等价于 === ）。

indexOf()

从数组开头（位置0）开始向后查找

lastIndexOf()

从数组末尾向前查找

var num = [3, 5, 6, 7, 1, 5, 6];
console.log(num.indexOf(4));   // -1
console.log(num.indexOf(6));   // 2
console.log(num.lastIndexOf(6));   // 6

console.log(num.indexOf(6,3));   // 6
console.log(num.lastIndexOf(6,3));   // 2

迭代方法

ES5为数组定义了五个迭代方法。每个方法接收两个参数：要在每一项运动的函数和（可选的）运行该函数的作用域对象---影响this的值。

这些方法都不会修改数组中包含的值。

(x) => { }         // 等价于       function(x){ }

every()

对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

空数组 调用every方法，返回值就是true

var arr = [1, 2, 3, 4, 5, -4, -9];
var arr2 = arr.every((x) => x >0);
console.log(arr2);   //false

filter()

对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

var arr = [1, 2, 3, 4, 5, -4, -9];
var arr2 = arr.filter((x) => x < 3 && x >= 0);
console.log(arr2);   // [1, 2]

forEach()

对数组中的每一项运行给定函数，这个方法无返回值。返回值为undefined，不可以进行链式调用

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});

// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

如果想跳出forEach，没有好的方法，只能抛出异常。使用 throw new Error()和try catch ，在需要跳出的位置抛出异常，抛出异常使用try catch捕获。

或者使用其他方法，想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some()。

map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。可进行链式调用，原数组不会改变。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map((item) => item*item);
console.log(arr2); //[1, 4, 9, 16, 25]

some()

对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

var arr = [1, 2, 3, 4, 5, -4, -9];
var arr3 = arr.some((x) => x >0);
console.log(arr3);  //true

归并方法

两个方法都会迭代数组的所有项，然后构建一个最终返回的值。这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

reduce()

从数组第一项开始，逐个遍历到最后。

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

reduceRight()

从数组最后一项开始，向前遍历到第一项。

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

这两个方法除了遍历数组的方向以外，没有其他区别。

 

 

目前详细介绍了22种关于数组的方法， 可能还有其他的方法，如果有遗漏了的，麻烦留言提示，谢谢~