Исходный адрес: Пять функций ES6, которые сделают вашу жизнь проще
Все мы знаем, что изучение новой грамматики — это странное занятие. Большинство из нас выбирает самый минимум, необходимый для продуктивной работы, а затем время от времени, наблюдая за кодом друга/коллеги/наставника, мы время от времени находим что-то, что заставляет нас задаться вопросом: как бы мы выжили без них?
Вот список из 5 таких маленьких способов, которые могут немного ускорить вашу кодинговую жизнь.
Как всегда, пожалуйста, рекомендуйте и делитесь, если эта статья была вам полезна!
Текст шаблона с тегами
Шаблон текста! Действительно здорово. Мы больше не будем делать это ....
const concatenatedString = "I am the " + number + "person to recommend this article."
Однако, когда мы используем следующее, чтобы сделать это таким образом:
const concatenatedString = `I am the ${number} person to recommend this article.`
Разве это не здорово!
Литералы шаблонов с тегами позволяют нам сделать шаг вперед и вызывать функции со строками.
Давайте посмотрим на следующий пример⬇:
const consoleLogAstring = (string) => {
console.log(string)
}
consoleLogAstring`I am the string to be logged!`
// I am the string to be logged!
Другой способ, см. это ⬇:
consoleLogAstring('Here is the string!')
// Here is the string!
...и то же самое пишется следующим образом ⬇:
consoleLogAstring`Here is the string!`
Токенизированные литералы шаблонов имеют дополнительное преимущество: целевой функции передается массив аргументов, сгенерированный из строк. Параметры расположены следующим образом: сначала массив строк окружает интерполированные значения, затем каждое интерполированное значение.
Давайте посмотрим на пример:
function logOutValues(strings, value1, value2) {
console.log(strings, value1, value2)
}
logOutValues`Here is one value: ${1} and two: ${2}. Wow!`
// ["Here is one value: ", " and two: ", ". Wow!"] 1 2
Вы можете сделать это для любого количества интерполированных значений или даже манипулировать такими строками ⬇:
const person = {
name: "Scott",
age: 25
}
function experience(strings, name, age) {
const str0 = strings[0]; // "that "
const str1 = strings[1]; // " is a "
let ageStr = 'youngster';
if (age > 99){
ageStr = 'centenarian';
}
return str0 + name + str1 + ageStr;
}
const output = experience`that ${ person.name } is a ${ person.age }`;
console.log(output);
// that Scott is a youngster
(Благодарим Вас за отправку исправленного варианта.Пояснения к этому разделу. ) Эта функция также позволяет встраивать DSL с помощью управляющих последовательностей (Подробнее здесь)
Это работает? Вызов функции со строкой намного чище. Это упрощает интерполяцию и создание новых строк из интерполированных строк. Например, посмотрите библиотеку Styled Components React.styled-components
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
<Title>Hello World, this is my first styled component!</Title>
Неявный оператор возврата
Сколько раз вы писали функцию, которая возвращает значение?
const addOne = (num) => {
return num + 1
}
console.log(addOne(1))
// 2
A: Почти каждый раз, когда я пишу это, я делаю это так, что тратит впустую так много времени.
Замените эти фигурные скобки обычными скобками и воспользуйтесь преимуществами неявного возврата:
const addOne = (num) => （
num + 1
）
console.log(addOne(1))
// 2
Дальше идем дальше!
const addOne = num => num + 1
console.log(addOne(1))
// 2
Это работает?
Меньше кода, лучше читабельность. Вам даже может быть предложено написать меньшие функции, чтобы избежать написания нескольких строк кода, и код будет казаться чище и чище.
Деструктуризация параметров для параметров по умолчанию
const person = { name: 'Scott', attractiveness: 8.5 }
const consoleLogAttributes = ({ name, attractiveness }) => {
console.log(name, attractiveness)
}
consoleLogAttributes(person)
// 'Scott', 8.5
Не слишком ли это было бы полезно, но что, если мы вызовем вышеуказанную функцию без аргументов?
consoleLogAttributes()
// TypeError: Cannot match against 'undefined' or 'null'.
Сохраним эту ошибку, задав параметр по умолчанию пустого объекта:
const consoleLogAttributes = ({ name, attractiveness } = {}) => {
console.log(name, attractiveness)
}
Теперь давайте снова запустим вышеуказанную программу:
consoleLogAttributes()
// undefined undefined
Если вызывается без параметровconsoleLogAttributes, ошибок больше не будет! Почему бы нам не пойти дальше и не посмотреть на следующий код:
const consoleLogAttributes = ({
name = 'Default name',
attractiveness = '10'
} = {}) => {
console.log(name, attractiveness)
}
Значения по умолчанию есть везде, а это значит, что следующие два метода дадут одинаковый результат:
consoleLogAttributes()
// 'Default name', 10
consoleLogAttributes({})
// 'Default name', 10
Это работает?
Ваши функции будут более устойчивыми, поскольку они могут поддерживать передачу неопределенных параметров.
Недостатком является визуальный беспорядок в объявлении функции выше, но в большинстве случаев это небольшая цена за более изящный запасной вариант.
сокращение значения свойства (включая функции)
Вернемся к тому, что вышеpersonобъект. Вот распространенный шаблон:
У вас есть переменная (например, имя), и вы хотите дать ей имяnameизkeyУстановить какnameценность .
const name = "Scott"
const person = { name: name }
// { name: "Scott" }
Благодаря ES6 вы можете сделать это:
const name = "Scott"
const person = { name }
// { name: "Scott" }
При выполнении операций с несколькими значениями ⬇:
const name = "Scott"
const programmingAbility = "poor"
const person = { name, programmingAbility }
// { name: "Scott", programmingAbility: "poor" }
Им даже можно манипулировать с помощью функций ⬇:
const name = "Scott"
const sayName = function() { console.log(this.name) }
const person = { name, sayName }
// { name: “Scott”, sayName: function() { console.log(this.name) } }
И объявление функции выполняется в объявлении объекта:
const name = "Scott"
const person = { name, sayName() { console.log(this.name) } }
// { name: “Scott”, sayName: function() { console.log(this.name) } }
Это работает?
Пишите меньше кода, пишите более чистый код.
На этом интерпретация ES6 закончена. Спасибо, что нашли время прочитать эту статью, надеюсь, она вам поможет ~