JavaScript数组类型

特点

• 动态长度
• 一个数组里面的元素可以是不同类型
• 数组的length属性不是只读属性，可通过length延长数组也可以删减数组的长度

定义数组两种方法

//方法一：
var names = new Array();
//方法二：
var names = [];

获得数组的值

toString()

这个方法将输出一个字符串，数组的元素之间用逗号分隔

valueOf()

这个方法将输出数组

请看下面的例子：

var names = ["Tom","Jane","TabWeng"];

console.log(names.toString());
console.log(names.valueOf());
console.log(names);

运行结果：

Tom,Jane,TabWeng
Array [ "Tom", "Jane", "TabWeng" ]
Array [ "Tom", "Jane", "TabWeng" ]

数组元素间分隔符设置 : join()

var names = ["Tom","Jane","TabWeng"];

var showName = names.join("--");

console.log(showName);
console.log(name);

运行结果：

Tom--Jane--TabWeng
Tom,Jane,TabWeng

join方法生成的是一个字符串，且不影响原来的数组。

向数组尾部添加元素：push()

var names = ["Tom","Jane","TabWeng"];

var length = names.push("Michael");

console.log(names);
console.log(length);

运行结果：

Array [ "Tom", "Jane", "TabWeng", "Michael" ]
4

push()向数组尾部添加一个元素并返回数组的长度。

取出数组尾部的元素：pop()

var names = ["Tom","Jane","TabWeng"];

var lastElement = names.pop();

console.log(names);
console.log(lastElement);

运行结果：

Array [ "Tom", "Jane" ]
TabWeng

push()和pop() 组合即可实现栈方法，即在数组中先进后出。

取出数组头部的元素：shift()

var names = ["Tom","Jane","TabWeng"];

var firstElement = names.shift();

console.log(names);
console.log(firstElement);

运行结果：

Array [ "Jane", "TabWeng" ]
Tom

push()向数组尾部添加元素，shift()从数组头部取出元素，所以这两个方法结合，可实现队列方法, 先进先出。

从数组头部添加元素：unshift()

var names = ["Tom","Jane","TabWeng"];

var length = names.unshift("Michael");

console.log(names);
console.log(length);

运行结果：

Array [ "Michael", "Tom", "Jane", "TabWeng" ]
4

pop()和unshift() 结合可实现栈方法的反过程。

排序方法：sort()

注意sort()方法会改变原来数组的元素排序

var nums = [1,2,3,10,15,20];

nums.sort();
console.log(nums);

运行结果：

Array [ 1, 10, 15, 2, 20, 3 ]

因为sort()是按字符来排序的，所以这个结果是正确的。我们可以自定义排序的方式。sort()可以传入一个函数作为参数，在函数里面定义规则，方法如下（步骤）：

1. 明确排序规则（比如是按数字的从小到大排序，还是按字符串长度排序）
2. 对于函数中传入的两个参数，编写比较方法，使返回负数时第一个参数排在第二个参数前，返回正数时，第一个参数将排在第二个参数后面

我们来看下面的例子：

var nums = [1,2,3,10,15,20];

function numCompare(num1,num2){
  return num1-num2;
}

nums.sort(numCompare);

console.log(nums);

运行结果：

Array [ 1, 2, 3, 10, 15, 20 ]

注意numCompare() 函数里面的return num1-num2。

再来看一个例子：

var string = ["dddd","a","cc","bbbbbb","fffffff","eeeeeeeeee"];

string.sort();
console.log(string);

运行结果：

Array [ "a", "bbbbbb", "cc", "dddd", "eeeeeeeeee", "fffffff" ]

默认是按照字母的顺序进行排序，如果我们要按字符串的长度进行排序，可以写这样的函数：

function lengthCompare(string1,string2){
  return string1.length - string2.length;
}

完整的例子：

var string = ["dddd","a","cc","bbbbbb","fffffff","eeeeeeeeee"];

function lengthCompare(string1,string2){
  return string1.length - string2.length;
}

string.sort(lengthCompare);
console.log(string);

运行结果：

Array [ "a", "cc", "dddd", "bbbbbb", "fffffff", "eeeeeeeeee" ]

数组倒置：reverse()

var nums = [1,2,3,4,5,6,7,8];
nums.reverse();
console.log(nums);

运行结果：

Array [ 8, 7, 6, 5, 4, 3, 2, 1 ]

组合数组：concat()

concat() 不会对原有数组产生影响

var names = ["TabWeng","Jane"];
var nums = [1,2,3];
var array = names.concat(nums);
console.log(array);

console.log(names);
console.log(nums);

运行结果：

Array [ "TabWeng", "Jane", 1, 2, 3 ]
Array [ "TabWeng", "Jane" ]
Array [ 1, 2, 3 ]

通过concat()把nums组合到names的尾部，把生成的新数组赋值给变量array，原来的数组不变。

