Value: примеры (JAVASCRIPT)

Примеры использования

Работа со свойством .value у элементов DOM:

<input type='text' id='userInput' value='Привет'>
<script>
    let inputElem = document.getElementById('userInput');
    console.log(inputElem.value); // Получение значения
    inputElem.value = 'Новый текст'; // Установка значения
    console.log(inputElem.value);
</script>

'Привет'
'Новый текст'

Использование Object.values():

const user = { name: 'Анна', age: 28, city: 'Москва' };
const values = Object.values(user);
console.log(values);

['Анна', 28, 'Москва']

Похожие методы в JavaScript

• Object.keys(obj): Возвращает массив строк, представляющих все перечисляемые свойства объекта. Полезен, когда нужны ключи, а не значения.
• Object.entries(obj): Возвращает массив пар [ключ, значение] для перечисляемых свойств объекта. Удобен для преобразования объекта в Map или для итерации.
• .textContent и .innerHTML: Свойства для работы с содержимым узлов DOM, в отличие от .value, которое работает specifically с элементами форм.

Метод Object.values() предпочтителен, когда требуется только массив значений объекта для дальнейшей обработки, например, для вычисления суммы. Object.entries() чаще используют при необходимости работать одновременно с ключами и значениями.

Аналоги в других языках

Python (dict.values()):

user = {'name': 'Анна', 'age': 28}
values = list(user.values())
print(values)  # Результат: ['Анна', 28]

['Анна', 28]

PHP (array_values()):

$user = ['name' => 'Анна', 'age' => 28];
$values = array_values($user);
print_r($values); // Результат: Array ( [0] => Анна [1] => 28 )

Array
(
    [0] => Анна
    [1] => 28
)

MySQL: Прямого аналога нет, но значения выбираются через SELECT.

Ключевое отличие JavaScript-метода Object.values() от некоторых аналогов (как в PHP) в том, что он работает именно с объектами, а не с массивами, и возвращает только значения собственных перечисляемых свойств.

Типичные ошибки

1. Попытка использовать Object.values() на примитивах:

let result = Object.values(42);
console.log(result);

// TypeError: 42 is not an object

2. Ожидание, что порядок значений всегда соответствует порядку объявления свойств в литерале объекта. Спецификация гарантирует определенный порядок только для строковых ключей, являющихся индексами массива, и для строковых ключей, не являющихся индексами, а затем для символьных ключей.

3. Использование .value для элементов, которые его не поддерживают (например, для <div>):

<div id='myDiv'>Текст</div>
<script>
    let div = document.getElementById('myDiv');
    console.log(div.value); // undefined
</script>

undefined

Изменения в спецификации

Метод Object.values() был добавлен в стандарт ECMAScript 2017 (ES8). До его появления для получения массива значений использовали комбинацию Object.keys() и метода map():

const user = { name: 'Анна', age: 28 };
// Старый способ (до ES8)
const valuesOld = Object.keys(user).map(key => user[key]);
console.log(valuesOld);

['Анна', 28]

Свойство .value у элементов DOM существует с самых ранних версий JavaScript и не претерпевало значительных синтаксических изменений.

Расширенные примеры

1. Использование Object.values() для итерации по значениям:

const scores = { math: 95, physics: 88, chemistry: 92 };
const total = Object.values(scores).reduce((sum, val) => sum + val, 0);
console.log(total); // Сумма всех значений

275

2. Клонирование объекта через значения (неполное, только значения):

const original = { a: 1, b: 2 };
const clonedValues = Object.values(original);
console.log(clonedValues); // Это массив [1, 2], а не объект

[1, 2]

3. Получение значений из Map (Object.values не работает с Map, нужна предварительная конвертация):

const myMap = new Map([['name', 'Иван'], ['age', 30]]);
const valuesFromMap = Array.from(myMap.values());
console.log(valuesFromMap);

['Иван', 30]

4. Работа с формой и событием input:

<input type='range' id='slider' min='0' max='100'>
<output id='output'></output>
<script>
    slider.addEventListener('input', function() {
        output.value = this.value; // Динамическое обновление
    });
</script>

5. Object.values() возвращает только перечисляемые свойства, упуская унаследованные и неперечисляемые:

const obj = Object.create({ inheritedProp: 'не видно' });
obj.ownProp = 'видно';
Object.defineProperty(obj, 'nonEnum', {
    value: 'тоже не видно',
    enumerable: false
});
console.log(Object.values(obj));

['видно']