Javascript数组详解

摘要：创建数组判断比是否是个数组取数组元素属性返回数组的成员数量。增加数组元素方法在数组的末尾增加一个或多个元素，并返回数组的新长度。表示要移除的数组元素的个数要添加进数组的元素最主要的的用途是向数组的中部插入元素。

数组是按序号排列的一组值，每个值的位置都有编号（从0开始）。数组本质上是一种特殊的对象。它的键名是按（0，1，2...）排列的一组数字。

创建数组：

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

判断比是否是个数组

Array.isArray(arr)

arr instanceof Array

取数组元素
arr[index]

length 属性
返回数组的成员数量。
Javascript使用一个32位整数，保存数组的元素个数。这意味着数组的成员最多只有4294967295个。

var arr = ["a","b"];
arr.length  // 2
arr.[10] = "c"
arr.length //11

从上面的输出结果可以看出，length属性可以动态变化，如果将length属性设为 0 ，就会将数组清空。如果设置的数小于原有的个数，那么在这个数后面的数值就自动删除了。反过来，如果设置的数大于原有的个数，数组的成员将增大，都为 undefined。

var a = [1,2];
a.length = 5;
a[4] // undefined
a.length = 1;
a.[1] // undefined
a.length = 0;
a  //[]

增加数组元素

push()方法 在数组的末尾增加一个或多个元素，并返回数组的新长度。

unshift()方法 在数组的开头增加一个或多个元素，并返回数组的新长度。

length 属性

var arr = [1, 2, 3]
arr.push(4)
arr  // 1, 2, 3, 4
arr.unshift(6)
arr  // 6, 1, 2, 3, 4
arr[arr.length] = 7  // 与push()方法类似
arr  // 6, 1, 2, 3, 4, 7

删除数组中的元素

delete 运算符，可以删除数组中的某个元素，但这不会改变length属性的值.

pop() 方法 删除数组的最后一个元素，并返回这个元素。

shift() 方法 删除数组的第一个元素，并返回这个元素。

var arr = [1,2,3];
delete arr[0];
arr   // [undefined,2,3]
arr.length  // 3
var last = arr.pop()
var first = arr.shift()
last // 3
first // undefined
arr //2

在js中，有些对象被叫做“类数组对象”（array-like object），因为这些对象看起来很像数组，可以使用length属性，但是无法使用数组的方法。
典型的类数组对象是函数的arguments对象，以及大多数DOM元素集，还有字符串。

// arguments对象
function args() {return arguments; }
var arraylike = args("a","b")
arrayLike[0]  // "a"
arrayLike.length // 2
arrayLike instanceof Array // false
Array.isArray(arrayLike)  // false

// DOM元素集
var elts = document.getElementsByTagName("p");
elts.length  // 3
eles instanceof Array  // false

//字符串
"abc"[1]  // "b"
"abc".length  // 3
"abc" instanceof Array  // false

数组的slice方法能将类数组对象，变成真正的数组。slice方法后面会结介绍。

var arr = Array.prototype.slice.call(arrayLike);

for...in 循环

var a =[1, 2, 3];
a.other = "other";
for (var i in arr){
    console.log( arr[i]);
}
// 1, 2, 3, other

从上面的输出结果可以看出，利用for..in循环会将动态添加的非数字键的值遍历出来，因此需要使用的时候需要注意。

for 循环和 while 循环

var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

var l = a.length;
while (l--) {
  console.log(a[l]);
}

forEach()方法

//array.forEach(callback[, thisArg])
//callback 在数组的每一项上执行的函数，接受三个参数：item: 数组当前项的值，index: 当前项的索引，arr:数组本身。
var arr = [1, 2, 3]
arr.forEach(function(item, index, arr){
    console.log(item, index);
});
//1 0
//2 1
//3 2

join() 将数值转换为字符串

var arr = [1, 2, 3];
arr.join(); // "1,2,3"
arr.join("_"); // "1_2_3"

reverse() 将数组逆序

// 原数组会被修改
var arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
arr; // [3, 2, 1]

sort() 数组排序
默认情况下是升序排列的，底层是调用了每个数组项的 toString() 方法，然后比较得到字符串，即使每个数组项的数值是数字，比较的也是字符串。

// 原数组会被修改
var arr = [1, 12, 213, 1432, "a"];
arr.sort(); // [1, 12, 1432, 213, "a"]
arr.sort(function(a, b){
    return b-a; //按倒序排列数组
});

concat() 数组合并
用法：array.concat(value1, value2, ..., valueN)

// 原数组不会被修改
var arr =[1, 2, 3]
arr.concat(4, 5);
arr; //[1, 2, 3]
arr.concat([11,2],3); // [1, 2, 3, 11, 2, 3]

slice() 返回部分数组
用法：array.slice(begin[,end])

slice用于复制数组，复制完后旧数组不变，返回得到的新数组是旧数组的子集。

第一个参数begin是开始复制的位置，需要注意的是，可以设负数。设负数表示从尾往前数几个位置开始复制。例如slice(-2)将从倒数第2个元素开始复制。另外需要注意的是，该参数虽未标注为可选，但实际上是可以省略的，省略的话默认为0。

