JS基础 -- Object对象的简介与使用 一

/*
* JS中数据类型
* - string 字符串
* - number 数值
* - boolean 布尔值
* - null 空值
* - undefined 未定义
* - 以上这五种类型属于基本数据类型,以后看到的值只要不是上面的五种,那么全都是对象
* - object 对象
*
* 基本数据类型都是的那一的值。例如‘hello’ 、123、true,值和值之间没有任何的联系
*
* 在JS中表示一个人的信息,一般都是指名字、性别、年龄(name、gender、age)
* 一般创建的时候,是这么写的:
* var name = '张三';
* var gender = '男';
* var age = 18;
* 这样写是没毛病的,但是对于对象来说,它们就不是一个整体了,
* 这里说的整体是指一个对象中有一个或多个数据类型。
* 例如:一个购物车,一个手提袋,一个收纳盒,这些就是一个对象,在这个对象中放了很多东西,
* 例如:一个购物车里有面包、牛奶等等这些东西就是数据类型
* 购物车就是一个对象,面包、牛奶就是数据类型;
*
* 对象属于一中复合的数据类型,在对象中可以保存多个不同的数据类型的属性,
* 对象不仅可以保存不同的数据类型,同样的可以查询、修改、删除,也就是常说的增、删、改、查这四个功能。
*
* 对象的分类:
* 1.内建对象
* - 由ES标准中定义的对象,子啊任何的ES的实现中都可以使用
* - 比如:Math、string、Number、Boolean、Function、Object....
*
* 2.宿主对象
* - 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
* - 比如:BOM、DOM
*
* 3.自定义对象
* - 由开发人员自己创建的对象
*
* 如何使用对象?
/
//使用对象第一步就是创建对象
/

* 前面的var obj 这是创建一个变量,这里不做过多解释,不明白自行百度
* 等号后面的 new 关键字使用与调用的函数,是构造函数的constructor
* 构建函数是专门创建对象的函数
* new关键字后面 Object() 就是对象方法
*/

        var obj = new Object();

/*
* 通过打印来看看 obj 这个变量里有什么,这里不能贴图就不贴了,直接动手给你写出结果
* console.log(obj);
* 打印结果:Object { }
* 打印之后 obj 变量里什么都没有,那是因为还没有往里面添加上面所说的数据类型
*
* 然后,在打印一下类型,就是说在console.log(typeof obj);里添加 typeof 来打印 obj 变量的类型
* console.log(typeof obj);
* 打印结果:'Object' 或 Object
* 这里打印的结果根据浏览的要求会加 单引号或者没有单引号,直接是打印结果
* 那么打印的结果是 Object 这就是obj变量的类型,叫做对象
* 接下来就是往 obj 变量里添加数据类型
/
//打印结果
// console.log(obj);
//打印类型
// console.log(typeof obj);
/

* 在对象中保存的值成为属性
* 向对象添加属性
* 语法:
* 对象.属性名 = 属性值;
* 对象就是 obj ;属性名就是 name(属性名可以自定义);属性值就是给属性名设置一个数据类型(不知道数据类型就看上面)
* 添加属性的数量是根据实际的要求来定的,比如:姓名、年龄、性别、身高、体重等等,这些都可以当做属性添加到对象中;
*
* 下面通过例子来了解对象与属性:
*/

        //由于上面已经创建好对象,所以直接添加属性
        //添加一个姓名属性,name就是属性名,张帅就是属性值
        obj.name = "张帅";
        //添加一个性别属性,gender就是属性名,男就是属性值
        obj.gender = '男';
        //添加一个年龄属性,age就是属性名,20就是属性值
        obj.age = 20;
        //添加一个身高属性,height就是属性名,175就是属性值
        obj.height = 175;
        //添加一个体重属性,weight就是属性名,140就是属性值
        obj.weight = 140;
        //这时再次打印obj,看看这次的结果是什么
        console.log(obj);

/*
* 打印的结果:
* 网页打印有两种格式:一种是横向的,一种纵向的;两种展示都是一个意思内容不变,不一样的是对象内部属性的排列
* 横向的是以你添加的顺序来排列的,而纵向是是以属性名的第一个字母来排列的
* 横向:
* Object { name: "张帅", gender: "男", age: 20, height: 175, weight: 140 }
* 纵向:
* Object {
* age: 20
* gender: "男"
* height: 175
* name: "张帅"
* weight: 140
* }
* 在对象中展示的属性是 属性名 :属性值;两个属性之间的区分是以‘,’逗号分隔的
* 属性之间的关系是属于同一个对象
*
* 这时,你会想我如何一个一个读取哪?
* 其实,也很好理解,上面是怎么添加的属性,这里就这么读取属性,就是对象加属性名就可以读取
* 读取对象中的属性:
* 语法:
* 对象.属性名
/
/

* 打印单个属性名
* 打印结果:
* 张帅 或者 '张帅'
*
* 在读取属性时,如果写错了,并不会报错。
* 读取属性必须是对象中有的属性,没有的属性打印结果是 undefined
/
// console.log(obj.name);
// console.log(obj.gender);
// console.log(obj.age);
// console.log(obj.height);
// console.log(obj.weight);
/

* 既然能读取是否可以修改属性值哪?
* 答案是肯定的,可以修改,修改的方法和上面设置属性值样的,只不过是
* 从新设置了属性值;
* 修改属性如下:
*/

        obj.name = '李四';

/*
* 修改其中一个属性值后,其他的属性值不变,
* 打印修改过的属性:
* Object { name: "李四", gender: "男", age: 20, height: 175, weight: 140 }
*
* 这里只修改了 name 所以只有 name 的值改变了,之前name值是 张帅,经过修改现在的 name的值是李四
*
* 修改是一定要在属性名初始化设置之后,比如:张帅是初始化设置的,那么修改的时候就需要在张帅的下面从
* 新设置,这种情况只有在特定的需求下才会需要。也是使用非常多的,比如修改会员姓名、修改电话、修改地址。
*
* 如果想要知道对象内有几个属性可以在使用 Object.getOwnPropertyNames(obj).length ,也就是在
* console.log(Object.getOwnPropertyNames(obj).length);里加上这个就行
*/

        console.log(obj);

/*
* 既然修改也可以,那可不可以删除属性?
* 答案也是肯定的,增、删、改、查,前面已经写了增、改、查,就差这个删
*
* 删除对象的属性:
* 语法:
* delete 对象.属性名;
*/

        delete obj.name;

/*
* 打印删除对象的属性
* 删除后打印的结果是 undefined,如果在项目中对象出现这个undefined有两种情况:
* 一、那就是没有这个属性名。
* 二、那就是已经删除。
*
* 打印结果:
* Object { gender: "男", age: 20, height: 175, weight: 140 }
* 这里可以看出 name属性已经没有了,这说明name属性已经被删除
*/

        //打印被删除的属性
        console.log(obj.name);
        //打印整体
        console.log(obj);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容