javascript对象的使用和属性操作示例详解

所属分类: 网络编程 / JavaScript 阅读数: 373
收藏 0 赞 0 分享

JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined。

复制代码 代码如下:

false.toString(); // 'false'
[1, 2, 3].toString(); // '1,2,3'

function Foo(){}
Foo.bar = 1;
Foo.bar; // 1

一个常见的误解是数字的字面值(literal)不是对象。这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分。

复制代码 代码如下:

2.toString(); // 出错:SyntaxError

有很多变通方法可以让数字的字面值看起来像对象。

复制代码 代码如下:

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算
 

对象作为数据类型

JavaScript 的对象可以作为哈希表使用,主要用来保存命名的键与值的对应关系。

使用对象的字面语法 - {} - 可以创建一个简单对象。这个新创建的对象从Object.prototype 继承下面,没有任何自定义属性。

复制代码 代码如下:

var foo = {}; // 一个空对象

// 一个新对象,拥有一个值为12的自定义属性'test'
var bar = {test: 12};

访问属性

有两种方式来访问对象的属性,点操作符或者中括号操作符。

复制代码 代码如下:

var foo = {name: 'kitten'}
foo.name; // kitten
foo['name']; // kitten

var get = 'name';
foo[get]; // kitten

foo.1234; // SyntaxError
foo['1234']; // works

两种语法是等价的,但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名(译者注:比如属性名中包含空格,或者属性名是 JS 的关键词)

译者注:在 JSLint 语法检测工具中,点操作符是推荐做法。

 

删除属性

删除属性的唯一方法是使用 delete 操作符;设置属性为 undefined 或者null 并不能真正的删除属性, 而仅仅是移除了属性和值的关联。

复制代码 代码如下:

14
var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

上面的输出结果有 bar undefined 和 foo null - 只有 baz 被真正的删除了,所以从输出结果中消失。

 

属性名的语法

复制代码 代码如下:

var test = {
    'case': 'I am a keyword so I must be notated as a string',
    delete: 'I am a keyword too so me' // 出错:SyntaxError
};


对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计, 上面的第二种声明方式在 ECMAScript 5 之前会抛出SyntaxError 的错误。

这个错误的原因是 delete 是 JavaScript 语言的一个关键词;因此为了在更低版本的 JavaScript 引擎下也能正常运行, 必须使用字符串字面值声明方式。

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多