对象常用方法总结

前面总结了数组和字符串的常用方法,那这三剑客之一的对象怎么能不写呢,下面我们就来总结一下对象的常用方法,我会用自己的方式将每个方法尽可能的写的比较容易理解,每个方法都会配有小例子,方便亲们参考,那这就开始吧!

object的方法整理:
 
对象是指:
       成对的名称(字符串)与值(任何值),其中名称通过冒号与值分隔;
 
1.创建对象的方式,以下列出了四种,可根据实际情况来选择
 
(1).字面量形式(最常用):
    var object={
        a:1,
        b:2
    };
    console.log(object);        //{a:1,b:2}
在实际中运用较多,较方便,易上手
 
(2).对象实例:
   var object=new Object();
          object.a=1;
          object.b=2;
   console.log(object);        //{a:1,b:2}
传统的形式,在操作对象时用的较频繁。
 
(3).构造函数形式:
    function employee(name,job,born) {
         this.name=name;
         this.job=job;
         this.born=born;
     }
     var bill=new employee("Bill Gates","Engineer",1985);
 
// employee {name: "Bill Gates", job: "Engineer", born: 1985} 
 
(4).工厂模式   
  function create(name,job,born){
         var people=new Object();
         people.name=name;
         people.job=job;
         people.born=born;
         people.show=function(){
          console.log("name:"+this.name+","+"job:"+this.job+","+"born:"+this.born)
        };
      return people;
     }
  var friend=create("Christine","teacher","1990");
 
  friend.show();  //name:Christine,job:teacher,born:1990
工厂模式的优势是能够一次性出厂多个相同的属性的对象,节省资源占用,缺点是:属性都为相同的,如果要创建不同的需要重新生成。
 
(5)原型模式  
    function create(name,job,born){};
      create.prototype.name="Christine";
      create.prototype.job="teacher";
      create.prototype.born="1990";
      create.prototype.show=function(){
      console.log("name:"+this.name+","+"job:"+this.job+","+"born:"+this.born)
    };
    var friend=new create();
    friend.show();   //name:Christine,job:teacher,born:1990

 

将属性赋值到对象的原型上,并不会影响其本身的属性。
 
2.Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象。
 
Object.assign(target, ...sources)

参数

target
目标对象。
sources
源对象。

返回值

        目标对象。
例:
(1).用来复制一个新对象,并不会影响原对象
 
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy);        // { a: 1 }
 
(2).用来合并对象属性,将源对象的所有可枚举属性,复制到目标对象。
    object.assign(obj, obj2) //obj2是源对象,obj 是目标对象,返回目标对象
 
    var obj = { a: 1 };
    var obj2={b:2};
    console.log(Object.assign(obj,obj2)===obj2);  //true,返回目标对象
    console.log(obj);   //{a:1,b:2} obj的值已被更改
 
(3).如果目标对象和源对象中有相同的键,则属性将被源对象的属性覆盖,后面的源属性会覆盖之前的相同键的源属性。
    var obj = { a: 1 };
    var obj2 = {a:5,b:2};
    var obj3 = {b:1,d:0};
    Object.assign(obj,obj2,obj3);
    console.log(obj);       // {a: 5, b: 1, d: 0}
 
obj和obj2同时拥有相同的键"a",但两个值不同,obj是目标对象,所以会被源对象obj2的值覆盖,obj2和obj3也同时拥有相同的键“b”,在拷贝时,obj3排在obj2的后面,所以obj2被覆盖 ,最终打印结果是:{a:5,b:1,d:0}
 
(4).当assign只有一个对象时,则直接返回这个对象,不做任何操作;
     var obj = { a: 1 }
     Object.assign(obj);
     console.log(obj);   //{a:1}

 

(5).Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
     var obj1 = { a: 0 , b: { c: 0}};
     var obj2 = Object.assign({}, obj1);
     obj1.b.c=5;
     console.log(obj2)  //{a:0,b:{c:5}};
当我们在改变obj1的值时,并没有想改变obj2,但obj2的值也发生了改变,这违背了我们的想法
 
(6)深拷贝
    var obj1 = { a: 0 , b: { c: 0}};
    var obj3 = JSON.parse(JSON.stringify(obj1));
    obj1.a = 4;
    obj1.b.c = 4;
    console.log(obj3);   //{ a: 0 , b: { c: 0}};
 
