ホームページ > 記事 > ウェブフロントエンド > JavaScript 開発における 15 の一般的な配列操作
著者: Dmitri Pavlutin
翻訳者: フロントエンド Xiaozhi
出典: dmitripavlutin.com
「いいね!」と「繰り返し読む」習慣を身につけるこの記事
GitHub
https://github.com/qq44924588... が含まれており、過去の高評価記事がさらに分類され、私のドキュメントやチュートリアル資料も多数まとめられています。スターとパーフェクトへようこそ。面接中に試験ポイントを復習することができます。一緒に何かを学ぶことができれば幸いです。
配列は、JS で広く使用されているデータ構造です。配列オブジェクトは、array.forEach()
、array.map()
など、配列を操作するための便利なメソッドを多数提供します。
実際の戦闘では、配列に対して可能な操作と、それに応じて使用するより良い方法について迷うことがよくあります。そのため、この記事では、レビュー用に 15
一般的なデータ メソッドをリストします。記憶力を強化しましょう。
for..of
Loopfor(const item of items)
ループトラバーサル配列アイテムを選択するには、次のように colors
リストを調べます。
const colors = ['blue', 'green', 'white']; for (const color of colors) { console.log(color); } // 'blue' // 'green' // 'white'
ヒント:
break## を使用していつでも停止できます。 # ステートメント Traverse。
Loop
for(let i; i < array.length; i)増分インデックスを使用して配列項目をループします。変数 。
for 通常、各ループで
index 変数をインクリメントする必要があります。
const colors = ['blue', 'green', 'white']; for (let index = 0; index < colors.length; index++) { const color = colors[index]; console.log(color); } // 'blue' // 'green' // 'white'
index変数は ## から始まります。 #0
colors.length-1
に増分します。この変数は、インデックス colors [インデックス]
によって項目にアクセスするために使用されます。
break
ステートメントを使用すると、いつでもトラバースを停止できます。 1.3
各配列項目で callback を呼び出すメソッド
配列項目を反復処理する関数。 各走査で、次のパラメータを使用して
を呼び出します:現在の走査項目、現在の走査インデックス、配列自体。 <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>
array.forEach()
反復を中断することはできません。 2. 配列マッピング
メソッドは Create を渡します各配列項目の callback
呼び出し結果を使用した新しい配列。各トラバーサルの
は、現在の項目、インデックス、配列自体を引数として呼び出され、新しい項目を返す必要があります。 以下に示すように、各配列要素をインクリメントします
: <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>
<code>
ヒント:
Array .from()
Array.from()
3. データの単純化
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(array1[, array2, ... . ])const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const everyone = heroes.concat(villains); everyone // ["小智", "前端小智", "老王", "小三"]
ヒント: ##concat()
元の配列を変更せずに新しい配列を作成しますarray.concat(array1 [,array2,...])
複数の配列の連結を受け入れます。 4.2 展開演算子のシンボル
const heroes = ['小智', '前端小智']; const villains = ['老王', '小三']; const names = [...heroes, ...villains]; names; // ["小智", "前端小智", "老王", "小三"]
ヒント:
[...arr1, ...arr2, ...arrN]: スプレッド演算子を使用できます必要な数の配列を連結します。
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()
创建一个新数组,而不改变原始数组。
拷贝数组的一种简单方法是使用展开运算符:const clone = [... array]
,如下所示,拷贝 colors
数组:
const colors = ['white', 'black', 'gray']; const clone = [...colors]; clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示:
[...array]
创建一个浅拷贝。
array.concat()
方法[].concat(array)
是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray']; const clone = [].concat(colors); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示:
[].concat(array)
创建一个浅拷贝。
array.slice()
方法array.slice())
是另一种拷贝数组的方法。
const colors = ['white', 'black', 'gray']; const clone = colors.slice(); clone; // => ['white', 'black', 'gray'] colors === clone; // => false
提示:
colors.slice()
创建一个浅拷贝。
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
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
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
函数查找索引的替代方法。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
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
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()
创建一个新数组,而不改变原始数组。
array.push()
方法array.push(item1 [...,itemN])
方法将一个或多个项追加到数组的末尾,并返回新的长度。
如下所示,在names
数组的末尾添加 '小智'
const names = ['小智'] names.push('前端小智') names // ["小智", "前端小智"]
提示:
array.push()
会改变原数组array.push(item1, item2, ..., itemN)
可以添加多个元素。array.unshift()
方法array.unshift(item1[..., itemN])
方法将一个或多个项追加到数组的开头,返回数组的新长度
const names = ['小智'] names.unshift('前端小智') names // ["前端小智", "小智"]
提示:
array.unshift()
会改变原数组array.unshift(item1, item2, ..., itemN)
可以添加多个元素。可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。
在数组末尾追加一个项:
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 // ["小智", "前端小智", "大治"]
array.pop()
方法array.pop()
方法从数组中删除最后一个元素,然后返回该元素。如下所示,删除colors
数组的最后一个元素:
const colors = ['blue', 'green', 'black']; const lastColor = colors.pop(); lastColor; // => 'black' colors; // => ['blue', 'green']
提示:
array.pop()
会改变原数组。
array.shift()
方法array.shift()
方法从数组中删除第一个元素,然后返回该元素。
const colors = ['blue', 'green', 'black']; const firstColor = colors.shift(); firstColor; // => 'blue' colors; // => ['green', 'black']
提示:
array.shift()
会改变原数组。array.shift()
具有O(n)
复杂度。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()
会改变原数组。可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。
const names = ['张三', '李四', '王五', '赵六'] const fromIndex = 1 const removeCount = 2 const newNames = [ ...names.slice(0, fromIndex), ...names.slice(fromIndex + removeCount) ] newNames // ["张三", "赵六"]
array.length
属性array.length
是保存数组长度的属性。 除此之外,array.length
是可写的。
如果咱们写一个小于当前长度的array.length = newLength
,多余的元素从数组中移除。
如下所示:使用array.length = 0
删除数组中的所有项目:
const colors = ['blue', 'green', 'black']; colors.length = 0; colors; // []
array.splice()
方法array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])
从数组中删除元素,并插入新的元素。
如果removeCount
参数被省略,那么array.splice()
将删除从fromIndex
开始的数组的所有元素。咱们使用它来删除数组中的所有元素:
const colors = ['blue', 'green', 'black']; colors.splice(0); colors; // []
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()
会改变原数组。Array.from()
函数Array.from()
有助于初始化带有对象的特定长度的数组:
const length = 4; const emptyObjects = Array.from(Array(length), function() { return {}; }); emptyObjects; // [{}, {}, {}, {}]
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()
创建一个新数组,而不会改变原始数组。
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]
提示:
array.sort()
会改变原数组。
推荐教程:《JS教程》
以上がJavaScript 開発における 15 の一般的な配列操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。