js对象

作者: pp_5793 | 来源:发表于2019-04-29 18:00 被阅读0次

    1 定义
    (1)语法形式:

    var obj = {
     key:value
    };
    

    (3)构造形式:

    var obj = new Object();
    obj.key = value;
    

    2 js 的类型

    (1)string
    (2)number
    (3)boolean
    (4) null
    (5) undefined
    (6) object
    简单基本类型:string ,number,boolean,null undefined .null有时会被当做一种对象。typeof null``// “object”.这是语言的一个bug。(原理:不同的对象在底层都表示成二进制,在js中如果前三位都是0,则为object类型,null的二进制本身就是全部为0的,故显示为object)
    函数就是对象的一个子类型(即可调用的对象),数组也是对象中的一个子类型。
    js中的一些对象子类型(内置对象):
    (1)String
    (2)Number
    (3 Boolean
    (4) Object
    (5) Function
    (6) Array
    (7) Data
    (8) RegExp
    (9) Error

    var obj = "I love you,rose";
    typeof obj;//string
    var obj1 = new String("I love you ,rose");
    typeof obj1;//"object"
    obj1 instanceof String //true
    

    在必要时js引擎会自动把string字面量 转换为String,以便我们对其进行其他的操作。

    var obj2  = " i a m";
    obj2.length;  //5
    obj2.charAt(4);//"m“
    

    对于Number,Boolean,引擎也会把字面量转换成内置对象来进行操作,但是由于Object.Array,Function,RegExp他们都是对象,不是字面量。‘
    存贮在对象中的属性只是一个指针,它指向该属性值。调用时有两中形式Object.key或者Object[''key''];其中.操作符需要让属性名满足标识符的规则,但是["..’']操作符可以使用任意Utf-8或者Unicode字符串作为属性名。

    在对象中属性名一直都是字符串。使用typeof操作符后也是以字符串的形式输出的。如果进行多于一次的typeof操作,都会变为"strng".

    typeof obj3//"object"
    typeof typeof obj3//"string"
    

    可计算属性名:

    es6:
    var prefix = "foo";
    var myObject = {
     [prefix + "bar"]:"the girl is my friend",
    [prefix +"baz"]:"the boy is my brother"
    }
    myObject.foobar;//"the girl is my friend"
    myObject.foobaz;//"the boy is my brother"
    

    可计算属性名最常用的场景可能是ES6的Symbol。

    数组

    向数组添加属性:

    var arr1 = ["bat",1,"foo"];
    arr1.bar = "bar";
    arrq.length ;//3
    arr1["3"] = "mioa";
    arr1.length ;//4
    

    从上面的代码我们发现给数组直接添加属性值时,如果是字符串的属性名,则他的length不会改变,如果是数字的属性名时,他会以为是数组的下标,从而添加长度length

    复制对象(面试)

    属性描述符

    var myObject ={
    a:2
    };
    Object.getOwnPropertyDescriptor(myObject,"a");
    //{value: 2, writable: true, enumerable: true, configurable: true}
    

    禁止对象拓展(添加不了新属性):

    var myObject = {
     a:2
    }
    Object.perventExtensions(myObject);
    myObject.b = 1 ;
    myObject.b;//undefined
    

    冻结对象(无法添加无法删除属性,除此之外还不能修改属性的值):

    var myObject = {
     a:2
    }
    Object.freeze(myObject);
    myObject.a = 5;
    myObject.a //2
    

    Getter&Setter

    es5中可以使用getter 和setter部分改写默认操作

    var myObject ={
    get a(){
      return 2;  
      }
    };
    Object.defineProperty(
    myObject,
    "b",{
     get :function(){return this.a*2},
       enumerable:true
    }
    )
    myObject.a//2
    myObject.b//4
    

    上面的代码在给我们展示给对象myObject 中的属性定义了一个getter函数,然后再设置了一个新属性为,再给其设置getter函数.
    只使用一个(Getter或者是Setter)是理想的,他们应该成对存在:

    var myObject3 = {
    get a(){
     return this._a_;
      },
    set a(val){
      return this._a_ = val*2;
      }
    };
    myObject3.a = 2;
    myObject3.a  //4
    

    引擎先读set再get

    看对象是否存在该属性的方法:

    (1)in操作符:

    var obj = {
    a:2
    };
    //false
    ("b" in obj);
    

    (2) hasOwnproperty方法:

    var obj = {
    a:2
    };
    
    //true
    obj.hasOwnProperty("a");
    

    (3)很厉害的判定法:

    Object.prototype.hasOwnProperty.call(obj,"a");
    

    注意 in操作符是可以检查容器内是否有某个值,但是它实际上是在检查属性名是否存在。

    var arr3 = [1,2,3];
    (3 in arr3);//false
    

    出现上面这段代码的原因如下:
    对于数组来说:它的属性名(也就是索引)是0,1,2,里面是没有3的。
    所以它会报false.

    相关文章

      网友评论

          本文标题:js对象

          本文链接:https://www.haomeiwen.com/subject/punenqtx.html