Пусть у нас дан вот такой массив:
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'};
Дана также переменная key со значением 2.
Выведите на экран элемент, ключ которого хранится в переменной key.
Дан следующий массив:
let arr = [1, 2, 3, 4, 5];
Дана также переменная key1 со значением 1 и переменная 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