Массив Object.keys () с одним элементом, который рассматривается как строка?

Question

Какая магия в том, что когда вы Object.keys () для объекта только с одним ключом, он будет обрабатываться как строка, когда вы будете ссылаться позже, используя квадратные скобки?

См., Например, ниже:

let chosenProducts = [
  {
    toys: 20
  }  
];

let toys = "toys";

chosenProducts.forEach(product => {
  let name = Object.keys(product);

  console.log(Array.isArray(name)); // true
  console.log(name) // ['toys']
  console.log(toys) // "toys" - string
  console.log(product[name]); // 20 - array used = wtf?
  console.log(product[toys]); // 20 - string used

});

Answer 1

Object.keys возвращает массив.

У всех объектов есть метод toString.

Если вы используете объект в строковом контексте, toString вызывается неявно.

Обозначение средства доступа к свойству в квадратных скобках, по сути, является строковым контекстом (если вы не передаете символ)

Метод toString по умолчанию для массива выглядит примерно так: function () { return this.join(","); }

const example1 = ["foo", "bar"];
console.log("" + example1);

const example2 = ["baz"];
console.log("" + example2);

Answer 2

Object.keys возвращает массив ключей. Ваша переменная name является массивом с одним элементом ['toys']. Когда вы обращаетесь к product[name], происходит неявное приведение массива имен к строке, что приводит к product["toys"]

. В javascript есть два типа приведения неявное и явное приведение

Когда вы обращаетесь к свойствам объекта, они будут строковыми, в случае массива они будут индексами (числами), но массив также является объектом, когда вы добавляете любое свойство в массивон может выступать в качестве свойства объекта (строки) и не будет учитываться по длине массива.

let arr = [1,3];
arr.val = 20;
console.log(arr.length); // 2

В вашем примере вы обращаетесь к свойству объекта product[name] здесь name - это массив. Здесь произойдет неявное приведение массива к строке . Javascript автоматически вызовет метод toString для вашего объекта, который в данном случае является массивом. Для Array существует метод toString, связанный с их прототипом Array.prototype.toString . Вы можете изменить это, если хотите получить другой результат.

Проще говоря, когда вы пытаетесь получить доступ к переменной в if, условное выражение javascript автоматически приводит к значению Boolean.

let a = 10;
if(a){
    console.log("implicit coercion");
}

if(Boolean(a)){
    console.log("explicit coercion");
}

Чтобы узнать больше о грамматике и типах Javascript.