美文网首页Web 前端开发 程序员
【基础】五分钟学会JavaScript对象类型

【基础】五分钟学会JavaScript对象类型

作者: 毛三十 | 来源:发表于2017-04-20 14:36 被阅读0次

1 Object介绍

在JavaScript中Object是最基本,最常用,最强大的数据类型,也是面向对象编程的基础。在JavaScript的六种基本的数据类型中,Object是唯一的复杂数据类型,唯一的可变数据类型。一个Object就是一个基本数据类型以名称值对存储的无序列表。

2 Object创建

Object的创建方法有很多种,本文只介绍简单的字面值创建,构造模式。

2.1 字面值

最简单的Object创建方式。

var apple = {
    name:"苹果",
    color:"红色",
    origin:["栖霞","临猗"],
    showDesc:function () {
        console.log(this.name+"是"+this.color+"的");
    }
};

2.2 构造模式

对于应用程序中只做简单的数据存储,字面值的创建方式非常的简单有效。但是对于复杂的应用时,比如我们需要构建10种水果时,每种水果都有名称,颜色,产地等,如应用上述方式就需要重复多次创建对象。我们应用构造模式并引入水果(fruit)对象来解决上述问题。

function Fruit(theName,theColor,theOrigin) {
    this.name = theName;
    this.color = theColor;
    this.origin = theOrigin;
    this.showDesc = function () {
        console.log(this.name+"是"+this.color+"的");
    }
}

应用这种方式,可以很方便的创建各种水果,如果需要改变水果的描述方法(showDesc)也只需要做一处改动就好。也可以新增自有方法和属性。

var mango = new Fruit("芒果","黄色",["陵水","南宁"]);
//输出 芒果是黄色的
mango.showDesc();

3 访问属性

Object对象中的第一项都被称为属性(函数被称为方法),一般来说属性值可以通过点号(.)或中括号([])加属性名的方式获得。属性名可以是字符串(String)也可以是数字(Number),但一般最好不要用数字做为属性名称,如果用数字做属性名称,只能采用中括号的方式访问属性。

var ageGroup = {15:"儿童",60:"老人"};
//输出 儿童
console.log(ageGroup["15"]);
//抛出 SyntaxError 
console.log(ageGroup.15);

3.1 点号(.)

var people = {name:"iFat3",sex:"男"};
//输出 iFat3
console.log(people.name);

3.2 中括号([])

var people = {name:"iFat3",sex:"男"};
//输出 iFat3
console.log(people["name"]);

4 属性存在与否判定

var people = {name:"iFat3",sex:"男"};
//输出 true
console.log("name" in people);
//输出 false
console.log("age" in people);
//输出 true,继承而来
console.log("toString" in people);

5 自有属性判定

var people = {name:"iFat3",sex:"男"};
//输出 true
console.log(people.hasOwnProperty("name"));
//输出 false,继承属性非自有属性
console.log(people.hasOwnProperty("toString"));

6 访问并枚举属性

var people = {name:"iFat3",sex:"男"};
//输出 name sex
for(var item in people) {
    console.log(item);
}

7 删除属性

只能删除自有属性,不能删除继承属性。

var people = {name:"iFat3",sex:"男"};
delete people.sex;
//输出 undefined
console.log(people.sex);
delete people.toString();
//输出 [object Object]
console.log(people.toString());

8 序列化和反序列化

使用JSON.stringify函数来序列化对象,使用JSON.parse函数来反序列化对象。

var people = {name:"iFat3",sex:"男"};
var peopleStr = JSON.stringify(people);
//输出 string
console.log(typeof peopleStr);
//输出 {"name":"iFat3","sex":"男"}
console.log(peopleStr);
var people2 = JSON.parse(peopleStr);
//输出 object
console.log(typeof people2);
//输出 iFat3
console.log(people2.name);

本文并未介绍JavaScript的原型属性,Prototype部分内容较多会另做介绍。

相关文章

  • 2017-07-03

    0、基础语法 Javascript基础语法包括:变量定义、数据类型、循环、选择、内置对象等。 数据类型有strin...

  • | 自定义 JavaScript 对象的方式

    JavaScript的数据类型分为简单类型和复杂类型,作为复杂类型的对象是业务代码的基础。本篇介绍定义JS对象的方...

  • 5-javascript基础

    javascript基础 javascript基础类型 基本数据类型:String,boolean,Number,...

  • null与对象的复杂关系(typeof null的结果是obje

    原文 博客原文 前言 对象是 JavaScript 的基础。在 JavaScript 中一共有六种主要类型(术语是...

  • JavaScript 原型和原型链

    JavaScript 中除了基础类型外的数据类型,都是对象(引用类型)。但是由于其没有 类(class,ES6 引...

  • TypeScript 对象类型 详解

    对象类型 在 JavaScript 中,最基础的分组和传递数据的方式就是使用对象。在 TypeScript 中,我...

  • 面试准备

    JS 基础 数据类型 JavaScript的数据类型分为两类,原始类型和对象类型 原始类型 数字 字符串 布尔值 ...

  • JavaScript学习 之 传值or传引用

    目录 引言 传值? 传引用? 基础类型传值-对象类型传引用? 传共享! 小结 引言 JavaScript的函数参数...

  • 【基础】五分钟学会JavaScript对象类型

    1 Object介绍 在JavaScript中Object是最基本,最常用,最强大的数据类型,也是面向对象编程的基...

  • JavaScript对象基础

    JavaScript对象基础 Object是JavaScript中的一种基本数据类型,Object与其他六种基本数...

网友评论

    本文标题:【基础】五分钟学会JavaScript对象类型

    本文链接:https://www.haomeiwen.com/subject/gtrlzttx.html