Javascript基础 - 对象

对象

对象是JavaScript的基本数据类型，是多个属性的集合。通过键值对来保存，属性名是一个字符串。

对象初始化

创建对象的方法常用的有两种，一是对象直接量，二是通过new关键字

1. 字面量

使用"{}"作为对象边界，对象中包含多个属性，属性与属性之间通过“,”隔开，属性由属性名和属性值组成，通过“:”隔开。

并且属性名一般不添加引号，除非属性名中包含了特殊字符（除了字符，数字，_，$之外的符号）。

属性值可以为变量也可以常量。

  var phone = "18812344321";
  var obj = {
    "1":"a",
    name:"terry",
    "first name":"jacky",
    age:12,
    telephone:phone,
    gender:"male",
    sayName:function(){
      console.log("my name is ",this.name);
    }
  };

2. 构造函数

通过new关键字创建对象

  var obj = new Object();   //等价 var obj = {}
  js对象可以动态的添加或删除属性
  obj.name = "terry";
  obj.age = 12;
  obj.sayName = function(){
    console.log("my name is",this.name);
  }

对象属性访问(写入，读取)

1. 点访问符

  var obj = {};
  obj.name = "terry"    // 写入
  var name = obj.name;  // 读取

2. 中括号访问符

当属性名为变量的时候适合访问

  var obj = {name:"terry",age:12}
  var name = "age"
  obj[name] // 等价于obj["age"] 等价于obj.age

对象属性检测

"name" in obj   // 判断obj中是否含有一个属性名为name的属性

对象属性遍历

对象属性的遍历只能遍历出那些可迭代的属性，用户默认添加的属性都为可迭代属性。

不可迭代属性：console.log的时候不显示，以及无法使用for-in循环遍历出来。但是可以访问

var obj = {name:"terry",age:12}
for(var k in obj){
  var v = obj[k]
  console.log(k,v);
}
//每次循环从obj中获取属性名赋值给k,

删除对象属性

delete obj.name   //从obj对象中删除name属性

对象序列化

数据的传输不能传一个对象，而对象序列化就是将对象转换为字符串，便于数据传输。

序列化的方式有两种：json与qs查询字符串

1. json json字符串

json就是字符串格式

  '{"username":"terry","password":"123321"}'
  var obj = {       
    username:"terry",
    password:"123321"
  };
  
  var json = JSON.stringify(obj)
  //json为'{"username":"terry","password":"123321"}'

  返序列化，将字符串转换为对象
  var obj = JSON.parse('{"name":"terry","age":12}')
  // obj为{name:"terry",age:12}

2. qs 查询字符串

  let qs = require('querystring')
  var obj = {       
    username:"terry",
    password:"123321"
  };

  var qs = querystring.stringify(obj)
  //qs为 'username=terry&password=123321'

  var obj = querystring.parse('name=terry&age=12')
  // obj 为 {name:"terry",age:12}

Object

构造函数
var obj = new Object();
obj.__proto__   内部属性，不可迭代的属性
实例无法调用其构造函数中的方法，
obj 不能调用 Object中的方法，但是可以调用Object.prototype中的方法

1. 静态方法（声明在构造函数内部的方法）

  Object.assign(a,b)  将a,b对象合并
  Object.keys(obj)    获取obj中所有的属性名，返回数组
  Object.values(obj)
  Object.defineProperty()   定义属性

2. 非静态方法（声明在原型中的方法）

  *Object.prototype.constructor
  *Object.prototype.toString()
  *Object.prototype.valueOf()
  *Object.prototype.hasOwnProperty(k)
       var obj = {name:"terry",age:12}
       obj.hasOwnProperty("name") //判断name是否是obj的自有属性
  *Object.prototype.propertyIsEnumerable(k)

定义属性

1. 如何将一个属性设置为不可迭代的

对属性设置enumerable:false，该属性不可迭代，obj只会显示name一个属性，但weight属性是存在的；若设为true则该属性可以迭代出来

  var obj = {
    name:"terry"
  }
  Object.defineProperty(obj,"weight",{
    configurable:true,
    enumerable:false,
    value:"240斤"
  })

2. 如何设置一个只读属性

  Object.defineProperty(obj,"gender",{
    configurable:true,
    enumerable:true,
    writable:false,
    value:"男"
  })
  

3. 如何监听某个属性的改变

这个原理是vue的本质原理。vue是数据驱动框架，当数据发生改变的时候，视图自动更新。

  Object.defineProperty(obj,"age",{
    configurable:true,
    enumerable:true,
    set:function(v){    // 在obj.age = 22
      console.log("生日到了，准备礼物...");
      this._age = v;
    },
    get:function(){
      return this._age;   //在访问obj.age调用
    }
  })
  obj.age = 22;