以下はなぜ機能するのですか?
<something>.stop().animate(
{ 'top' : 10 }, 10
);
これが機能しないのに対して:
var thetop = 'top';
<something>.stop().animate(
{ thetop : 10 }, 10
);
さらに明確にするために、現時点では、CSSプロパティをアニメーション関数に変数として渡すことができません。
以下はなぜ機能するのですか?
<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
この新しい構文は、各メインストリームブラウザの最新バージョンで使用できます。
eval()
動的プロパティ名のオブジェクトリテラル内では機能せず、エラーが発生するだけです。それだけでなく、eval()
実際にはそのようなことには使用すべきではありません。正しいと間違った使用法の優れた記事がありますeval
:blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspxは
{[key] : "value"}
、キーがnullの場合はが{ null: "value"}
{}
ECMAScriptの2015あなたは今、ブラケット表記を持つオブジェクトの宣言で直接それを行うことができます:
var obj = {
[key]: value
}
where 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
プロパティ名 :
- IdentifierName
- 文字列リテラル
- 数値リテラル
[...]
プロダクションPropertyName:IdentifierNameは次のように評価されます。
- IdentifierNameと同じ文字シーケンスを含むString値を返します。
プロダクションPropertyName:StringLiteralは次のように評価されます。
- StringLiteralのSV [文字列値]を返します。
プロダクションPropertyName:NumericLiteralは次のように評価されます。
- nbrをNumericLiteralの値を形成した結果とします。
- ToString(nbr)を返します。
この意味は:
{ theTop : 10 }
とまったく同じです { 'theTop' : 10 }
PropertyName
theTop
でありIdentifierName
、それは、に変換される'theTop'
の文字列の値である文字列値、'theTop'
。
変数キーを使用してオブジェクト初期化子(リテラル)を作成することはできません。
唯一の3つのオプションは、IdentifierName
(文字列リテラルに展開)、、StringLiteral
およびNumericLiteral
(文字列に展開)です。
thetop
あるIdentifierName
ので、なぜそれが動作しませんか?その質問はまだオープンです。
{a:1}.a
、a
識別子のケースで変数値を明らかに展開しないからです。しかし、はい、さらに説明することはこの場合の改善です。
変数の前後に角括弧を追加すると、うまくいきます。これを試して
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));
与えられたコード:
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
。キーを変数の値にしたい場合は、thetop
角括弧を使用する必要がありますthetop
:
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);
私は信じることができない匿名の評価の矢印表記だけの使用を:これはまだ投稿されていません!
完全に非侵襲的で、名前空間を台無しにせず、たった1行です。
myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
デモ:
新しい{[myKey]: myValue}
構文をまだサポートしていない環境で有用です。Web Developer Consoleで検証しました— 2020-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
);
この方法でも、目的の出力を達成できます
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 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);
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
)
オブジェクトキーを変数名と同じにしたい場合は、ES 2015に簡単な方法があります 。ECMAScript2015の新しい表記法
var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10
次のように試すこともできます:
let array1 = [{
"description": "THURSDAY",
"count": "1",
"date": "2019-12-05"
},
{
"description": "WEDNESDAY",
"count": "0",
"date": "2019-12-04"
}]
let res = array1.map((value, index) => {
return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);