sourcecode

JavaScript 객체 리터럴에서 키에 대한 변수를 사용하는 방법은 무엇입니까?

copyscript 2022. 11. 17. 21:23
반응형

JavaScript 객체 리터럴에서 키에 대한 변수를 사용하는 방법은 무엇입니까?

다음 기능이 작동하는 이유는 무엇입니까?

<something>.stop().animate(
    { 'top' : 10 }, 10
);

이것은 동작하지 않습니다.

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

더 명확하게 하기 위해:현재 CSS 속성을 애니메이션 함수에 변수로 전달할 수 없습니다.

{ thetop : 10 }는 유효한 오브젝트 리터럴입니다.코드는 다음과 같은 속성을 가진 개체를 만듭니다.thetop값은 .10입니다.을 하다

obj = { thetop : 10 };
obj = { "thetop" : 10 };

ES5 이전 버전에서는 변수를 개체 리터럴 내의 속성 이름으로 사용할 수 없습니다.유일한 옵션은 다음을 수행하는 것입니다.

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);

ES6는 객체 리터럴 문법의 일부로 ComputedPropertyName을 정의합니다.이것에 의해, 다음과 같이 코드를 쓸 수 있습니다.

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

이 새로운 구문은 각 메인스트림브라우저의 최신 버전에서 사용할 수 있습니다.

ECMAScript 2015를 사용하면 대괄호 표기로 객체 선언에서 직접 수행할 수 있습니다.

var obj = {
  [key]: value
}

서 ★★★★★key는 값을 반환하는 모든 종류의 식(예: 변수)일 수 있습니다.

코드는 다음과 같습니다.

<something>.stop().animate({
  [thetop]: 10
}, 10)

서 ★★★★★thetop는 키로 사용하기 전에 평가됩니다.

ES5의 견적에 따르면 작동하지 않습니다.

주의: ES6 규칙이 변경되었습니다.https://stackoverflow.com/a/2274327/895245

사양: http://www.ecma-international.org/ecma-262/5.1/ #sec-11.1.5

속성명:

  • 식별자명
  • String Literal
  • 숫자 문자

[...]

PropertyName : IdentifierName은 다음과 같이 평가됩니다.

  1. IdentifierName과 동일한 문자 시퀀스를 포함하는 String 값을 반환합니다.

PropertyName : StringLiteral 운영은 다음과 같이 평가됩니다.

  1. StringLiteral의 SV [String value]를 반환합니다.

PropertyName : NumericLiteral 운영은 다음과 같이 평가됩니다.

  1. nbr을 NumericLiteral 값을 형성한 결과로 합니다.
  2. ToString(nbr)으로 돌아갑니다.

즉, 다음과 같습니다.

  • { theTop : 10 } 똑같다와 { 'theTop' : 10 }

    PropertyName theTop는 입니다.IdentifierName에, 「」, 「」로 'theTop' value. value : " " " "의 입니다.'theTop'.

  • 가변 키를 사용하여 개체 이니셜라이저(리터럴)를 쓸 수 없습니다.

    요.IdentifierName리터럴로 ), (문자열 리터럴로 변경),StringLiteral , , , , 입니다.NumericLiteral(어느 쪽이든)

ES6/2020

다른 소스의 "key:value"를 사용하여 데이터를 객체에 푸시하려는 경우 다음과 같이 사용할 수 있습니다.

let obj = {}
let key = "foo"
let value = "bar"

obj[`${key}`] = value

// A `console.log(obj)` would return:
// {foo: "bar}

// A `typeof obj` would return:
// "object"

이것이 누군가에게 도움이 되기를 바랍니다:)

다음을 사용하여 개체에 "동적" 이름의 속성을 추가했습니다.

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key는 새 속성의 이름입니다.

가 「」에 되었습니다.animate 되다{left: 20, width: 100, top: 10}

은 꼭 한 것을 하는 것입니다.[]다른 답변에서 권장하는 표기법이지만 코드 행이 적습니다.

변수 주위에 대괄호를 추가하는 것이 좋습니다.이거 드셔보세요

var thetop = 'top';
<something>.stop().animate(
    { [thetop] : 10 }, 10
);

