Object的一些常用方法

今天就规整下Object与Array的一些方法:

Object.keys方法:

Object.keys方法是Javascript中用于遍历对象属性的一个方法.他传入的是一个参数,而返回的却是一个数组,数组中包含的是该对象所有的属性名组成的数组,但不包含原型中的属性，注意它无法保证属性按照对象原来的顺序输出．

var student={
name:"Tom",
age:8,
id:1
}

console.log(Object.keys(student));//['name','age','id']

Object.values()方法:

Object.values方法返回一个数组,成员是参数对象自身的,不含继承的所有可遍历属性的键值.

var obj={ljy:"gene",yee:"cd"};
Oject.values(obj)
//["gene","cd"]

返回数组的成员顺序,属性名为数值的属性,是按照数大小,从小到大遍历的.

var obj={3:"j",1:"l",7:"y"};
Object.values(obj)
//['l','j','y']

如果,Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组

Object.values('bar')
//['b','a','r']

接下来,再讲述下Object.create()方法,这个方法实际上在我前几篇博客中提到继承方式的时候,是有用到过这个方法的,那我们仔细看看它.

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的_proto_.

var apple={
color:"red",
getcolor:function(){
return this.color
}
}

//创建apple1对象
var apple1=Object.create(apple)
console.log(apple.color)//red
console.log(apple1.color)//red

添加propertiesObject

var apple={
color:"red",
getColor:function(){
return this.color
}
}

var apple1 = Object.create(apple,{
//添加taste属性
taste:{
writeable:false,
get:function(){
console.log('taste')
return "good"
}
},
//添加weight属性
weight:{
value:500}
})

console.log(apple1.color)
console.log(apple1.getColor())
console.log(apple1.taste)//good
console.log(apple1.weight)//500
apple1.taste="bad"//报错,writeable为false不可改变

Object.create()常用于创建对象实例

function yee(a){
this.a=100;
}
 yee.prototype.getA=function(){
return this.a
}

//继承prototype
var gene = Object.create(yee.prototype)
//其继承的是prototype而不是构造函数内的值
console.log(yee.a)//undefined
gene.a=100
console.log(gene.getA())//100

那么,这里我们就来讲述下其与new obj()的区别在哪吧

我们来看下这两个的核心代码:

Object.create()的实现核心代码:

Object.create=function(o){
var yee=function(){};
yee.prototype=o;
return new yee();
}

创建函数,将传递的对象,赋值给prototype,再返回给函数实例.

而new obj()的核心代码是:

var le=new Object();
le.[[prototype]] = Base.prototype;
Base.call(le);

创建对象,将被继承对象的prototype赋给此对象,并且调用被继承对象的方法来为其初始化.因此,new obj()不仅可以继承prototype,也可以继承构造函数内属性.
接下来，我们再来复习一遍，使用Object．create()创建继承的方式:

function Person(name,age){
this.name=name,
this.age=age,
this.setAge=function(){}
}
Person.prototype.setAge=function(){
console.log("ljy")}
function kid(name,age,id){
Person.call(this,name,age)
this.id=id
this.setScore=function(){}}
kid.prototype=Object.create(Person.prototype)
kid.prototype.constructor=kid
var s1=new kid('Jerry',11,13)
console.log(s1 instance of kid, s1 instance of Person)//true true
console.log(s1.constructor)//kid

Object.hasOwnProperty()方法

用来判断对象自身属性中是否有指定的属性.

判断，某个对象是否拥有某个属性，我们经常会使用Object.hasOwnProperty().这个方法是不包括对象原型链上的方法的．注意！

下面，我们来看下判断自身属性是否存在的例子：

var yee =  new Object();
yee.pro = 'now';

function gene(){
yee.newpro = yee.pro;
delete yee.pro;
}

yee.hasOwnProperty('pro')'//true
gene();
yee.hasOwnProperty('pro')//false

判断自身属性于与继承属性的:

function bar(){
this.name="ljy"
this.say=function(){
console.log('Hello')
}
}
bar.prototype.saybye = function(){
console.log("GoodBye")
}

let yee= new bar()
console.log(yee.name) //ljy
console.log(yee.hasOwnProperty('name'))//true
console.log(yee.hasOwnProperty('toString'))//false
console.log(yee.hasOwnProperty('say'))//true
console.log(yee.hasOwnProperty('saybye'))//false

遍历一个对象的所有自身属性的:

var foo={
fog:'stack'
};
for(var name in foo){
if(foo.hasOwnProperty(name)){
alert('This is fog ('+name+') for :' +foo[name]);
}else{
alert(name);
}
}

Object getOwnPropertyNames()方法:

该方法返回一个数组,其中包含作为参数传递的对象自身属性的所有名称,包括不可枚举的属性，却不考虑继承的属性．不可迭代的属性不会被迭代．例如，没有在for..of循环中列出的.

const dog={}
dog.breed="Husky"
dog.name="Lele"
Object.getOwnPropertyNames(dog)//['breed','name']

那么,它与Object.keys又有什么区别呢,我们来看看下面的例子:

const obj={};
Object.defineProperties(obj,{
property1:{enumerable:true,value:1},
property2:{enumerable:false,value:2}
})
console.log(Object.keys(obj));//Array['property1']
console.log(Object.hasOwnPropertyNames(obj));//Array['property1','property2']

上述例子可以看明白,Object.keys相较于Object.getOwnPropertyNames,只能罗列出可枚举的属性.

Object．assign()方法

Object.assign可以实现对象的合并,其语法为:Object.assign(target,...sources)

Object.assign会将source里面的可枚举属性复制到target,若和target的已有属性重名的话,后面的会覆盖前面的.

const o1={name:"ljy"}
const o2={topic:["vue","react"]}
const o3=Object.assign({},o1,o2)
//o3{name:"ljy",topic:["vue","react"]}
o3.topic.push('angular')
//o3{name:"ljy",topic:["vue","react",'angular']}
//o2{,topic:["vue","react",'angular']}