Object.keys()、Object.values()的用法

一.Object.keys()的用法

1.Object.keys()介绍

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组(返回字符串数组)，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

2.Object.keys()语法

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

3.Object.keys()举例

①对象,返回对象的key值组成的数组(字符串)

let obj={
    name:"zhangsan",
    age:18,
    gender:"male"
}
console.log(Object.keys(obj));//[ 'name', 'age', 'gender' ]

②数组,返回数组索引值组成的数组(字符串)

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

③字符串,返回字符串索引组成的数组(字符串)

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

④构造函数,返回空数组或构造函数的属性名组成的数组

function Fn(name,age,gender){
    this.name=name;
    this.age=age;
    this.gender=gender;
}
console.log(Object.keys(Fn));//[]
let zhangsan = new Fn("张三",18,"male");
console.log(Object.keys(zhangsan));//[ 'name', 'age', 'gender' ]

⑤实用技巧

let zhangsan={
    name:"张三",
    age:18,
    gender:"male"
}
Object.keys(zhangsan).map(key=>{
    console.log(key+':'+zhangsan[key]);
})
// name:张三
// age:18
// gender:male

⑥注意
在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015中，非对象的参数将被强制转换为一个对象。

Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)

Object.keys("foo");
// ["0", "1", "2"]                   (ES2015 code)

当传入的对象的key是整数类型的时候,Object.keys()会返回有序的值。

let zhangsan={
    40:"张三",
    20:18,
    30:"male"
}
console.log(Object.keys(zhangsan));//[ '20', '30', '40' ]
Object.keys(zhangsan).map(keys=>{
    console.log(keys+':'+zhangsan[keys]);
})

// [ '20', '30', '40' ]
// 20:18
// 30:male
// 40:张三

二.Object.values()的用法

1.Object.values()介绍

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in循环枚举原型链中的属性 )。

let zhangsan={
    name:"张三",
    age:18,
    gedner:"male"
}
for(let item in zhangsan){
    console.log(item);// name age gender
}
console.log(Object.values(zhangsan));//[ '张三', 18, 'male' ]

2.Object.values()语法

Object.values(obj) obj被可枚举属性的对象。
返回值:一个包含对象自身的所有可枚举属性值的数组。

3.Object.values()举例

①对象,返回对象的value值组成的数组(字符串)

let zhangsan={
    name:"张三",
    age:18,
    gedner:"male"
}
console.log(Object.values(zhangsan));//[ '张三', 18, 'male' ]

②数组,返回该数组(字符串)

let  arr = [20,10,30];
console.log(Object.values(arr));//[ 20, 10, 30 ]

③字符串,返回单个字符组成的数组(字符串)

let str =  "hello";
console.log(Object.values(str));//[ 'h', 'e', 'l', 'l', 'o' ]

④构造函数,返回空数组或实例化对象传入的值组成的数组

function Fn(name,age,gender){
    this.name=name;
    this.age=age;
    this.gender=gender;
}
console.log(Object.values(Fn));//[]
let mark = new Fn("mark",18,"male");
console.log(Object.values(mark));//[ 'mark', 18, 'male' ]

与Object.keys()相同的是:当传入的对象的键为整数类型时,Object.values()会返回有序的值组成的数组。

let obj = {40:"mark",20:18,30:"male"};
console.log(Object.keys(obj));
console.log(Object.values(obj));
// [ '20', '30', '40' ]
// [ 18, 'male', 'mark' ]

三.总结

这里特地记录下Object.key() 、Object.values()的使用方法,方便在工作中使用Object.key() 、Object.values()会根据对象类型的不同返回不同的参数,特别需要注意的是它们都是返回的数组形式,Object.key()返回的是字符串形式的数组。