Object.keys方法之详解
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
语法
Object.keys(obj)
参数
要返回其枚举自身属性的对象。
返回值
一个表示给定对象的所有可枚举属性的字符串数组。
描述
Object.keys() 返回一个所有元素为字符串的数组,其元素来自给定的 object 上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
示例
一、传入对象,返回属性名
let obj= {name:"张三",age:25,address:"深圳",getName:function(){}}
console.log(Object.keys(obj)); // ["name", "age", "address","getName"]
常用操作
Object.keys(obj).map((key)=>{
console.log(key,obj[key]); //key=>属性名 obj[key]=>属性值
})
扩展
// 类数组对象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// 具有随机键顺序的类数组对象
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
问题:为什么Object.keys的返回值会自动排序?
Object.keys在内部会根据属性名key的类型进行不同的排序逻辑。分三种情况:
1、如果属性名的类型是Number,那么Object.keys返回值是按照key从小到大排序
2、如果属性名的类型是String,那么Object.keys返回值是按照属性被创建的时间升序排序。
3、如果属性名的类型是Symbol,那么逻辑同String相同
二、传入字符串,返回索引
var str = 'ab1234';
console.log(Object.keys(obj)); //[0,1,2,3,4,5]
三、传入数组,返回索引
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ["0", "1", "2"]
四、构造函数,返回空数组或者属性名
function Pasta(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.toString = function () {
return (this.name + ", " + this.age + ", " + this.gender);
}
}
console.log(Object.keys(Pasta)); //console: []
var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]
五、getFoo 是一个不可枚举的属性
const myObj = Object.create({}, {
getFoo: {
// enumerable: true, // 如果为true 就是可枚举属性 默认为false 不可枚举
value() { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
如果你想获取一个对象的所有属性,甚至包括不可枚举的,可以使用 Object.getOwnPropertyNames
扩展 :Object.values()和Object.keys()是相反的操作,把一个对象的值转换为数组
Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。
Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组。文章来源:https://www.toymoban.com/news/detail-723592.html
参考链接
https://zhuanlan.zhihu.com/p/40601459文章来源地址https://www.toymoban.com/news/detail-723592.html
到了这里,关于Object.keys方法之详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!