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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
微信小程序实现蒙版弹出窗功能
Sep 17 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 自定义错误处理函数的使用详解
2013/05/10 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP静态成员变量
2017/02/14 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python实现神经网络感知器算法
2017/12/20 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python分数表示方式和写法
2019/06/26 Python
python中添加模块导入路径的方法
2021/02/03 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Spring 使用注解开发
2022/05/20 Java/Android