Автор оригинала: Thomas Findlay.
The Times, когда JavaScript использовался только для добавления немного взаимодействия на веб-сайте, давно пропал. Новые стандарты ECMASSPRICT теперь выпущены каждый год, принося все более полезные и мощные функции, и JavaScript больше используется только на переднем углу, так как можно также создать заднюю архитектуру, мобильную, настольную систему или IOT.
Это первая статья серии, которую я планирую создавать. Я хочу поделиться с вами несколькими функциями Ecmascript, которые я использую ежедневно, чтобы повысить эффективность моего развития, написать лучшее и легче чтение кода, а также почему я думаю, что они просто потрясающие. Я также объясню, как их можно использовать и какие проблемы они решают.
Пусть/const.
Поскольку я начал использовать «пусть» и «const», я никогда не использовал ключевое слово «var». «Давай» был введен в качестве замены для «var». Как «пусть», так и «Const» являются блокировкой, в то время как «var» – функция. То, что значит, что если мы, например, инициализируем «var» внутри контура для цикла, он также будет доступен за пределами этого.
var animals = ['chicken', 'duck', 'cow'];
for (var key in animals) {
var animal = animals[key];
}
console.log(animal); // cow
Как видите, мы объявили «животное» переменную внутри петли, но мы все еще можем получить доступ к ней за его пределами. Однако, если мы используем «let» вместо этого, мы получим опорную ошибку, что «животное» не определена.
const animals = ['chicken', 'duck', 'cow'];
for (var key in animals) {
let animal = animals[key];
}
console.log(animal); // Reference error
Вы можете спросить, почему мы даже беспокоимся и не используем «var» больше. Ну, в цикле нам может потребоваться декларировать переменные для хранения некоторых данных, которые необходимы только для этого цикла. Следовательно, нет необходимости в этих переменных быть доступным снаружи во внешнем объеме. Если вам нужно получить доступ к определенной переменной за пределами цикла для цикла, вы можете просто объявить переменную снаружи.
const animals = ['chicken', 'duck', 'cow'];
let animal
for (var key in animals) {
animal = animals[key];
}
console.log(animal); // cow
Также, возможно, вы заметили, что в этих примерах я также изменил «var rushies = []» для «Const insimations = []». Это полезно использовать «const», если назначенное значение не следует изменить в будущем. Итак, если вы объявите его с помощью «var», вы можете изменить его на строку, объект, номер и т. Д.
var animals = ['chicken', 'duck', 'cow'];
animals = {
animal1: 'cow',
animal2: 'chicken'
}
console.log(animals); // Object {animal1: "cow", animal2: "chicken"}
Однако, если вы назначаете значение «const» и попробуйте изменить его, вы получите ошибку.
const animals = ['chicken', 'duck', 'cow'];
animals = {
animal1: 'cow',
animal2: 'chicken'
}
console.log(animals); // SyntaxError: animals is read-only
Важно помнить, что даже если вы назначаете объект или массив на «Const», вы все равно можете изменить свои внутренние свойства и значения!
const animals = ['chicken', 'duck', 'cow']; animals[0] = 'pig'; console.log(animals); // ["pig", "duck", "cow"]
Очень интересная особенность «Пусть» – это то, что каждый раз, когда он объявлен, это создает новое свежее связывание для сферы объема. Представьте, что вам нужно впитывать какие-либо данные, и на каждой цикле вам нужно сделать вызов API, а затем использовать значение индекса из цикла в обратном вызове.
for (var i = 0; i < 5; i++) {
axios.get('https://swapi.co/api/people/1')
.then(resp => {
console.log(i); // 5
})
}
В этом случае Console.log всегда будет 5. Это потому, что «для цикла» не ждет вызова API для завершения, и когда первый ответ вернется, петля уже закончила. Вы также можете увидеть, что на изображении ниже.
Одной из возможных исправлений для этого является создание замыкания для каждой петли, чтобы мы могли сохранить индекс цикла для каждого вызова API. Мы можем использовать немедленно вызываемое выражение функции (IIFE), к которому мы пройдем наш индекс. Это функция, которая позвонит себе и запустится немедленно.
К счастью, с «пусть» нам не нужно это делать. Мы просто можем объявить «I» в цикле с ключевым словом «Let» вместо «var», и это исправит это для нас.
Шаблонные литералы
Я до сих пор помню, когда мне пришлось создать динамичную разметку, мне пришлось писать много ненужных (но вернуться тогда, к сожалению необходимого) кода, который также вряд ли было читаемо. Просто посмотрите на это:
Вместо этого мы можем использовать шаблонные литералы для написания гораздо лучшего и более читаемого кода. То, что мы здесь делаем, называется струнной интерполяцией. Вместо одной или двойной цитаты мы используем BackTicks и внутри них, мы можем использовать знак доллара с кронштейнами $ {}, чтобы добавить значение из переменной в строку. Благодаря этому, наш код гораздо чище и проще прочитал, а также может охватывать несколько строк. Просто убедитесь, что не использовать его. Иногда это все еще хорошая идея просто сделать нормальное соединение строки с переменными.
let result = `${variable} / ${variable} / ${variable}`
let result = variable + ' / ' + variable + ' / ' + variable
Функции стрелки
Я использую функции arrow все время и, честно говоря, я использую нормальную декларацию функции только тогда, когда я должен. Есть несколько вещей о функциях стрелки, которые очень важны для запоминания. Первый из них – это тот факт, что функция стрелки по сравнению с нормальными функциями не имеет лексической области. Что значит, что «это» будет относиться к разным объектам в стрелке и нормальных функциях.
function Person (age) {
this.age = age
function getAge() {
console.log('age', this.age) //undefined
return this.age
}
return {
getAge
}
}
const Myke = new Person(25);
console.log(Myke.getAge()); // undefined
В этом случае, как мы можем видеть, пытаясь получить доступ к «возрасту» на «Это» приведет к ошибке, потому что «это» больше не ссылается на объект «Person», но для самой функции Getage. Раньше, как правило, мы должны были назначить «это» для переменной, такой как «var», а затем используйте его в обратных вызовах. Однако, если мы используем функцию стрелки, мы сможем получить доступ к свойству «возраста».
const getAge = () => {
console.log('age', this.age) // 25
return this.age
}
Конечно, я знаю, что мы могли бы просто присваивать дотушку как свойство непосредственно на объекте, а затем у нас будет доступ к «возрасту», но это было сделано только для демонстрационной цели. Функции стрелки особенно полезны для обратных вызовов и функций, таких как фильтр или карту, при попытке доступа к недвижимости с внешнего объема.
Кроме того, ключевое слово «это», «аргументы» также не являются обязательными, как они находятся в нормальной функции. Если мы используем нормальную функцию, мы можем получить доступ к аргументам.
function vegetables (name, colour) {
console.log(arguments); // Object {0: "carrot", 1: "orange"}
};
vegetables('carrot', 'orange');
Однако, когда мы пытаемся доступить в аргументы в функции стрелки, мы ничего не получим.
const vegetables = (name, colour) => {
console.log(arguments); // No object
};
vegetables('carrot', 'orange'); //
Еще одна особенность функций стрелки, которые мне очень нравится, это немедленное выражение возврата. Мы можем опускать функциональные кронштейны и немедленно вернуть значение:
const sum = (x, y) => x + y; console.log(sum(4, 5)); // 9
Кроме того, если нам нужно пройти только один параметр, то мы можем упасть на сайт:
const multiplyByTwo = num => num * 2; console.log(multiplyByTwo(2)); // 4
Однако, если мы хотим немедленно вернуть объект, мы не сможем сделать это так, как это, поскольку кронштейны, используемые для объекта, также функционируют кронштейны.
const getObj = obj => {prop1: obj.prop1, prop2: obj.prop2} // won't work
Что нам нужно сделать в этом случае, чтобы сделать его работать, – это обернуть брекеты объектов в скобках.
const getObj = obj => ({prop1: obj.prop1, prop2: obj.prop2}) // will work
Функции со стрелками имеют плюсы и минусы, но это одна из моих самых любимых функций и при использовании хорошо, ваш код может стать гораздо более четкой и легче понять.
Параметры по умолчанию
Обычно, если нам пришлось пройти параметр функции, а затем сделать что-то на основе на него, мы должны были добавить проверки, существует ли значение. Например, если бы нам пришлось пройти объект к функции, а затем мы попытались получить доступ к недвижимости на нем, если ничего не было передано, то у нас будет ошибка.
function doSomethingWithObject(object) { // nothing passed
if (object && typeof object === 'object') {
console.log(object.property) // will not fire as we check if object is truthy and is an object
}
console.log(object.property) // error!
}
doSomethingWithObject()
К счастью, теперь мы можем определить параметры по умолчанию, которые сохраняют как все борется с проверкой параметров.
function doSomethingWithObject(object = {}) {};
Мы также можем поставить больше значений по умолчанию или назначить строку, целое число или что-то еще, что нам нужно.
function doSomethingWithObject(object = {property: 'hello'}, text = 'world') {
console.log(object.property) // 'hello'
console.log(text) // 'world'
};
doSomethingWithObject();
Собственность сокращения
Собственность Shorthands – это функция, которую я действительно люблю использовать. Что это делает, так это то, что если вы хотите назначить переменную к свойству объекта, которое имеет одно и то же имя, то вместо этого выполнять:
let dinner = 'soup'
mealPlan = {
dinner: dinner
}
Вы можете сделать его короче, написав «ужин» только один раз.
mealPlan = {
dinner
}
Собственность сокращения очень полезны с деструктурией. Разрушивание связано с извлечением свойств массива или объекта. Например, в приведенном ниже примере мы разрушаем свойство свойств данных из результатов, возвращаемых Axios
axios.get('something').then(({data}) => {
console.log(data); //data property from response object
}
Причина.
“ Пусть hbueobject = {‘много свойств здесь’}
const honditaata = ({prop1, prop2, prop3, prop4}) => ({prop1, prop2, prop3: prop3? 1: 0, prop4})
You can also rename destructured properties:
const honditaata = ({prop1: name, prop2: фамилия}) {};
The above are just a few of EcmaScript features which I am using on a daily basis and I hope you will find them as useful as I do. I will continue on more features in the next articles of this series. I hope you enjoyed reading and I invite you all to share your thoughts and tips for a better development.