【JS 数组遍历 含Object.keys知识点】

数组遍历

var o = {'a':'11a', 'b':'22b', 'c':'33c', 'd':'44d', 'e':'55e', 'f':'66f'}; //定义o对象
var keykeys = Object.keys(o); //获得o对象属性名组成的数组
var values = []; //在数组中存储匹配属性的值
for (var i =0; i<keykeys.length; i++) { //对于数组中的每个索引
    var key = keykeys[i];  //获得索引处的键值
    values[i]= o[key];   //values数组中保留属性值
}
console.log('keykeys is ', keykeys)
console.log('values is ', values)

结果返回:
keykeys is (6) ["a", "b", "c", "d", "e", "f"]
values is (6) ["11a", "22b", "33c", "44d", "55e", "66f"]

其中Object.keys的知识点参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
https://www.wengbi.com/thread_56367_1.html

概要:
Object.keys在内部会根据属性名key的类型进行不同的排序逻辑。分三种情况:
如果属性名的类型是Number,那么Object.keys返回值是按照key从小到大排序如果属性名的类型是String,那么Object.keys返回值是按照属性被创建的时间升序排序。如果属性名的类型是Symbol,那么逻辑同String相同。
当Object.keys函数使用参数O调用时,会执行以下步骤:
第一步:将参数转换成Object类型的对象。
第二步:通过转换后的对象获得属性列表properties。
||注意:属性列表properties为List类型(List类型是ECMAScript规范类型)
第三步:将List类型的属性列表properties转换为Array得到最终的结果。
||规范中是这样定义的:
调用ToObject(O)将结果赋值给变量obj调用EnumerableOwnPropertyNames(obj, "key")将结果赋值给变量nameList调用CreateArrayFromList(nameList)得到最终的结果

将参数转换成Object(ToObject(O))
ToObject操作根据下表将参数O转换为Object类型的值:
参数类型 | 结果 |
--------------|------------------------|
Undefined | 抛出TypeError |
Null | 抛出TypeError |
Boolean | 返回一个新的 Boolean 对象 |
Number | 返回一个新的 Number 对象 |
String | 返回一个新的 String 对象 |
Symbol | 返回一个新的 Symbol 对象 |
Object | 直接将Object返回 |
因为Object.keys内部有ToObject操作,所以Object.keys其实还可以接收其他类型的参数。
上表详细描述了不同类型的参数将如何转换成Object类型。

我们可以简单写几个例子试一试:
先试试null会不会报错:


5分钟彻底理解Object.keys-1.jpg
图1 Object.keys(null)
如图1所示,果然报错了。
接下来我们试试数字的效果:

5分钟彻底理解Object.keys-2.jpg
图2 Object.keys(123)
如图2所示,返回空数组。
为什么会返回空数组?请看图3:

5分钟彻底理解Object.keys-3.jpg
图3 new Number(123)
如图3所示,返回的对象没有任何可提取的属性,所以返回空数组也是正常的。
然后我们再试一下String的效果:

5分钟彻底理解Object.keys-4.jpg
图4 Object.keys('我是Berwin')
图4我们会发现返回了一些字符串类型的数字,这是因为String对象有可提取的属性,看如图5:

5分钟彻底理解Object.keys-5.jpg
图5 new String('我是Berwin')
因为String对象有可提取的属性,所以将String对象的属性名都提取出来变成了列表返回出去了。

comments powered by Disqus