for in,Object.keys()与for of的用法与区别

Array.prototype.sayLength=function(){
console.log(this.length);
}
let arr = [‘a‘,‘b‘,‘c‘,‘d‘];
arr.name=‘数组‘;
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
})
// for in 一般用于遍历对象的属性;
1.作用于数组的for in除了会遍历数组元素外,还会遍历自定义可枚举的属性,以及原型链上可枚举的属性;
2.作用于数组的for in的遍历结果是数组的索引,且都为字符串型,不能用于运算;
3.某些情况下,可能按照随机顺序遍历数组元素;
for(let i in arr){ //输出的都是属性
console.log(i) //0,1,2,3,name,type,sayLength
}

Object.keys()
1.遍历结果为对象自身可枚举属性组成的数组,数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致,
2.与for in区别在于不能遍历出原型链上的属性;
*

Array.prototype.sayLength=function(){

console.log(this.length);
}

let arr=[‘a‘,‘b‘,‘c‘,‘d‘];
arr.name = ‘数组‘;

Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});

var keys = Object.keys(arr);
console.log(keys); //) ["0", "1", "2", "3", "name", "type"]

for of
1.es6中添加的循环语法;
// 2.for of支持遍历数组、类对象(例如:DOM NodeList)、字符串、map对象、Set对象
3.for of不支持遍历普通对象,可通过与Object.keys()搭配使用遍历(例子2);
4.for of 遍历后的输出结果为数组元素的值;
5搭配实例方法entries(),同时输出数组内容弄和索引(例子2)
例子1

* */
Array.prototype.sayLength=function(){
console.log(this.length);
}

let arr= [‘a‘,‘b‘,‘c‘,‘d‘];
arr.name =‘数组‘;
Object.defineProperties(arr,{
type:{
value:true,
writable:true,
enumerable:true
}
});

for(let i of arr){
console.log(i);// a,b,c,d
}

//例子2

var person={
name:‘coco‘,
age:24,
locate:{
country:‘china‘,
city:‘beijing‘,
}
}

for(var key of Object.keys(person)){
//使用Object.keys()方法获取对象key的数组
console.log(key+":"+person[key]);//name:coco age:24 locate:[object Object]

}

//例子3
let arr3=[‘a‘,‘b‘,‘c‘];
for(let [index,val] of arr3.entries()){
console.log(index+":"+val);
}

//让jquery对象支持for of遍历
// 因为jQuery对象与数组相似
// 可以为其添加与数组一致的迭代器方法

** jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

原文地址:https://www.cnblogs.com/h5it/p/9700827.html

时间: 2024-10-12 01:30:08

for in,Object.keys()与for of的用法与区别的相关文章

遍历对象属性(for in、Object.keys、Object.getOwnProperty)

js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性.继承自原型的属性 var obj = {"name":"Poly", "career":"it"} Object.defineProperty(obj, "age", {value:"forever

Object.keys方法之详解

在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { 100: "a", 2: "b", 7: "c"}; console.log(Object.keys(obj1)); /

js Object.keys

Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清楚对方的特征,也没有约定见面的具体位置.不过青蛙们都是很乐观的,它们觉得只要一直朝着某个方向跳下去,总能碰到对方的.但是除非这两只青蛙在同一时间跳到同一点上,不然是永远都不可能碰面的.为了帮助这两只乐观的青蛙,你被要求写一个程序来判断这两只青蛙是否能够碰面,会在什么时候碰面. 我们把这

在原生不支持的旧环境中添加兼容的 Object.keys

1 if (!Object.keys) { 2 Object.keys = (function () { 3 var hasOwnProperty = Object.prototype.hasOwnProperty, //原型上的方法,只取自身有的属性: 4 hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), //ie6一下,!之后的内容为false; 5 dontEnums = [ 6 'toString

in操作符/Object.keys()/ Object.getOwnPropertyNames()

in操作符 1.单独使用,判断是否能通过某个实例访问到某个属性 function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = n

3.Object.keys() 取得对象中所有可枚举的属性

Object.keys() 取得对象中所有可枚举的属性 function Person(){ }Person.prototype.name="summer";Person.prototype.age=20;Person.prototype.job="enginner";Person.prototype.sayName=function(){ console.log(this.name);} var keys=Object.keys(Person.prototype)

对象是否拥有某个属性,in和for in以及object.hasOwnProperty('×××')的异同,以及Object.defineProperty(),Object.keys(),Object.getOwnPropertyNames()的用法

1.在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的,举个例子: var obj = { name:'fei' } console.log(obj.hasOwnProperty('name'))//true console.log(obj.hasOwnProperty('toString'))//false 在这个例子中,obj对象存在的name属性的时候,调用这个方法才是返回true,我们

Object.keys()

Object.keys(obj),返回一个数组,数组里是该obj可被枚举的所有属性名.请看示例: 示例一: function Pasta(grain, width, shape) { this.grain = grain; this.width = width; this.shape = shape; this.toString = function () { return (this.grain + ", " + this.width + ", " + this.

Object.keys 函数 (JavaScript)

Object.keys 函数 (JavaScript) 返回对象的可枚举属性和方法的名称. 在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { 100: "a", 2: "b", 7: &qu