JavaScript ES5入门之数组

这是一篇 JavaScript ES5 关于数组类型的学习笔记，介绍 isArray、indexOf、lastIndexOf、every、some、forEach、map、filter、reduce 和 reduceRight 等数组方法的使用。

数组：

Array.isArray(arr)

判断某个值是否为 Array。是返回 true，否则返回 false。

//判断 arr 是否为真正的数组
Array.isArray( [] );          // true
Array.isArray( new Array() ); // true
Array.isArray( [1, 2, 3] );   // true
Array.isArray(Array.prototype); // true

Array.isArray();              // false
Array.isArray( {foo: 123} );  // false
Array.isArray( "foobar" );    // false
Array.isArray( undefined );   // false
Array.isArray( null );        // false
Array.isArray( 15 );          // false
Array.isArray( true );        // false
Array.isArray( false );       // false

详细用法：Array.isArray()

arr.indexOf(e, i)

indexOf() 方法返回给定元素能找在数组中找到的第一个索引值，否则返回 -1。通过严格比较来判断元素在数组中的索引位置，arr 数组，e 要查找的元素，i 搜索开始位置

如果索引开始位置大于或者等于数组的长度，则返回 -1 ，这意味着数组将不会被搜索。如果提供的索引位置是一个负数，它将从数组的末尾开始。注意：索引值为负数虽然从数组末尾开始，但是得到的索引还是从前往后的。0 将搜索整个数组。

var arr = [2, 9, 9];
arr.indexOf(2);     // 0
arr.indexOf(7);     // -1 没找到
arr.indexOf(9);     // 1

arr.indexOf(9, 0);  // 1 第一个9
arr.indexOf(9, 1);  // 1 第一个9
arr.indexOf(9, 2);  // 2 第二个9
arr.indexOf(9, 3);  // -1 等于数组长度不搜索
arr.indexOf(9, 4);  // -1 超过数组长度不搜索

arr.indexOf(2, -1); // -1
arr.indexOf(2, -3); // 0

if (arr.indexOf(7) === -1) {
    // true
}

//找出指定元素出现的所有位置
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
    indices.push(idx);
    idx = array.indexOf(element, idx + 1);
}
console.log(indices); // [0, 2, 4]

//判断一个元素是否在数组离，不存在则添加
function updateArray (arr, val) {
    if (arr.indexOf(val) === -1) {
        // 不存在，添加
        arr.push(val);
    } else if (arr.indexOf(val) > -1) {
        // 存在
    }
}
var arr = ['vic', 'wwm', 'yyj'];
updateArray(arr, 'nlc');
updateArray(arr, 'nlx');

详细用法：Array.prototype.indexOf()

arr.lastIndexOf(e, i)

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 i 处开始。起始位置 i 为可选。

从 i 位置开始逆向查找。默认为数组长度 -1，即整个数组查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将从数组末尾向前查找。如果该值为负时，其绝对值大于数组长度，则返回 -1，即数组不会被查找，跟 indexOf 略有区别。

var arr = [2, 5, 9, 2];
arr.lastIndexOf(2);     // 3
arr.lastIndexOf(7);     // -1 没找到
arr.lastIndexOf(9);     // 2

arr.indexOf(2, 0);  // 0 第一个2
arr.indexOf(2, 1);  // 0 第一个2
arr.indexOf(2, 2);  // 0 第一个2
arr.indexOf(2, 3);  // 3 第二个2
arr.indexOf(2, 4);  // 3 第二个2
arr.indexOf(2, 5);  // 3 第二个2

arr.indexOf(2, -1);  // 3 第二个2
arr.indexOf(2, -2);  // 0 第一个2
arr.indexOf(2, -3);  // 0 第一个2
arr.indexOf(2, -4);  // 0 第一个2
arr.indexOf(2, -5);  // -1 绝对值超过数组长度

//查找所有出现的元素
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);
while (idx != -1) {
    indices.push(idx);
    idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices); // [4, 2, 0]

详细用法：Array.prototype.lastIndexOf()

arr.every(callback)

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

every 方法为数组中的每个元素执行一次 callback 函数，如果有一个值为 false，every 就会返回 false，所有值都为 true，才返回 true。

callback 被调用时三个参数：元素值，元素的索引，原数组。

var arr = [10, 5, 12, 6];
arr.every(function(element, index, arr) {
    return (element >= 10);
});
// false

arr.every(function(element, index, arr) {
    return (element >= 5);
});
// true

详细用法：Array.prototype.every()

arr.some(callback)

some() 方法测试数组中的某些元素是否通过了指定函数的测试。

some 方法为数组中的每个元素执行一次 callback 函数，如果有一个值为 true，some 就会返回 true，都不满足返回 false，该方法功能刚好和 every() 相反。

callback 被调用时三个参数：元素的值，元素的索引，被遍历的数组。

var arr = [10, 5, 12, 6];
arr.every(function(element, index, arr) {
    return (element >= 10);
});
// true

arr.every(function(element, index, arr) {
    return (element < 5);
});
// false

详细用法：Array.prototype.some()

arr.forEach(callback)

forEach() 方法对数组的每个元素执行一次回调函数。

被回调时三个参数：处理的当前值，处理的当前索引，调用的数组

forEach 方法按升序为数组中每一项有效值执行一次 callback 函数，那些已经删除或者未赋值的项将被跳过，不包括值为 undefined 的项。

var arr = ['a', 'b', 'c'];
arr.forEach(function(value, index, array) {
    console.log(value, index);
});

// a 0
// b 1
// c 2

详细用法：Array.prototype.forEach()

arr.map(callback)

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

回调时也是三个参数，当前处理的值，当前的索引，调用的数组

方法只在由值的索引上被调用，那些没被赋值或者使用 delete 删除的索引不会被调用。

var arr = [10, 12, 13];
arr.map(function(value, index, array) {
    return value * 2;
});
// [20, 24, 26]

详细用法：Array.prototype.map()

arr.filter(callback)

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

filter 不会改变原数组。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

[2, 9, 8].filter(function(value){
    return value >= 5;
});
// [9, 8]

详细用法：Array.prototype.filter()

arr.reduce(callback)

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始合并，最终为一个值。

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值 previousValue），当前元素值 currentValue，当前索引 index，调用 reduce 的数组。

回调函数第一次执行时，previousValue 和 currentValue 的取值有两种情况，如果 initialValue 在调用 reduce 时被提供，那么第一个 previousValue 等于 initialValue ，并且currentValue 等于数组中的第一个值；如果 initialValue 未被提供，那么 previousValue 等于数组中的第一个值，currentValue 等于数组中的第二个值。

如果数组为空并且没有提供 initialValue， 会抛出 TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供 initialValue， 或者有提供 initialValue 但是数组为空，那么此唯一值将被返回并且 callback 不会被执行。

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});
// 10

reduce 的返回值是回调函数最后一次被调用的返回值。

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
}, 10);
// 20

如果把初始值作为第二个参数传入 reduce，最终返回值变为 20。

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

详细用法：Array.prototype.reduce()

arr.reduceRight(callback)

reduceRight 和 reduce 方法差不多，区别在于 reduce 是从左到右开始合并，而 reduceRight 则是从右到左合并。

var arr = ["1", "2", "3", "4", "5"];
var left  = arr.reduce(function(prev, cur) {
    return prev + cur;
});
// "12345"

var right = arr.reduceRight(function(prev, cur) {
    return prev + cur;
});
// "54321"

详细用法：Array.prototype.reduceRight()