JavaScript 開発における 15 の一般的な配列操作-jsチュートリアル-php.cn

著者: Dmitri Pavlutin
翻訳者: フロントエンド Xiaozhi
出典: dmitripavlutin.com

「いいね！」と「繰り返し読む」習慣を身につける
この記事 GitHub https://github.com/qq44924588... が含まれており、過去の高評価記事がさらに分類され、私のドキュメントやチュートリアル資料も多数まとめられています。スターとパーフェクトへようこそ。面接中に試験ポイントを復習することができます。一緒に何かを学ぶことができれば幸いです。

配列は、JS で広く使用されているデータ構造です。配列オブジェクトは、array.forEach()、array.map() など、配列を操作するための便利なメソッドを多数提供します。

実際の戦闘では、配列に対して可能な操作と、それに応じて使用するより良い方法について迷うことがよくあります。そのため、この記事では、レビュー用に 15 一般的なデータメソッドをリストします。記憶力を強化しましょう。

1. 配列トラバーサル

1.1 `for..of` Loop

for(const item of items)ループトラバーサル配列アイテムを選択するには、次のように colors リストを調べます。

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

ログイン後にコピー

ヒント:

break## を使用していつでも停止できます。 # ステートメント Traverse。

1.2

for `Loop`

for(let i; i < array.length; i)増分インデックスを使用して配列項目をループします。変数。

for 通常、各ループで index 変数をインクリメントする必要があります。

