Извините за шквал собачек на изображении баннера. Я искал стоковое изображение на unsplash по запросу Мама называет щенков разного окраса. Я ищу самыми безвкусными способами 😃
Надеюсь, они скрасят и ваше время.
Недавно я обнаружил забавный синтаксис JS при просмотре пулреквеста от Sigo, коллеги. Я не использовал его ранее. Это выглядит так:
const dataFromAPI = 'age';
let existingObject = {
name: 'John',
[dataFromAPI]: 25
};
// Output {age: 25, name: "John"}
Удивительный!
Я искал переменные в ключах объектов и решил поделиться ими с вами.
Ключи и значения в объектах
В JavaScript ключи и значения объектов создаются различными способами либо в литералах объектов во время инициализации, либо присваиваются с использованием записи через точку или скобки.
// Creating an object literal with keys and values
let newObject = {
name: 'Jane',
age: 24
};
// Adding a new key - bracket notation
newObject["location"] = "Peru"
// Adding a new key - Dot notation
newObject.height = '1.95m'
// Output {age: 24, height: "1.95m", location: "peru", name: "Jane"}
Это довольно стандартные вещи. Для значений ключей мы можем назначать результаты сложных вычислительных операций в качестве значения. Для ключей мы можем сделать что-то подобное и даже запустить вычисление в ключе.
Ключи динамических объектов
Способ обработки динамических ключей в объектах до ES6 состоит в том, чтобы сделать что-то вроде:
let newObject = {
name: 'Jane',
age: 24
};
const newData = "location";
newObject[newData] = "Nicaragua"
// Output {age: "24", location: "Nicaragua", name: "Jane"}
Сокращенная форма, представленная в ES6 с использованием квадратных скобок, позволяет нам напрямую назначать переменную в литерале объекта следующим образом:
const newData = "location";
let newObject = {
name: 'Jane',
age: 24,
[newData]: "Nicaragua"
};
// Output {age: "24", location: "Nicaragua", name: "Jane"}
Хотя эта сокращенная форма предлагает более чистый код, этот сценарий применяется во многих случаях, когда существующие данные (объект) дополняются данными из другого источника с динамическим ключом.
Переходя к вычисляемым ключам, значение ключей объекта может быть вычислено непосредственно в литерале объекта, используя ту же нотацию квадратных скобок в литерале.
const newData = "lottery";
const didUserWin = true;
let newObject = {
name: 'Doug',
age: 42,
[newData + (didUserWin ? 'Winner': 'Loser')]: "Assign any value or data here"
};
// Output {age: "24", lotteryWinner: "Assign any value or data here", name: "Doug"}
На этом рисунке также показано использование условий в виде тернарных операторов.
Этот пост в основном предназначен для того, чтобы показать динамизм как ключей, так и значений объектов.
Дайте мне знать, если у вас есть какие-либо отзывы об этом.
Вот бы стать лучше 🥂
Уильям.
Эта статья изначально была опубликована на Hackmamba.