teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

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

2018/04/02 02:47

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -1,11 +1,15 @@
1
- こういうこですかね?
1
+ `input`要素を前提した内容に修正
2
2
 
3
+ ---
4
+ `Object.entries`と`Array.reduce`の組み合わせが一番近いかな?
5
+
3
6
  ```HTML
4
- <div name="item_id" data-default-value="id"></div>
7
+ <input name="item_id" value="id"/>
5
- <div name="item_name" data-default-value="name"></div>
8
+ <input name="item_name" value="name"/>
6
- <div name="catch_copy" data-default-value="copy"></div>
9
+ <input name="catch_copy" value="copy"/>
7
- <div name="price" data-default-value="price"></div>
10
+ <input name="price" value="price"/>
8
11
  ```
12
+
9
13
  ```JavaScript
10
14
  "use strict";
11
15
  {
@@ -15,27 +19,17 @@
15
19
  "catch_copy": "[name='catch_copy']",
16
20
  "price": "[name='price']"
17
21
  };
22
+
23
+ /*
18
24
  const obj = {};
19
25
  Object.entries(map).forEach(
20
26
  ([key, val]) =>
21
- obj[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue
27
+ obj[key] = (document.querySelector(val) || {}).defaultValue
22
28
  );
23
- console.log(JSON.stringify(obj));
24
- }
25
- ```
26
- `Object.entries`と`Array.reduce`の組み合わせが一番近いかな?
27
- ```JavaScript
29
+ */
28
- "use strict";
29
- {
30
- const map = {
31
- "id": "[name='item_id']",
32
- "name": "[name='item_name']",
33
- "catch_copy": "[name='catch_copy']",
34
- "price": "[name='price']"
35
- };
36
30
  const obj = Object.entries(map).reduce(
37
31
  (prev, [key, val]) =>
38
- (prev[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue, prev)
32
+ (prev[key] = (document.querySelector(val) || {}).defaultValue, prev)
39
33
  , {}
40
34
  );
41
35
  console.log(JSON.stringify(obj));
@@ -44,7 +38,4 @@
44
38
  [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)
45
39
  [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)
46
40
 
47
- ぶっちゃけ`for-in`構文でぶん回すほうがよほど判りやすいと思いますが
41
+ ぶっちゃけ`for-in`構文でぶん回すほうがよほど判りやすいと思いますが
48
-
49
- NOTE:
50
- DOMに`defaultValue`というAPIありましたっけ?

2

リンクを追加

2018/04/02 02:47

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -41,6 +41,10 @@
41
41
  console.log(JSON.stringify(obj));
42
42
  }
43
43
  ```
44
+ [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)
45
+ [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)
44
46
 
47
+ ぶっちゃけ`for-in`構文でぶん回すほうがよほど判りやすいと思いますが
48
+
45
49
  NOTE:
46
50
  DOMに`defaultValue`というAPIありましたっけ?

1

Array.reduceを使った例を追加

2018/04/01 07:49

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -23,6 +23,24 @@
23
23
  console.log(JSON.stringify(obj));
24
24
  }
25
25
  ```
26
+ `Object.entries`と`Array.reduce`の組み合わせが一番近いかな?
27
+ ```JavaScript
28
+ "use strict";
29
+ {
30
+ const map = {
31
+ "id": "[name='item_id']",
32
+ "name": "[name='item_name']",
33
+ "catch_copy": "[name='catch_copy']",
34
+ "price": "[name='price']"
35
+ };
36
+ const obj = Object.entries(map).reduce(
37
+ (prev, [key, val]) =>
38
+ (prev[key] = (document.querySelector(val) || {dataset: {defaultValue: null}}).dataset.defaultValue, prev)
39
+ , {}
40
+ );
41
+ console.log(JSON.stringify(obj));
42
+ }
43
+ ```
26
44
 
27
45
  NOTE:
28
46
  DOMに`defaultValue`というAPIありましたっけ?