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
目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
43 2
|
29天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
20天前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
18 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
38 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
43 1
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
21 2
|
2月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
32 2
|
2月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
21 3