Pole JavaScriptu a metody ES5, ES6 a ES7, které byste měli znát

Jak často pracujete s poli JavaScriptu? O ES5, ES6 a ES7 se toho hodně mluvilo. Přesto se skoro zdá, že o polích není nic nového, o čem by se dalo mluvit. To není pravda. Tento článek vám ukáže, že pole mají stále co ukázat. Přečtěte si o 14 nových a zajímavých metodách pole. Udělejte svou práci s poli znovu svěží a zábavnou.

Rychlá příprava

Než začneme, vytvoříme několik polí a uložíme je do proměnných. S těmito proměnnými pak můžeme pracovat v rámci tohoto tutoriálu. To nám pomůže vyhnout se opakujícímu se kódu a urychlí naši práci. Vytvořme tedy tři pole. První pole bude obsahovat čísla, druhé slova a poslední bude obsahovat objekty. S tím si můžeme začít hrát s poli.

// Create array of numbers.
let arrOfNumbers = [53, 14, 85, 66, 67, 108, 99, 10]

// Create array of words.
let arrOfWords = ['mathematics', 'physics', 'philosophy', 'computer science', 'engineering', 'biology', 'nano technology']

// Create array of objects.
let arrOfObjects = [
  {
    name: 'Aristotle',
    living: false
  },
  {
    name: 'Al-Khwarizmi',
    living: false
  },
  {
    name: 'Leonardo da Vinci',
    living: false
  },
  {
    name: 'Sir Isaac Newton',
    living: false
  },
  {
    name: 'Bertrand Russell',
    living: false
  },
  {
    name: 'Herbert Simon',
    living: false
  },
  {
    name: 'John von Neumann',
    living: false
  },
  {
    name: 'Franklin Story Musgrave',
    living: true
  },
  {
    name: 'Hamlet Isakhanli',
    living: true
  }
]

najít()

find metoda vám umožňuje iterovat polem a provádět specifickou funkci, kterou předáte jako zpětné volání. Tuto funkci provede okamžitě, když první prvek způsobí, že funkce zpětného volání vrátí hodnotu true. Poté je zavolán příkaz return a je vrácena hodnota, find metoda je přerušena. To znamená, že find najde pouze první prvek, který odpovídá podmínce a způsobí spuštění funkce zpětného volání.

// Find the first even number and store it inside a variable.
let firstEvenNumber = arrOfNumbers.find((number) => number % 2 !== 1)

// Find the first odd number and store it inside a variable.
let firstOddNumber = arrOfNumbers.find((number) => number % 2 === 1)

// Find the first number bigger than 5 and store it inside a variable.
let firstNumberBiggerThanFiftyFive = arrOfNumbers.find((number) => number > 55)

// Find the first number smaller than 1 and store it inside a variable
let firstNumberSmallerThanOne = arrOfNumbers.find((number) => number < 1)

// Find the first living person.
let firstLivingPerson = arrOfObjects.find((person) => person.living)

// Log firstEvenNumber, firstNumberBiggerThanFiftyFive, firstNumberSmallerThanOne variables in console.
console.log(firstEvenNumber) // 14

console.log(firstOddNumber) // 53

console.log(firstNumberBiggerThanFiftyFive) // 85

console.log(firstNumberSmallerThanOne) // returns nothing

// Log first living person from the array object.
console.log(firstLivingPerson) // { living: true, name: 'Franklin Story Musgrave' }

filtr()

filter metoda nám umožňuje iterovat pole a vrátit všechny položky nebo prvky, které vyhovují podmínce, kterou jste zadali prostřednictvím funkce zpětného volání.

// Create an array with all even numbers from arrOfNumbers.
let evenNumbers = arrOfNumbers.filter((number) => number % 2 !== 1)

// Create an array with all odd numbers from arrOfNumbers.
let oddNumbers = arrOfNumbers.filter((number) => number % 2 === 1)

// Create an array with all living people from arrOfObjects.
let livingPeople = arrOfObjects.filter((person) => person.living)

// Create an array with all dead people from arrOfObjects.
let livingPeople = arrOfObjects.filter((person) => !person.living)

// Log results.
console.log(evenNumbers) // [14, 66, 108, 10]

console.log(oddNumbers) // [53, 85, 67, 99]

