一篇文章彻底明白JavaScript中Array常用方法

本篇文章主要讲解Array常用方法,例如Array.from(),keys(),values(),entries(),批量复制方法copyWithin()，以及填充数组方法fill(),toLocaleString()、toString()和valueOf(),栈方法push(),pop(),shift(),unshift(),排序reverse(),sort(),连接操作,concat(),截取slice(),splice(),搜索和位置方法indexOf(),lastIndexOf(),includes(),迭代方法every(),filter(),forEach(),map(),some()

创建数组

//初始化
let arr=new Array();
//创建一个初始length为20的数组
let arr2=new Array(20);
//初始化有值
let colors = new Array("red", "blue", "green");
//常见数组初始化
let arr3=[1,2,3,4,5]

Array.from()

Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个length属性和可索引元素的结构。这种方式可用于很多场合：

// 字符串会被拆分为单字符数组
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
// 可以使用from()将集合和映射转换为一个新数组
const m = new Map().set(1, 2)
                   .set(3, 4);
const s = new Set().add(1)
                   .add(2)
                   .add(3)
                   .add(4);
console.log(Array.from(m)); // [[1, 2], [3, 4]]
console.log(Array.from(s)); // [1, 2, 3, 4]
// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);
console.log(a1);          // [1, 2, 3, 4]
alert(a1 === a2); // false
// 可以使用任何可迭代对象
const iter = {
 ＊[Symbol.iterator]() {
   yield 1;
   yield 2;
   yield 3;
   yield 4;
 }
};
console.log(Array.from(iter)); // [1, 2, 3, 4]
// arguments对象可以被轻松地转换为数组
function getArgsArray() {
 return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
// from()也能转换带有必要属性的自定义对象
const arrayLikeObject = {
 0: 1,
 1: 2,
 2: 3,
 3: 4,
 length: 4
};
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函数中this的值。但这个重写的this值在箭头函数中不适用。

const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1, x => x＊＊2);
const a3 = Array.from(a1, function(x) {return x＊＊this.exponent}, {exponent: 2});
console.log(a2);   // [1, 4, 9, 16]
console.log(a3);   // [1, 4, 9, 16]

keys(),values(),entries()

Array的原型上暴露了3个用于检索数组内容的方法：keys()、values()和entries()。keys()返回数组索引的迭代器，values()返回数组元素的迭代器，而entries()返回索引/值对的迭代器：

const a = ["foo", "bar", "baz", "qux"];
// 因为这些方法都返回迭代器，所以可以将它们的内容
// 通过Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys);      // [0, 1, 2, 3]
console.log(aValues);    // ["foo", "bar", "baz", "qux"]
console.log(aEntries);   // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

copyWithin

copyWithin()会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。

let ints,
    reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 从ints中复制索引0 开始的内容，插入到索引5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints);   // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 从ints中复制索引5 开始的内容，插入到索引0 开始的位置
ints.copyWithin(0, 5);
console.log(ints);   // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 从ints中复制索引0 开始到索引3 结束的内容
// 插入到索引4 开始的位置
ints.copyWithin(4, 0, 3);
alert(ints);   // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript引擎在插值前会完整复制范围内的值
// 因此复制期间不存在重写的风险
ints.copyWithin(2, 0, 6);
alert(ints);   // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持负索引值，与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints);   // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围：

let ints,
  reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引过低，忽略
ints.copyWithin(1, -15, -12);
alert(ints);   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引过高，忽略
ints.copyWithin(1, 12, 15);
alert(ints);   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向，忽略
ints.copyWithin(2, 4, 2);
alert(ints);   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用，复制、填充可用部分
ints.copyWithin(4, 7, 10)
alert(ints);   // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];

fill

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组长度加上它得到的一个正索引：

const zeroes = [0, 0, 0, 0, 0];
// 用5 填充整个数组
zeroes.fill(5);
console.log(zeroes);   // [5, 5, 5, 5, 5]
zeroes.fill(0);         // 重置
// 用6 填充索引大于等于3 的元素
zeroes.fill(6, 3);
console.log(zeroes);   // [0, 0, 0, 6, 6]
zeroes.fill(0);         // 重置
// 用7 填充索引大于等于1 且小于3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes);   // [0, 7, 7, 0, 0];
zeroes.fill(0);         // 重置
// 用8 填充索引大于等于1 且小于4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes);   // [0, 8, 8, 8, 0];

toLocaleString()、toString()和valueOf()

所有对象都有toLocaleString()、toString()和valueOf()方法。其中，valueOf()返回的还是数组本身。而toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说，对数组的每个值都会调用其toString()方法，以得到最终的字符串。来看下面的例子：

let colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组
alert(colors.toString());    // red,blue,green
alert(colors.valueOf());     // red,blue,green
alert(colors);                  // red,blue,green

首先是被显式调用的toString()和valueOf()方法，它们分别返回了数组的字符串表示，即将所有字符串组合起来，以逗号分隔。最后一行代码直接用alert()显示数组，因为alert()期待字符串，所以会在后台调用数组的toString()方法，从而得到跟前面一样的结果。toLocaleString()方法也可能返回跟toString()和valueOf()相同的结果，但也不一定。在调用数组的toLocaleString()方法时，会得到一个逗号分隔的数组值的字符串。它与另外两个方法唯一的区别是，为了得到最终的字符串，会调用数组每个值的toLocaleString()方法，而不是toString()方法。看下面的例子：

let person1 = {
  toLocaleString() {
    return "Nikolaos";
  },
  toString() {
    return "Nicholas";
  }
};
let person2 = {
  toLocaleString() {
    return "Grigorios";
  },
  toString() {
    return "Greg";
  }
};
let people = [person1, person2];
alert(people);                        // Nicholas, Greg
alert(people.toString());          // Nicholas,Greg
alert(people.toLocaleString());   // Nikolaos,Grigorios

这里定义了两个对象person1和person2，它们都定义了toString()和toLocaleString()方法，而且返回不同的值。然后又创建了一个包含这两个对象的数组people。在将数组传给alert()时，输出的是”Nicholas, Greg”，这是因为会在数组每一项上调用toString()方法（与下一行显式调用toString()方法结果一样）。而在调用数组的toLocaleString()方法时，结果变成了”Nikolaos, Grigorios”，这是因为调用了数组每一项的toLocaleString()方法。

栈方法 push,pop

栈是一种后进先出（LIFO, Last-In-First-Out）的结构，也就是最近添加的项先被删除。数据项的插入（称为推入，push）和删除（称为弹出，pop）只在栈的一个地方发生，即栈顶。ECMAScript数组提供了push()和pop()方法，以实现类似栈的行为。push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。pop()方法则用于删除数组的最后一项，同时减少数组的length值，返回被删除的项。来看下面的例子：

let colors = new Array();                     // 创建一个数组
let count = colors.push("red", "green");   // 推入两项
alert(count);                                     // 2
count = colors.push("black");   // 再推入一项
alert(count);                       // 3
let item = colors.pop();         // 取得最后一项
alert(item);                        // black
alert(colors.length);             // 2

队列方法 shift(),unshift()

就像栈是以LIFO形式限制访问的数据结构一样，队列以先进先出（FIFO, First-In-First-Out）形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据。因为有了在数据末尾添加数据的push()方法，所以要模拟队列就差一个从数组开头取得数据的方法了。这个数组方法叫shift()，它会删除数组的第一项并返回它，然后数组长度减1。使用shift()和push()，可以把数组当成队列来使用：

let colors = new Array();                     // 创建一个数组
let count = colors.push("red", "green");   // 推入两项
alert(count);                                     // 2
count = colors.push("black"); // 再推入一项
alert(count);                     // 3
let item = colors.shift();   // 取得第一项
alert(item);                    // red
alert(colors.length);         // 2

ECMAScript也为数组提供了unshift()方法。顾名思义，unshift()就是执行跟shift()相反的操作：在数组开头添加任意多个值，然后返回新的数组长度。通过使用unshift()和pop()，可以在相反方向上模拟队列，即在数组开头添加新数据，在数组末尾取得数据，如下例所示：

 let colors = new Array();                         // 创建一个数组
 let count = colors.unshift("red", "green");   // 从数组开头推入两项
 alert(count);                                        // 2
 count = colors.unshift("black");   // 再推入一项
 alert(count);                          // 3
 let item = colors.pop();   // 取得最后一项
 alert(item);                  // green
 alert(colors.length);      // 2

排序 sort ,reverse

数组有两个方法可以用来对元素重新排序：reverse()和sort()。顾名思义，reverse()方法就是将数组元素反向排列。sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序。sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回0；如果第一个参数应该排在第二个参数后面，就返回正值。

let values = [1, 2, 3, 4, 5];
values.reverse();
alert(values);   // 5,4,3,2,1
   let values = [0, 1, 5, 10, 15];
values.sort();
alert(values);   // 0,1,10,15,5
   function compare(value1, value2) {
 if (value1 < value2) {
   return -1;
 } else if (value1 > value2) {
   return 1;
 } else {
   return 0;
 }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);   // 0,1,5,10,15

连接操作concat(),截取slice(),splice()

concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾。来看下面的例子：

let colors = ["red", "green", "blue"];
let colors2 = colors.concat("yellow", ["black", "brown"]);
console.log(colors);    // ["red", "green", "blue"]
console.log(colors2);   // ["red", "green", "blue", "yellow", "black", "brown"]
    let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: "pink",
  1: "cyan"
};
newColors[Symbol.isConcatSpreadable] = false;
// 强制不打平数组
let colors2 = colors.concat("yellow", newColors);
// 强制打平类数组对象
let colors3 = colors.concat(moreNewColors);
console.log(colors);    // ["red", "green", "blue"]
console.log(colors2);   // ["red", "green", "blue", "yellow", ["black", "brown"]]
console.log(colors3);   // ["red", "green", "blue", "pink", "cyan"]

接下来，方法slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。记住，这个操作不影响原始数组。来看下面的例子：

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
alert(colors2);   // green, blue, yellow, purple
alert(colors3);   // green, blue, yellow

splice()的主要目的是在数组中间插入元素，但有3种不同的方式使用这个方法。

• 删除:需要给splice()传2个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如splice(0, 2)会删除前两个元素。
• 插入:需要给splice()传3个参数：开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。比如，splice(2, 0, “red”,“green”)会从数组位置2开始插入字符串”red”和”green”。
• 替换:splice()在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2, 1, “red”, “green”)会在位置2删除一个元素，然后从该位置开始向数组中插入”red”和”green”。

let colors = ["red", "green", "blue"];
let removed = colors.splice(0,1);   // 删除第一项
alert(colors);                          // green, blue
alert(removed);                         // red，只有一个元素的数组
removed = colors.splice(1, 0, "yellow", "orange");    // 在位置1 插入两个元素
alert(colors);                                                 // green, yellow, orange, blue
alert(removed);                                                // 空数组
removed = colors.splice(1, 1, "red", "purple");   // 插入两个值，删除一个元素
alert(colors);                                            // green,red,purple,orange,blue
alert(removed);                                           // yellow，只有一个元素的数组

indexOf(),lastIndexOf(),includes()

indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes()返回布尔值，表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时，会使用全等（===）比较，也就是说两项必须严格相等。下面来看一些例子：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
 alert(numbers.indexOf(4));             // 3
 alert(numbers.lastIndexOf(4));        // 5
 alert(numbers.includes(4));           // true
 alert(numbers.indexOf(4, 4));         // 5
 alert(numbers.lastIndexOf(4, 4));    // 3
 alert(numbers.includes(4, 7));        // false
 let person = { name: "Nicholas" };
 let people = [{ name: "Nicholas" }];
 let morePeople = [person];
 alert(people.indexOf(person));        // -1
 alert(morePeople.indexOf(person));   // 0
 alert(people.includes(person));      // false
 alert(morePeople.includes(person)); // true

迭代方法every(),filter(),forEach(),map(),some()

• every()：对数组每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。
• filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。
• forEach()：对数组每一项都运行传入的函数，没有返回值。
• map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
• some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

在这些方法中，every()和some()是最相似的，都是从数组中搜索符合某个条件的元素。对every()来说，传入的函数必须对每一项都返回true，它才会返回true；否则，它就返回false。而对some()来说，只要有一项让传入的函数返回true，它就会返回true。下面是一个例子：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult);   // false
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult);    // true

以上代码调用了every()和some()，传入的函数都是在给定项大于2时返回true。every()返回false是因为并不是每一项都能达到要求。而some()返回true是因为至少有一项满足条件。下面再看一看filter()方法。这个方法基于给定的函数来决定某一项是否应该包含在它返回的数组中。比如，要返回一个所有数值都大于2的数组，可以使用如下代码：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult);   // 3,4,5,4,3

这里，调用filter()返回的数组包含3、4、5、4、3，因为只有对这些项传入的函数才返回true。这个方法非常适合从数组中筛选满足给定条件的元素。接下来map()方法也会返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果。例如，可以将一个数组中的每一项都乘以2，并返回包含所有结果的数组，如下所示：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item ＊ 2);
alert(mapResult);   // 2,4,6,8,10,8,6,4,2

以上代码返回了一个数组，包含原始数组中每个值乘以2的结果。这个方法非常适合创建一个与原始数组元素一一对应的新数组。最后，再来看一看forEach()方法。这个方法只会对每一项运行传入的函数，没有返回值。本质上，forEach()方法相当于使用for循环遍历数组。比如：

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
  // 执行某些操作
});