JavaScript の配列メソッドの概要

JavaScript の配列は非常に特殊で、配列とリストのセット全体を備えた C や Java とは異なり、JS の配列はスタックまたはキューとして使用できます。その 4 つの主要な操作は、pop、push、shift、unshift です。

配列メソッドで最も懸念されるのは、戻り値は何か、それが元の配列に影響を与えるかどうかという2つの問題です 代表的な例は、spliceメソッドとsliceメソッドです。元の配列を返す関数の場合、呼び出しを配列に直接連鎖させることができます。これは非常に優れています (array.filter().sort().reverse())。

この2つの質問でArrayの配列メソッドについてまとめてみたいと思います。

Array

Array.length は配列の長さです。新しく作成された各配列オブジェクトは、Array.prototype を通じて変更できます。ただし、今日の焦点は配列の基本的な使用と操作ではありません。配列メソッドを見てみましょう。

一般に、配列メソッドの最後には thisArg パラメーターがあり、内部の this ポインターを指定します。パラメーターにフォールバック関数がある場合、このフォールバック関数は通常、値、インデックス、配列の 3 つのパラメーターを受け入れます。これらはそれぞれ、現在渡されている値、現在渡されている値が配置されているインデックス、および現在処理されている配列を表します。

ディレクトリインデックス:

concat

このメソッドは、配列を結合するために使用できます。パラメーターは 1 つ以上の配列であり、返される結果は結合された配列です。

concat メソッドは新しい配列を作成し、それを呼び出すオブジェクト (this が指すオブジェクト、元の配列) の要素と、すべてのパラメーターと非配列型パラメーターの要素を追加します。 -array 型のパラメータ自体をこの新しい配列に順番に入力し、その配列を返します。 concat メソッドは元の配列とパラメーター配列を変更せず、配列以外のオブジェクトに対しても同じ効果があります。

1. 結合された新しい配列を返します。

2. 元の配列とパラメータ配列は変更しません。

3. パラメータは配列以外でも構いません。

var a1 = [1, 2, 3],
  a2 = [4, 5, 6],
  a3 = [7, 8, 9];
var newarr = a1.concat(a2, a3);
newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]
a1 //[1, 2, 3]
newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]
newarr = a1.concat('hello');//[1, 2, 3, "hello"]

every

every() メソッドは、配列のすべての要素が指定された関数のテストに合格するかどうかをテストします。

arr.every(callback) は、コールバックが false を返すまで、各要素に対してコールバック メソッドを実行します。 forEach は停止できないため、every メソッドと forEach メソッドが比較されることがありますが、every メソッドは flase を返すときに途中で停止できます。

1. すべてのテストに合格すると、関数は true を返し、途中で終了して false を返します。

2. は元の配列には影響しません。