console.log(livingPeople) // { living: true, name: "Franklin Story Musgrave" }, { living: true, name: "Hamlet Isakhanli" }

console.log((deadPeople)) // { living: false, name: "Aristotle" }, { living:  false, name: "Al-Khwarizmi" }, { living: false, name: "Leonardo da Vinci" }, { living: false, name: "Sir Isaac Newton" }, { living: false, name: "Bertrand Russell" }, { living: false, name: "Herbert Simon" }, { living: false, name: "John von Neumann" }

map()

map metoda funguje podobným způsobem jako filter . Umožňuje nám také iterovat polem. Nicméně map dá je mnohem univerzálnější než filter . Když použijete map s obsahem pole, jeho položkami, můžete dělat, co chcete.

// Create an array with modulus of 4 for all numbers.
let modulus = arrOfNumbers.map(number => number % 4)

// Log the result.
console.log(modulus) // [1, 2, 1, 2, 3, 0, 3, 2]

// Create an array with all subjects to learn.
let toLearn = arrOfWords.map((word) => `I have to learn: ${word}`)

// Log the result.
console.log(toLearn) // ["I have to learn mathematics", "I have to learn physics", "I have to learn philosophy", "I have to learn computer science", "I have to learn engineering", "I have to learn biology", "I have to learn nano technology"]

// Create an array with reversed version of items in arrOfWords.
let reversedWords = arrOfWords.map((word) => word.split('').reverse().join(''))

// Log the result.
console.log(reversedWords) // ["scitamehtam", "scisyhp", "yhposolihp", "ecneics retupmoc", "gnireenigne", "ygoloib", "ygolonhcet onan"]

reduce()

reduce metoda pracuje se dvěma parametry, accumulator a currentValue . No, používá čtyři parametry, ale dva jsou volitelné. Poté vrátí jednu hodnotu na základě redukční funkce, kterou jste zadali jako zpětné volání. O parametrech. accumulator ukládá předchozí hodnotu vrácenou funkcí redukce. currentValue ukládá hodnotu položky aktuální iterace.

Jinými slovy, představte si, že máte pole s pěti položkami. A reduktor právě prochází čtvrtou položkou. V tomto případě accumulator ukládá jednu hodnotu položky jedna až tři. Například přidání těchto položek. currentValue uloží hodnotu čtvrté položky a provede funkci redukce, kterou jste poskytli jako zpětné volání.

Tato metoda může být užitečná, pokud máte pole nebo pole a chcete provádět nějaké rychlé matematické operace se všemi jeho položkami, jako je sčítání, odečítání, násobení, dělení atd.

// Create an array with total sum of all numbers in arrOfNumbers.
let sumTotal = arrOfNumbers.reduce((accumulator, currentValue) => accumulator + currentValue)

// Log the result.
console.log(sumTotal) // 502

// Create another array but now subtract all numbers in arrOfNumbers.
let subtract = arrOfNumbers.reduce((accumulator, currentValue) => accumulator - currentValue)

// Log the result.
console.log(subtract) // -396

forEach()

forEach funguje velmi jednoduchým způsobem. Provede zpětné volání, které jste zadali pro každou položku v poli. forEach je jedním z mých oblíbených. Používám ho jako náhradu za starý dobrý for smyčky, zejména v kombinaci s querySelectorAll .

// Get all buttons on the website.
let buttons = document.querySelectorAll('button')

// Create a simple function for handling clicks.
let handleClick = (e) => {
  e.preventDefault()

  ... do something ...

  console.log(`Button with id ${e.currentTarget.id} has been clicked.`)
}

// Add event listener to all buttons.
buttons.forEach((button) => {
  button.addEventListener('click', handleClick)
})

// Create new empty array.
let randoms = []

// Iterate over arrOfNumbers array, increase every value by adding a random number and push it to new randoms array.
arrOfNumbers.forEach((number) => {
  randoms.push(number + Math.floor(Math.random() * 10))
})

// Log the result.
console.log(randoms) // [56, 23, 93, 74, 67, 109, 101, 17] (well, maybe)

nějaké()

some zkontroluje, zda alespoň jedna z položek v poli, které jste zadali, odpovídá podmínce, kterou jste zadali ve funkci zpětného volání. Co když použijete some s prázdným polem? some jednoduše vrátí false .

// Is any number in arrOfNumbers array even?
console.log(arrOfNumbers.some((number) => number % 2 === 0)) // true

