Object.keys()、Object.values()、Object.entries()用法总结

目录
  • Object.keys()
    • 一、官方解释
    • 二、语法
    • 三、处理对象,返回可枚举的属性数组
    • 四、处理数组,返回索引值数组
    • 五、处理字符串,返回索引值数组
    • 六、实用技巧
  • Object.values()
    • 一、返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值
    • 二、返回数组的成员顺序,与属性的遍历部分介绍的排列规则一致
    • 三、Object.values()只会遍历对象自身的可遍历属性
    • 四、Object.values会过滤属性名为 Symbol 值的属性
    • 五、如果参数不是对象,Object.values会先将其转为对象
  • Object.entries()
    • 一、Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组
    • 二、如果原对象的属性名是一个 Symbol 值,该属性会被省略
    • 三、遍历对象的属性
    • 四、将对象转为真正的Map结构
    • 五、实现Object.entries方法

Object.keys()

一、官方解释

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。

二、语法

Object.keys(obj)
参数:要返回其枚举自身属性的对象
返回值:一个表示给定对象的所有可枚举属性的字符串数组

三、处理对象,返回可枚举的属性数组

            let person={
                name:'一只流浪的kk',
                age:20,
                eat:function(){}
            }
            console.log(Object.keys(person));//    ['name','age','eat']

四、处理数组,返回索引值数组

 let arr=[1,2,3,4,5];
 console.log(Object.keys(arr));//['0','1','2','3','4','5']

五、处理字符串,返回索引值数组

let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']

六、实用技巧

 let person={
                   name:'一只流浪的kk',
                   age:18,
                   eat:function(){

                   }
           }
           Object.keys(person).map((key)=>{
                   person[key];//获得属性对应的值,可以进行其它处理
           })

Object.values()

一、返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值

let obj = {
    foo : "bar",
    baz : 20
};
console.log(Object.values(obj));  // ["bar", 20]

二、返回数组的成员顺序,与属性的遍历部分介绍的排列规则一致

const obj = {100 : "a", 2 : "b", 7 : "c"};
console.log(Object.values(obj));   //["b", "c", "a"]

三、Object.values()只会遍历对象自身的可遍历属性

const obj = Object.create({},{p : {value : 10}});
console.log(Object.values(obj));
console.log(Object.getOwnPropertyDescriptors(obj)); // []

Object.create方法的第二个参数添加的对象属性(属性p),如果不显式声明,默认是不可遍历的,因为p的属性描述对象的enumerable默认是false,Object.values不会返回这个属性。
因此只要把enumerable改成true,Object.values就会返回属性p的值。

const obj = Object.create({},{p:{
     value : 10,
     enumerable : true,
     configurable : true,
     writable : true,
}})
console.log(Object.values(obj));    //[10]

四、Object.values会过滤属性名为 Symbol 值的属性

//如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。
Object.values({ [Symbol()]: 123, foo: 'abc' });
console.log(Object.values('foo'));  //["f", "o", "o"]

五、如果参数不是对象,Object.values会先将其转为对象

console.log(Object.values(42));  // []
console.log(Object.values(true));  // []
console.log(Object.values(undefined));   //error
console.log(Object.values(null));   //error

Object.entries()

一、Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组

var obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj));

二、如果原对象的属性名是一个 Symbol 值,该属性会被省略

console.log(Object.entries({ [Symbol()]: 123, foo: 'abc' }));  // [ [ 'foo', 'abc' ] ]

三、遍历对象的属性

let obj = {
    one : 1,
    two : 2,
}
for(let [k , v] of Object.entries(obj)){
     console.log(`${JSON.stringify(k)} : ${JSON.stringify(v)}`);
}

四、将对象转为真正的Map结构

const obj = {foo : "bar", baz : 10};
const map = new Map(Object.entries(obj));
console.log(map);

五、实现Object.entries方法

const entries = (obj) => {
     let result = [];
     const objType = typeof(obj);
     if(obj === undefined || obj === null){
          throw new TypeError();
     }
     if(objType === "number" || objType === "boolean"){
         return [];
     }
     for(let k of Object.keys(obj)){
         result.push([k,obj[k]]);
     }
     return result
}

到此这篇关于Object.keys()、Object.values()、Object.entries()用法总结的文章就介绍到这了,更多相关Object.keys() Object.values() Object.entries()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

    大部分情况下Object.getOwnPropertyNames()与Object.keys(obj)的功能是一样的,我们一般也是用来获取一个JSON对象中所有属性,例如 const obj = { property1: 1, property2: 2, }; console.log(Object.keys(obj)); console.log(Object.getOwnPropertyNames(obj)); 输出: > Array ["property1", "pr

  • Object.keys()、Object.values()、Object.entries()用法总结

    目录 Object.keys() 一.官方解释 二.语法 三.处理对象,返回可枚举的属性数组 四.处理数组,返回索引值数组 五.处理字符串,返回索引值数组 六.实用技巧 Object.values() 一.返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值 二.返回数组的成员顺序,与属性的遍历部分介绍的排列规则一致 三.Object.values()只会遍历对象自身的可遍历属性 四.Object.values会过滤属性名为 Symbol 值的属性 五.如果参数不是对象,Obje

  • JavaScript中你不知道的Object.entries用法

    目录 前言 1. 使用 for...of 遍历普通对象 2. 普通对象与 Map 对象相互转换 总结 参考 前言 平时我们经常会用到 Object 类上的静态方法,例如 Object.keys .Object.values .Object.assign 等等,但可能很少用到 Object.entries 这个方法,这篇文章就来讲解 Object.entries 方法的两个小技巧. 作用 Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for-in

  • JS数组Object.keys()方法的使用示例

    本文实例讲述了JS数组Object.keys()方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Object.keys()方法</title> </head> <body> <script type="

  • 在原生不支持的旧环境中添加兼容的Object.keys实现方法

    如下所示: if (!Object.keys) { Object.keys = (function () { var hasOwnProperty = Object.prototype.hasOwnProperty, //原型上的方法,只取自身有的属性: hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), //ie6一下,!之后的内容为false; dontEnums = [ 'toString', 'to

  • JavaScript中的Object对象学习教程

    参数: (1)obj 必需.Object 对象分配到的变量名称.  (2)值 可选.任一 JavaScript 基元数据类型(数字.布尔值或字符串).  如果值是一个对象,则返回的对象是未修改的.  如果值是 null."未定义"或"未提供",则创建无内容的对象. Object对象的方法 Object作为构造函数使用时,可以接受一个参数.如果该参数是一个对象,则直接返回这个对象:如果是一个原始类型的值,则返回该值对应的包装对象.利用这一点,可以写一个判断变量是否为对

  • ES6中Set和Map用法实例详解

    本文实例讲述了ES6中Set和Map用法.分享给大家供大家参考,具体如下: Set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. // 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); fo

  • JavaScript对象数组排序函数及六个用法

    分享一个用于数组或者对象的排序的函数.该函数可以以任意深度的数组或者对象的值作为排序基数对数组或的元素进行排序. 代码如下: /** * 排序数组或者对象 * by Jinko * date -- * @param object 数组或对象 * @param subkey 需要排序的子键, 该参数可以是字符串, 也可以是一个数组 * @param desc 排序方式, true:降序, false|undefined:升序 * @returns {*} 返回排序后的数组或者对象 * * 注意:

  • js 数组详细操作方法及解析合集

    前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下.所以就希望对这块内容有一个比较系统性的总结,在这背景下,就有了本篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获. 创建一个数组: // 字面量方式: // 这个方法也是我们最常用的,在初始化数组的时候 相当方便 var a = [3, 11, 8]; // [3,11,8]; //

  • JavaScript循环遍历的24个方法,你都知道吗

    目录 前言 一.数组遍历方法 1. forEach() 2. map() 3. for of 4. filter() 5. some().every() 6. reduce().reduceRight() 7. find().findIndex() 8. keys().values().entries() 二.对象遍历方法 1. for in 2. Object.keys().Object.values().Object.entries() 3. Object.getOwnPropertyNam

随机推荐