JavaScript学习笔记-数组对象

数组对象（Array）

1. 如何生成一个新数组：

1.1 构造函数

// 无参数时，返回一个空数组
new Array() // []
// 单个正整数参数，表示返回的新数组的长度
new Array(1) // [ empty ]
// 则该参数是返回的新数组的成员
new Array('abc') // ['abc']
// 多参数时，所有参数都是返回的新数组的成员
new Array('a', 'b', 'c') // ['a', 'b', 'c']

1.2. 数组字面量

// bad
var arr = new Array(1, 2);
// good
var arr = [1, 2];

2.静态方法

Array.isArray方法可以弥补typeof的不足，typeof只能显示Object，而此方法可以识别数组。

var arr = [1, 2, 3];
typeof arr // "object"
Array.isArray(arr) // true

3. 实例方法

3.1 valueOf(), toString(), push(), pop()

var arr = [1, 2, 3];
arr.valueOf() // [1, 2, 3]
arr.toString() // "1,2,3"
arr.push('a') // 4
arr.push('b', true) // 6
arr.pop() // true
arr // [1, 2, 3, 'a', 'b']

1. valueOf返回数组本身，toString返回数组的字符串形式
2. push()方法用于在数组末端添加一个或多个元素，并返回添加后数组的长度，pop()方法删除数组最后一个元素，这两个方法都会改变原数组。

3.2 shift(), unshift()

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

3.3 join()

join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

3.4 concat()

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

3.5 reverse()

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

3.6 slice()

slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变。
arr.slice(start, end),第一个参数为起始位置（从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方法参数为负数，怎表示倒数计算的位置，最后一个位置用-1表示，以此类推。

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

slice方法的一个重要应用，是将类似数组的对象转为真正的数组

3.7 splice()

splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]

splice的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

3.8 sort()

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，将改变原数组。
sort()自定义排序，可以传入一个函数作为参数

[
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

3. 9 map()

1. map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
2. 接受的参数函数中可以传一个参数，也可传三个参数
3. map方法还可接受第二个参数，用来绑定函数内部的this变量

var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
}); // [2, 3, 4]
numbers.map(function(elem, index, arr) {
  return elem * index;
}); // [0, 2, 6]
numbers // [1, 2, 3]
-----------------------------------------------------------
var arr = ['a', 'b', 'c'];

var c = [1, 2].map(function (e) {
  return this[e];
}, arr)
c  // ['b', 'c']

3.10 forEach()

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

var out = [];

[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out);

out // [1, 4, 9]

注意：forEach方法无法中断执行，总会将所有成员遍历完，若希望中断遍历，要使用for循环

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}
// 1

3.11 filter()

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。
它的参数是一个函数,也能接收三个参数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

3.12 some(), every()

1. some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false
2. every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false

3.13 reduce(), reduceRight()

reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

[1, 2, 3, 4, 5].reduce(function (a, b) {
  return a + b;
}, 10);
// 25

应用举例：找出字符长度最长的数组成员

function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}

findLongest(['aaa', 'bb', 'c']) // "aaa"

3.14 indexOf(), lastIndexOf()

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

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

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

4.总结

1. 返回新数组的实例方法：
concat(), slice(), map(), filter()
2. 改变原数组的实例方法：
push(), pop(), shift(), unshift(), reverse(), splice(), sort()

参考：阮一峰的JavaScript 教程