JavaScript对象基础

创建一个JavaScript对象的不同方式有哪些?

  • 构造函数模式:像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外我们也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法
function student (name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function() {
    console.log('Hi, I am ' + this.name);
  }
}
var obj = new student('Bob', 20);
  • new关键字创建一个Object的实例,再为它添加属性和方法
var student = new Object();
student.name = 'Bob';
student.age = 20;
student.greeting = function() {
  console.log('Hi, I am ' + this.name);
}
  • 对象字面量
var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}

基础的创建对象的方式一般即为以上三种,其余方法为基础方法之外的方法,现挑选部分方法罗列如下:

  • ECMASCRIPT 6 引入了新的关键字class来创建对象,此方法并没有添加新的逻辑或内容给javascript,只是对于习惯使用其他面向对象编程语言的开发人员来说更为友好,例子如下:
class student {
  constructor(name, age) {
    this.name = name;
    this.age = age;

    this.greeting = function() {
      console.log('Hi, I am ' + this.name);
    }
  }
}
var student1 = new student('Bob', 20);
  • 利用Object.create()方法来创建对象
var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}
var student2 = Object.create(student);
student2.name = 'Alice';
student2.age = 21;

如何添加/删除属性?

我们先来看一段代码:

var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}
delete student.age;
student.gender = 'Male';
console.log(student);

输出结果为:

{ name: 'Bob', greeting: [Function: greeting], gender: 'Male' }

在上述代码中,首先我们创建了一个名为student的对象,对应有属性nameage和方法greeting().
然后我们通过delete删除了其中的一个属性age,并且通过直接赋值的方式为其添加了一个属性gender.

通过[].访问/修改对象属性的区别是什么?

首先明确一点,不论是通过[]还是.都可以顺利的访问和修改已经定义过的对象的任何属性,然而在某些场景下,这两个还是有区别的。

  • 需要新添加一个属性,该属性名中含有空格
    假设还是前文提到的student对象,如果我们想要给他新增加一个属性名为class number的属性。如果此时我们想通过.的方式来增加属性,则应该写为:

    student.class number = 2;//SyntaxError: Unexpected identifier
    

    很明显此时会报错。但如果我们使用[]的方式来添加,则没有任何问题:

    student['class number'] = 2;
    
  • 需要新添加一个属性,属性名需要动态变化,举例如下:

    for (var i=0; i<=4; i++) {
      myObject['prop' + i] = i;
    }
    

    在上述例子中,我们需要添加的属性名的一部分包含一个变量,只能借由for循环和[]的方式添加。

    如何分别获取对象中属性和值?

    首先明确一点,对于JavaScriptd中的对象,我们可以认为其是由键值对(key value pair)组成的,属性名即为key,属性值即为value.

    假设我们想单独的提取出一个对象中的所有属性或者属性值,并存入对应的数组中,应该怎么做?我们只需要调用Object.keys()Object.values()即可。示例请看如下代码:

    var student = {
    name: 'Bob',
    age: 20,
    greeting: function() {
      console.log('Hi, I am ' + this.name);
      }
    }
    var prop = Object.keys(student);
    var value = Object.values(student);
    console.log(prop);  //  输出为  [ 'name', 'age', 'greeting' ]
    console.log(value); //  输出为  [ 'Bob', 20, [Function: greeting] ]
    

如何遍历对象的属性和值?

在上一小节我们知道了如何分别获取对象中的属性和值,并且把他们存入了不同数组中。但在实际使用中,有时候我们并不需要把对象的属性和值分别拿出来,而是需要遍历处理。

那么如何进行遍历处理呢?我们可以通过for in的语法去遍历一个对象,举例如下:

var fruit = {
  apple: 20,
  pear: 20,
  peach: 10
};
var totalNum = 0;
for (let fruitElem in fruit) {
  if (fruit.hasOwnProperty(fruitElem)) {
    totalNum = fruit[fruitElem] + totalNum;
  }
}
console.log(totalNum);

在此例中,我们有一个名为fruit的对象,我们做的是遍历处理该对象,将对象所有属性的值相加并且打印输出。
在此需要注意的是,使用for in遍历对象时, 需要使用hasOwnProperty过滤掉原型中的属性,从而保证我们所处理的都是自己定义的属性。

浅谈JSON

聊到JavaScript对象,就不得不也同时聊一聊JSON.

首先,先看定义,JSON是一种轻量级的数据交换格式,全称为JavaScript对象表示法(JavaScript Object Notation)。所以说我们其实可以把JSON看作是一种存储数据的格式类型,或者说一种数据规范。

JSON这种数据格式用JS对象字面量的表示方法进行描述,那么描述JSON的语法就是JS对象字面量表示法语法的一个子集。但是于JavaScript不同的是,要注意JSON在描述属性时,属性需要用双引号包含住,并且JSON描述的对象不能有任何方法存在。

他的本质是文本文档,只不过需要按照JSON的格式书写,并且其文件后缀为.json.

更多关于JSON的详细介绍,请移步MDN官方的JSON使用简介.

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

推荐阅读更多精彩内容

  • JavaScript对象就是一组属性和方法(函数)的集合。 创建对象字面量表示法:一个对象也需要用一个变量来存储,...
    竹鼠不要中暑阅读 835评论 0 0
  • 1. 什么是 Object 对象? JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每...
    Gracee_flower阅读 176评论 0 0
  • 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法) 创建一个对象通常先...
    咖A喱阅读 189评论 0 0
  • JavaScript对象基础 Object是JavaScript中的一种基本数据类型,Object与其他六种基本数...
    LaobingFung阅读 360评论 0 0
  • object 除了字符串,数字,true,false,null或者undefined以外,其他所有的值在JavaS...
    夏酱酱阅读 239评论 1 0