JavaScript の配列メソッドの違いは何ですか?

JavaScript には、配列要素を追加、削除、置換するためのメソッドが多数あります。多くのメソッドは同じ機能を実現できますが、それらは大きく異なります。今日は JavaScript で配列を比較します。そのメソッドの秘密は何でしょうか。

JavaScript には、配列要素を追加、削除、置換するためのさまざまなメソッドが用意されていますが、元の配列に影響を与えるものと影響を及ぼさないものと、新しい配列を作成するものがあります。

注: 次の 2 つのメソッドの違いを区別してください:

array.splice() は元の配列に影響します

array.slice() は元の配列に影響しません

I に影響します。

array.push() と array.ushift() を使用して新しい要素を追加すると、元の配列に影響します。

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

II. 新しい追加: 元の配列に影響を与えません

元の配列に影響を与えない要素を追加するには 2 つの方法があります。1 つ目は array.concat() です。

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有误，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

2 番目の方法は、JavaScript のスプレッド演算子を使用することです。スプレッド演算子は 3 つのドット (...) です。

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

スプレッド演算子は、元の配列をコピーし、元の配列からすべての要素を取り出して保存します。新しい環境で。

III. 削除: 元の配列への影響

array.pop() と array.shift() を使用して配列要素を削除すると、元の配列が影響を受けます。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() と array.shift() は削除された要素を返します。削除された要素は変数を通じて取得できます。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice() は配列の要素を削除することもできます。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

array.pop() や array.shift() と同様に、array.splice() も削除された要素を返します。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. 削除: 元の配列には影響しません

JavaScript 的 array.filter() 方法基于原数组创建一个新数组，新数组仅包含匹配特定条件的元素。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有误，我做了修改）

上記のコードの条件は「'e' に等しくない」ため、新しい配列 (arr2) には 'e' が含まれません。

アロー関数の独自性:

単一行のアロー関数、「return」キーワードはデフォルトで付属しており、手動で記述する必要はありません。

ただし、複数行のアロー関数は明示的に値を返す必要があります。

元の配列に影響を与えないもう 1 つの方法は、array.slice() (array.splice() と混同しないでください) です。

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. 置換: 元の配列に影響します

どの要素を置換するかがわかっている場合は、array.splice() を使用できます。

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

VI. 置換: 元の配列には影響しません

array.map() を使用して新しい配列を作成し、各要素を確認して特定の条件に従って置換できます。

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

array.map() を使用してデータを変換する

array.map() は、元のデータ ソースを汚さずにデータを変換するために使用できる強力なメソッドです。

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

配列に関するメソッドの比較がたくさんあるので、皆さんが JS で配列を理解し、使用できるようになれば幸いです。

関連読書:

JS配列について 配列メソッドのまとめ

js配列の重複排除方法のまとめ

angularjs配列のパラメータ受け渡しメソッドの解析

以上がJavaScript の配列メソッドの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。