ES6와 ES5의 차이점에 대한 간단한 예를 찾을 수 없어서 만들었습니다.두 코드 샘플 모두 정확히 동일한 개체를 생성합니다.그러나 ES5의 예는 오래된 브라우저(IE11 등)에서도 동작하지만 ES6의 예는 동작하지 않습니다.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

업데이트: 코멘트 작성자가 지적한 바와 같이 화살표 기능을 지원하는 자바스크립트 버전도 모두 지원됩니다.({[myKey]:myValue})따라서 이 답변에는 실제 사용 사례가 없습니다(실제로 이상한 코너 케이스에서 깨질 수 있습니다).

아래 나열된 방법을 사용하지 마십시오.

아직 게시되지 않았다니 믿을 수 없어요.익명의 평가와 함께 화살표 기능을 사용하세요!

완전히 비침습적이며 네임스페이스를 손상시키지 않으며 한 줄이면 됩니다.

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

데모:

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

새로운 기능을 지원하지 않는 환경에서 유용합니다.{[myKey]: myValue} Developer2020-01-08을 릴리스했습니다.Firefox 72.0.1을 참조해 주세요. 제가 정정합니다. 그냥 괄호로 감싸면 효과가 있습니다.

(좀 더할 수 등을 수 있을 reduce이 에서는 오브젝트 인라인으로 그 이 더 나을 것입니다

OP가 10년 전에 이 질문을 한 이후가 중요한 것은 아니지만, 완전성을 위해, 그리고 그것이 말한 바와 같이 질문에 대한 정확한 답이라는 것을 증명하기 위해, 저는 이것을 원래의 맥락에서 보여 드리겠습니다.

var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);

다음과 같이 시도할 수도 있습니다.

const arr = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
const res = arr.map(value => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);

지정된 코드:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

번역:

var thetop = 'top';
var config = { thetop : 10 }; // config.thetop = 10
<something>.stop().animate(config, 10);

바와 같이 '하다'는{ thetop : 10 }를 thetop 키와 thetop를 변수 thetopthetop:

var thetop = 'top';
var config = { [thetop] : 10 }; // config.top = 10
<something>.stop().animate(config, 10);

각 괄호 구문은 ES6에서 도입되었습니다.이전 버전의 JavaScript에서는 다음을 수행해야 합니다.

var thetop = 'top';
var config = (
  obj = {},
  obj['' + thetop] = 10,
  obj
); // config.top = 10
<something>.stop().animate(config, 10);

2020 업데이트/삭제...

좀 더 복잡한 예로 괄호와 리터럴을 사용하면...예를 들어 vue/supervos를 사용하여 수행해야 할 수 있습니다.리터럴을 괄호로 감싸서

[ ` ... ` ]

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}

키를 할당하기 위한 ES5의 실장은 다음과 같습니다.

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);

베어 오브젝트로 변환하기 위해 사용한 스니펫을 첨부했습니다.

var obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': {
    'key5': 'value5'
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

오브젝트 키를 변수 이름과 동일하게 하려면 ES 2015에 단축 키가 있습니다.ECMAScript 2015의 새로운 표기

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10

다음과 같이 할 수 있습니다.

var thetop = 'top';
<something>.stop().animate(
    new function() {this[thetop] = 10;}, 10
);

이 방법으로 원하는 출력을 얻을 수도 있습니다.

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

ES5의 경우 다음 작업을 수행할 수 있습니다.

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

또는 함수로 추출:

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

언급URL : https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal

반응형

'sourcecode' 카테고리의 다른 글

지정된 수의 요소로 목록을 잘라냅니다.  (0) 2022.11.26
volatile 키워드는 무엇에 도움이 됩니까?  (0) 2022.11.26
requests.requests에 max_retries를 설정할 수 있습니까?  (0) 2022.11.17
숫자 형식을 통화 문자열로 지정하는 방법  (0) 2022.11.17
SELECT를 사용할 때 MySQL BIT 필드 값을 볼 수 없습니다.  (0) 2022.11.17

'sourcecode'의 다른글

  • 현재글JavaScript 객체 리터럴에서 키에 대한 변수를 사용하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바