// Does the arrOfWords contains word 'mathematics'?
console.log(arrOfWords.some((word) => word === 'mathematics')) // true

// Is any person in arrOfObjects array still alive?
console.log(arrOfObjects.some((person) => person.living)) // true

// Is any person in arrOfObjects array dead?
console.log(arrOfObjects.some((person) => !person.living)) // true

// Test an empty array.
console.log([].some((item) => item % 2 === 0)) // false

každý()

every funguje poněkud podobným způsobem jako some . Rozdíl je v tom, že všechny položky v poli nebo polích musí splnit podmínku, kterou nastavíte pomocí funkce zpětného volání. Pokud je to pravda, every vrátí také true . A co prázdné pole? To je zajímavé. Když použijete some na prázdném poli ve skutečnosti vrátí true .

// Are all items in arrOfNumbers array numbers?
console.log(arrOfNumbers.every((number) => typeof number === 'number')) // true

// Are all items in arrOfWords array strings?
console.log(arrOfWords.every((subject) => typeof subject === 'string')) // true


// Are all items in arrOfWords array strings?
console.log(arrOfWords.every((subject) => typeof subject === 'string')) // true

// Are all items in arrOfWords array objects?
console.log(arrOfObjects.every((person) => typeof person === 'object')) // true

// Are all persons in arrOfObjects array still alive?
console.log(arrOfObjects.every((person) => person.living)) // false

// Are all persons in arrOfObjects array dead?
console.log(arrOfObjects.every((person) => !person.living)) // false

// Test an empty array.
console.log([].every((item) => item > 0)) // true

zahrnuje()

includes nám pomáhá otestovat, zda pole nebo pole obsahují konkrétní položku. Jako vždy jste to vy, kdo specifikováním prvku určuje, jakou položku hledáte. Je třeba si zapamatovat jednu věc, includes nefunguje s funkcí zpětného volání.

// Is one of the numbers in arrOfNumbers array 108?
console.log(arrOfNumbers.includes(108)) // true

// Is one of the subjects in arrOfWords array 'engineering'?
console.log(arrOfWords.includes('engineering')) // true

Array.from()

from metoda nám umožňuje vzít nějaký iterovatelný objekt a vytvořit z něj nové pole. Jednoduchým příkladem může být řetězec manipulující s písmeny a vytvoření nového pole z výsledku. Pokud o tom přemýšlíte, from funguje jako starý dobrý split , kromě split je univerzálnější, protože umožňuje specifikovat podmínku pro rozdělení.

Jedna zajímavá věc je, že from nám umožňuje používat funkce šipek, a tedy manipulovat s položkami uvnitř polí.

