teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問javascript のオブジェクトをmap()する方法(各要素に式を適用して変換する方法)はないのですか？

編集履歴

回答編集履歴

3

回答をinput要素を前提としたものに修正

2018/04/02 02:47

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -1,18 +1,26 @@
1
- こういうことですかね？
1
+ `input`要素を前提とした内容に修正
2
+
3
+
4
+
5
+ ---
6
+
7
+ `Object.entries`と`Array.reduce`の組み合わせが一番近いかな？
2
8
 
3
9
 
4
10
 
5
11
  ```HTML
6
12
 
7
- <div name="item_id" data-default-value="id"></div>
13
+ <input name="item_id" value="id"/>
8
14
 
9
- <div name="item_name" data-default-value="name"></div>
15
+ <input name="item_name" value="name"/>
10
16
 
11
- <div name="catch_copy" data-default-value="copy"></div>
17
+ <input name="catch_copy" value="copy"/>
12
18
 
13
- <div name="price" data-default-value="price"></div>
19
+ <input name="price" value="price"/>
14
20
 
15
21
  ```
22
+
23
+
16
24
 
17
25
  ```JavaScript
18
26
 
@@ -32,47 +40,27 @@
32
40
 
33
41
  };
34
42
 
43
+
44
+
45
+ /*
46
+
35
47
  const obj = {};
36
48
 
37
49
  Object.entries(map).forEach(
38
50
 
39
51
  ([key, val]) =>
40
52
 
41
- obj[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue
53
+ obj[key] = (document.querySelector(val) || {}).defaultValue
42
54
 
43
55
  );
44
56
 
45
- console.log(JSON.stringify(obj));
46
-
47
- }
48
-
49
- ```
50
-
51
- `Object.entries`と`Array.reduce`の組み合わせが一番近いかな？
52
-
53
- ```JavaScript
57
+ */
54
-
55
- "use strict";
56
-
57
- {
58
-
59
- const map = {
60
-
61
- "id": "[name='item_id']",
62
-
63
- "name": "[name='item_name']",
64
-
65
- "catch_copy": "[name='catch_copy']",
66
-
67
- "price": "[name='price']"
68
-
69
- };
70
58
 
71
59
  const obj = Object.entries(map).reduce(
72
60
 
73
61
  (prev, [key, val]) =>
74
62
 
75
- (prev[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue, prev)
63
+ (prev[key] = (document.querySelector(val) || {}).defaultValue, prev)
76
64
 
77
65
  , {}
78
66
 
@@ -91,9 +79,3 @@
91
79
 
92
80
 
93
81
  ぶっちゃけ`for-in`構文でぶん回すほうがよほど判りやすいと思いますが
94
-
95
-
96
-
97
- NOTE:
98
-
99
- DOMに`defaultValue`というAPIありましたっけ？

2

リンクを追加

2018/04/02 02:47

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -84,6 +84,14 @@
84
84
 
85
85
  ```
86
86
 
87
+ [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
88
+
89
+ [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
90
+
91
+
92
+
93
+ ぶっちゃけ`for-in`構文でぶん回すほうがよほど判りやすいと思いますが
94
+
87
95
 
88
96
 
89
97
  NOTE:

1

Array.reduceを使った例を追加

2018/04/01 07:49

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -48,6 +48,42 @@
48
48
 
49
49
  ```
50
50
 
51
+ `Object.entries`と`Array.reduce`の組み合わせが一番近いかな？
52
+
53
+ ```JavaScript
54
+
55
+ "use strict";
56
+
57
+ {
58
+
59
+ const map = {
60
+
61
+ "id": "[name='item_id']",
62
+
63
+ "name": "[name='item_name']",
64
+
65
+ "catch_copy": "[name='catch_copy']",
66
+
67
+ "price": "[name='price']"
68
+
69
+ };
70
+
71
+ const obj = Object.entries(map).reduce(
72
+
73
+ (prev, [key, val]) =>
74
+
75
+ (prev[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue, prev)
76
+
77
+ , {}
78
+
79
+ );
80
+
81
+ console.log(JSON.stringify(obj));
82
+
83
+ }
84
+
85
+ ```
86
+
51
87
 
52
88
 
53
89
  NOTE: