js基础(js遍历对象的方法的总结-WT)
参考:
1.for...in
使用场景:需要遍历对象时
问题:这种情况在开发中什么时候需要使用?
1.1语法:
for (variable in object) { 执行的代码…… } 解释: for(变量 in 对象){ 执行的代码。。。 }
1.2实例:
var obj={ name:"张三", age:18, hight:180 } 此时就需要遍历改对象获取到对象的属性和属性值---采取for...in for(var k in obj){ //打印对应的属性: console.log(k)//输出name,age,hight //打印对应的属性值: console.log(obj[k]) //输出:"张三",age:18,hight:180 }
你是如何理解他们的区别的?
区别就是第一个表示对象的属性,属性是一个对象内的字符串表示的名字。 第二个表示,名为name的这个对象属性,这个name可以被变量替换,表示名为这个变量的值的对象属性
扩展:那么数组怎么来使用for...in呢?(同理)
自我的总结就是:
①用for...in遍历"数组": 循环变量k是数组的下标 ;
②用for...in遍历"js对象": 循环变量k是json的成员---属性与方法名
2.Object.keys()方法
Object.keys(不是Object.prototype.keys )返回的正是一个对象属性数组!
2.1语法:
Object.keys(obj)
2.2实例
var obj={ name:"张三", age:18, hight:180 } //因为使用Object.keys()返回的是字符串对象属性的数组---所以需要在采取foreEach() foreEach(函数) Obejct(对象).forEach(函数function(){执行代码。。。}) ------------------------------------------------------------------------------------ Obejct(obj).forEach(function(key){ console.log(key,obj[key]) }) 输出:name:"张三",age:18,hight:180
问题:什么是可枚举?什么是不可枚举?
理解?自身的属性就是不可以枚举,添加的属性就是可以枚举?
3..Object.getOwnPropertyNames(obj)
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
再通过数组的 forEach 方法来遍历
3.1语法:
Object.getOwnPropertyNames(obj)
3.2实例(存在疑问?)
// 创建一个对象并指定其原型,bar 为原型上的属性 // baz 为对象自身的属性并且不可枚举 const obj = Object.create({ bar: bar }, { baz: { value: baz, enumerable: false } }) obj.foo = foo // 不包括不可枚举的 baz 属性 Object.keys(obj).forEach((key) => { console.log(obj[key]) // foo }) // 包括不可枚举的 baz 属性 Object.getOwnPropertyNames(obj).forEach((key) => { console.log(obj[key]) // baz, foo })
4.Reflect.ownKeys()
Reflect.ownKeys() 方法是 ES2015 新增的静态方法,该方法返回对象自身所有属性名组成的数组,包括不可枚举的属性和 Symbol 属性
4.1语法:
var obj = {0:a,1:b,2:c}; Reflect.ownKeys(obj)
4.2实例:
var obj = {0:a,1:b,2:c}; Reflect.ownKeys(obj).forEach(function(key){ console.log(key,obj[key]); }); 输出:0 a ,1 b, 2 c
ES2015 新增了 Symbol 数据类型,该类型可以作为对象的键,针对该类型 ES2015 同样新增Object.getOwnPropertySymbols() 方法
5.Object.getOwnPropertySymbols(存在疑问?)
总结:
这其中只有 for in 循环会得到对象原型链上的属性,其它方法都只适用于对象自身的属性
ES 语言后续添加的新特性不会对以前的代码产生副作用,比如在 ES2015 之前就存在的 for in 循环,Object.keys() 和 Object.getOwnPropertyNames() 是肯定不会返回 Symbol 属性的