Ein Array ist eines der gebräuchlichsten Konzepte von Javascript, das uns viele Möglichkeiten bietet, mit darin gespeicherten Daten zu arbeiten. In Anbetracht dessen, dass Array eines der grundlegendsten Themen in Javascript ist, das Sie am Anfang Ihres Programmierpfads lernen, möchte ich Ihnen in diesem Artikel ein paar Tricks zeigen, die Sie vielleicht nicht kennen und die sehr sein können Hilfreich beim Codieren! Lass uns anfangen.

1. Entfernen Sie Duplikate aus einem Array

Es ist eine sehr beliebte Interviewfrage zu Javascript-Arrays, wie man die eindeutigen Werte aus Javascript-Arrays extrahiert. Hier ist eine schnelle und einfache Lösung für dieses Problem, Sie können für diesen Zweck ein neues Set() verwenden. Und ich möchte Ihnen zwei Möglichkeiten zeigen, dies zu tun, eine mit der Methode .from () und die zweite mit dem Spread-Operator (…).

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"]

Manchmal ist es notwendig, beim Erstellen von Code einen bestimmten Wert im Array zu ersetzen, und es gibt eine nette kurze Methode, dies zu tun, die Sie vielleicht noch nicht kennen. Dazu können wir .splice(start, value to remove, valueToAdd) verwenden und dort alle drei Parameter übergeben, die angeben, wo wir mit der Änderung beginnen möchten, wie viele Werte wir ändern möchten und die neuen Werte.

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”]

Wahrscheinlich kennt jeder die .map()-Methode von Arrays, aber es gibt eine andere Lösung, die verwendet werden kann, um einen ähnlichen Effekt und auch sehr sauberen Code zu erzielen. Zu diesem Zweck können wir die Methode .from() verwenden.

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"]

Haben Sie ein Array voller Elemente, müssen es aber aus irgendeinem Grund bereinigen und möchten die Elemente nicht einzeln entfernen? Es ist sehr einfach, dies in einer Codezeile zu tun. Um ein Array zu leeren, müssen Sie die Länge eines Arrays auf 0 setzen, und das war's!

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

fruits.length = 0;
console.log(fruits); // returns []

Es kommt vor, dass wir ein Array haben, aber für einen bestimmten Zweck brauchen wir ein Objekt mit diesen Daten, und der schnellste Weg, das Array in ein Objekt umzuwandeln, ist die Verwendung eines bekannten Spread-Operators (…).

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”}

Es gibt einige Situationen, in denen wir ein Array erstellen und es mit einigen Daten füllen möchten, oder wir benötigen ein Array mit denselben Werten, und in diesem Fall bietet die Methode .fill() eine einfache und saubere Lösung.

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

Wissen Sie, wie Sie Arrays zu einem Array zusammenführen, ohne die Methode .concat() zu verwenden? Es gibt eine einfache Möglichkeit, eine beliebige Anzahl von Arrays in einer Codezeile zusammenzuführen. Wie Sie wahrscheinlich bereits bemerkt haben, ist der Spread-Operator (…) ziemlich nützlich, wenn Sie mit Arrays arbeiten, und in diesem Fall ist es dasselbe.

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”]

Es ist auch eine der beliebtesten Herausforderungen, denen Sie sich in jedem Javascript-Interview stellen können, da es zeigt, ob Sie Array-Methoden verwenden können und was Ihre Logik ist. Um die Schnittmenge zweier Arrays zu finden, verwenden wir eine der zuvor in diesem Artikel gezeigten Methoden, um sicherzustellen, dass die Werte in dem von uns überprüften Array nicht dupliziert werden, und wir verwenden die .filter-Methode und die .includes-Methode. Als Ergebnis erhalten wir das Array mit Werten, die in beiden Arrays präsentiert wurden. Überprüfen Sie den 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]

Lassen Sie uns zunächst falsche Werte definieren. Falsche Werte in Javascript sind false, 0, „”, null, NaN, undefined. Jetzt können wir herausfinden, wie wir diese Art von Werten aus unserem Array entfernen können. Um dies zu erreichen, verwenden wir die Methode .filter().

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

Manchmal müssen wir zufällig einen Wert aus dem Array auswählen. Um es einfach, schnell und kurz zu erstellen und unseren Code sauber zu halten, können wir eine zufällige Indexnummer entsprechend der Arraylänge erhalten. Sehen wir uns den Code an:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

Wenn wir unser Array umdrehen müssen, müssen wir es nicht durch die komplizierten Schleifen und Funktionen erstellen, es gibt eine einfache Array-Methode, die alles für uns erledigt, und mit einer Codezeile können wir unser Array umkehren. Lass es uns überprüfen:

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”]

In Javascript gibt es eine interessante Methode, die es ermöglicht, den Index des letzten Vorkommens des angegebenen Elements zu finden. Wenn unser Array beispielsweise doppelte Werte enthält, können wir die Position des letzten Vorkommens finden. Sehen wir uns das Codebeispiel an:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

Eine weitere Herausforderung, die sehr oft bei Interviews mit Javascript Engineers auftritt. Nichts Gruseliges kommt hierher; Es kann mit der .reduce-Methode in einer Codezeile gelöst werden. Schauen wir uns den Code an:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

Level-Up-Codierung

Danke, dass Sie ein Teil unserer Community sind! Bevor du gehst:

• Klatsche für die Geschichte und folge dem Autor
• Sehen Sie sich weitere Inhalte in der Level Up Coding-Publikation an
• Folge uns: Twitter | LinkedIn | Newsletter