Object.keys()使用详解

如果给你这样的一个JSON对象，你能采用什么方式给输出属性？

let myObj = {
    
	"name": '张三',
	"age": 8,
	"sex": '男',
	"identity": '小学生',
	"studyingContents": ["数学", "语文", "英语"],
	"bestFriendsInfos": {
    
		"name": '王二',
		"age": 8,
		"sex": '女',
		"identity": '小学生',
		"StudyingContents": ["数学", "语文", "英语"]
	}
}

一般情况下很多的同学都会采用 for…in，那么除了这种方式还有其他方式吗？

答案是肯定的。

今天给大家介绍其中一种JavaScript 原生提供的API ===》 Object.keys()，都是以代码的形式直接输出展示，希望对大家的工作和学习有一定的帮助。

Object.keys()

我们首先看一下官方给出的解释 官方描述地址

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

啥意思呢？
意思就是说会返回一个对象自身属性组成的数组，数组内的排列顺序是自身属性自上而下依次排列
我们来看一下示例：

• JSON对象

  let myObj = {
        
  	"name": '张三',
  	"age": 8,
  	"sex": '男',
  	"identity": '小学生',
  	"studyingContents": ["数学", "语文", "英语"],
  	"bestFriendsInfos": {
        
  		"name": '王二',
  		"age": 8,
  		"sex": '女',
  		"identity": '小学生',
  		"StudyingContents": ["数学", "语文", "英语"]
  	}
  }
  
  Object.keys(myObj)
  
  // ["name", "age", "sex", "identity", "studyingContents", "bestFriendsInfos"]
  
  

  可以看到返回的数组是传入对象自身的属性，并且排列顺序是自上而下依次排列。
  需要注意的是bestFriendsInfos 这个属性所对应的属性值也是一个对象，在实际的输出结果中是没有将这个对象内的属性也给打印出来。

  注意：Object.keys() 方法只会循环遍历对象自身属性的第一层，如果需要获取对象自身所有的属性，需要借用递归才能实现。

  特殊情况：

  
  let myObj = {
        bb:{
        b1:10,b2:20}, '5':'50',1:'10',4:'40',6:'60',2:'20', ba:{
        b1:10,b2:20}};
  
  Object.keys(myObj);
  
  // ["1", "2", "4", "5", "6", "bb", "ba"]
  

  注意：如果对象的属性是字符串类型的数字，那么得到的属性集合顺序是先数字后字母。数字的排列顺序是从小到大。

• 数组

  let myObj = ["数学", "语文", "英语"]
  
  Object.keys(myObj)
  
  // ["0", "1", "2"]
  

  如果传入参数是一个数组，那么返回的是这个数组对应的每一项的下标的数组集合

• 字符串

  let myObj = ""
  var result = Object.keys(myObj);
  
  console.log(result)
  console.log(typeof result)
  console.log(Object.prototype.toString.call(result))
  console.log(Array.isArray(Object.keys(result)))
  
  // []
  // VM1330:7 object
  // VM1330:8 [object Array]
  // VM1330:9 true
  
  

  可以看到，对于空的符串，返回的是一个空的数组，但是看不出来到底是输出了什么，请接着往下看。

  let myObj = "我们都是向往美好生活的有志青年"
  var result = Object.keys(myObj);
  
  console.log(result)
  console.log(typeof result)
  console.log(Object.prototype.toString.call(result))
  console.log(Array.isArray(Object.keys(result)))
  
  // VM1416:6 (15) ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"]
  // VM1416:7 object
  // VM1416:8 [object Array]
  // VM1416:9 true
  
  

  通过这个非空字符串能够看的出来，输出的是每个字符所对应的下标。

• boolean类型

  • true

    var result = Object.keys(true);
    
    console.log(result)
    // VM1492:4 []
    

  • false

    var result = Object.keys(false);
    
    console.log(result)
    // VM1516:4 []
    

• null

  var result = Object.keys(null);
  
  console.log(result)
  // VM1445:2 Uncaught TypeError: Cannot convert undefined or null to object
  // at Function.keys (<anonymous>)
  // at <anonymous>:2:21
  

• undefined

  var result = Object.keys(undefined);
  
  console.log(result)
  // VM1468:2 Uncaught TypeError: Cannot convert undefined or null to object
  // at Function.keys (<anonymous>)
  // at <anonymous>:2:21
  

• 函数

  var fn = function () {
        }
  var result = Object.keys(fn);
  
  console.log(result)
  // VM1677:4 []
  

注：
1、在学习 Object.keys() 的时候，可以结合 Object.value() , for…in，for…of 这几个方法多方印证互相补充学习。
2、关于本篇文章，如果有错误的地方希望各位同学能够指正，谢谢。
3、关于其底层原理，暂时还不清楚，希望后期能够给补上，在此给各位道一声抱歉，请见谅。
4、如果有知道其实现底层原理的同学，特别希望能够得到您宝贵的指点，不甚感激。