重拾JavaScript(六)-数组

创建数组

创建数组的基本方式有两种，第一种是使用Array构造函数，例如

var colors = new Array()

第二种基本方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示，多个数组项之间用逗号隔开，例如

var colors = ["red","blue","green"] //创建一个包含3个字符串的数组
var names = [] //创建一个空数组

---

数组的一些方法

检测数组

Array.isArray()

Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。

var arr = [1, 2, 3];

typeof arr // "object"
Array.isArray(arr) // true

上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以识别数组。

转换方法

valueOf(), toString()

valueOf方法是一个所有对象都拥有的方法，表示对该对象求值。不同对象的valueOf方法不尽一致，数组的valueOf方法返回数组本身。

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]

toString方法也是对象的通用方法，数组的toString方法返回数组的字符串形式。

var arr = [1, 2, 3];
arr.toString() // "1,2,3"

var arr = [1, 2, 3, [4, 5, 6]];
arr.toString() // "1,2,3,4,5,6"

栈方法

栈是一种LIFO（Last-In-First-Out,先进后出）的数据结构，也就是最新添加的项最早被移除，而栈中项的插入（推入）和移除（弹出），只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。

push(), pop()

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = [];

arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]

上面代码使用push方法，往数组中添加了四个成员。

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']

对空数组使用pop方法，不会报错，而是返回undefined。

[].pop() // undefined

push和pop结合使用，就构成了“后进先出”的栈结构（stack）。

var arr = [];
arr.push(1, 2);
arr.push(3);
arr.pop();
arr // [1, 2]

上面代码中，3是最后进入数组的，但是最早离开数组。

队列方法

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

shift(), unshift()

shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

shift方法可以遍历并清空一个数组。

var list = [1, 2, 3, 4, 5, 6];
var item;

while (item = list.shift()) {
  console.log(item);
}

list // []

push和shift结合使用，就构成了“先进先出”的队列结构（queue）。

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

unshift方法可以接受多个参数，这些参数都会添加到目标数组头部。

var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]

重排序方法

reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

sort()

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

var a=[5,4,3,2,1]
-->undefined
a.sort()
-->(5) [1, 2, 3, 4, 5]

var b=[5,"a", "c", "h", "z"]
-->undefined
b.sort()
-->(5) [5, "a", "c", "h", "z"]

但是

var a=[7,8,9,10,11]
a.sort()
console.log(a) //[10, 11, 7, 8, 9]

因为按照字母表排序，7就比10大了，这时候我们需要传入自定义排序函数

如果想按照数值排序，可以

var a = [7,8,9,10,11]

a.sort(function(v1,v2){
      return v1-v2
})
console.log(a) //[7, 8, 9, 10, 11]

操作方法

concat()

concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

var a = [1, 2, 3, 4, 5]
-->undefined
var b = [6, 7, 8, 9]
-->undefined
a.concat(b)
-->(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]  //返回一个新数组，由于原数组保持不变，所以需要为这个数组赋值一个新变量
a
-->(5) [1, 2, 3, 4, 5]  //原数组保持不变
b
-->(4) [6, 7, 8, 9]    //原数组保持不变

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]

slice()

slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变。

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。
var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

上面代码中，最后一个例子slice没有参数，实际上等于返回一个原数组的拷贝。

如果slice方法的参数是负数，则表示倒数计算的位置。

var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

上面代码中，-2表示倒数计算的第二个位置，-1表示倒数计算的第一个位置。

位置方法

indexOf(), lastIndexOf()

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.indexOf('y') // -1

indexOf方法还可以接受第二个参数，表示搜索的开始位置。

['a', 'b', 'c'].indexOf('a', 1) // -1

上面代码从1号位置开始搜索字符a，结果为-1，表示没有搜索到。

lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。

var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1

迭代方法

map(), forEach(), filter(),some(),every()

map()

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

var numbers = [1, 2, 3];
numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]
numbers
// [1, 2, 3]

上面代码中，numbers数组的所有成员依次执行参数函数，运行结果组成一个新数组返回，原数组没有变化。

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

上面代码中，map方法的回调函数有三个参数，elem为当前成员的值，index为当前成员的位置，arr为原数组（[1, 2, 3]）。

---

forEach()

forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。

forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

function log(element, index, array) {
  console.log('[' + index + '] = ' + element);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

上面代码中，forEach遍历数组不是为了得到返回值，而是为了在屏幕输出内容，所以不必使用map方法。

---

filter()

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

var a = [1, 2, 3, 4, 5, 6]
console.log(a.filter(function(e){
  return e % 2 == 0;
})) // [2, 4, 6]
console.log(a) //[1, 2, 3, 4, 5, 6]

---

some()&every()

用于满足该数组中函数设定的某个条件，函数返回的是一个布尔值。

它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。

some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

上面代码中，如果数组arr有一个成员大于等于3，some方法就返回true。

every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

上面代码中，数组arr并非所有成员大于等于3，所以返回false。

归并方法

reduce(), reduceRight()

这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中reduce()方法重数组的第一项开始，逐个遍历到最后。reduce()方法则从数组的最后一项开始，向前遍历到第一项。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15