// Take the fourth item (third index) in arrOfWords and convert it into a new array.
console.log(Array.from(arrOfWords[3]) // ['c', 'o', 'm', 'p', 'u', 't', 'e', 'r', ' ', 's', 'c', 'i', 'e', 'n', 'c', 'e']

// Good old split.
console.log(arrOfWords[3].split('')) // ['c', 'o', 'm', 'p', 'u', 't', 'e', 'r', ' ', 's', 'c', 'i', 'e', 'n', 'c', 'e']

// Take all numbers in arrOfNumbers and double them.
console.log(Array.from(arrOfNumbers, number => number * 2)) // [106, 28, 170, 132, 134, 216, 198, 20]

// Convert all characters of the fourth item (3rd index) in arrOfWords to upper case.
console.log(Array.from(arrOfWords[3], (letter) => letter.toUpperCase())) // ["C", "O", "M", "P", "U", "T", "E", "R", " ", "S", "C", "I", "E", "N", "C", "E"]

Array.of()

of metoda nám umožňuje vytvářet pole z hodnot, které zadáte jako argumenty, když ji použijete.

// Create a new array with '1' as the only item.
console.log(Array.of(1)) // [1]

// Create a new array with '1' as the only item.
console.log(Array.of(1)) // [1]

// Create a new array with 'alpha', 'beta', 'gama', 'delta' as its items.
console.log(Array.of('alpha', 'beta', 'gama', 'delta')) // ['alpha', 'beta', 'gama', 'delta']

// What about undefined or null?
console.log(Array.of(undefined, null)) // [undefined, null]

findIndex()

Když používáte findIndex bude to jedna ze dvou věcí, v závislosti na podmínce, kterou jste poskytli prostřednictvím funkce zpětného volání. Za prvé, pokud nějaká položka projde vaší podmínkou, vrátí svůj index. Mějte na paměti, že findIndex vrátí pouze index první položky, která splňuje vaši podmínku. Pokud tedy vaše pole nebo pole obsahují duplikáty findIndex nevrátí své indexy. A druhá možnost je, že pokud žádná z položek nesplní vaši podmínku findIndex vrátí -1.

// Find index of the first occurrence of the number 67.
console.log(arrOfNumbers.findIndex((number) => number === 67)) // 4

// Find index of the first occurrence of the number 1024.
console.log(arrOfNumbers.findIndex((number) => number === 1024)) // -1

// Create new array with some duplicit values.
let duplicates = [97, 3, 51, 3, -85, 102, 5, 3]

// Find index of the first occurrence of the number 3.
console.log(duplicates.findIndex((number) => number === 3)) // 1

fill()

fill nám umožňuje vyplnit pole konkrétními hodnotami, které začínají a končí na konkrétním indexu. Předáte hodnotu je první argument, počáteční index jako druhý a koncový index jako třetí. Pokud vynecháte počáteční a koncový index fill vyplní celé pole. Pokud vynecháte pouze jeden z indexů fill vezměte ten jako počáteční index a vyplňte zbytek pole.

// Replace the second, third and fourth item in arrOfNumbers with 11.
console.log(arrOfNumbers.fill(11, 1, 5)) // [53, 11, 11, 11, 11, 108, 99, 10]

// Omit the starting and ending indexes.
console.log(arrOfNumbers.fill(33)) // [33, 33, 33, 33, 33, 33, 33, 33]

// Omit one of the indexes.
console.log(arrOfNumbers.fill(768, 5)) // [53, 14, 85, 66, 67, 768, 768, 768]

hodnoty()

values metoda se trochu liší od metod výše. Nevrací žádnou konkrétní hodnotu. Místo toho vytvoří nový Array Iterator objekt. Je to tento objekt, který obsahuje hodnoty pro každý index ve vašem poli nebo polích. Pokud chcete tento objekt iterovat, můžete použít for...of například prohlášení.

Pokud nechcete získat všechny hodnoty najednou, ale jednotlivě, můžete použít next metoda ve spojení s values .

// Create new Array Iterator object.
let arrIterator = arrOfWords.values()

// Iterate through arrIterator and log every value.
for (let value of arrIterator) {
  console.log(value)
}

// Result:
// 'mathematics'
// 'physics'
// 'philosophy'
// 'computer science'
// 'engineering'
// 'biology'
// 'nano technology'

// Use next() method and value
console.log(arrIterator.next().value) // 'mathematics'
console.log(arrIterator.next().value) // 'physics'
console.log(arrIterator.next().value) // 'philosophy'

klávesy()

keys funguje téměř stejně jako values , kromě toho, že vytvoří nový Array Iterator objekt plný klíčů. Použijme předchozí příklad a jednoduše nahraďte arrOfWords.values() s arrOfWords.keys() .

// Create new Array Iterator object.
let arrIterator = arrOfWords.keys()

// Iterate through arrIterator and log every key.
for (let key of arrIterator) {
  console.log(key)
}

// Result:
// 0
// 1
// 2
// 3
// 4
// 5
// 6

// Use next() method and value
console.log(arrIterator.next().value) // 0
console.log(arrIterator.next().value) // 1
console.log(arrIterator.next().value) // 2

Epilolog:Pole JavaScript

Gratulujeme! Právě jste dokončili tento článek o metodách JavaScript ES5, ES6 a ES7, které můžete použít s poli. Doufám, že se vám tento článek líbil a dozvěděli jste se něco nového. Také doufám, že tento článek dokázal, že JavaScriptová pole nepatří do starého železa. Je tu spousta nových věcí a jsem si jistý, že další přijdou v budoucnu.

Co teď? Pouhým přečtením článku se nestanete mistrem ničeho. Udělejte si tedy čas na hraní s poli a procvičte si metody, o kterých jsme dnes diskutovali. A nezapomeňte, JavaScript je úžasný a pole jsou stále skvělá. Tímto vám děkuji za váš čas a přeji hezký den!