JavaScript Day03 对象详解1

简介: JavaScript Day03 对象详解1

1. 什么是对象?

无序属性的集合,其属性可以包含基本值,对象,或者函数。可以将对象想象成散列表:键值对,其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。


对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)


现实生活中,每一个人都是一个对象。对象有它的属性,如身高和体重,方法有走路或跑步等;所有人都有这些属性,但是每个人的属性都不尽相同,每个人都拥有这些方法,但是方法被执行的时间都不尽相同。


在 JavaScript中,几乎所有的事物都是对象。


之前我们已经学写了JavaScript的变量


以下代码为变量 person 设置值为 “张三” :

var person = "张三";

对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 key:value键值对的方式 呈现。

var person = {name:"张三", height:1.71, gender: 'male'};

2.对象的创建

对象的初始化有两种方式,构造函数模式和字面量模式

2.1 字面量模式

对象使用"{}“作为对象的边界,对象是由多个属性组成,属性与属性之间通过”,“隔开,属性名与属性值通过”:"隔开;属性名一般不添加引号(当属性名中出现特殊字符的时候需要添加引号),属性值如果是字符串的一定添加引号。

var obj = {
  name:"terry",
  age:12,
  sayName:function(){
    console.log("my name is ",this.name);
  }
}

2.2 构造函数模式

使用Object或者使用自定义构造函数来初始化对象(例如Student)

var obj = new Object();
obj.name = "terry";
obj.age = 12;
obj.sayName = function(){
  console.log("my name is",this.name);
}
//等价于 <==>
var obj={};
obj.name="terry";
obj.age=12;

对象的访问

  • 属性访问

属性访问方式也有两种,点访问、中括号访问

点后面直接跟的是对象的属性,如果属性存在可以访问到,如果属性不存在,得到undefined。 中括号 中 放的是变量,中括号可以将该变量进行解析。

obj.name      //'terry'
obj['name']     //'terry'
name = "age"
obj['name']      //12
  • 方法的访问

方法的访问主要是为了执行该对象中的方法,需要按照函数调用的方式去使用

//以下执行结果不一样
obj.sayName;
obj.sayName();//方法的使用
  • 遍历对象中的属性

普通版的for循环可以遍历数组,但无法遍历对象

增强版的for循环:

for…in用于遍历数组或者对象的属性

for(自定义变量名 in 数组/对象){
  执行代码
}
for(var key in obj){
  var value=obj[key];
}

obj对象:依次从obj中获取到属性名

“自定义变量名key”用来指定是数组的元素索引,也可以是对象的属性

//循环对象属性:
var obj = {
  name:"briup",
  age:12,
  salary:10000
};
/*
两种方式访问属性:
objectName.propertyName
或者
objectName["propertyName"]
*/
console.log(obj.name);
console.log(obj["age"]);
console.log(obj.salary);
for(var key in obj){
  console.log(key+"--"+obj[key]);
}

4.新增删除对象中的属性

只能删除对象的自有属性

delete obj.pro
delete obj[“proname”]
delete obj.sayName     //从obj对象中删除sayName属性

新增属性

obj.newpropname=”value”
-Boolean(value)

把给定的值转换成Boolean型;

-String(value)

把给定的值转换成字符串。

-Number(value)

把给定的值转换成数字(可以是整数或浮点数);

5.2-Object类型到Boolean类型

// 除了空引用(null)会转换为false,其他都被转换为true
var obj = {
  name:"briup",
  age:12
};
// 使用Boolean包装器进行转换
console.log(Boolean(obj));


数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空的字符串 “”(空字符串)
Number 任何非零数字(包括无穷大) 0和NaN
Object 任何对象 null
Undefined undefined

5.3 -Object类型转String类型

var obj = {
  name: 'zhangsan',
  age: 12,
  // 可以重写toString方法,进行我们想要的转换
  toString:function(){
    return this.name+"--"+this.age;
  }
};
console.log(obj.toString(), typeof obj.toString());
console.log(String(obj), typeof String(obj));

-转换规则:

显示转换与隐式转换规则类似,当要将对象转换为String时,类似隐式转换中的PreferredType为String


1.先调用对象的toString方法


2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)


3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换


4.若返回值不为基础数据类型,则在该返回值的基础上继续调用valueOf方法


5.判断valueOf的返回值是否为基础数据类型


6.判断是否为基础数据类型,若是基础数据类型则进行操作3


7.若仍旧不为基础数据类型则报错


Object类型转Number类型

var obj = {
  name:"briup",
  age:12,
  /*
    1.如果只重写了valueOf()或者toString()方法,则调用该方法,并将返回值用Number()转换。
    2.如果两个方法都重写了,则调用valueOf(),并将返回值用Number()转换。
    3.如果两个方法都没有重写,则返回NaN
  */ 
  toString:function(){
    return "100";
  },
  valueOf:function(){
    return 10;
  }
};
console.log(Number(obj));

-转换规则:

显示转换与隐式转换规则类似,当要将对象转换为Number时,类似隐式转换中的PreferredType为Number


1.先调用对象的valueOf方法


2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)


3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换


4.若返回值不为基础数据类型,则在该返回值的基础上继续调用toString方法


5.判断toString的返回值是否为基础数据类型


6.判断是否为基础数据类型,若是基础数据类型则进行操作3


7.若仍旧不为基础数据类型则报错

6.检测属性

检测一个属性是否属于某个对象。常用的方式主要有3种:

in

检测某属性是否是某对象的自有属性或者是继承属性

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
//in运算符的左侧为属性名称,右侧为对象
console.log('name' in obj); //true
console.log('age' in obj);  //true
console.log('gender' in obj); //false
//如果用in判断一个属性存在,这个属性不一定是obj的,它可能是obj继承得到的,如:
'toString' in obj;  //  true
因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以obj也拥有toString属性。
-Object.prototype.hasOwnProperty()

检测给定的属性是否是对象的自有属性,对于继承属性将返回false

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('age'));  //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性
console.log(obj.hasOwnProperty('gender')); //false
-Object.prototype.propertyIsEnumerable()

propertyIsEnumerable()是hasOwnProperty()的增强版,除了是自身属性外,还要求是可枚举属性,即我们创建的属性。

var obj = {
  name: 'zhangsan',
  age: 18,
  school: 'xx大学'
}
console.log(obj.propertyIsEnumerable('name')); //true
console.log(obj.propertyIsEnumerable('age'));  //true
console.log(obj.propertyIsEnumerable('toString')); //false,不可枚举
console.log(obj.propertyIsEnumerable('gender')); //false
目录
相关文章
|
4天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
4天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
14 1
|
4天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
4天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
29 1
|
5天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
5天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
5天前
|
JavaScript 前端开发 开发者
深入理解JavaScript对象创建
深入理解JavaScript对象创建
|
6天前
|
JavaScript 前端开发
js用Date对象处理时间
以上就是JavaScript中Date对象处理时间的一些基本方法。
15 6
|
6天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
6天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
11 2