const colors = [&#39;blue&#39;, &#39;green&#39;, &#39;white&#39;];

for (let index = 0; index < colors.length; index++) {
  const color = colors[index];
  console.log(color);
}
// &#39;blue&#39;
// &#39;green&#39;
// &#39;white&#39;

ログイン後にコピー

index変数は ## から始まります。 #0colors.length-1 に増分します。この変数は、インデックス colors [インデックス] によって項目にアクセスするために使用されます。

ヒント

break

ステートメントを使用すると、いつでもトラバースを停止できます。 1.3

array.forEach()

メソッド

array.forEach(callback)

各配列項目で callback を呼び出すメソッド 配列項目を反復処理する関数。各走査で、次のパラメータを使用して

callback(item [,index [, array]])

を呼び出します:現在の走査項目、現在の走査インデックス、配列自体。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const colors = [&#39;blue&#39;, &#39;green&#39;, &#39;white&#39;]; colors.forEach(function callback(value, index) { console.log(value, index); }); // &#39;blue&#39;, 0 // &#39;green&#39;, 1 // &#39;white&#39;, 2</pre><div class="contentsignin">ログイン後にコピー</div></div>

ヒント:

array.forEach()

反復を中断することはできません。 2. 配列マッピング

2.1

Array.map()

method

array.map(callback)

メソッドは Create を渡します各配列項目の callback 呼び出し結果を使用した新しい配列。各トラバーサルの

callback(item[,index[,array]])

は、現在の項目、インデックス、配列自体を引数として呼び出され、新しい項目を返す必要があります。以下に示すように、各配列要素をインクリメントします

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const numbers = [0, 2, 4]; const newNumbers = numbers.map(function increment(number) { return number + 1; }); newNumbers; // => [1, 3, 5]</p> ヒント: <p><strong></strong>array .map() </p>元の配列を変更せずに、新しいマップされた配列を作成します。 <p><code>2.2 </code>Array.from()</p>Method<h4> <code></code>Array.from(arrayLike[, callback])</h4>各配列項目で使用するメソッド <p>callback<code> 結果を呼び出して新しい配列を作成します。 </code><code>各トラバーサルで </code>callback(item[,index[,array]])</p> 現在の項目、インデックス、配列自体を引数として呼び出され、新しい項目を返す必要があります。 <p><code> 以下に示すように、各配列要素をインクリメントします </code>1</p>: <p></p> <pre class="brush:php;toolbar:false">const numbers = [0, 2, 4]; const newNumbers = Array.from(numbers, function increment(number) { return number + 1; } ); newNumbers; // => [1, 3, 5]</pre><div class="contentsignin">ログイン後にコピー</div></div> <code> ヒント:

Array .from()

Array.from()
3. データの単純化

3.1

Array.reduce()

メソッド

array.reduce(callback[,initialValue ] )

callback 関数を呼び出して、配列を単一の値に削減します。各トラバーサルで callback(accumulator, item[,index[, array]])

が使用され、パラメータを指定して呼び出す必要があります: アキュムレータ、現在の項目、インデックス、配列自体アキュムレータを返す。

古典的な例は、数値の配列を合計することです:

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

sum; // => 6

ログイン後にコピー

最初のステップは、

アキュムレータ

を

0 に初期化することです。次に、数値の合計を累積する各配列項目に対して summary 関数が呼び出されます。 ヒント:

initialValue を使用して初期値を設定しない場合、デフォルトで配列の最初の要素が初期値として使用されます。

4. データ接続

4.1

array.concat()

メソッド

array.concat(array1[, array2, ... . ])

1 つ以上の配列を元の配列に連結します。以下に示すように、2 つの配列を連結します。

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const everyone = heroes.concat(villains);

everyone // ["小智", "前端小智", "老王", "小三"]

ログイン後にコピー

ヒント:

##concat()

元の配列を変更せずに新しい配列を作成します

array.concat(array1 [,array2,...]) 複数の配列の連結を受け入れます。
4.2 展開演算子のシンボル

[...array1, ...array2]

。

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const names = [...heroes, ...villains];

names; // ["小智", "前端小智", "老王", "小三"]

ログイン後にコピー

ヒント:

[...arr1, ...arr2, ...arrN]: スプレッド演算子を使用できます必要な数の配列を連結します。

获取数组的片段

5.1 `array.slice()` 方法

array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。

const names = ["小智", "前端小智", "老王", "小三"]

const heroes = names.slice(0, 2)
const villains = names.splice(2)

heroes // ["小智", "前端小智"]
villains // ["老王", "小三"]

ログイン後にコピー

提示：

array.slice() 创建一个新数组，而不改变原始数组。

6. 数组的拷贝

6.1 展开操作符

拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：

const colors = ['white', 'black', 'gray'];

const clone = [...colors];

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

ログイン後にコピー

提示：

[...array] 创建一个浅拷贝。

6.2 `array.concat()`方法

[].concat(array)是另一种拷贝数组的方法。

const colors = ['white', 'black', 'gray'];

const clone = [].concat(colors);

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

ログイン後にコピー

提示：

[].concat(array) 创建一个浅拷贝。

6.3 `array.slice()` 方法

array.slice())是另一种拷贝数组的方法。

const colors = ['white', 'black', 'gray'];

const clone = colors.slice();

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

ログイン後にコピー

提示：

colors.slice() 创建一个浅拷贝。

7. 查找数组

7.1 `array.includes()` 方法

array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。可选参数fromIndex，默认为0，表示开始搜索的索引。如下所示：判断2和99是否存在于一组数字中：

const numbers = [1, 2, 3, 4, 5];

numbers.includes(2);  // => true
numbers.includes(99); // => false

ログイン後にコピー

7.2 `array.find()` 方法

array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

如下所示，找到数组中的第一个偶数：

const numbers = [1, 2, 3, 4, 5];

function isEven(number) {
  return number % 2 === 0;
}

const evenNumber = numbers.find(isEven);

evenNumber; // => 2

ログイン後にコピー

7.3 `array.indexOf()` 方法

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

如下所示，找到前端小智的索引：

const names = ["小智", "前端小智", "老王", "小三"]

const index = names.indexOf('前端小智')

index // 1

ログイン後にコピー

提示：

如果找不到该项，则array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

8. 查询数组

8.1 `array.every()` 方法

如果每个项都通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示，确定数组是否只包含偶数：

const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];

function isEven(number) {
  return number % 2 === 0;
}

evens.every(isEven); // => true
numbers.every(isEven); // => false

ログイン後にコピー

8.2 `array.some()` 方法

如果每个项只要一下通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示：确定数组是否至少包含一个偶数：

const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];

function isEven(number) {
  return number % 2 === 0;
}

numbers.some(isEven); // => true
odds.some(isEven);   // => false

ログイン後にコピー

9. 数组的过滤

9.1 `array.filter()` 方法

array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示：将一个数组过滤为仅包含偶数：

const numbers = [1, 5, 7, 10];

function isEven(number) {
  return number % 2 === 0;
}

const evens = numbers.filter(isEven);

evens; // => [10]

ログイン後にコピー

提示：

array.filter() 创建一个新数组，而不改变原始数组。

10. 数组的插入

10.1 `array.push()` 方法

