JavaScript对象的特性与实践应用深入详解


Posted in Javascript onDecember 30, 2018

本文实例讲述了JavaScript对象的特性与实践应用。分享给大家供大家参考,具体如下:

JavaScript 的简单数据类型是数字、字符串、布尔值(true/false)、null 以及 undefined,其它所有的值都是对象。这些对象是可变的键值对集合。

对象是属性的容器,每个属性都有名字和值。属性的名字可以是包含空字符串在内的任何字符串,而属性值是除 undefined 值之外的任意值。

对象是无类型的,它对属性的名字和值没有类型限制。所以对象很适合汇集和管理数据。对象可以包含其他对象,所以可以很容易地表示成树状或图形数据结构。

使用原型链,可以让一个对象继承另一个对象的属性。合理地使用这一特性,可以减少初始化对象所消耗的内存和时间。

1 对象字面量

对象字面量是包围在一对花括号中的零或多个名值对,它可以出现在任何允许表达式出现的地方:

var empty_object = {};
var stooge = {
  "first-name": "deniro",
  "last-name": "Li"
};

属性的名字可以是包含空字符串在内的任何字符串。如果属性名是合法的 JavaScript 标识符,则可以不加引号。逗号用来分隔多个名值对。

属性值可以是任意的表达式(包括另一个对象字面量),即对象是可潜逃的:

var flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    IATA: "SYD",
    time: "2017-08-02 19:00",
    city: "Sydney"
  },
  arrival: {
    IATA: "LAX",
    time: "2017-08-03 21:37",
    city: "Los Angeles"
  }
};

2 检索

可以使用 [ ] 语法来获取对象的值。如果字符串表达式是一个字符串字面量,而且它又是一个合法的 JavaScript 标识符,那么也可以使用 . 语法。优先使用 . 语法,因为它更紧凑,而且可读性更好:

console.log(stooge["first-name"]);//"deniro"
console.log(flight.departure.IATA);//"SYD"(优先考虑 . 表示法)

如果要检索的属性的值不存在,会返回 undefined:

console.log(stooge["middle-name"]);
console.log(flight.status);
console.log(stooge["FIRST-NAME"]);

|| 运算符可用来填充默认值:

console.log(stooge["middle-name"] || "(none)");//(none)
console.log(flight.status || "unknown");//unknown

从 undefined 的属性中取值会抛出 TypeError 异常,我们可以使用 && 来避免这个问题:

console.log(flight.equipment);//undefined
//console.log(flight.equipment.model);//抛出 TypeError
console.log(flight.equipment && flight.equipment.model);//undefined

3 更新

可以通过赋值语句来更新对象的值。如果属性名已存在于对象中,那么属性的值就会被替换:

stooge["first-name"] = "lily";
console.log(stooge["first-name"]);//"lily"

如果对象之前没有这个属性,那么这个新属性就会被扩充到对象中:

stooge["middle-name"] = "Song";
console.log(stooge["middle-name"]);//"Song"
stooge.nickname = "Deniro";
console.log(stooge.nickname);//"Deniro"
flight.equipment = {
  model: "Boeiing 787"
};
console.log(flight.equipment.model);//"Boeiing 787"
flight.status = "overdue";
console.log(flight.status);//"overdue"

4 引用

对象是通过引用来传递的,所以它们永远不会被复制:

var x = stooge;
x.nickname = "Lucy";
console.log(stooge.nickname);//"Lucy";x 与 stooge 指向同一个引用
var a = {}, b = {}, c = {};//a、b、c 引用一个不同的空对象
a = b = c = {};//a、b、c 引用同一个空对象

5 原型

每个对象都连接到一个原型对象,然后继承原型对象的属性。所有通过对象字面量创建的对象都连接到 Object.prototype,它是标配对象。

创建一个新对象时,可以指定某个对象作为它的原型。我们为 Object 新增一个 create 方法,它会创建并返回一个使用原对象作为原型对象的新对象:

