За последние годы JavaScript стал самым популярным языком программирования. Почему? Потому что он очень гибкий, интуитивно понятный и простой в использовании.
В нем есть множество фреймворков, таких как React, разработанный Facebook, Angular, разработанный Google, и даже устаревшие, такие как jQuery, которые заставят вашу бабушку выглядеть молодо.
Кроме того, вы можете легко создавать оба сквозных приложения, например, используя React и NodeJS + Express.
Это основные причины, по которым JavaScript стал настолько популярным в сфере технологий.
А теперь давайте взглянем на хитрости JavaScript, которые вам следует знать в 2020 году.
Необязательная цепочка
Допустим, у вас есть данные, которые вы получаете из API. Если вы получаете объект, чтобы достичь определенного глубоко вложенного свойства, вам необходимо подтвердить все его свойства более высокого порядка.
Вот как вам нужно будет проверить ненулевое / неопределенное значение dataFromAPI.
Before receiving the API response dataFromAPI && dataFromAPI.data1 // undefined
Так будет выглядеть ваша константа после получения ответа от API.
Const dataFromAPI = {data1: ‘My name’, data2: ‘is’, data3: ‘Alex’}
dataFromAPI && dataFromAPI.data1/ ‘My name’
Это объект только с одним слоем, если бы у него было 10 слоев, доступ к data1 выглядел бы примерно так.
dataFromAPI && dataFromAPI.layer1 && ..... && dataFromAPI.layer9 && dataFromAPI.data1
Вы можете легко заснуть, пытаясь получить доступ к этой информации! Давай посмотрим, как мы можем не дать тебе заснуть.
Теперь появилась новая функция, которую вы можете использовать для обхода проверки данных верхнего уровня, в вашем случае dataFromAPI должен использовать необязательную цепочку. Это выглядит так.
Const dataFromApi = {data1: ‘My name’, data2: ‘is’, data3: ‘Alex’}
dataFromApi?.dataFromApi.data1/ ‘My name’
Вы говорите JS: «Эй, dataFromApi может иметь значение null или undefined, но если это не так, распечатайте dataFromApi.data1».
Для объекта с 10 слоями вы можете получить доступ к data1 следующим образом.
dataFromApi.layer1?.layer2?.layer3?.layer4?.layer5?.layer6?.layer7?.layer8?.layer9?.data1
Короче говоря, вместо того, чтобы проверять достоверность каждого слоя вашего объекта с помощью оператора &&, вы вводите полный путь информации, которую ищете, и выделяете, какие слои могут быть неопределенными или нулевыми, используя ?. вместо обычной точки.
Оператор трубопровода | ›
Оператор конвейера помогает вам сделать несколько вызовов функций для одного и того же аргумента. Допустим, вы хотите написать строку с заглавной буквы, обрезать ее и напечатать дважды.
Вот как это можно сделать без оператора конвейера.
Const firstLetterToUpperCase= (input) => {
input[0].toUpperCase() + input.slice(1)
}
Const trimMyString = (input) => input.trim()
Const printStringTwice = (input) => `${input}, ${input}`;
Const withoutPipelineOperator =
printStringTwice(
firstLetterToUpperCase(
trimMyString(‘ javaScript‘’)
)
)
console.log(withoutPipelineOperator) // JavaScript, JavaScript
Это вообще читабельно ?!
Теперь давайте кратко рассмотрим оператора конвейера и то, как это можно сделать проще.
Const withPipelineOperator =’ pipeline’
|>trimMyString
|>firstLetterToUpperCase
|>printStringTwice
console.log(withPipelineOperator) // Pipeline, Pipeline
Мы все можем согласиться с тем, что последнее легче читать и понимать, не так ли?
Object.fromEntries
Прежде чем мы поговорим об Object.fromEntries, важно поговорить о его старшем брате Object.entries. Последний преобразует объект в его эквивалент массива, поэтому вы можете применять к своему объекту методы, специфичные для массива.
Const object = { number1: 1, number2: 10, number3: 20, number4: 30 }
Const objectEntries = Object.entries(object)
// [
[ “number1”, ‘1 ],
[ “number2”, 10 ],
[ “number3”, 20 ],
[ “number4”, 30 ]
]
Const biggerThan15 = objectEntries.filter(([ name, value ]) => { value > 15})
console.log(biggerThan15)
// [
[ “number3”, 20 ],
[ “number4”, 30 ]
]
Но что произойдет, если вы манипулируете полученным массивом, но хотите превратить его обратно в объект, как вы можете это сделать?
Старомодным способом:
const objWithValuesBiggerThan15 = {};
for (let [number, value] of biggerThan15) {
expDevsObj[number] = value;
}
console.log(objWithValuesBiggerThan15)
// {
number3: 20,
number4: 30
}
Способ Object.fromEntries:
Const objWithValuesBiggerThan15 = Object.fromEntries(biggerThan15)
console.log(objWithValuesBiggerThan15)
// {
number3: 20,
number4: 30
}
Flat () метод
Довольно часто информация, которой мы манипулируем, имеет очень сложную структуру. Например, вы можете получить массив, состоящий из строк и массивов, которые также могут иметь другие вложенные массивы или строки. Как сделать их более плоскими, более удобными для переваривания?
Const basicArray = [ [1, 2, 3], ‘4’, [ 5, 6, 7] ]; Const flatBasicArrays = basicArray.flat(); console.log(flatBasicArrays) // [ 1, 2, 3, 4, 5, 6, 7 ]
Более того, вы даже можете указать методу flat (), сколько слоев вы хотите сгладить.
Const intricateArray = [ [1, [2, 3] ], [ [ 4 ], [ 5, 6 ] ] Const flatIntricateArray = intricateArray.flat(2) console.log(flatIntricateArray) // [ 1, 2, 3, 4, 5, 6 ]
Как видите, кошмар с бурением массивов наконец-то закончился. Вместо того, чтобы писать 100 строк кода, вы просто используете метод flat (), который можно использовать для детализации многослойных массивов и преобразования их в простые массивы.
flatMap () метод
Вы думали, что метод flat () - это круто, а как насчет метода flatMap ()? Название его довольно интуитивно понятно. По сути, то, что он делает, может сглаживать вложенный массив, которым вы должны манипулировать, а затем отображать его.
Он сочетает в себе метод map () и метод flat () с глубиной 1.
array.map().flat() === array.flatMap() Const array = [ [ 1, 2 ], [ 3, 4 ] ] Const manipulatedArray = array.flatMap(element => element >= 2) console.log(manipulatedArray) // [ 2, 3, 4 ]
Уже чувствуете себя Наполеоном? Теперь вы можете делать сразу несколько вещей! Вы можете как сглаживать, так и отображать массив, используя один метод.
Поля частного экземпляра
Вы когда-нибудь слышали о полях частного экземпляра? Обычно они объявляются с использованием # перед их именем, например.
#onePrivateInstanceField = 20;
Эти поля экземпляра обеспечивают инкапсуляцию класса. Вместо того, чтобы иметь класс со всей его информацией на виду, вы можете использовать поля частного экземпляра, чтобы инкапсулировать и скрыть информацию, которую вы хотите.
class withoutPrivateInstanceFields {
publicField;
constructor() {
this.publicField = 20
}
Const classInstance = New withoutPrivateInstanceFields();
console.log(classInstance.publicField) // 20
Это класс без полей частного экземпляра. Как видите, информация внутри него доступна извне. Теперь давайте взглянем на класс с частным полем экземпляра.
class withPrivateInstanceFields {
#publicField;
constructor() {
this.publicField = 20
}
Const classWithPrivateInstance = New withPrivateInstanceFields();
console.log(classInstance.publicField)
// error - private property cannot be modified outside class
Как видите, используя поля частного экземпляра, вы можете легко инкапсулировать свою информацию, делая ее недоступной за пределами области действия.
Заключение
Эти методы могут помочь вам достичь определенных свойств объекта, сгладить массивы, сопоставить сглаженные массивы, преобразовать массивы в объекты и инкапсулировать информацию внутри вашего класса.
Они помогут вам управлять многослойными данными, сделают их более доступными и простыми в работе.
