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利用正则表达式去除日期中的-
Jun 09 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 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
重置版宣传动画
2020/04/09 魔兽争霸
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
django实现日志按日期分割
2020/05/21 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
销售经理岗位职责
2014/03/16 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年体育工作总结
2014/11/24 职场文书
党支部考察意见范文
2015/06/02 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS