JavaScript之对象篇

对象

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

题外话:睡了,明天再搞,中秋节快乐鸭!!!!!

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

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

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

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

var person = "张三";

  • 对象也是一个变量,但对象可以包含多个值(多个变量),每个值以 key:value键值对的方式 呈现。
var person = {
   //注意属性和属性之间用逗号隔开
    name:"张三", 
    height:1.71, 
    gender: 'male'
};

对象的创建

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

  • 字面量模式

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

例如:

var obj = {
  name:"terry",
  age:12,
  sayName:function(){
    console.log("my name is ",this.name);
  }
}
  • 构造函数模式

使用Object或者使用自定义构造函数来初始化对象

var obj = new Object();
  obj.name = "terry";
  obj.age = 12;
  //sayName是obj对象的一个方法,可以看作是obj的一个属性
  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
  • 方法的访问

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

例如

 var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
obj.sayName();//zhang    //obj方法的使用

obj.sayName; //访问的是obj对象的方法
console.log(obj.sayName); //[Function: sayName]

  • 遍历对象中的属性

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

增强版的for循环: for..in用于遍历数组或者对象的属性

(题外话:之前同学区面试京东的前端实习,面试官有问到这个。。。。。)

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

用法示例:

// 增强版的for循环:
//循环对象属性:
var obj = {
     name:"autumn",
     age:22,
     salary:10000
   };
// for..in用于遍历数组或者对象的属性
for (var key in obj) {
     console.log(key + '-------' + obj[key]);
     //name-------autumn
     // age-------22
     // salary-------10000
}

新增删除对象中的属性

只能删除对象的自有属性

var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
// 删除对象中的属性   只能删除对象的自有属性
delete obj.name;
console.log(obj);     //{ age: 13, sayName: [Function: sayName] }

delete obj.sayName     //从obj对象中删除sayName属性
console.log(obj);  //{ age: 13 }

新增属性

obj.newpropname=”value”

var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
// 新增对象中的属性  
obj.gender = 'male'
console.log(obj);  
// {
//      name: 'zhang',
//      age: 13,
//      sayName: [Function: sayName],
//      gender: 'male'
//    }

Object显式类型转换(强制类型转换)

  • ECMAScript中可用的3种强制类型转换如下:
Boolean(value):把给定的值转换成Boolean型
String(value):把给定的值转换成字符串
Number(value):把给定的值转换成数字(可以是整数或浮点数)

* Object类型到Boolean类型

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空的字符串 ""(空字符串)
Number 任何非零数字(包括无穷大) 0和NaN(非数值)
Object 任何对象 null
Undefined undefined
// 除了空引用(null)会转换为false,其他都被转换为true
var obj = {
  name: "briup",
  age: 13
};
// 使用Boolean包装器进行转换
console.log(Boolean(obj));   //true
console.log(Boolean(!obj));  //false
console.log(Boolean(null));  //false
console.log(Boolean(undefined));   //false
console.log(Boolean(111));  //true 
console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN));  //false
console.log(Boolean()); //false
  • Object类型转String类型
转换规则

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

​ 1.先调用对象的toString方法

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

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

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

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

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

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

//直接用toString()方法
var obj = {
     name: 'zhangsan',
     age: 12,
     // 可以重写toString方法,进行我们想要的转换
     toString:function(){
         return this.name+"<-->"+this.age;   //zhangsan<-->12
        
     }
   };
   //两种输出方式
   console.log(obj.toString(), typeof obj.toString());  //zhangsan<-->12 string
   console.log(String(obj), typeof String(obj));  // zhangsan<-->12 string
  • Object类型转Number类型
转换规则

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

​ 1.先调用对象的valueOf方法

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

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

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

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

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

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

// Object类型转Number类型

var obj = {
     name: "briup",
     age: 12,

     //重写toString方法和valueOf方法

     //两个方法都重写了 则调用valueOf()
     valueOf: function () {
          return 20;
     },
     toString: function () {
          return 100;
     },
};
/*
      1.如果只重写了valueOf()或者toString()方法,则调用该方法,并将返回值用Number()转换。
      2.如果两个方法都重写了,则调用valueOf(),并将返回值用Number()转换。
      3.如果两个方法都没有重写,则返回NaN
 */
//    先使用Number 进行转换
//如果两个方法都重写了,则调用valueOf(),并将返回值用Number()转换。
console.log(Number(obj));   //20

大家吃月饼没得啊!!!!

JavaScript之对象篇_第1张图片

JavaScript之对象篇_第2张图片

你可能感兴趣的:(JavaScript之对象篇)