javascriptのObject.valuesをie11で使えるようにしたい（対応しているpolyfillが知りたい）

前提・実現したいこと

javascriptの「Object.values」大変便利で活用させていただいております。
ie11に対応するため普段はwebpack環境でbabelをするのですが、
訳あってトランスパイルなし環境で実装しなくてはならない状況です、

出来ましたら書き上げたコードを変更したくないので
polyfillを付与させるだけで解決したいというのが願いです。

以下にソースを載せます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6</head>
7<body>
8	<div id="aaa">aaa</div>
9	<div id="bbb">bbb</div>
10	<div id="ccc">ccc</div>
11
12	<script>
13
14      slugs= {
15        osaka: { // 大阪
16          shop_id: 108,
17          content_code: "os",
18        },
19        yokohama: { // 横浜
20          shop_id: 101,
21          content_code: "windows",
22        },
23        sapporo: { // 札幌
24          shop_id: 97,
25          content_code: "windows",
26        },
27        nagoya: { // 名古屋
28          shop_id: 93,
29          content_code: "windows",
30        },
31        kagawa: { // 香川
32          shop_id: 113,
33          content_code: "os",
34        },
35      }
36
37	var valueFirst = Object.values(slugs)[0]
38    var keyFirst = Object.keys(slugs)[0]
39
40    //console.log(valueFirst)
41    //console.log(keyFirst)
42
43	document.getElementById("aaa").innerText = valueFirst.shop_id
44	document.getElementById("bbb").innerText = valueFirst.content_code
45	document.getElementById("ccc").innerText = keyFirst
46	</script>
47
48</body>
49</html>

お手数ではございますが、
ご教示いただけましたら幸いでございます。
よろしくお願いいたします。

行動規範の内容に同意します

回答5件

どちらも検索すると一番最初に出てきました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values

投稿2019/01/31 01:23

x_x

総合スコア13749

退会済みユーザー

2019/01/31 01:50

https://github.com/tc39/proposal-object-values-entries tc39のそれを参照してもいいかもしれませんね。

holic

2019/01/31 04:43

x_x様ご返信ありがとうございます。

行動規範の内容に同意します

ベストアンサー

IE11の場合、もとからObject.keysは利用可能です。それを使ってObject.valuesを作るのが手っ取り早いです。

javascript
1if(!Object.values) {
2  Object.values = function(obj) {
3    // 本来は、「オブジェクトでなかった場合」の処理が入るけど、簡易的なものなので省略
4    return Object.keys(obj).map(function(key) { return obj[key]; });
5  }
6}

投稿2019/01/31 02:35

maisumakun

総合スコア146851

maisumakun

2019/01/31 02:45

なお、（実用上困ることはほぼないかと思いますが）IE11のObject.keys()へオブジェクト以外を渡すとTypeErrorになるという、モダンブラウザとは違う挙動が起きます。 https://qiita.com/jkr_2255/items/7e501dff48bea16682e8

holic

2019/01/31 04:41

maisumakun様ご返信ありがとうございます、大変に勉強になりました。

行動規範の内容に同意します

オフラインでないのなら Polyfill.io を使うのが一番手っ取り早いかと思います。

Chrome などの Polyfill が必要ないブラウザでアクセスしたときには空ファイルを、IE11 などの Polyfill が必要なブラウザでアクセスしたときには Polyfill が書かれたファイルが読み込まれる仕組みになっています。

html
1<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.keys%2CObject.values"></script>

投稿2019/01/31 04:34

yhg

総合スコア2161

holic

2019/01/31 04:41

yhg様ご返信ありがとうございます、このような便利なサービスも有るのですね、ご参考にさせていただきます。

行動規範の内容に同意します

Object.keysはIE対応してますよね？
valuesについては無理やり書けばこんな感じでも行けそうです

javascript
1<script>
2if(!Object.prototype.values){
3  Object.prototype.values=function(x){
4    var ret=[];
5    for(var i in x){
6      if(i!=="values") ret.push(x[i]);
7    }
8    return ret;
9  };
10}
11var slugs= {
12osaka: { // 大阪
13shop_id: 108,
14content_code: "os",
15},
16yokohama: { // 横浜
17shop_id: 101,
18content_code: "windows",
19},
20sapporo: { // 札幌
21shop_id: 97,
22content_code: "windows",
23},
24nagoya: { // 名古屋
25shop_id: 93,
26content_code: "windows",
27},
28kagawa: { // 香川
29shop_id: 113,
30content_code: "os",
31},
32}
33var valueFirst = Object.values(slugs)[0];
34console.log(valueFirst);
35var keyFirst = Object.keys(slugs)[0];
36console.log(keyFirst);
37</script>

投稿2019/01/31 01:21

yambejp

総合スコア118164

maisumakun

2019/01/31 02:36

Object.prototype.valuesではなく、Object.values（Object経由でしか使えない）です。

miyabi-sun

2019/01/31 03:01

そういやプロトタイプメソッドじゃないですね。プロトタイプ拡張するならこっちの方が良さそうな気もしますが https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

yambejp

2019/01/31 03:17

たしかに・・・（汗）ご指摘ありがとうございました