function isBigEnough(element, index, array) {
  console.log(index);
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// 0
// 1
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// 0 1 2 3 4
// passed is true

filter

filter() メソッドは、指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します。

実際、このメソッドはフィルタリングメソッドであり、前述のeveryメソッドはフィルタリングを行わず、条件を満たさないものを除外し、新しい配列を返します。

1. フィルタリング条件を満たす新しい配列を返します。

2. は元の配列を変更しません。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [19, 22, 6, 2, 44];
var a2 = a1.filter(isBigEnough);
a1 //[19, 22, 6, 2, 44]
a2 //[19, 22, 44]

forEach

forEach() メソッドは、配列の各要素に対して提供された関数 (コールバック関数) を 1 回実行します。

1. 関数には戻り値がありません。つまり、

2. は元の配列に影響を与えません。

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了，因为在数组的这个位置没有项
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined

indexOf

indexOf() メソッドは、指定された要素の配列内で見つかった最初のインデックス値を返します。それ以外の場合は、-1 を返します。

1. 戻り値は、見つかった要素のインデックス値または -1 です。

2. は元の配列には影響しません。

var array = [1, 2, 5];
array.indexOf(5); // 2
array.indexOf(7); // -1

join

join() メソッドは、配列内のすべての要素を文字列に結合します。

実際、結合について最初に思い浮かぶのは、文字列を処理するためにこれら 2 つが一緒に使用されることがよくあります。

1. 連結された文字列を返します。

2. は元の配列には影響しません。

var a1 = [1, 2, 3];
var a2 = a1.join();
a1 //[1, 2, 3]
a2 //"1,2,3"
a2 = a1.join("");//"123"
a2 = a1.join("-");//"1-2-3"

lastIndexOf

lastIndexOf() メソッドは、配列内の最後の要素 (つまり、有効な JavaScript 値または変数) のインデックスを返し、そうでない場合は -1 を返します。存在する。 fromIndex から開始して、配列の後ろから前方に検索します。

実際、これはindexOfのレプリカです。

1. 最初に見つかった要素のインデックスを返します。

2. は元の配列には影響しません。

りー

map

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

map reduce 这两个函数在处理数组上一直都是一把手，带来很大的便捷性。

1. 返回一个经过回掉函数处理的新数组；

2. 不对原数组产生影响。

var a1 = [1, 4, 9];
var a2 = a1.map(Math.sqrt);
a1 //[1, 4, 9]
a2 //[1, 2, 3]

reduce

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

reduce 是一个合并的过程，从左到右，直到把所有元素合并到一起，并返回最终的结果。它接受两个参数，第一个参数是一个回掉函数，第二个参数是一个初始值，表示处理第一个元素时的前一个值。这个回掉函数接受四个参数，依次是 accumulator（上次处理的结果），currentValue（当前元素的值），index（当前元素索引），array（调用 reduce 的数组）。

1. 返回最终合并的结果，即回掉函数的输出，可以为字符串，对象，数组等任意结果；

2. 不对原数组产生影响。

var getAdd = (pre, cur) => pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(getAdd, 0);
a1 //[1, 2, 3]
a2 //6

reduceRight

reduceRight() 方法接受一个函数作为累加器（accumulator），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 reduce() 的执行方向相反）

var toStr = (pre, cur) => '' + pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(toStr, '');
a2 //"123"
a2 = a1.reduceRight(toStr, '');
a2 //"321"

push

push() 方法添加一个或多个元素到数组的末尾，并返回数组新的长度（length 属性值）。

如果把数组当作栈，push pop 操作是栈进和出，而往往很多人会忽略函数执行后的返回值。

1. 返回 push 操作执行之后数组的长度；

2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.push(4);
a1 //[1, 2, 3, 4]
a2 //4

pop

pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。 

1. 返回删除的这个元素；

2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.pop();
a1 //[1, 2]
a2 //3

unshift

unshift() 方法在数组的开头添加一个或者多个元素，并返回数组新的 length 值。

1. 返回 length 值；

2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.unshift(4);
a1 //[4, 1, 2, 3]
a2 //4

shift

shift() 方法删除数组的 第一个 元素，并返回这个元素。该方法会改变数组的长度。 

shift 方法和 push 方法可以组成一个队列的操作啦。

1. 返回删除的这个元素；

2. 肯定改变。

reverse

reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个，最后一个会成为第一个。 

1. 函数返回值是修改了的原数组；

2. 原数组会修改。

var a1 = [1, 2, 3];
var a2 = a1.reverse();
a1 //[3, 2, 1]
a1 === a2; //true

slice

slice() 方法会浅复制（shallow copy）数组的一部分到一个新的数组，并返回这个新数组。 

slice 的参数包括拷贝的初识位置，结束位置（左闭右开），与 splice 有区别。由于不会改变原数组，这个数组可以用于前拷贝，比如经常看别人使用： arr.slice(0) ，表示拷贝数组。

1. 返回浅拷贝后的新数组；

2. 不会改变原数组。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.slice(1, 3);
a1 //[1, 2, 3, 4, 5]
a2 //[2, 3]

splice

splice() 方法用新元素替换旧元素，以此修改数组的内容。 

如其名，分割，会修改原数组的内容，返回一个新数组，而且它的参数也比较多，第一个参数表示初始位置，第二个参数表示分割长度，第三个参数及以后表示分割后在分割处添加新元素。

1. 返回分割的元素组成的数组；

2. 会对数组进行修改，原数组会减去分割数组。

var a1 = [1, 2, 3, 4];
var a2 = a1.splice(1, 2);
a1 //[1, 4]
a2 //[2, 3]
a1 = [1, 2, 3, 4];
a2 = a1.splice(1, 2, 5, 6);
a1 //[1, 5, 6, 4]

some

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

sort

sort() 方法对数组的元素做原地的排序，并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点（code point）排序。 

sort 函数用于排序，比较常用，若没有制定排序函数，则按照 unicode 位点进行排序，而且数字会被转成字符串，所以 ‘123’ 要排在 ‘11’ 的后面。

我们会用 sort 做一些有意思的排序，比如汉字按照拼音排序。

1. 返回排序后的原数组；

2. 会对数组进行修改。

var big = function(a, b){
  return a - b;
}
var a1 = [2, 4, 77, 1];
var a2 = a1.sort(big);
a1 //[1, 2, 4, 77]
a1 === a2; //true

localeCompare 可以对汉字进行排序，当同时出现汉字和字母的时候会有 bug：

var sort_py = function(a, b){
  return a.localeCompare(b);
}
var a1 = ["北京", "上海", "南京", "合肥"];
a1.sort(sort_py);
//["北京", "合肥", "南京", "上海"]

toString

toString() 返回一个字符串，表示指定的数组及其元素。 

显然，这个方法和 join 方法比较一下。

1. 返回拼接的字符串；

2. 不会改变原数组。

var a1 = [1, 2, 3];
var a2 = a1.toString();
a2 //"1,2,3"

ES6 中新添的数组方法

上面的这些方法都是 ES5 的，来看看 ES6 添加了哪些新方法。

copyWithin

copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。 

接受三个参数，分别是要拷贝到的位置 target，拷贝开始位置 start 和结束位置 end。

1. 返回修改了的原数组；

2. 会对数组进行修改，且是浅拷贝；

3. 参数可负，负值时倒推，且 end 为空表示数组长度。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.copyWithin(0, 2, 4);
a1 //[3, 4, 3, 4, 5]
a2 //[3, 4, 3, 4, 5]
a1 === a2; //true

find

如果数组中某个元素满足测试条件，find() 方法就会返回满足条件的第一个元素，如果没有满足条件的元素，则返回 undefined。 MDN array.find 。

1. 返回找到的那个元素，若未找到，返回 underfined

2. 不对原数组产生影响。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [8, 18, 14];
var num = a1.find(isBigEnough); //18

findIndex

findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 

这个方法可以参考 find 方法，只是返回值是元素的索引而非元素本身。

fill

使用 fill() 方法，可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 

fill 方法接受三个参数，第一个参数 value 表示要填充到值，后面两个 start 和 end 表示开始和结束位置，可选，且左闭右开。

1. 函数返回值是修改了的原数组；

2. 可对数组产生影响。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.fill(6, 1, 4);
a1 //[1, 6, 6, 6, 5]
a2 //[1, 6, 6, 6, 5]
a1 === a2; //true

keys

数组的 keys() 方法返回一个数组索引的迭代器。 

这个方法会返回一个数组索引的迭代器，迭代器在 ES6 中有特殊的用途。

1. 函数返回一个迭代器对象；

2. 不会改变原数组。

var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

entries

entries() 方法返回一个 Array Iterator 对象，该对象包含数组中每一个索引的键值对。 

var arr = ["a", "b", "c"];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, "a"]
console.log(eArr.next().value); // [1, "b"]
console.log(eArr.next().value); // [2, "c"]

includes

includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。 

该函数接受两个参数，第二个参数表示开始查找位置，起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引，一个是布尔值，indexOf 方法使用的是 === 来判断，无法判断 NaN 情况，而 includes 可以判断。

1. 返回 true 或 false；

2. 不会改变原数组。

var a1 = [1, NaN];
a1.indexOf(NaN);//-1
a1.includes(NaN);//true