13の有用なJavaScript配列技術とコツを知るべきです.

5186 ワード

あなたが知っているべき13の有用なJavaScript配列の技術とコツ
配列はJavascriptの最も一般的な概念の一つであり、その中に記憶されているデータを処理する多くの可能性を提供してくれます.配列はJavascriptの中で最も基本的なテーマの一つです.プログラミング開始当初からそれを知っているかもしれません.この文章の中で、あなたが知らないかもしれませんが、役に立つ技術を教えてあげます.始めましょう.
1、配列の繰り返しを削除します.
これは非常に一般的な配列面接の問題です.どのように配列の中から重複値を抽出しますか?new set()を使ってこの目的を達成できます.私もその二つの方法を共有したいです.一つはfrom()方法です.もう一つは拡張演算子です.
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


// First method
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// Second method
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
簡単ですよね?
2、配列の具体的な値を置換する
コードを書く時に、いくつかの具体的な値を交換する必要があります.これはあなたが知らなかったかもしれません.よくて短い方法があります.私たちはspliceを使って、この三つのパラメータの指定を伝えます.
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]
3.なし.map()のmap配列は、配列のmap()メソッドをすべての人が知っているかもしれませんが、これは別の異なる方法でより簡単なコードで同じ効果を実現します.from()法でこの目的を達成できます.
var friends = [
    { name: ‘John’, age: 22 },
    { name: ‘Peter’, age: 23 },
    { name: ‘Mark’, age: 24 },
    { name: ‘Maria’, age: 22 },
    { name: ‘Monica’, age: 21 },
    { name: ‘Martha’, age: 19 },
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
4、空の配列には多くの要素が含まれている配列がありますか?しかし、いくつかの理由でそれを整理する必要があります.そして一つずつ削除したくないですか?コード1行で操作が完了します.配列をクリアします.配列の長さを0にするだけでいいです.
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


fruits.length = 0;
console.log(fruits); // returns []
5、行列をオブジェクトに変換する場合、行列をオブジェクトに変換し、行列をオブジェクトに変換する一番早い方法はよく知られている拡張演算子を使うことです.
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
6、データのある配列を素早く作成します.
時々、私たちは配列を作成し、同じデータで充填する必要があります.この場合、私たちはfill()法を使うことができます.簡単で簡潔です.
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
7、統合配列はどうやってconcat()の方法で配列を統合するか分かりますか?この簡単な方法は1行のコードで複数の配列を組み合わせることができます.この場合、拡張演算子は非常に有用であることが認識されているかもしれません.
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
8、2つの配列の交差点を見つけました.これは面接の中で最も普遍的な問題の一つです.配列方法とあなたの論理を使用できるかどうかを示しています.二つの配列の交差点を見つけました.私達は前に述べた方法で、配列の中の値が重複していないことを確認するために、filter()方法とincludes()を使って、最後に二つの配列が存在する値を得ます.codeは以下の通りです.
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
9、配列からfalseを削除します.はじめにfalseを定義しました.JavaScriptではfalse、0、null、NaN、undefinedがあります.どのように配列からこれらのfalse値を除去しますか?この目的を実現するために、filter()の方法を使用できます.
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
10、配列からランダム値を取得する場合、配列からランダムに値を抽出する必要があります.簡単で効果的な、最も短くて綺麗なコードを作るために、配列の長さに応じて乱数を得ることができます.
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
11、倒置配列は逆さま配列が必要で、複雑な循環と方法を書く必要がなく、簡単なものがあります.一行のコードだけが必要です.配列方法はすでに私達のために配列を逆さまにしています.
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
12.lastIndexOf()JavaScriptにおいて、与えられた要素の最後の出現の下付きを見つけることができる面白い方法があります.例えば、私達の配列に重複した値があれば、彼の最後の出現の下付きを見つけられます.コードを見てください.
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
13、行列の中のすべての価値ともう一つのJavaScriptエンジニアが面接する時よく聞かれる問題を求めます.怖いものは何もありません.reduceを使えば、一行のコードで解決できます.以下のとおりです
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
結論
この文章では、13個のコードをまとめました.コードを短く清潔に保つためのテクニックとコツを提供します.また、Javascriptでは、いろいろなテクニックを使って探索する必要があるかもしれません.配列だけでなく、データの種類にも関連しています.本論文で提供された解決策を気に入ってほしいです.彼らを使ってあなたの開発効率を向上させてもいいです.
Have a nice coding
tricks:コツduplicates:重複extract:抽出unique:独特、第一無二solution:n、解決方法modification:修正convert:改造intersection:道路口、交差点