Шпаргалки и фрагменты JavaScript для начинающих


Добро пожаловать в JavaScript!

Здравствуйте! Здесь вы найдете мою личную шпаргалку по JavaScript! Вы можете свободно использовать и адаптировать эти коды для своих нужд. Вы можете легко начать новый проект ванильного JS с помощью Vite.

Объявление переменных

Для объявления наших переменных мы можем использовать let для переменных, которые могут изменяться, и const для переменных, которые являются постоянными.

let changeableVariable = "Lucas"
const nonChangeableVariable = 3.14
Вход в полноэкранный режим Выход из полноэкранного режима

Циклы

Мы можем выполнять итерации, используя основные инструкции for и while.

for (let index = 0; index < array.length; index++) {
  const element = array[index]
}

while (condition) {}
Войти в полноэкранный режим Выход из полноэкранного режима

Объявление функций и различные типы функций

Здесь у нас есть 3 типа объявления:

  • Наша основная и классическая функция
  • Стрелочная функция (которая является более компактным способом объявления функции)
  • и анонимная функция (это способ объявить функцию без имени).
//classic function
function showMessage(message) {
  console.log(message)
}
//arrow function
const alsoShowsMessage = (message) => console.log(message)


//anonymous functions (same use as the arrow function, but with different syntax)
(function () {
  console.log("Oi escondido!");  // I will invoke myself
})();

//you can check more about functions here: 
//https://www.w3schools.com/js/js_function_definition.asp

showMessage("Oi")
alsoShowsMessage("Oi de novo!")
Вход в полноэкранный режим Выход из полноэкранного режима

Работа с массивами

У нас есть много методов, которые могут помочь нам в работе с массивами. Вот некоторые из них:

  • push
  • pop()
  • forEach()
  • map()

Другие методы можно посмотреть здесь.

//working with arrays
// using const because this is always going to be an array
const ourAmazingArray = [1, 2, 3, 4, 5]

//accessing one array position
console.log(ourAmazingArray[2])

// iterating through array
ourAmazingArray.forEach((value) => console.log(value))
const ourNewAmazingArray = ourAmazingArray.map((value) => value)

//adding to the end of the array
ourAmazingArray.push(6)

console.log(ourAmazingArray, ourNewAmazingArray)

//removing the last item from the array
ourAmazingArray.pop()

console.log(ourAmazingArray, ourNewAmazingArray)
Вход в полноэкранный режим Выход из полноэкранного режима

Интерполяция значений в строки

Вот пример того, как мы можем вставить содержимое переменной внутрь некоторой строки.

const ourAmazingArray = [1, 2, 3, 4, 5]

const showElement = (element, position) =>
  console.log(`The element ${element} is on position ${position}`)

ourAmazingArray.map(showElement)
Войти в полноэкранный режим Выход из полноэкранного режима

Работа с JSON

Приведем несколько примеров работы с JSON.

const ourAmazingJsonArray = [
  {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    userId: 1,
    id: 2,
    title: "qui est esse",
    body: "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    userId: 1,
    id: 3,
    title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    body: "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut"
  },
  {
    userId: 1,
    id: 4,
    title: "eum et est occaecati",
    body: "ullam et saepe reiciendis voluptatem adipiscinsit amet autem assumenda provident rerum culpanquis hic commodi nesciunt rem tenetur doloremque ipsam iurenquis sunt voluptatem rerum illo velit"
  }
]
//show titles
const showTitle = (obj) => console.log(obj.title)

ourAmazingJsonArray.map(showTitle)

//filter out titles which length is greater than 20
const filterLongTitles = (obj) => obj.title.length < 20

console.log(ourAmazingJsonArray.filter(filterLongTitles))
Вход в полноэкранный режим Выход из полноэкранного режима

ООП в JS

Здесь у нас есть один базовый класс Rectangle, в котором мы объявляем ширину и высоту, чтобы в дальнейшем создавать экземпляры Rectangle.

class Rectangle {
  constructor(width, height) {
    this.width = width
    this.height = height
  }

  showValues() {
    console.log(this.width, this.height)
  }

  calculateArea() {
    console.log(this.width * this.height)
  }
}

const myRectangle = new Rectangle(10, 20)
myRectangle.showValues()
myRectangle.calculateArea()


Вход в полноэкранный режим Выход из полноэкранного режима

Работа с API

Мы можем использовать метод fetch для получения ответа API и последующей работы с данными ответа.

Пример:

const fetchJoke = async (numberOfPhrases) => {
  const phrasesArray = []
  for (let i = 0; i < numberOfPhrases; i++) {
    const phrase = await fetch(URL_TO_FETCH).then((res) => res.json())
    const fetchedPhrase = await phrase
    phrasesArray.push(fetchedPhrase)
  }
  return phrasesArray
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Этот фрагмент кода выполнит выборку из API и JSON.parse() ответа!

И это немного основ JavaScript! Не стесняйтесь комментировать и делиться этой статьей с другими. Спасибо!

Para os leitores brasileiros, pretendo traduzir os contéudos desse post num futuro próximo. Valeu!

Оцените статью
Procodings.ru
Добавить комментарий