concat()也可以接受多个参数，看下面的例子理解：

var names = ["TabWeng","Jane"];
var nums = [1,2,3];
var array = names.concat("你好！",nums);
console.log(array);

运行结果：

Array [ "TabWeng", "Jane", "你好！", 1, 2, 3 ]

获取数组片段组成新数组：slice()

slice()接受两个参数，分别是开始位置和结束位置，元素从1开始算起，slice()将数组从开始位置截取到结束位置，并返回截取的数组。在截取过程中，不包括开始位置的元素，但包括结束位置的元素。请看下面的例子理解：

var colors = ["red","blue","yellow","green","skyblue"];
var otherColors = colors.slice(1,3);
console.log(otherColors);

运行结果：

Array [ "blue", "yellow" ]

如果只传入一个参数，那么默认为开始位置的参数，将从这个位置后到结尾截取数组。读者可以试试slice(0)和slice(1)的结果。

强大的操作数组方法：splice()

splice()接受三个参数：

• 第一个参数：操作开始的位置
• 第二个参数：要删除的元素个数，从操作开始位置之后算起，如果个数为0，那么表示不删除
• 第三个参数：要添加的元素（可多个），在执行删除操作之后进行添加，如果删除的个数是零，那么意味着只添加

splice()是原地修改数组，修改后数组就变化。该方法返回的是删除后的元素。如果没有删除，则返回空数组。

看下面的例子：

删除操作

var colors = ["red","blue","yellow","green","skyblue"];
var removes = colors.splice(1,2);
console.log(colors);
console.log(removes);

运行结果：

Array [ "red", "green", "skyblue" ]
Array [ "blue", "yellow" ]

插入操作

var colors = ["red","blue","yellow","green","skyblue"];
colors.splice(3,0,"6","6");
console.log(colors);

运行结果：

Array [ "red", "blue", "yellow", "6", "6", "green", "skyblue" ]

只插入的操作，即把第二个参数设为0，表示不删除。

替换操作

替换操作就是删除的个数和添加的个数相等，这样就替换了。

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

colors.splice(0,1,"6");

console.log(colors);

运行结果：

Array [ "6", "blue", "yellow", "green", "skyblue" ]

把第一个 red 替换成 6。

获得数组元素的位置：indexOf()

indexOf()从左向右（正序）查找，从0开始编号。

lastIndexOf()从右到左（逆序）查找，从0开始编号。

查找到之后就不再查找，返回被查找元素在数组中的值。

var names = ["TabWeng","Tom","Jane","Tab","Michael"];
var position = names.indexOf("Tab");
var lastPosition = names.lastIndexOf("Tab");

console.log("indexOf:"+position);
console.log("lastIndexOf:"+lastPosition);

运行结果：

indexOf:3
lastIndexOf:3

它们的位置都是3，虽然他们查找的方向不同，但是编号都是从左向右编号，这里面只有一个Tab，所以编号就都相同。看下面的例子可以看出差异：

var names = ["TabWeng","Tab","Tom","Jane","Tab","Michael"];
var position = names.indexOf("Tab");
var lastPosition = names.lastIndexOf("Tab");

console.log("indexOf:"+position);
console.log("lastIndexOf:"+lastPosition);

运行结果：

indexOf:1
lastIndexOf:4

迭代方法

每个迭代方法都要传入一个这样的函数：

function(item,index,array){

}

every()

返回布尔值，只有都满足函数里的条件，才返回true。

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.every(function(item,index,array){
  return (item > 3);
});

console.log(result);

运行结果：

result

some()

返回布尔值，只要有一个满足条件，就返回true。

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.some(function(item,index,array){
  return (item > 3);
});

console.log(result);

运行结果：

true

filter()

返回一个数组，返回的数组的元素都为满足条件的元素。

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.filter(function(item,index,array){
  return (item > 3);
});

console.log(result);

运行结果：

Array [ 4, 5, 6, 7, 8, 9 ]

map()

返回一个数组，返回的数组是通过函数规则操作后的数组。

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.map(function(item,index,array){
  return (item > 3);
});

console.log(result);

运行结果：

Array [ false, false, false, true, true, true, true, true, true ]

再看一个例子：

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.map(function(item,index,array){
  return item*2;
});

console.log(result);

运行结果：

Array [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]

forEach()

无返回值，对数组的每一项进行操作。

var nums = [1,2,3,4,5,6,7,8,9];
var otherArray = [];
var result = nums.forEach(function(item,index,array){
  otherArray[index] = item * 2;
});

console.log(otherArray);

运行结果：

Array [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ]

归并方法

reduce()

var nums = [1,2,3,4,5,6,7,8,9];

var result = nums.reduce(function(prev,cur,index,array){
  return (prev + cur);
})

console.log(result);

运行结果：

45

reduceRight()

reduce()的相反方向，从右向左归并。

参考

• 《JavaScript高级程序设计》