Javascript基础 – 对象

时间:2020-8-18 作者:admin

对象

对象是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;
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。