Tablica to jedno z najczęściej spotykanych pojęć w JavaScript, które daje nam bardzo duże możliwości pracy z przechowywanymi w niej danymi. Biorąc pod uwagę, że tablice to jeden z podstawowych tematów w JavaScript, o którym uczysz się na początku swojej drogi programistycznej, w tym artykule chciałbym pokazać Ci kilka trików, o których możesz nie wiedzieć, a które mogą być bardzo przydatne pomoc w kodowaniu! Zacznijmy.

1. Usuń duplikaty z tablicy

To bardzo popularne pytanie w wywiadzie dotyczące tablic JavaScript, jak wyodrębnić unikalne wartości z tablicy JavaScript. Oto szybkie i łatwe rozwiązanie tego problemu, możesz użyć do tego celu nowej funkcji Set(). I chciałbym pokazać dwa możliwe sposoby, aby to zrobić, jeden z metodą .from() i drugi z operatorem spread (…).

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

Czasami konieczne jest zastąpienie określonej wartości w tablicy podczas tworzenia kodu, a jest na to fajna, krótka metoda, której możesz jeszcze nie znać. W tym celu możemy użyć .splice(start, wartość do usunięcia, wartośćDoDodania) i przekazać tam wszystkie trzy parametry określające gdzie chcemy rozpocząć modyfikację, ile wartości chcemy zmienić oraz nowe wartości.

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

Chyba każdy zna metodę tablic .map() , ale istnieje inne rozwiązanie, które można zastosować, aby uzyskać podobny efekt i jednocześnie bardzo czysty kod. W tym celu możemy użyć metody .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"]

Czy masz tablicę pełną elementów, ale musisz ją wyczyścić w dowolnym celu, a nie chcesz usuwać elementów jeden po drugim? Wykonanie tego w jednym wierszu kodu jest bardzo proste. Aby opróżnić tablicę, musisz ustawić długość tablicy na 0 i to wszystko!

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

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

Zdarza się, że mamy tablicę, ale do jakiegoś celu potrzebujemy obiektu z tymi danymi, a najszybszym sposobem na konwersję tablicy na obiekt jest użycie dobrze znanego operatora spreadu (…).

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

Są sytuacje, kiedy tworzymy tablicę i chcielibyśmy wypełnić ją jakimiś danymi lub potrzebujemy tablicy z tymi samymi wartościami, iw tym przypadku metoda .fill() jest łatwym i czystym rozwiązaniem.

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

Czy wiesz, jak połączyć tablice w jedną tablicę bez użycia metody .concat()? Istnieje prosty sposób na połączenie dowolnej liczby tablic w jeden w jednym wierszu kodu. Jak już zapewne zauważyłeś, operator spreadu (…) jest bardzo przydatny podczas pracy z tablicami i tak samo jest w tym przypadku.

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

Jest to również jedno z najpopularniejszych wyzwań, z którymi możesz się zmierzyć na dowolnej rozmowie kwalifikacyjnej JavaScript, ponieważ pokazuje, czy możesz używać metod tablicowych i jaka jest twoja logika. Aby znaleźć przecięcie dwóch tablic, użyjemy jednej z metod pokazanych wcześniej w tym artykule, aby upewnić się, że wartości w sprawdzanej tablicy nie są zduplikowane i użyjemy metody .filter i .includes. W rezultacie otrzymamy tablicę z wartościami, które zostały przedstawione w obu tablicach. Sprawdź kod:

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]

Najpierw zdefiniujmy fałszywe wartości. W JavaScript fałszywe wartości to false, 0, „”, null, NaN, undefined. Teraz możemy dowiedzieć się, jak usunąć tego rodzaju wartości z naszej tablicy. Aby to osiągnąć, użyjemy metody .filter().

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

Czasami musimy losowo wybrać wartość z tablicy. Aby stworzyć go w łatwy, szybki i krótki sposób i utrzymać nasz kod w czystości, możemy uzyskać losowy numer indeksu zgodnie z długością tablicy. Zobaczmy kod:

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

Kiedy musimy odwrócić naszą tablicę, nie ma potrzeby tworzenia jej za pomocą skomplikowanych pętli i funkcji, istnieje łatwa metoda tablicowa, która zrobi to wszystko za nas i za pomocą jednego wiersza kodu możemy odwrócić naszą tablicę. sprawdźmy to:

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

W JavaScript istnieje ciekawa metoda pozwalająca na znalezienie indeksu ostatniego wystąpienia danego elementu. Na przykład, jeśli nasza tablica ma zduplikowane wartości, możemy znaleźć pozycję ostatniego jej wystąpienia. Zobaczmy przykład kodu:

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

Kolejne wyzwanie, które bardzo często zdarza się podczas rozmów kwalifikacyjnych na Inżyniera Javascript. Nie ma tu nic strasznego; można go rozwiązać za pomocą metody .reduce w jednym wierszu kodu. Sprawdźmy kod:

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

Kodowanie na wyższym poziomie

Dziękujemy za bycie częścią naszej społeczności! Zanim pójdziesz:

• Klaskajcie za relację i śledźcie autora
• Zobacz więcej treści w publikacji Level Up Coding
• Śledź nas: Twitter | LinkedIn | Biuletyn Informacyjny