アレイの重複排除に関しては、もう決まり文句です. インターネット上には、アレイの重複排除に関する記事が既に N 個あります.したがって、このブログを読むことができる人は誰でも運命づけられています. 2023 年には風に乗れることを願っています.そして波、海を打ちます。一般的な面接では、データの重複排除も必須の質問ですが、私は通常、次の 3 つの小さな質問をします。
目次
1. アレイ重複排除プロジェクトの使用シナリオについて教えてください
次に、アレイ重複排除のいくつかの実装方法について話しましょう
1. アレイ重複排除プロジェクトの使用シナリオについて教えてください
アレイの重複排除について質問する前に、丁寧に質問します。アレイの重複排除をよく使用しますか? 一般的に、私が得る答えはもちろん一般的に使用されています.インタビューでは、アレイの重複排除の実装方法もいくつか調べました。) 次に、私は尋ねました: アレイの重複排除のプロジェクト シナリオについて教えてください。
彼はしばらく考えて口をきかず、恥ずかしそうにこう言いました。サーバーから返された配列に重複データが含まれていたので、その配列を使用して重複を排除しました。私は尋ねました：あまりにも詳細に言うまでもなく、一般的なシーンについて話してもらえますか. それから彼は私を無視しました。
アレイの重複排除が使用される 2 つのシナリオについて話しましょう。
1. 時間軸
ここで例を挙げてみますと、実際にWebサイトを作る際に実際の例を見つけた場合は、スタイルの美化を行う必要があります。このタイムラインの例では、年、月、日がタイムラインの要約ポイントとして使用され、要約ポイントのサブ項目がこの時点で記録されるリストの内容です。この場合、サーバーからの戻り値は配列の形式である必要があり、データ形式はおおよそ次のようになります。
data = [
{
time: '2022-12-21 08:03:34',
title: '使用css3实现一个超浪漫的新年倒计时'
},
{
time: '2023-01-02 23:50:55',
title: '我辛辛苦苦做了一个月的项目，组长年底用来写了晋升PPT'
},
{
time: '2023-01-03 22:36:01',
title: '内卷对于2022是一种无奈，也是一种修行'
},
{
time: '2023-01-03 23:42:38',
title: '前端bug每次都比后端多，我总结了5点原因'
},
]全員のブログまたは執筆プロセスは長期的なプロセスでなければならないため、データは不確定でなければならず、ページングが発生する可能性があるため、サーバーがデータをフロントエンドが必要とするものに事前に編成することは不可能であることに注意してください.このとき、データの年月日の部分は重複排除が必要な重複部分となり、重複排除後、今回の事例のまとめポイントを表示するために使用されます
2. フロントエンド銀行のテリトリー表示例
このようなページを持つ Web サイトは多数あり、銀行のテリトリーが表示されます。全国に大小さまざまな銀行が存在するため、次のように表示する必要があります。
ほとんどの場合、サーバーは最初に北京、天津、上海などの領域をマップのキー値形式に抽出しません. いくつかの理由で、フロント エンドにも配列の形式で返されます.このアレイがデータベースから直接プルされる時間. フェッチされたデータ, これにより、フロントエンドでアレイの重複排除が必要になります. サーバー側のデータは次のようになります:
data = [
{
city: '北京',
name: '北京银行1'
},
{
city: '北京',
name: '北京银行2'
},
{
city: '北京',
name: 'XX商业银行'
},
{
city: '天津',
name: '天津银行1'
},
{
city: '天津',
name: '天津商业银行'
},
{
city: '天津',
name: '港口商业银行'
},
]このような説明で、似たようなシナリオがたくさん思い浮かびますか? この場合、配列内の city フィールドは、重複排除する必要があるオブジェクトです。
次に、アレイ重複排除のいくつかの実装方法について話しましょう
実際のプロジェクトでは、重複排除は一部の数値を重複排除するだけでなく、文字列と数値が混在している可能性があるため、ここでは混合配列をランダムに考えます。次に例を示します。
var arr = ['2022-03-21', 3, 8, 5, 3, 4, 3, '2022-03-21', '2022-03-22', 8];
1.タイプ1
1 つ目は、新しい空の配列を定義し、ネストされた二重ループを実行して、空の配列に要素がないかどうかを監視し、それらを空の配列にプッシュすることです。このメソッドは, 一種の思考でもある, continue の主要な使用法を調べます. 最初の空の配列には内容が含まれていてはなりません. 要素を入力し, 最初のループをスキップしてから, 2 回目のループを比較します. コードは次のとおりです.次のとおりです。
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (newArr.length === 0) {
newArr.push(arr[i]);
continue;
}
for (var j=0;j<newArr.length;j++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
}2.タイプ2
2 番目のタイプは、最初のタイプを改良したものです。また、空の配列を定義し、新しい配列に要素が含まれているかどうかを監視するために indexOf を使用します。コードは次のとおりです。
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}3. タイプ 3
3つ目はes6以降にリリースされたセットで、セット自体の設定は非繰り返しクラス配列なので、配列とセットの変換の知識があり、セットから配列への変換は [...set]分解の一種で、Array.from(set) のメソッドにすることもできます。コードは次のとおりです。
var mySet = new Set(arr); // 非重复的类数组
// var newArr = Array.from(mySet); // set转数组
var newArr = [...mySet]; // 或者是这种解构方法4.タイプ4
filter の組み込みメソッドを使用すると、filter は組み込み関数を受け取り、関数自体は 3 つのパラメーターを受け取ります. item は arr[i] に相当し、index は i index に相当し、arr は配列自体です. cases, arr を渡す必要がありますが、この case は比較的単純なので渡されません。indexOf を使用して初めてインデックスを検索し、元の配列で初めて出現するすべての要素を返し、重複排除の効果を実現します。コードは次のとおりです。
var newArr = arr.filter((item, index) => {
return arr.indexOf(item) === index;
})5.タイプ5
5 つ目は、配列の組み込み includes メソッドを使用して、要素が配列に含まれているかどうかを監視することです.インタビューでこれを言うと、少なくとも配列の新しいプロパティまたはいくつかのプロパティを整理したことが証明されます.コードは次のとおりです。
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i]);
}
}6.タイプ6
6 つ目は、新しいマップ (またはオブジェクト) オブジェクトを作成し、その一意のキー値を使用して、マップ内に属性を継続的に作成することです. 属性が作成されると、属性値を変更できることを意味します. いくつかの操作, および属性すでに重複排除されている唯一の要素である場合、コードは次のようになります。
var obj = {}; // 对象的key值是唯一的
var newArr = [];
for (var i=0;i<arr.length;i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = arr[i];
}
}3. 一番よく使うのはどれですか?
アレイ重複排除の実装方法はこれだけではありませんよね? それでは、非常に多くの種類について言及されました. 実際、プロジェクトを実行するたびに、特定のシナリオで 1 つの方法しか使用しません. この要件を満たすことは不可能です. 私は使用します.どれが一番使いたいですか？
このシンプルさが一番好きだった
実は、当時は技術が熱すぎたので最初のタイプが好きでしたが、考えてみると、今も非常に暑いので、あえて乾物を輸出しないことがよくあります。 t はたくさんの乾物を持っています. 第二に, 出力が来ました. みんなと繰り返すのもかなりたくさんあります. 非常に多くの知識ポイントが書かれています, なぜ人々は私のものを読みたいのですか? 当時、私はまだ最初の実装方法を宝物と見なし、他の人に見せびらかし、何度も試していましたが、2番目の方法を使用していることに気付きました.
今このオブジェクトフォームのように
現在、私は 6 番目のタイプを好みます.多くのプロジェクト シナリオと組み合わせると、実際には、開発プロセス中に、重複排除のために純粋なアレイを持ち込むことはほとんどありません.ほとんどの場合、上記のケースのように、重複排除は理解のためのものです.カップリング、重複排除された部分を大きなキー値として使用し、値の部分は、いくつかのサブ配列である場合もあれば、より多くの配列である場合もあるため、6番目の方法を好みます。元の集約された配列を直接、Untieしてから処理しますそれをマップ オブジェクト フォームに変換し、ページ上でレンダリングを実行します。
4.私のケースを共有する
このインタビューの質問はどのようにして生まれたのですか? それは、誰もがゆっくりと作業を進めており、常に問題点に遭遇しているからです. 無数の人がまとめた結果が徐々に面接の質問に発展しているため. 面接の質問の解決策は通常オンラインで確認され、それを暗記することで解決できます.
しかし、面接官の中には、うまく答えられないと、「面接に来て、インターネット上にたくさんの答えがあるのに、全部覚えたらどうだろう?」と考える人もいます。あなたの答えはとてもスムーズだったので、彼はもう一度考えました。
したがって、面接の質問への回答と、面接中にあなた自身のプロジェクト経験を組み合わせて、面接結果をプロジェクト経験に取り入れて回答することをお勧めします. あなた自身の経験を教えてください.あなたの誠実さ。
これが私のサクセスストーリーの1つです。
私は以前、ある企業にフロントエンド開発のインタビューをしたことがありますが、彼らはフロントエンドのインタビューの質問をしませんでした。たとえば、張三が肉片を偽のお金を渡し、上司がそれを本物のお金と交換しに行った後、お金を失い、肉を失ったなどです。もちろん、他にも興味深い同様の問題があります。私の壊れた IQ はどうしてそんなに多くの壊れた問題をこんなにも早く解決できるのでしょう？ .
私はこれを紙に直接書きました：
var num = 100; // これは最初の 100 元です。
num += 200; // この時の num は 300 元で、ボスが肉のお金を得るステップです
このような質問を直接コードの形で書いて、きちんとメモをとって提出しました。
もちろん、次のように書くこともできます: この種の問題解決を拒否します。