第二个参数end可选，表示复制到该位置的前一个元素。例如slice(0,3)将得到前3个元素，但不包含第4个元素。不设的话默认复制到数组尾，即等于array.length。

//原数组不会被修改
var arr = [1, 2, 3, 4, 5];
arr.slice(); //[1, 2, 3, 4, 5]
arr.slice(1,3); // [2, 3]
arr.slice(1, -1); // [2, 3, 4]
arr; // [1, 2, 3, 4, 5]

splice() 数组拼接
用法：array.splice(start, deleteCount[, item1[, item2[, ...]]])

start 指要从哪一位开始修改内容，如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位。

deleteCount 表示要移除的数组元素的个数

item 要添加进数组的元素

最主要的的用途是向数组的中部插入元素。

//原数组会被修改
var arr = [1, 2, 3, 4, 5];
//从第三个数组元素删除
arr.splice(2); // returns [3, 4, 5] 
arr; // [1, 2]
//从第三个数组元素删除，删除两个元素
arr.splice(2, 2) // returns [3, 4]
arr; // [1, 2, 5]
//将"a","b"替换到数组的第二个元素
arr.splice(1, 1, "a", "b")

forEach() 数组遍历
用法：array.forEach(callback[, thisArg])
callback 在数组的每一项上执行的函数，接受三个参数：item：数组当前项的值，index: 当前项的索引，arr：数组本身。

var arr = [1, 2, 3]
arr.forEach(function(item, index, arr){
    console.log(item, index);
});
//1 0
//2 1
//3 2

map() 数组映射
map映射创建新数组，用法： map(function(value, index, array) { … }, [thisArg] );。和forEach一样，不赘述。唯一需要注意的的是回调函数需要有return值，否则新数组都是undefined。

其实map能干的事forEach都能干，你可以把map理解为forEach的一个特例，专门用于：通过现有的数组建立新数组。

//原数组未被修改
var arr= [1, 2, 3];
arr.map(function(x){
    return x+10;  // 需要 return 值，否则新数组里都是 undefined
});  // [11, 12, 13]
arr; // [1, 2, 3]

filter() 数组过滤
filter用于过滤数组，用法： filter( function(value, index, array) { … }, [thisArg] ); 。唯一需要注意的的是回调函数需要return布尔值true或false，

//原数组未被修改
var arr= [1, 2, 3, 4, 5, 6, 7, 8];
arr.filter(function(x,index){
    return x%2 == 0;
}); // [2, 4, 6, 8]
arr; // [1, 2, 3, 4, 5, 6, 7, 8]

every() some() 数组判断
some表示只要某一个满足条件就OK，every表示全部满足条件才OK。
用法：

arr.every(callback[, thisArg])

arr.some(callback[,thisArg])

var arr= [1, 2, 3, 4, 5];
arr.every(function(x){
    return x < 6;
}); // true
arr.every(function(x){
    return x > 6;
}); // false
arr.some(function(x){
    return x === 1;
});  // true
arr.some(function(x){
    return x === 6;
}); // false

reduce() reduceRight()
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。 两者都是用于迭代运算。区别是reduce从头开始迭代，reduceRight从尾开始迭代。

用法： reduce( function(previousValue, currentValue, currentIndex, array) { … }, [initialValue] );

第一个参数是回调函数，有4个参数：previousValue，currentValue，currentIndex，array。看名字也能知道意思：前一个值，当前值，当前索引，数组本身。

第二个参数initialValue可选，表示初始值。如果省略，初始值为数组的第一个元素，这样的话回调函数里previousValue就是第一个元素，currentValue是第二个元素。因此不设initialValue的话，会少一次迭代。

//将数组所有项相加
var arr = [0, 1, 2, 3];
var sum = arr.reduce(function(a, b) {
 return a + b
}, 0); // 6
arr; //[0, 1, 2, 3]
//数组扁平化
var flattened = [[0, 1], [2, 3], [4, 5]];
flattened.reduce(function(a,b){
    return a.concat(b);
}); // returns [0, 1, 2, 3, 4, 5]

indexOf() lastIndexOf() 数组检索
用法：indexOf( searchElement, [fromIndex = 0]) ／ lastIndexOf( searchElement , [fromIndex = arr.length – 1])
第一个参数searchElement即需要查找的元素。第二个参数fromIndex可选，指定开始查找的位置。如果忽略，indexOf默认是0，lastIndexOf默认是数组尾。
两者都用于返回项目的索引值。区别是indexOf从头开始找，lastIndexOf从尾开始找。如果查找失败，无匹配，返回-1

var arr = ["a", "b", "c", "d", "e"];
arr.indexOf("c");  // 2 找到返回数组下标
arr.indexOf("c", 3); // -1 指定从3号位开始查找
arr.indexOf("f"); // -1 没找到该元素
arr.lastIndexOf("c"); // 2
arr.lastIndexOf("c",2); // 2
arr.lastIndexOf("f"); // -1 没找到该元素

isArray() 判断是否是数组
用法：Array.isArray(value)

var arr = [];
var a = "not array";
Array.isArray(arr); // true
Array.isArray(a); // false

MDN