array.push(item1 [...，itemN]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。

如下所示，在names 数组的末尾添加 '小智'

const names = ['小智']

names.push('前端小智')

names // ["小智", "前端小智"]

ログイン後にコピー

提示：

array.push() 会改变原数组
array.push(item1, item2, ..., itemN) 可以添加多个元素。

10.2 `array.unshift()` 方法

array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度

const names = ['小智']

names.unshift('前端小智')

names // ["前端小智", "小智"]

ログイン後にコピー

提示：

array.unshift() 会改变原数组
array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

10.3 展开操作符

可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。

在数组末尾追加一个项:

const names = ['小智', '大治']

const names2 = [...names, '王大冶']

names2 // ["小智", "大治", "王大冶"]

ログイン後にコピー

在数组的开头追加一个项:

const names = ['小智', '大治']

const names2 = [
  '王大冶',
  ...names
]

names2 // ["王大冶", "小智", "大治"]

ログイン後にコピー

在任何索引处插入元素：

const names = ['小智', '大治']
const indexToInsert = 1

const names2 = [
  ...names.slice(0, indexToInsert),
  '前端小智',
  ...names.slice(indexToInsert)
]

names2  // ["小智", "前端小智", "大治"]

ログイン後にコピー

11. 删除数组元素

11.1 `array.pop()` 方法

array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：

const colors = ['blue', 'green', 'black'];

const lastColor = colors.pop();

lastColor; // => 'black'
colors; // => ['blue', 'green']

ログイン後にコピー

提示：

array.pop() 会改变原数组。

11.2 `array.shift()` 方法

array.shift()方法从数组中删除第一个元素，然后返回该元素。

const colors = ['blue', 'green', 'black'];

const firstColor = colors.shift();

firstColor; // => 'blue'
colors; // => ['green', 'black']

ログイン後にコピー

提示：

array.shift() 会改变原数组。
array.shift() 具有O(n)复杂度。

11.3 `array.splice()` 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

例如，咱们从索引1处删除2个元素：

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2)

names // => ["张三", "赵六"]

ログイン後にコピー

names.splice(1，2)删除元素'张三'和'赵六'。

names.splice() 可以插入新元素，而不是插入已删除的元素。咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 '小智'：

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2, '小智')

names //  ["张三", "小智", "赵六"]

ログイン後にコピー

提示：

array.splice() 会改变原数组。

11.4 展开操作符号

可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。

const names = ['张三', '李四', '王五', '赵六']
const fromIndex = 1
const removeCount = 2

const newNames = [
   ...names.slice(0, fromIndex),
   ...names.slice(fromIndex + removeCount)
]

newNames // ["张三", "赵六"]

ログイン後にコピー

12. 清空数组

12.1 `array.length`属性

array.length是保存数组长度的属性。除此之外，array.length是可写的。

如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。

如下所示：使用array.length = 0删除数组中的所有项目：

const colors = ['blue', 'green', 'black'];

colors.length = 0;

colors; // []

ログイン後にコピー

12.2 `array.splice()` 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：

const colors = ['blue', 'green', 'black'];

colors.splice(0);

colors; // []

ログイン後にコピー

13. 填充数组

13.1 `array.fill()` 方法

array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。

例如，使用用零值填充数组：

const numbers = [1, 2, 3, 4];

numbers.fill(0);

numbers; // => [0, 0, 0, 0]

ログイン後にコピー

不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

const length = 3;
const zeros = Array(length).fill(0);

zeros; // [0, 0, 0]

ログイン後にコピー

提示：

array.splice() 会改变原数组。

13.2 `Array.from()` 函数

Array.from() 有助于初始化带有对象的特定长度的数组：

const length = 4;
const emptyObjects = Array.from(Array(length), function() {
  return {};
});

emptyObjects; // [{}, {}, {}, {}]

ログイン後にコピー

14. 数组的扁平化

14.1 `array.flat()`方法

array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：

const arrays = [0, [1, 3, 5], [2, 4, 6]];

const flatArray = arrays.flat();

flatArray; // [0, 1, 3, 5, 2, 4, 6]

ログイン後にコピー

arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。

提示：

array.flat() 创建一个新数组，而不会改变原始数组。

15. 数组的排序

15.1 `array.sort()` 方法

array.sort([compare])方法对数组的元素进行排序。

可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：

如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。
如果a等于b，就返回0。
如果a大于b，就返回一个大于0的值。

如下所示，对数组 numbers 时行排序

const numbers = [4, 3, 1, 2];

numbers.sort();

numbers; // => [1, 2, 3, 4]

ログイン後にコピー

numbers.sort() 以升序对数字进行排序。

使用比较函数，让偶数排在奇数前面：

const numbers = [4, 3, 1, 2];

function compare(n1, n2) {
  if (n1 % 2 === 0 && n2 % 2 !== 0) {
    return -1;
  }
  if (n1 % 2 !== 0 && n2 % 2 === 0) {
    return 1;
  }
  return 0;
}

numbers.sort(compare);

numbers; // => [4, 2, 3, 1]

ログイン後にコピー

提示：