Почему массивы / фигурные скобки используются в определениях литералов объектов для динамического вычисления ключей в Javascript / ES2015?

Question

Я встречал этот пример в документе MDN , например:

class Search1 {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}

Если я потяну вверх node и запусту только строку, включенную как часть литерала объекта, он не будет работать:

> Symbol.search
Symbol(Symbol.search)  
> [Symbol.search]
[ Symbol(Symbol.search) ]
> [Symbol.search]('somthing')
TypeError: [Symbol.search] is not a function

Я думаю, что я также видел этот синтаксис в нескольких других местах, например, например. в реагируют документы :

handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
}

Это просто использование деструктурирующего синтаксиса ? Это не похоже на это.

Answer 1

brackets используются, когда переменная имеет значение key, а не простая строка.

const obj = {
    "someId": 'abc',
};

const e = {
    target: {
        id: "someId"
    }
};

console.log(obj[e.target.id]);

Помимо вышеупомянутого, он также используется для доступа к ключам numeric (точно так же, как к массиву) и когда ключ равен computed.Смотри - https://javascript.info/object#square-brackets

Answer 2

спасибо за ответ @ randomSoul, за его заполнение можно сказать, что фигурные скобки также заставляют вас иметь строковый ключ с пробелами, как показано ниже:

const myOBJ = {
  'my key': 'my assigned String Value'
}

тогда вы можете вызвать эту пару ключ-значение с помощью этого синтаксиса скобок, например:

console.log(myOBJ['my key'])

это редко используется в javascript , но основная цель использования фигурных скобок для получения значения из литерала объекта заключается в получении динамически вычисляемых ключей объекта . так у вас есть объект, в котором каждый ключ представлен идентификатором пользователя. и исходя из того, что вы хотите принять решение получить конкретный идентификатор пользователя, который вы получили из своих параметров URL или где-то еще, вы сможете получить данные пользователя, как показано ниже:

console.log(lastFiveUserData[myUserId].age)

Answer 3

Оказывается, это только часть спецификации .

Это выглядит как деструктуризация массива, но это не так.

В случае [event.target.id] вы присваиваете значение, котороеevent.target.id указывает на ключ в объекте, переданном в setState().Если вы попытаетесь сделать это без скобок ([]), это не сработает, не так, как вы ожидаете.

В случае [Symbol.search](string) здесь вы используете символ Symbol.search (см. символы ) в качестве ключа, который динамически оценивается немедленно до его фактического, уникального значения.Динамическая оценка разрешена, потому что это значение становится ключом в определении литерала объекта.Значение, на которое указывает ключ, является определяемой здесь функцией, которая принимает string в качестве первого и единственного параметра и работает с этим.Это ловушка, позволяющая объекту определять, как он ведет себя при использовании в качестве параметра, в данном случае функции .search().Смотрите здесь .