記事ディレクトリ
この記事では、ES6 配列に追加されたいくつかの一般的なメソッドを紹介します。
1，配列.from()
Array.from()このメソッドは、配列のようなオブジェクトと反復可能なオブジェクト
(ES6 の新しいデータ構造 Set と Map を含む) の 2 種類のオブジェクトを実際の配列に変換するために使用されます。
Array.from()これは、実際の配列に変換する配列のようなオブジェクトです。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
実際のアプリケーションでは、一般的な配列のようなオブジェクトは、DOM ノードを取得するための NodeList コレクションまたは HTMLCollection コレクション、および関数arguments内のオブジェクトです。Array.from()それらを実配列に変えることができます。
次の例を参照してください。
<div class="container">
<div class="item">安柏</div>
<div class="item">优菈</div>
<div class="item">神里绫华</div>
</div>
// HTMLCollection 伪数组
const itemList = document.getElementsByClassName("item") // HTMLCollection(3) [div.item, div.item, div.item]
// NodeList 伪数组
const itemList2 = document.querySelectorAll(".item") //NodeList(3) [div.item, div.item, div.item]
// 1,直接进行遍历会报错 因为不是一个真正的数组，所以不能使用forEach,map,filter等数组遍历的方法
itemList.map((item)=>{
console.log(item);}) // 报错信息： itemList.map is not a function
// 2,使用Array.from转为真数组
const newItemList = Array.from(itemList)
// 3，可以遍历成功
newItemList.map((item)=>{
console.log(item);})
// 遍历结果
<div class="item">安柏</div>
<div class="item">优菈</div>
<div class="item">神里绫华</div>
上記のコードでは、sum メソッドは数値のようなオブジェクトの配列 (擬似配列とも呼ばれます) を返します。これは実数の配列に変換してから、 map() などの配列メソッドを使用できますquerySelectorAll()。getElementsByClassName
注意：Iteratorインターフェースを展開したデータ構造であればArray.from()配列に変換できます。
Array.from("Eula-优菈"); // ['E', 'u', 'l', 'a', '-', '优', '菈']
let mySet = new Set(["Eula", "优菈"]);
Array.from(mySet); //['Eula', '优菈']
上記のコードでは、String 構造体と Set 構造体の両方に Iterator インターフェイスがあるため、Array.from()実数の配列に変換できます。
----------( Iterator について知らない場合は、この記事を読んでください)------
引数が実数配列の場合、Array.from()同一の新しい配列が返されます。
Array.from([1, 2, 3])
// [1, 2, 3]
スプレッド演算子 ( ...) は、一部のデータ構造を配列に変換することもできます。次の場合は、関数に渡して不定参数累積計算を実行して返します。
function sum() {
let sum = 0;
const args = [...arguments];
// [...arguments] 已经转为真正的数组 [1, 2, 3, 4] 然后累加求和
args.forEach((item) => {
return (sum += item);
});
return sum;
}
let mySum = sum(1, 2, 3, 4);
console.log("mySum：", mySum); // 10
Symbol.iteratorトラバーサー インターフェイス ( )はスプレッド オペレーターの背後で呼び出されます。オブジェクトがこのインターフェイスを展開しない場合、オブジェクトは変換できません。
Array.from()map()また、2 番目のパラメーターとして関数を受け入れることもできます。この関数は、各要素を処理し、処理された値を返された配列に入れる配列メソッドのように機能します。
let arrayLike = [1, 2, 3, 4, 5];
let newArray1 = Array.from(arrayLike, (item) => item * 2);
console.log("newArray1:", newArray1); // [2, 4, 6, 8, 10]
// 等同于
let newArray2 = Array.from(arrayLike).map((item) => item * 2);
console.log("newArray2：", newArray2); // [2, 4, 6, 8, 10]
Array.from()さまざまな値を実数の配列に変換でき、map関数も提供されます。これは、実際には、元のデータ構造がある限り、最初にその値を処理し、次にそれを正規の配列構造に変換し、その後、多数の配列メソッドを使用できることを意味します。
2，配列の()
Array.of()方法値のセットを配列に変換します。
Array.of(1, 2, 3, 4); // [1, 2, 3, 4]
Array.of(3); // [3]
Array.of(3).length; // 1
// 字符也可以
Array.of("1",2,"3",4) // ['1', 2, '3', 4]
Array.of("1",2,"3",4).length // 4
このメソッドの主な目的は、配列コンストラクターの不足を補うことですArray()。パラメータの数が異なるため、Array()動作が異なります。次のように：
console.log(new Array()); // []
console.log(new Array(3)); // [empty × 3]
console.log(new Array(3,11,8)); // [3, 11, 8]
上記のコードでは、new Array()メソッドにパラメーターがない場合、パラメーターが 1 つある場合、またはパラメーターが 3 つある場合、返される結果は異なります。new Array()パラメーターの新しい配列は、パラメーターの数が少なくとも 2 である場合にのみ返されます。
パラメーターに正の整数が 1 つだけある場合、実際には配列の長さを指定します。
Array.of()Array()基本的に、または の置き換えに使用できnew Array()、パラメータの違いによるオーバーロードはありません。非常に均一に動作します。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of()常にパラメータ値の配列を返します。パラメータがない場合は、空の配列が返されます。
Array.of()このメソッドは次のコードでシミュレートできます。
function ArrayOf(){
return [].slice.call(arguments);
}
3、find()、findIndex()、findLast()、findLastIndex()
探す（）：
find()条件を満たす最初の配列メンバーを検索する配列インスタンスのメソッド。そのパラメータはコールバック関数であり、戻り値が見つかった最初のメンバーまですべての配列メンバーに対して順番に実行されtrue、その後返されます。適格なメンバーがいない場合に戻りますundefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
上記のコードは、配列の 0 未満の最初のメンバーを検索します。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上記のコードでは、find()メソッドのコールバック関数は、現在値、現在位置、元の配列の 3 つのパラメーターを順番に受け入れることができます。
検索インデックス：
配列インスタンスfindIndex()のメソッドはfind()、 メソッドと非常によく似た方法で使用され、条件を満たす最初の配列メンバーの位置 (インデックス) を返すか、すべてのメンバーが条件を満たさない場合に返します-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
thisどちらのメソッドも、コールバック関数をバインドするために使用されるオブジェクトである2 番目のパラメーターを受け入れることができます。
function f(v){
return v > this.age;
}
let person = {
name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
上記のコードでは、find()関数は 2 番目のパラメーター オブジェクトを受け取り、personコールバック関数内のthisオブジェクトはpersonそのオブジェクトを指します。
find()どちらfindIndex()も配列の 0 番目のビットから逆方向にチェックされます。
findLast() 和 findLastIndex():
findLast()そしてfindLastIndex()、配列の最後のメンバーから開始して、順番に前方をチェックし、他のすべてを同じに保ちます。
const array = [
{
value: 1 },
{
value: 2 },
{
value: 3 },
{
value: 4 }
];
array.findLast(n => n.value % 2 === 1); // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1); // 2
上の例では、配列の末尾から開始して、属性が奇数である最初のメンバーを探しfindLast()ます。結果、メンバーは、ポジションは2番となりました。findLastIndex()value{ value: 3 }
4，配列.fill()
fillメソッドは、配列に指定された値を埋めます。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
上記のコードは、fillこのメソッドが空の配列の初期化に非常に便利であることを示しています。配列内の既存の要素はすべて消去されます。
fillこのメソッドは、パディングの開始位置と終了位置を指定する 2 番目と 3 番目のパラメーターも受け入れることができます。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上記のコードは、fillメソッドが位置 1 から開始し、元の配列を 7 で埋め、位置 2 の前で終了することを示しています。
充填タイプがオブジェクトの場合、ディープ コピー オブジェクトの代わりに、同じメモリ アドレスにあるオブジェクトが割り当てられることに注意してください。
let arr = new Array(3).fill({
name: "Amber"});
arr[0].name = "Eula"; // 只改了第一个， 但是后面的所有全都改变了
console.log(arr);
// [{name: "Eula"}, {name: "Eula"}, {name: "Eula"}]
5、キー()、値()およびエントリ()
ES6 には、配列を反復処理するための3 つの新しいメソッドが用意されています。entries()とkeys()—です。values()
for...ofこれらはすべて、ループで走査できる反復子オブジェクト (Iterator) を返します。唯一の違いはkeys()、キー名の走査、values()キー値の走査、entries()およびキーと値のペアの走査です。
1、keys() はキー名の走査です
let obj = {
Amber: "安柏",
Eula: "优菈",
KamisatoAyaka: "神里绫华"
};
// for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历
for (let key of Object.keys(obj)) {
console.log(key); // Amber,Eula,KamisatoAyaka 拿到的都是对象的键名
}
console.log(Object.keys(obj)); //(3) ['Amber', 'Eula', 'KamisatoAyaka']
2、values() はキー値の走査です
let obj = {
Amber: "安柏",
Eula: "优菈",
KamisatoAyaka: "神里绫华"
};
for (let key of Object.values(obj)) {
console.log(key); // 安柏,优菈,神里绫华 拿到的都是对象的值
}
console.log(Object.values(obj)); //(3) ['安柏', '优菈', '神里绫华']
3.entrys() はキーと値のペアの走査です
let obj = {
Amber: "安柏",
Eula: "优菈",
KamisatoAyaka: "神里绫华"
};
for (let key of Object.entries(obj)) {
console.log(key);
// ['Amber', '安柏']
// ['Eula', '优菈']
// ['KamisatoAyaka', '神里绫华']
}
console.log(Object.entries(obj));
// 会以一个数组重新包装起来
// [
// ["Amber", "安柏"],
// ["Eula", "优菈"],
// ["KamisatoAyaka", "神里绫华"]
// ];
エントリ メソッドの別の使用法は次のとおりです。Objectに変換するにはMap、new Map()コンストラクターは反復可能な を受け入れますentries。メソッドを使用すると、次のように簡単に変換Object.entriesできます。ObjectMap
let obj = {
name: "Eula",
age: 18
};
let map = new Map(Object.entries(obj));
console.log(map); // Map(2) {'name' => 'Eula', 'age' => 18}
6，配列.includes()
include は、配列に要素が含まれているかどうかを判断し、それを返すことができますtrue 或者false。
const inc = ["a", "b", "c"].includes("a");
console.log("inc:", inc); // true
このメソッドの 2 番目のパラメータは、検索の開始位置を示します。デフォルトでは です0。2 番目のパラメータが負の数値の場合は、逆数の位置を意味します。配列の長さより大きい場合 (たとえば、2 番目のパラメータは ですが、配列の長さは )、次のようにリセットされ-4ます3。0始まり。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
このメソッドの前に、通常は配列indexOfメソッドを使用して、特定の値が含まれているかどうかを確認します。
if (arr.indexOf(el) !== -1) {
// ...
}
indexOfこのメソッドには 2 つの欠点があります。1 つは、セマンティックが十分ではないことです。その意味は、パラメーター値の最初の出現を見つけることであるため、等しくないかどうかを比較するのに十分直感的ではありません-1。2つ目は、内部的に判定に厳密等価演算子( ===)を使用しているため、NaN正しさの判断を誤る可能性があることです。
[NaN].indexOf(NaN)
// -1
includes別の判定アルゴリズムを使用すれば、このような問題は発生しません。
[NaN].includes(NaN)
// true
7. flat() と flatMap()
配列の平坦化方法は、Array.prototype.flat()配列の平坦化および配列の次元削減とも呼ばれます。
- パラメーターが渡されない場合、レイヤーはデフォルトで「平坦化」され、「平坦化」するレイヤーの数を示すために整数を渡すことができます。
- 整数 <=0 を渡すと、「平坦化」されずに元の配列が返されます。
- Infinity キーワードをパラメーターとして使用すると、ネストのレベルに関係なく、1 次元配列に変換されます。
- 元の配列にスペースがある場合、Array.prototype. flat() はスペースをスキップします。
次の例を参照してください。
const arr = [1, ["a", "b"], [2, ["c"], 3]];
// 1,不传参数时，默认“拉平”一层
console.log(arr.flat());
// [1, 'a', 'b', 2, ['c'], 3]
// 2,传入一个整数参数，整数即“拉平”的层数
console.log(arr.flat(2));
// [1, 'a', 'b', 2, 'c', 3]
// 3,Infinity 关键字作为参数时，无论多少层嵌套，都会转为一维数组
console.log(arr.flat(Infinity));
// [1, 'a', 'b', 2, 'c', 3]
// 4,传入 <=0 的整数将返回原数组，不“拉平”
console.log(arr.flat(0));
console.log(arr.flat(-6));
// [1, ['a', 'b'], [2, ['c'], 3]]
// 5,如果原数组有空位，flat()方法会跳过空位
console.log([1, 2, 3, 4, 5, 6, ,].flat());
// [1, 2, 3, 4, 5, 6]
フラットマップ：
flatMap()このメソッドは、元の配列の各メンバーに対して関数 (execute と同等Array.prototype.map()) を実行し、その後、flat()戻り値で構成される配列に対してメソッドを実行します。このメソッドは、元の配列を変更せずに新しい配列を返します。
flatMap()このメソッドのパラメーターはトラバーサル関数であり、現在の配列メンバー、現在の配列メンバーの位置 (0 から始まる)、および元の配列の 3 つのパラメーターを受け入れることができます。
let newFlatList = [[2, 4], [3, 6], [4, 8]].flatMap((item,index,arr) => {
console.log("item:",item);// [2, 4] [3, 6] [4, 8]
return [item[0]*2,item[1]*3] // 第一项*2，第二项*3，每个item都执行这个操作，最后flat扁平化数组并返回
});
console.log("newFlatList:",newFlatList);
//最终返回一维数组： [4, 12, 6, 18, 8, 24]
上記の場合、2 次元配列が渡され、2 次元配列の最初の項目が 2 で乗算され、2 番目の項目が 3 で乗算され、最後に処理された 1 次元配列が返されます。
知らせ：
- flatMap メソッドは元の配列を変更しません
- flatMap メソッドは、array.map(). flat() と同等です。
flatMap()配列の 1 レベルのみを拡張できます
8，配列.reduce()
reduce() メソッドは、配列内の各要素に対して指定されたリデューサー関数を順番に実行します。リデューサーの実行ごとに、
前の要素の計算結果がパラメーターとして渡され、最終的に結果が 1 つの戻り値に要約されます。
こちらの記事をご覧ください: ES6の新しい高階関数reduce()の説明