JS数组操作 速查手册

1、基础操作

1.1 创建

// 标准格式
var letters = new Array("A", "B", "C"); 
// 此方法创建单元素数字数组时会有歧义：
var points = new Array(40); // 创建包含 40 个未定义元素的数组！！！

// 简写格式，推荐！
var letters = ["A", "B", "C"];

// 空数组
var points = new Array();         // 差
var points = [];                  // 优

1.2 索引取值

速记原则

• 正数索引，代表第n+1个元素。
• 负数索引，代表倒数第n个元素。

var letterB = letters[1]; //B
var letterC = letters[-1]; //C

1.3 数组长度length

var length = letters.length; // 长度

// 常用实例
var last = letters[letters.length - 1];// 访问最后一个元素
var first = letters[0];//访问第一个元素

1.4 切片slice

速记原则

• 本质上是在数组的某个位置切1~2刀，切出新数组。
• slice() 方法会创建新数组，它不会从源数组中删除任何元素。
• 只有一个参数时候要从右边开始取n个，
• 当有两个参数时取两个索引中间的一段，左闭右开。

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.slice(-3)); 
// => [ 'b', 'c', 'd' ]
console.log(arr.slice(-3, -1)); 
// => [ 'b', 'c' ]

1.5 反转reverse*

带*号的小标题意为不安全方法，即会对原数组进行修改，而非创建新数组。

const arr = [1, 2, 3];
console.log(arr.reverse()); 
// => [ 3, 2, 1 ]
console.log(arr); 
// => [ 3, 2, 1 ]
// 居然返回原数组！！！
console.log(arr.reverse() === arr); 
// => true

2、遍历数组

JS 遍历数组¹（循环数组）的方式有多种，可以使用传统的 for 循环，也可以使用升级版的 for in 循环，还可以使用 Array 类型的 forEach() 方法；如果希望遍历对象的键名，还可以使用 keys() 方法。

2.1 使用for循环

or 和 for/in 语句都可以迭代数组。for 语句需要配合 length 属性和数组下标来实现，执行效率没有 for/in 语句高。另外，for/in 语句会跳过空元素。

对于超长数组来说，建议使用 for/in 语句进行迭代。

示例1
下面示例使用 for 语句迭代数组，过滤出所有数字元素。

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
        num ++;  //计数器
    }
console.log(num);  //返回42，说明循环了42次
console.log(b);  //返回[1,2,4,56]

2.2 使用for in循环

示例2
下面代码使用 for/in 语句迭代示例 1 中的数组 a。在 for/in 循环结构中，变量 i 表示数组的下标，而 a[i] 为可以读取指定下标的元素值。

var b = [], num = 0;
for (var i in a) {  //遍历数组
    if（typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);   //返回7，说明循环了7次
console.log(b);  //返回[1,2,4,56]

通过计时器可以看到，for/in 语句迭代数组，仅循环了 7 次，而 for 语句循环了 42 次。

2.3 使用 forEach 遍历数组

Array 类型为每个数组定义了 forEach() 原型方法，使用该方法可以为数组执行迭代操作。具体说明如下：

array.forEach(callbackfn[, thisArg]);

参数说明如下：

• array：一个数组对象。 callbackfn：必需参数，最多可以接收三个参数的函数。forEach 将为数组中的每个元素调用
• callbackfn 函数一次。 thisArg：可选参数，callbackfn 函数中的 this 可引用的对象。如果省略
• thisArg，则 this 的值为 undefined。

对于数组中出现的每个元素，forEach 方法都会调用 callbackfn 函数一次，采用升序索引顺序，但不会为数组中空元素调用回调函数。

除了数组对象之外，forEach 方法还可以用于有 length 属性且具有已按数字编制索引的属性名的任何对象，如关联数组对象、Arguments 等。

回调函数语法如下：

funtion callbackfn(value, index, array);

最多可以使用三个参数来声明回调函数。回调函数的参数说明如下。

• value：数组元素的值。
• index：数组元素的数字索引。
• array：包含该元素的数组对象。

forEach 方法不直接修改原始数组，但回调函数可能会修改它。在 forEach 方法启动后修改数组对象所获得的结果如表所示。

回调函数修改数组的影响：

forEach 方法启动后的条件	元素是否传递给回调函数
在数组的原始长度之外添加元素	无
添加元素以填充数组中缺少的元素	是，如果该索引尚未传递给回调函数
元素已更改	是，如果该元素尚未传递给回调函数
从数组中删除元素	否，除非该元素已传递给回调函数

示例1
下面示例使用 forEach 迭代数组 a，然后把每个元素的值和下标索引输出显示，代码如下：

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

示例2
下面示例使用 forEach 迭代数组 a，然后计算数组元素的和并输出。

var a = [10, 11, 12], sum = 0;
a.forEach (function (value) {
    sum += value;
});
console.log(sum);  //返回33

示例3
下面示例演示如何使用 forEach() 方法的第二个参数，该参数为回调函数的 this 传递对象。当迭代数组过程中，先读取数组元素的值，然后改写它的值。

var obj = {
    f1 : function(value,index,array) {
        console.log("a[" + index + "] = " + value);
        arrar[index] = this.f2(value);
    },
    f2 : function (x) {return x * x;}
};
var a = [12, 26, 36];
a.forEach(obj.f1, obj);
console.log(a);  //返回[144, 676, 1296]

2.4 使用 keys 遍历对象键名

keys() 是 Object 的静态函数，专门用来遍历对象获取键名。Object.keys() 函数的参数是一个对象，返回一个数组，元素是该对象所以本地属性名。如果使用该函数迭代数组，可以汇集数组的所有元素下标值。

示例1
下面代码直观的比较了 keys 迭代对象和数组的不同。

var o = {a : "A", b : "B", c : "C"};
console.log(Object.keys(o));  //返回["a","b","c"]
var a = ["A", "B", "C"];
console.log(Object.keys(a));  //返回["0","1","2"]

keys 功能比较专一，应用范围比较窄，但是执行效率比较高。

示例2
除了获取键名集合外，使用 keys 还可以间接统计对象的长度。

var o = {a : "A", b : "B", c : "C"};
console.log(Object.keys(o).length);  //返回3
var a = ["A", "B", "C"];
console.log(Object.keys(a).length);  //返回3

Object 类型没有定义 length 原型属性，可以利用 keys 方法获取对象的长度。

Object 还有一个类似的静态函数：getOwnPropertyNames(),与 keys 用法相同，参数都是对象，返回值都是一个数组，数组元素都是属性名。不同点：keys 仅能迭代本地、可枚举的属性，getOwnPropertyNames 可以迭代所有本地属性。

var o = {a : "A", b : "B", c : "C"};
console.log(Object.keys(o));  //返回["a","b","c"]
console.log(Object.getOwnPropertyNames (o));  //返回["a","b","c"]
var a = ["A", "B", "C"];
console.log(Object.keys(a));  //返回["0","1","2"]
console.log(Object.getOwnPropertyNames (a));  //返回["0","1","2"]

数组的 length 是不可枚举的属性，所以仅能在 Object.getOwnPropertyNames 返回结果中看到。因此，要快速迭代数组，可以使用 keys 方法。

3、添加和删除 元素

3.1 尾部操作push*/pop*

// 添加操作：入栈
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  push的返回值是数组长度5

// 删除操作：出栈
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango",并弹出原数组

3.2 头部操作shift*/unshift*

const queue = [];
queue.push('a');
queue.push('b');
// 符合队列先进先出的特点，shift即出队
console.log(queue.shift()); 
// => a
console.log(queue.shift()); 
// => b
// unshift相当于出队操作的反向操作
console.log(queue.unshift('c','d')); 
// => ['c','d']

3.3 指定位置插删splice*

splice()可以同时进行指定位置的删除和插入操作。

示例1

const testArray = ['c', 'd', 'd'];
// 删除操作，第一个参数表示删除的起始下标， 第二个参数表示删除的个数
testArray.splice(1, 1);
// 第三个参数及其往后表示插入的元素，可以结合结构赋值使用
const ab = ['a', 'b'];
testArray.splice(0, 0, ...ab);
console.log(testArray); 
// => [ 'a', 'b', 'c', 'd' ]

示例2

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//翻译为：在索引为2的位置，删除0个，插入后面元素。插入

示例3

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
//翻译为：在索引为2的位置，删除2个，插入后面元素。替换

示例4
能够使用 splice() 在数组中不留“空洞”的情况下移除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // 删除 fruits 中的第0位索引开始的后面1个元素

4、查找元素

4.1 从头搜索值并返回索引indexOf

array.indexOf(item, start)

• item 必需。要检索的项目。
• start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
• 如果未找到项目，Array.indexOf() 返回 -1。
• 如果项目多次出现，则返回第一次出现的位置。

4.2 从尾搜索值并返回索引lastIndexOf

与 Array.indexOf() 类似，但是从数组结尾开始搜索。

4.3 自定义测试函数查找返回值find

查找第一个满足条件的Array.find()
find() 方法返回通过测试函数的第一个数组元素的值。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

4.4 自定义测试函数查找返回索引findIndex

与 Array.find() 类似，但是返回的是元素的下标而非元素本身。

4.5 是否包含某元素includes

如果你要判断数组中是否包含某个元素，明显 ES7 引入的 includes 函数更合适，可读性好多了。

const handleSelect = newValue => {
  if (this.state.includes(newValue)) {
      message.error(`您已经选择过${newValue}，不能重复选择！`);  
  }
};

---

持续更新中，如有遗漏可在评论区留言

---

1. 链接: 《JS遍历数组（for in和forEach循环）》 ↩︎