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 相关文章推荐
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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的autoload自动加载机制使用说明
2010/12/28 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php array的学习笔记
2012/05/16 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
yii数据库的查询方法
2015/12/28 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python实现数据写入excel表格
2018/03/25 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
《水乡歌》教学反思
2014/04/24 职场文书
市场营销战略计划书
2014/05/06 职场文书
公司投资建议书
2014/05/16 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书