js,jqueryの連想配列に関して

Question

jsの連想配列にname属性値をkeyとして使用したいです。

<input ・・・ id='ff' name='001ff'>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
var shu = $('#ff').val();
var shN = $('#ff').attr('name');
data: {
      shN: shu
}

今の感じだとkey値がうまく入らず、
直書きかなぁとか思ってます。

やり方ご存知の方いらしたら、
ご教示賜れれば幸いです。

Comments

[kei344]

「直書き」とはどのようなものを指しているか、追記いただけませんか？

[turbgraphics200]

連想配列にしたものはどのように使用されるのでしょうか。

Answer 1

//伝統的な方法
data = {};
data[shN] = shu;

//ES6で追加された方法
data = {
  [snN]: shu
};

【参考】
ECMAScript 6 compatibility table
http://kangax.github.io/compat-table/es6/#test-object_literal_extensions

Answer 2

jsの連想配列にname属性値をkeyとして使用したい

.serializeArray() で取得してそれを連想配列にするものを書いてみました。

<form id="form" method="post">
    <label><input type="checkbox" name="check[]" checked value="1" />check1</label>
     <label><input type="checkbox" name="check[]" checked value="2" />check2</label>
     <label><input type="checkbox" name="check[]" value="3" />check3</label>
    
    <select id="select" name="select">
    <option value="1">select1</option>
    <option value="2">select2</option>
    </select>
    
    <input type="submit" name="submit" value="send" />
</form>
<button>ぼたん</button>

$( _=> {
	$( 'button' ).on( 'click', e => {
		const items = $( 'form' ).serializeArray();
		console.log( items );
		const names = items.reduce( ( pre, cur ) =>  {
			if ( cur.name in pre ) {
				if ( !Array.isArray( pre[ cur.name ] ) ) {
					pre[ cur.name ] = [ pre[ cur.name ] ];
				}
				pre[ cur.name ].push( cur.value );
			} else {
				pre[ cur.name ] = cur.value;
			}
			return pre;
		}, {} );
		console.log( names );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/c4wsjxpw/](https://jsfiddle.net/c4wsjxpw/)

---

【.serializeArray() | jQuery API Documentation】
[https://api.jquery.com/serializeArray/#serializeArray](https://api.jquery.com/serializeArray/#serializeArray)

【Array.prototype.reduce() - JavaScript | MDN】
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

【配列、連想配列（ハッシュ）のキーの存在を確認 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
[http://shanabrian.com/web/javascript/array-key-exists.php](http://shanabrian.com/web/javascript/array-key-exists.php)

【JavaScript で配列を判定する正しいやり方 - Qiita】
[http://qiita.com/38kun/items/8b1b91e998ef890e868c](http://qiita.com/38kun/items/8b1b91e998ef890e868c)