Пусть у нас дан вот такой массив:
let arr = ['a', 'b', 'c'];
Выведем на экран элемент с ключом 0:
let arr = ['a', 'b', 'c'];
console.log(arr[0]); // выведет 'a'
Давайте теперь ключ выводимого элемента не будем писать непосредственно в квадратных скобках, а запишем его в переменную:
let arr = ['a', 'b', 'c'];
let key = 0; // запишем ключ в переменную
Используем теперь нашу переменную для вывода соответствующего элемента:
let arr = ['a', 'b', 'c'];
let key = 0; // запишем ключ в переменную
console.log(arr[key]); // выведет 'a'
Дан следующий массив:
let arr = ['a', 'b', 'c'];
Дана также переменная:
let key = 2;
Выведите на экран элемент, ключ которого
хранится в переменной key.
Дан следующий массив:
let arr = [1, 2, 3, 4, 5];
Даны также переменные:
let key1 = 1;
let key2 = 2;
Найдите сумму элементов, ключи которых хранятся в наших переменных.
Ключи объектов
Ключи объектов также могут хранится в переменных, смотрите пример:
let obj = {key1: 'a', key2: 'b', key3: 'c'};
let key = 'key1'; // записываем ключ в переменную
console.log(obj[key]); // выведет 'a'
Дан следующий объект:
let obj = {'a': 1, 'b': 2, 'c': 3};
Дана переменная key, в которой хранится
один из ключей нашего объекта. Выведите с
помощью переменной key соответствующий
элемент объекта.
Нюансы объектов
Ключи из переменных в объектах имеют некоторые
нюансы. Давайте изучим их вот на таком объекте,
в котором для простоты будет только один
элемент с ключом key:
let obj = {key: '!!!'};
Давайте выведем элемент объекта, обратившись к нему по ключу. Для этого мы в квадратных скобках пишем этот ключ в кавычках:
let obj = {key: '!!!'};
console.log(obj['key']); // выведет '!!!'
Пусть теперь название нашего ключа хранится
в переменной key:
let obj = {key: '!!!'};
let key = 'key'; // храним название в переменной
Теперь, если мы хотим получить элемент, ключ
которого хранится в этой переменной, то в
квадратных скобках мы должны написать слово
key уже без кавычек:
let obj = {key: '!!!'};
let key = 'key';
console.log(obj[key]); // выведет '!!!'
То есть: при обращении к элементу по имени ключа мы должны это имя взять в кавычки, так как это строка. А при обращении по ключу, хранящемуся в переменной, кавычки будут лишними - так как переменные не нужно брать в кавычки.
Описанный нюанс часто является источником ошибок. Давайте посмотрим на примере, как возникают эти ошибки. Пусть дан вот такой объект:
let obj = {text: '!!!'};
Пусть мы хотели обратиться к элементу с ключом
text, но забыли кавычки. В этом случае
JavaScript будет искать переменную text,
не найдет ее и выдаст ошибку:
let obj = {text: '!!!'};
console.log(obj[text]); // выдаст ошибку, так как переменной text нет
Еще хуже будет, если случайно совпало так,
что переменная text у нас уже существует
(для совсем других целей). В этом случае
содержимое этой переменной и подставится
вместо ключа.
Пусть для примера в переменной text
лежит строка 'string'. Тогда JavaScript
будет искать элемент с ключом string
в нашем объекте, не найдет его и вернет undefined:
let text = 'string'; // переменная text с каким-то значением
let obj = {text: '!!!'};
console.log(obj[text]); // выведет undefined
А вот если так случайно окажется, что в нашем
объекте по чистой случайности окажется ключ
string - то на экран и выведется содержимое
элемента с этим ключом string, а не
с ключом text, как мы этого хотели:
let text = 'string'; // переменная text с каким-то значением
let obj = {text: '!!!', string: '???'};
console.log(obj[text]); // выведет '???' - содержимое элемента с ключом string
То есть наш код не будет выдавать ошибку в консоль, будет как-то работать, но делать не то, что мы хотели. Получим трудноуловимую ошибку и все потому, что мы забыли кавычки!
Нюансы альтернативного синтаксиса объектов
Пусть теперь у нас есть вот такой объект:
let obj = {text: '+++', key: '!!!'};
Давайте с помощью альтернативного синтаксиса
выведем элемент с ключом text:
let obj = {text: '+++', key: '!!!'};
console.log(obj.text); // выведет '+++'
Пусть теперь мы ключ text будем хранить
в переменной key:
let obj = {text: '+++', key: '!!!'};
let key = 'text'; // храним ключ в переменной
Давайте теперь выведем элемент, ключ которого
хранится в переменной key. Если мы
решим воспользоваться альтернативным синтаксисом
- нас ждет сюрприз: вместо содержимого элемента
с ключом text, мы увидим содержимое
элемента с ключом key:
let obj = {text: '+++', key: '!!!'};
let key = 'text';
console.log(obj.key); // выведет '!!!'
Почему так произошло? Потому что альтернативный синтаксис вообще не имеет кавычек, а это значит, что любой текст там трактуется как имя ключа. То есть туда принципиально нельзя вставить имя переменной - для этого нужно пользоваться синтаксисом с квадратными скобками.
Как вы уже поняли, я сделал в нашем объекте
ключ, совпадающий с именем переменной. Если
такого ключа не будет, то JavaScript будет
искать элемент с ключом key, не найдет
его и выведет undefined:
let obj = {text: '+++'};
let key = 'text';
console.log(obj.key); // выведет undefined
То есть наша переменная вообще никак не участвует в коде. Если ее убрать, то ничего и не поменяется:
let obj = {text: '+++'};
console.log(obj.key); // выведет undefined