Javascript 中的 Array 操作

在各种语言中，数组总是一个比较重要的数据结构，Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地让我们操作 Array 中的元素，下面我们就来看看这些操作方法。

Array 之基本操作

在基本操作部分，我们约定，加粗的方法可以改变数组本身，其余方法不改变。

1、 Array 创建

利用字面量创建 Array （推荐）： var arr = [];
利用 Array 对象创建 Array： var arr = new Array([length]);//可以指定数组长度，注意不是数组上限；
利用 Array 对象创建 Array： var arr = new Array(value1, value2, value3, …);
注意：Javascript 中 Array 中的元素不要求类型一致；

2、 Array 访问元素

var value = arr[index];
Array.slice(start[, end]);//从 start 位置开始截取原数组至 end （不包括 end 位置），返回截取的数组。若省略 end ，则截取 start 位置后所有元素；

3、 Array 添加与删除元素

在数组末尾添加或删除元素：

Array.push(value1, value2, vlaue3, …);//将一个或多个元素附加在数组末尾，并返回新数组长度；
Array.pop();//移除数组最后一个值，并返回该元素值；

在数组开始添加或删除元素：

Array.unshif(value1, value2, value3, …);//将一个或多个元素附加在数组开头，原数组元素依次后移，并返回新数组长度；
Array.shift();//移除数组第一个值，并返回该元素值；

在任意位置添加或删除元素：

Array.splice(pos, 0, value1, value2, value3, ...);//从数组 pos 位置开始删除 0 个元素，并在删除的位置插入value1, vlaue2, vlaue3…，并返回一个空数组；
Array.splice(pos, count);//从数组 pos 位置开始删除 count 个元素，

4、 Array 合并

Array.concat(para);// para 可以为数组或元素值，也可以为两者组合，将所有元素连接成一个数组，返回连接好的数组；

5、 Array 字符串化

Array.join(sperator);//返回由数组元素组成并由 seperator 分隔的字符串。若 seperator 为空，则默认以 “,” 连接；
Array.toString()和Array.toLocaleString();//返回由数组元素组成并由“,”分隔的字符串（不常用）；两种方法的区别在于 toLocaleString() 会转变为本地环境字符串（如Date.toLocalString() 会转化为当地时间格式的字符串），toString() 则转为传统字符串； Array 的这两种方法用法无区别；

6、 Array 排序

Array.reverse();//颠倒数组中的元素；
Array.sort();//按字符编码进行排序，支持自定义排序函数;

7、 Array 查找

indexOf()//返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1。
lastIndexOf()//返回在数组中搜索到的与给定参数相等的元素的最后（最大）索引。

8、其他函数

Array.isArray();//判断某个值是否为数组；

Array 之高级操作

首先介绍 Array 的 5 种迭代函数。这 5 种函数的特点是都有一个 callback 函数，函数会为每一个数组元素调用一次 callback 函数。可选参数是 thisArg，作为 callback被调用时的 this 值，如果没有传入 thisArg 值，则在非严格模式下将会是全局对象，严格模式下是 undefined。其中，callback 函数中包含三个参数，分别是当前元素的值、当前元素索引和被遍历的数组。这 5 种函数遍历的元素个数在第一次调用 callback 函数时就已经确定，即以后即使添加元素也不会改变遍历次数，未访问到且被删除的值不会被 callback 访问到，未访问到且被修改的元素被修改后，传递给 callback 的值是被修改后的值。

1、 `Array.forEach()`

遍历并为每一项元素执行一遍 callback 函数。是 5 个函数中唯一一个没有返回值的函数。

var arr = [1, 2, 3];
arr.forEach(function(ele) {
    console.log(ele);
});

运行结果：

1
2
3

2、 `Array.map()`

遍历并处理所有元素，返回由每个 callback 函数返回值组成的新数组。

var arr = [1, 2, 3];
var newArr = arr.map(function(ele) {
    return "element" + ele;
});
console.log(newArr);
console.log(arr);

运行结果：

["element1", "element2", "element3"]
[1, 2, 3]

3、 `Array.filter()`

遍历所有元素，过滤掉不符合条件（即使得 callback 返回 false）的元素。

var arr = [1, 2, 3, 11, 12, 13];
var newArr = arr.filter(function(ele) {
    return ele > 10;
});
console.log(newArr);
console.log(arr);

运行结果：


[11, 12, 13]
[1, 2, 3, 11, 12, 13]

4、 `Array.every()`

遍历所有元素，当所有元素使得 callback 返回 true,则返回 true，否则返回 false。

var arr1 = [9, 12, 13];
var result1 = arr1.every(function(ele) {
    return ele > 10;
});

var arr2 = [11, 12, 13];
var result2 = arr2.every(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运行结果：

[9, 12, 13]
result1:false
[11, 12, 13]
result2:true

5、 `Array.some()`

遍历所有元素，只要找到一个元素使得 callback 返回 true，则返回 true，否则返回 false。

var arr1 = [1,3,5,7,9];
var result1 = arr1.some(function(ele) {
    return ele > 10;
});

var arr2 = [1,2,3,11];
var result2 = arr2.some(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运行结果：

[1, 3, 5, 7, 9]
result1:false
[1, 2, 3, 11]
result2:true

6、 `Array.reduce()`

将数组中的元素从左到右进行缩减，最终缩减为一个值。

Array.reduce()语法：

Array.reduce(function(previousValue, currentValue, index, array){

}, [initialValue]);

callback 函数的几个参数含义：

previousValue：上一次执行 callback 函数后返回的值
currentValue：当前数组元素值
index：当前数组元素索引
array：遍历的数组对象

第一次调用 callback 函数时，如果 initialValue 有值，则 previousValue 为 initialValue，
currentValue 为数组第一个元素。否则 previousValue 为数组第一个元素，currentValue 为数组第二个元素。

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
});

运行结果：

1
2

再看另一个有 initialValue 的例子：

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
}, "z");

运行结果是：

0
1
2

随着 ES6 的诞生，Array 出现了更多的方法。考虑到浏览器的兼容性，在使用下面的方法时需要注意所使用的浏览器是否支持。

7、`Array.from()`

将一个类数组对象或可迭代对象转换成真实的数组。

类数组对象：拥有一个 length 属性和若干索引属性的任意对象
可迭代对象：你可以从它身上迭代出若干个元素的对象，比如有 Map 和 Set 等（Map 与 Set 均为 ES6 中新的对象）

var arr = Array.from("Hello");
console.log(arr);

运行结果：

[ "H", "e", "l", "l", "o" ]

8、`Array.values()`

将一个数组转换成一个可迭代的对象，该对象包含数组每个索引的值。

var arr = ['a', 'b', 'c'];
var obj = arr.values();
for (let letter of obj) {
    console.log(letter);
}

运行结果：

a
b
c

Javascript 中的 Array 操作