【问题标题】:Alternative version for Object.values()Object.values() 的替代版本
【发布时间】:2017-08-07 09:38:39
【问题描述】:

我正在寻找 Object.values() 函数的替代版本。
described here,Internet Explorer 不支持该功能。

执行以下示例代码时:

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

它适用于 Firefox 和 Chrome,但在 IE11 中会引发以下错误:

对象不支持属性或方法“值”

你可以在这里测试它:Fiddle

那么,什么是快速解决方案?

【问题讨论】:

    标签: javascript internet-explorer browser ecmascript-6


    【解决方案1】:

    您可以使用Object.keys() 获取键数组,然后使用map() 获取值。

    var obj = { foo: 'bar', baz: 42 };
    var values = Object.keys(obj).map(function(e) {
      return obj[e]
    })
    
    console.log(values)

    在 ES6 中,您可以使用箭头函数将其写在一行中。

    var values = Object.keys(obj).map(e => obj[e])
    

    【讨论】:

    • 谢谢!对于我的 Angular 5 代码,我将 objectValues = Object.values; 更改为 objectValues = ((obj) => { return Object.keys(obj).map(e => obj[e]); });
    • @Jeff 你为什么不看看 angular polyfills?
    • angular8 polyfill.ts: import 'core-js/es/object/values';
    【解决方案2】:

    Object.values() 是 ES8(2017 年 6 月)规范的一部分。使用 Cordova,我意识到 Android 5.0 Webview 不支持它。因此,我做了以下操作,仅在不支持该功能时才创建 polyfill 函数:

    if (!Object.values) Object.values = o=>Object.keys(o).map(k=>o[k]);
    

    【讨论】:

    • 您需要更改答案才能使用长手功能。 IE 不支持箭头函数,因为它不支持 Object.values。问题提到了对 IE 的需求,许多公司仍在使用它(遗憾的是)。我还是要支持的。 ☹
    【解决方案3】:

    由于 Object 是(不是)最近的实现,如果您想支持所有浏览器(AKA IE11 及以下),那么您需要创建自己的函数:

    function objectValues(obj) {
        var res = [];
        for (var i in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, i)) {
                res.push(obj[i]);
            }
        }
        return res;
    }
    

    PS:刚刚注意到ecmascript-6 标签。顺便说一句,我把这个答案放在这里,以防有人需要。

    【讨论】:

    • IE11 也不支持 Object.values
    • @dewd 原来如此
    【解决方案4】:

    如果您已经在使用core-js(例如通过使用 Angular),您只需导入相应的 polyfill:

       import 'core-js/es7/object';
    

    【讨论】:

    • 根据您使用的 Angular 版本,您可能需要更改导入:import 'core-js/es/object';
    【解决方案5】:

    你可以使用 polyfill:

    const valuesPolyfill = function values (object) {
      return Object.keys(object).map(key => object[key]);
    };
    
    const values = Object.values || valuesPolyfill;
    
    console.log(values({ a: 1, b: 2, c: 3 }));

    【讨论】:

      【解决方案6】:

      对于使用UnderscoreJS的人,可以使用_.values获取对象值:

      var obj = { foo: 'bar', baz: 42 };
      console.log(_.values(obj)); // ['bar', 42]
      

      【讨论】:

        【解决方案7】:

        var x = {Name: 'John', Age: 30, City: 'Bangalore'};
         
        Object.prototype.values = function(obj) {
                                        var res = [];
            for (var i in obj) {
                if (obj.hasOwnProperty(i)) {
                    res.push(obj[i]);
                }
            }
            return res;
        };
         
        document.getElementById("tag").innerHTML = Object.values(x)
        <p id="tag"></p>

        【讨论】:

        • 这不是原型方法。
        【解决方案8】:

        我知道这是一个老话题。我在玩arround,只想添加另一个实现。 它只是地图本身的地图版本,使用 reduce 实现:

        let obj = { foo: 'bar', baz: 42 };
        
        const valueArray = Object.keys(obj).reduce((acc, key) => {
          acc.push(obj[key]);
          return acc;
        }, []);
        
        console.log(valueArray);

        它完成了这项工作,但它有一些让我烦恼的东西。 reducer 函数使用 obj 并且 obj 没有在其中注入。我们应该避免在函数内部使用全局变量,让我们的函数更可测试。所以我更喜欢这个带有 reducer function helper 的版本,它将 obj 作为参数并返回 actual reducer function 。它变成:

        let obj = { foo: 'bar', baz: 42 };
        
        // reducer function helper take obj and return the actual reducer function
        let reducerFuncHelper= obj => (acc, key) => {
          acc.push(obj[key]);
          return acc;
        }
        //much better
        const valueArray = Object.keys(obj).reduce(reducerFuncHelper(obj), []);
        console.log(valueArray);

        【讨论】:

          【解决方案9】:

          因为我没有找到满足我需求的答案:

          var obj = { foo: 'bar', baz: 42 };
          
          
          console.log(obj[Object.keys(obj)[0]]) // bar
          
          console.log(obj[Object.keys(obj)[1]])  // 42

          使用对象的可能性来按字面量对它们进行寻址。

          【讨论】:

          • 不是回答我的朋友
          • @fluidguid:感谢您的评论,这是我的第一个答案,我必须学习。为什么?我认为问题是在 IE 中获取对象的值。所以,我有一个简单的“for”。怎么了?
          • @fluidguid 这是一个答案。使用 object.keys 的原理是有效的。如果您认为它不够好,例如使用循环,您可以提供一些有建设性的东西。
          • @dewd:感谢您的评论。
          【解决方案10】:

          您可以使用 Object.keys() 获取键数组。这也适用于 IE。 Object.values() 根本不需要获取值,因为我们可以使用从 Object.keys() 获得的键来获取值,如下所示:

          var obj = { foo: 'bar', baz: 42 };
          var keyArray = Object.keys(obj);
          for(var i = 0; i < keyArray.length; i++)
              console.log(obj[keyArray[i]]); 
          

          【讨论】:

          • 你真的相信这是解决 Object.values 的好方法????
          • @boatcoder 有什么问题? IE 支持 Object.keys。 Object.values 不是。该问题表明对 IE 兼容性的要求。这非常有效。
          【解决方案11】:

          最好的办法是用 ramda 的 values 方法替换它:

          import * as R from 'ramda';
          
          const obj = { foo: 'bar', test: 10 };
          
          console.log(R.values(obj)) // ['bar', 10]

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2011-04-12
            • 1970-01-01
            • 2014-05-04
            • 1970-01-01
            • 1970-01-01
            • 2020-03-31
            • 1970-01-01
            • 2016-02-23
            相关资源
            最近更新 更多