3.Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。
 
例:
(1).当键值为正常字符时,返回的键的值为字符串
    var obj1 = {a:1,b:2};
    var obj2 = Object.entries(obj1);
    console.log(obj2) ;      //  [ ["a":1],["b":2] ] 
 
(2).当键值为数字时,返回的键的值也是字符串
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(obj));     // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] 
 
(3).当键值的数字错乱无序时,它会将其排序后返回
   var anObj = { 100: 'a', 2: 'b', 9: 'c' };
   console.log(Object.entries(anObj));   //[["2","b"],["9","c"],["100","a"]] 
 
4.Object.is()方法判断两个值是否是相等的值
 
Object.is(value1, value2);

参数

value1
需要比较的第一个值。
value2
需要比较的第二个值。

返回值

表示两个参数是否相同的Boolean
 
(1).比较字符串(单纯的比较字符串的每一位,如果完全相同返回true,只要有一个不一样,返回false)
Object.is('foo', 'foo’);          //true;  
 
Object.is('fo', 'foo’);           //false
 
(2).比较数组 (对数组无感,即使是相同的数组,或者是相同的空数组,都返回false)
Object.is([11,12],[11,12]).        //false
 
Object.is([],[])                   //false 
 
(3).比较window
Object.is(window, window)           //true
 
Object.is(window, document);       //false

 

(4).比较特殊对象undifined 和null(undefined和null都等于它本身,但undefined不等于null)
Object.is(null, null);                      //true

Object.is(undefined,undefined); //true Object.is(undefined,null); //false 
 
(5)比较正常对象()
var test={a:1,b:2};     

var test1={a:2,b:5}; Object.is(test,test1) //false ---------------------------------------------------------- var test={a:1,b:2}; //比较的两端需为一样的元素,当一边为变量时,另一边也必须是变量 Object.is(test,{a:1,b:2}). //false Object.is(test,test). //true。
 
5.Object.keys()方法返回一个由一个给定对象的自身可枚举属性组成的数组,数组的属性吗的排列顺序和使用for in 循环遍历该对象时返回的顺序一致
   两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性
 
Object.keys(obj)

参数

obj
要返回其枚举自身属性的对象。

返回值

一个表示给定对象的所有可枚举属性的字符串数组。

描述

Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的对象上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
 
(1)数组Array对象(返回索引值)
var arr=[1,2,3];            
 
Object.keys(arr)         //  ["0", "1", "2”]
 
(2)object对象(返回key值)
var obj = { foo: "bar", baz: 42 };
 
Object.keys(obj)        //  ["foo", "baz”]
 
(3)类数组,对象
var obj = { 0 : "a", 1 : "b", 2 : "c”};

Object.keys(obj) // [
"0", "1", "2"]
 
(4)类数组对象 随机key排序
var Obj = { 100: 'a’, 2: 'b’,7: 'c’ };
 
console.log(Object.keys(Obj));     // ['2', '7', '100’]. 返回从小到大排序后的结果
 
6.obj.hasOwnProperty(key) 检测对象有没有指定的key,返回布尔值
 
hasOwnProperty() 方法会返回一个布尔值,指示对象是否具有指定的属性作为自身(不继承)属性。
 
obj.hasOwnProperty(prop)

参数

prop
要检测的属性  字符串 名称或者 Symbol

返回值

用来判断某个对象是否含有指定的属性的 Boolean 。

描述

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。
例:
var obj=new Object();
    obj.a=5;
console.log(obj.hasOwnProperty('a’))       // true
delete obj.a;
console.log(obj.hasOwnProperty(‘a’)).     //false 
 
7.Object.values()方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for in 循环相同,返回的对象的value值,与Object.key()相反
例:
(1)正常对象
var obj={a:1,b:2,c:3};
console.log(Object.values(obj))         //  [1, 2, 3]. 
 
(2)类数组对象
var obj ={0:'a',1:'b',2:'c'};
console.log(Object.values(obj)).       //  a,b,c
 
(3)  key值为无序number
var obj={100:'a',10:'b',1:'1'};
console.log(Object.values(obj)).   // ["1", "b", "a"]

 

 
posted @ 2017-11-18 21:12  晴天de雨滴  阅读(1113)  评论(0编辑  收藏  举报