if (typeof Object.beget !== "function") {
  Object.create = function (o) {
    var F = function () {
    };
    F.prototype = o;
    return new F();
  }
}
var another_stooge = Object.create(stooge);

更新某个对象时,是不会更新原型对象的:

another_stooge["first-name"] = "Jack";
console.log(another_stooge["first-name"]);//"Jack"
console.log(stooge["first-name"]);//"lily"

只有在检索的时候,才会用到原型对象。如果没有在对象中检索到某个属性,那么 JavaScript 就会试着从原型对象中获取属性值,如果还是没有找到,JavaScript 就会沿着原型链向上回溯,直到 Object。如果都不存在,就会返回 undefined。

原型关系是动态的关系。如果我们新增一个属性到原型链中,那么这个属性就会立即对所有基于该原型所创建的对象可见:

stooge.profession = "actor";
console.log(another_stooge.profession);//"actor"

6 反射

typeof 操作符有助于确定属性的类型:

console.log(typeof flight.number);//number
console.log(typeof flight.status);//string
console.log(typeof flight.arrival);//object
console.log(typeof flight.manifest);//undefined

注意原型链中的任何属性都会产生值:

console.log(typeof flight.toString);//function
console.log(typeof flight.constructor);//function

有两种方法可以去除这些属性:
①. 检查并丢弃值为函数的属性。
②. 使用 hasOwnProperty 方法,如果对象拥有独有的属性,它就会返回 true:

console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false

7 枚举

for in 语句会遍历一个对象中的所有属性名,所以要过滤掉那些你不想要的属性:

var name;
for (name in another_stooge) {
  if (typeof another_stooge[name] !== 'function') {//过滤掉函数
    document.writeln(name + ': ' + another_stooge[name] + "; ");
  }
}

属性名出现的顺序是不确定的。如果要让属性以特定的顺序出现,就要创建一个包含特定属性名的数组:

var i;
var properties = [
  "first-name",
  "middle-name",
  "last-name",
  'profession'
];//定义想要的属性以及属性顺序
for (i = 0; i < properties.length; i += 1) {
  document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; ");
}

8 删除

delete 运算符会删除对象的属性,但它不会涉及原型链中的任何对象。

删除对象的属性可能会让来自原型链的属性呈现出来:

another_stooge.nickname = "Jack";
console.log(another_stooge.nickname);//Jack
delete another_stooge.nickname;
console.log(another_stooge.nickname);//Lucy

9 减少全局变量的污染

全局变量削弱了程序的灵活性,所以要避免使用。

只创建一个唯一的全局变量:

var MYAPP = {};

这个变量就变成我们应用的容器:

MYAPP.stooge = {
  "first-name": "deniro",
  "last-name": "Li"
};
MYAPP.flight = {
  airline: "Oceanic",
  number: 815,
  departure: {
    IATA: "SYD",
    time: "2017-08-02 19:00",
    city: "Sydney"
  },
  arrival: {
    IATA: "LAX",
    time: "2017-08-03 21:37",
    city: "Los Angeles"
  }
};

要把全局性的资源都纳入一个命名空间下,这样我们的程序与其他类库发生冲突的可能性会显著降低,而且程序也变得更易阅读。

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
three.js搭建室内场景教程
Dec 30 #Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
You might like
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
详解php中的implements 使用
2017/06/13 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
vue props对象validator自定义函数实例
2019/11/13 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python进程间通信用法实例
2015/06/04 Python
python版本的读写锁操作方法
2016/04/25 Python
Python选课系统开发程序
2016/09/02 Python
python实现下载文件的三种方法
2017/02/09 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
职业生涯规划设计步骤
2014/01/12 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
12岁生日演讲稿
2014/05/14 职场文书
股东授权委托书
2014/10/15 职场文书
个人工作能力自我评价
2015/03/05 职场文书
商业计划书之服装
2019/09/09 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL