javascript中数组总结

数组是所有高级语言都会有的东西，数组是JS中使用最多的类型之一，所以掌握JS中数组的用法相当有帮助：

由于JS是一门弱类型的语言，所以数组里面可以放各种不同的数据类型，比如

var a = [1993, 'ldz', true]

JS里面数组的大小时可以动态调整的，所以随着数据的添加，数组的长度会自动的增长

创建数组有两种方式

1. 使用Array构造方法，下面的几种都是合法的

var arr1 = new Array();  //创建一个空数组
var arr2 = new Array(20);  //创建一个length为20的空数组，每一项的值为 undefined
var arr2 = new Array('ldz');  //创建一个只包含一个'ldz'字符串的数组，注意这里的参数不是一个数字，所以认为是数组中的某一个项，而不是长度
var arr3 = new Array(1993, 'ldz', true); //创建一个包含3个元素的数组

2. 使用字面量的方式

var arr1 = []; // 创建一个空数组对象
var arr2 = ['ldz']; // 创建一个有一个字符串元素的数组对象
var arr3 = [1, 2, ];  // 不要这么用，在ie8之前的浏览器中的数组长度是3,在其它浏览器中长度是2
var arr4 = [, , , ]; // 不要这么用，在ie8之前的浏览器中的数组长度是4,在其它浏览器中长度是3

数组的基本操作

可以通过下标表达式来获取和设置数组中的值

var colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 获取索引值为0的值 red
colors[1] = 'black';  // 设置索引为1的值
console.log(colors[1]); // black
console.log(colors[4]); //数组越界，返回 undefined

每个数组对象都会有一个length属性，代表这个数组中有多少个元素，这个length很有特点，它不是只读的，我们可以动态的修改它，用来伸缩数组的大小

var colors = ['red', 'green', 'blue'];
var names = [];
console.log(colors.length);  //
console.log(names.length);//
colors.length = 2; // 将colors数组的大小改为2
console.log(colors); // red, green

当我们为一个数组的某个索引上设置值，而这个索引值已经超出了数组的长度，那么，数组会重新计算其长度值，如：

var colors = ['red', 'green', 'blue'];
colors[10] = 'black';
console.log(colors.length); //
console.log(colors); // ["red", "green", "blue", undefined × 7, "black"]

如何检测一个对象是不是数组，我们可以用 obj instanceof Array 来进行检测，但是这样会有一些问题，比如存在多个全局作用域（像一个页面包含多个 frame），那么，这个检测方法就失效了（Array是window的属性）

另外一个解决方案是使用Array.isArray(obj)方法，但是这个方法在IE8和以前都不支持

所以有一个解决办法，我们知道，在任何值上调用Object原声的toString方法，都会返回一个[object NativeConstructorName]格式的字符串，举个例子：

console.log(Object.prototype.toString.call([]));  // [object Array]

由于原生数组的构造函数名与全局作用域无关，因此使用 toString()就能保证返回一致的值。利用这一点，可以创建一下方法：

function isArray(value){
  return Object.prototype.toString.call(value) == "[object Array]";
}

数组操作方法

join(seprator)

把数组的所有元素放入一个字符串。元素通过指定的分隔符（默认为一个逗号）进行分隔。返回一个字符串

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

栈方法 push(ele), pop

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

pop是删除并返回数组的最后一个元素，长度减一；如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值

var colors= ['red', 'green', 'blue'];
console.log(colors.pop()); // blue
console.log(colors.pop()); // green
console.log(colors.length); //
console.log(colors.push('black')); //
console.log(colors.pop()); // black
console.log(colors.pop()); // red
console.log(colors.pop()); // undefined

反向栈方法 shift, unshift

与pop, push相反，shift删除并返回数组的第一个元素，unshift向数组的开头添加一个或更多元素，并返回新的长度。

var colors= ['red', 'green', 'blue'];
console.log(colors.shift()); // red
console.log(colors.shift()); // green
console.log(colors.length); //
console.log(colors.unshift('black')); //
console.log(colors.shift()); // black
console.log(colors.shift()); // blue
console.log(colors.shift()); // undefined

我们可以利用 shift和push来实现一个队列

concat(arr1, arr2, ...)

连接两个或更多的数组，返回一个新的数组。参数可以是具体的值，也可以是数组如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

var colors = ['red', 'green', 'blue'];
var colors2 = ['gray', 'black'];
console.log(colors.concat(colors2)); // ["red", "green", "blue", "gray", "black"]
console.log(colors.concat(colors2, 'white')); // ["red", "green", "blue", "gray", "black", "white"]
console.log(colors.concat(colors2, colors2)); // ["red", "green", "blue", "gray", "black", "gray", "black"]

排序方法 reverse 和 sort

reverse用于反转并返回数组, 该方法会改变原来的数组，而不会创建新的数组。

var colors = ['red', 'green', 'blue'];
var reversed = colors.reverse();
console.log(reversed); // ["blue", "green", "red"]
console.log(colors); // ["blue", "green", "red"]

sort(sortby) 方法用于对数组的元素进行排序。该方法会改变原来的数组，而不会创建新的数组。

如果sortby没有定义，则对于数组中的所有元素会先转成字符串，然后再按照字母顺序排序

对于排序规则方法 sortby，有以下规则：

方法有两个参数，就是要比较的两个元素 function(a, b){}

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

var arr1 = [1, 2, 3, 11, 4];
arr1.sort(); //  [1, 11, 2, 3, 4]
console.log(arr1);
arr1.sort(function(a, b){
   return a - b;  // 若a > b 则返回大于0的值
})
console.log(arr1); // [1, 2, 3, 4, 11]

slice(start, end)

创建一个新的数组，从已有的数组中返回选定的元素，[start, end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
console.log(colors2); //  ["green", "blue", "yellow", "purple"]
console.log(colors3); //  ["green", "blue", "yellow"]

splice

最强大的数组方法，该方法会改变原始数组；

它有很多种用法。

splice()的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下 3 种。

1. 删除，可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。

var arr1 = [1, 2, 3, 4, 5];
arr1.splice(1, 2); 删除2和3
console.log(arr1); // [1, 4, 5]

2. 插入，可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。

var arr1 = [1, 2, 3, 4, 5];
arr1.splice(1, 0, 'a'); // 在索引为1的位置插入 'a'
console.log(arr1); //  [1, "a", 2, 3, 4, 5]

3. 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。

var arr1 = [1, 2, 3, 4, 5];
arr1.splice(1, 1, 'a'); // 在索引为1的位置提换为 'a'
console.log(arr1); //  [1, "a", 3, 4, 5]

可以批量的

var arr1 = [1, 2, 3, 4, 5];
arr1.splice(0, 5, 'a', 'b', 'c', 'd', 'e');
console.log(arr1); //  ["a", "b", "c", "d", "e"]

所以，我们可以理解这个定义

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值

类型	描述
Array	包含被删除项目的新数组，如果有的话。

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

indexOf, lastIndexOf

查找元素的位置

var colors = ["red", "green", "blue", "yellow", "purple", "green"];
console.log(colors.indexOf('green')); //
console.log(colors.lastIndexOf('green')); // 5，从后往前找到第一个

遍历方法

ES5定义了 5个迭代方法（支持IE9+和其他浏览器），遍历数组，为每个元素调用回调方法进行处理

every(function(item, index, array){})，如果每一项都返回true，则返回true

some(function(item, index, array){})，如果任意一项返回true，则返回true

filter(function(item, index, array){}), 返回 回调方法返回true的项的集合

forEach(function(item, index, array){}),没有返回值

map(function(item, index, array){}),返回每次函数调用的结果组成的数组