React.js学习笔记(10) 对象 + ( Object对象 )

(一) 对象

(1) 生成方法

什么是对象?简单说,对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。

var o = { p: 'Hello World' 上面代码中,大括号就定义了一个对象,它被赋值给变量o。 这个对象内部包含一个键值对(又称为“成员”),p是“键名”(成员的名称),字符串Hello World是“键值”(成员的值)。 键名与键值之间用冒号分隔。如果对象内部包含多个键值对,每个键值对之间用逗号分隔。 -------------------------------------------------------------------- var o = { p1: 'Hello', p2: 'World' 上面代码中,对象o包含两个键值对,又称为包含两个属性p1和p2。
生成对象的三种方法:
  • 直接使用大括号生成({})
  • 用new命令生成一个Object对象的实例
  • 使用Object.create方法生成。
  • var o1 = {};
    var o2 = new Object();
    var o3 = Object.create(Object.prototype);
    上面三行语句是等价的,一般来说:
    第一种采用大括号的写法比较简洁,
    第二种采用构造函数的写法清晰地表示了意图,
    第三种写法一般用在需要对象继承的场合
    

    (2) 键名

    对象的所有键名都是字符串,所以加不加引号都可以。

    对象所有属性都是字符串,加不加引号都可以
    var o = {
      p: 'Hello World'
    var o = {
      'p': 'Hello World'
    -----------------------------------------------------------
    如果键名是数值,会被自动转为字符串。
    var o ={
      1: 'a',
      3.2: 'b',
      1e2: true,
      1e-2: true,
      .234: true,
      0xFF: true
    // Object {
    //   1: "a",
    //   3.2: "b",
    //   100: true,
    //   0.01: true,
    //   0.234: true,
    //   255: true
    

    但是,如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),也不是数字,则必须加上引号,否则会报错。

    var o = { '1p': "Hello World", 'h w': "Hello World", 'p+q': "Hello World" 上面对象的三个键名,都不符合标识名的条件,所以必须加上引号 -------------------------------------------------------- 注意,JavaScript的保留字可以不加引号当作键名。 var obj = { for: 1, class: 2

    (3)属性

  • 对象的每一个“键名”又称为“属性”(property),它的( “键值” ) 可以是 ( 任何数据类型 )。
  • 如果一个属性的值为函数,通常把这个属性称为( “方法” ),它可以像函数那样调用。
  • 对象的属性之间用逗号分隔,最后一个属性后面可以加逗号(trailing comma),也可以不加。
  • 属性可以动态创建,不必在对象声明时就指定。
  • var o = { p: function (x) { return 2 * x; o.p(1) 上面的对象就有一个方法p,它就是一个函数。

    对象的属性之间用逗号分隔,最后一个属性后面可以加逗号(trailing comma),也可以不加。

    var o = { p: 123, m: function () { ... }, 上面的代码中m属性后面的那个逗号,有或没有都不算错。

    属性可以动态创建,不必在对象声明时就指定。

    var obj = {}; obj.foo = 123; obj.foo // 123 上面代码中,直接对obj对象的foo属性赋值,结果就在运行时创建了foo属性。

    (4) 对象的引用-------------区分( 对象的拷贝 和 对象的引用 )

  • 如果不同的变量名指向同一个对象,那么它们都是这个 对象的引用,也就是说 指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。
  • 对象的引用:
    var o1 = {};             // o1 和 o2是不同的变量名,但他们都指向同一个对象 {}
    var o2 = o1;             // 所以都是{}的引用,改变其中一个变量,会影响到其他所有变量
    o1.a = 1;
    o2.a // 1
    o2.b = 2;
    o1.b // 2
    -----------------------------------------
    对象的拷贝:
        componentDidMount() {
            this.go();
        go = () => {
            let a = {'day':'星期一'};
            let b = {...a};
            console.log(a,'初始化时候的a')   // Object {day: "星期一"} "初始化时候的b"        
            console.log(b,'初始化时候的b')   // Object {day: "星期一"} "初始化时候的b"
            console.log('--------------')
            a['day'] = '周末';
            console.log(a,"改变a的day属性后的a");   // Object {day: "周末"}    
            console.log(b,'改变a的day属性后的b,因为是b是a对象的拷贝,a不会影响b');   // Object {day: "星期一"}
            console.log('--------------')
            b['month'] = '11月';
            console.log(a,'改变b后a对象的值----a并没有变化,因为b是a对象的拷贝,不是引用')  // Object {day: "周末"}
            console.log(b,'改变b后b对象的值')  // Object {day: "星期一", month: "11月"}
    

    对象采用大括号表示,这导致了一个问题:如果行首是一个大括号,它到底是表达式( 对象 )还是语句 ( 代码块 )?

  • JavaScript规定,如果行首是大括号,一律解释为语句(即代码块)。
  • 如果要解释为表达式(即对象),必须在大括号前加上圆括号。
  • { foo: 123 } // 大括号出现在句首,是语句 ( 代码块 ) JavaScript引擎读到上面这行代码,会发现可能有两种含义。 第一种可能是,这是一个表达式,表示一个包含foo属性的对象; 第二种可能是,这是一个语句,表示一个代码区块,里面有一个标签foo,指向表达式123。 ------------------------------------------------------------------------------------- ({ foo: 123}) // 大括号出现在句首,要表示表达式,需要加上 () ------------------------------------------------------------------------------------- 这种差异在eval语句中反映得最明显。 eval('{foo: 123}') // 123 eval('({foo: 123})') // {foo: 123} 上面代码中,如果没有圆括号,eval将其理解为一个代码块;加上圆括号以后,就理解成一个对象。

    (6) 读取属性

    读取对象的属性,有两种方法,

  • 一种是使用点运算符,
  • 还有一种是使用方括号运算符。
  • 如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。但是,数字键可以不加引号,因为会被当作字符串处理。
  • 数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。
  • 方括号运算符内部可以使用表达式。
  • var o = { p: 'Hello World' o.p // "Hello World" o['p'] // "Hello World" 上面代码分别采用点运算符和方括号运算符,读取属性p。 ------------------------------------------------------------------------------- var o = { 0.7: 'Hello World' o['0.7'] // "Hello World" o[0.7] // "Hello World" 请注意,如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。 但是,数字键可以不加引号,因为会被当作字符串处理。 ------------------------------------------------------------------------------- o['hello' + ' world'] o[3 + 3] 方括号运算符内部可以使用表达式。 ------------------------------------------------------------------------------- obj.0xFF // SyntaxError: Unexpected token obj[0xFF] // true 数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。 第一个表达式,对数值键名0xFF使用点运算符,结果报错。 第二个表达式使用方括号运算符,结果就是正确的。

    (7) 检查变量是否声明

    如果读取一个不存在的键,会返回undefined,而不是报错。可以利用这一点,来检查一个全局变量是否被声明。

    // 检查a变量是否被声明 if (a) {...} // 报错 if (window.a) {...} // 不报错 if (window['a']) {...} // 不报错 上面的后二种写法之所以不报错,是因为在浏览器环境,所有全局变量都是window对象的属性。 window.a的含义就是读取window对象的a属性,如果该属性不存在,就返回undefined,并不会报错。

    (9) in运算符-------------------------对比hasOwnProperty()

  • in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。
  • in自身属性和继承属性存在都放回true
  • hasOwnProperty自身属性返回true,继承属性返回false
  • var o = { p: 1 }; 'p' in o // true -------------------------------------------------------------- var o = new Object(); o.hasOwnProperty('toString') // false toString不是o自身属性 'toString' in o // true toString是继承属性,即原型属性 -------------------------------------------------------------- let www = {'a':1, 'b':2} Object.prototype.xxx = '111111111111111111'; console.log('toString' in www, "'toString' in www") // true console.log('xxx' in www, "'xxx' in www") // true console.log(www.hasOwnProperty('toString'), "www.hasOwnProperty // false console.log(www.hasOwnProperty('xxx'), "www.hasOwnProperty('xxx')") // false

    (10) for…in循环

    for...in循环用来遍历一个对象的全部属性。

  • 它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性
  • 它不仅遍历对象自身的属性,还遍历继承的属性。
  • 如果只想遍历对象本身的属性,可以使用 (hasOwnProperty) 方法,在循环内部判断一下是不是自身的属性。 var o = {a: 1, b: 2, c: 3}; for (let i in o) { // 这个变量 i 代表 对象的某一个属性 console.log(o[i]);
  • for...in遍历对象自身属性和继承属性,hasOwnProperty自身属性
  • (11) hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有,返回true,否则返回false。

    var obj = { x: 1, var props = []; var i = 0; for (props[i++] in obj); props // ['x', 'y'] ---------------------------------------------------------------- 例二 hasOwnProperty() let kkk = {'a':1, 'b':2, 'c':3} let KArrayKey = []; let KArrayValue = []; for(let i in kkk) { // for...in不仅遍历自身属性,还遍历继承属性 if (kkk.hasOwnProperty(i)) { // hasOwnProperty自身属性是否存在,返回布尔值 KArrayKey.push(i) KArrayValue.push(kkk[i]) console.log(KArrayKey,'KArrayKey') // ["a", "b", "c"] "KArrayKey" console.log(KArrayValue,'KArrayValue') // [1, 2, 3] "KArrayValue"

    如果只想遍历对象本身的属性,可以使用hasOwnProperty方法,在循环内部判断一下是不是自身的属性

    for (var key in person) { if (person.hasOwnProperty(key)) { console.log(key);