`

JavaScript Garden - 对象使用和属性

阅读更多

对象使用和属性

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 并不能真正的删除属性,
仅仅是移除了属性和值的关联。

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 引擎下也能正常运行,
必须使用字符串字面值声明方式。

分享到:
评论

相关推荐

    javascript garden

    - **一切皆对象**:几乎所有的JavaScript实体都可以像对象一样使用,包括基本类型和复合数据结构。 - 示例: ```javascript false.toString(); // 'false' [1, 2, 3].toString(); // '1,2,3' function Foo() {}...

    JavaScript_Garden_CN

    - **属性访问**: 可以通过点操作符(`.`)或中括号操作符(`[]`)访问对象属性。中括号操作符允许动态访问属性,即使属性名不符合常规的变量命名规则。 - **删除属性**: 使用`delete`操作符是唯一真正删除属性的...

    Javascript Garden 网页的静态文件

    JavaScript Garden,通常被称为JS Garden,是一个在线资源,旨在帮助开发者理解和规避JavaScript中的常见陷阱和微妙之处。这个项目是由Bodo Tasche创建的,它详细解释了JavaScript语言的一些复杂性和不直观的行为,...

    javascript secrit garden

    JavaScript使用原型链实现对象继承,每个对象都有一个`__proto__`属性,指向其构造函数的原型。通过`Object.create()`或`prototype`可以创建继承关系。 7. **异步编程**: JavaScript的异步处理主要依靠回调函数...

    JavaScript 秘密花园.pdf

    删除对象属性只能通过`delete`操作符实现,将属性设置为`undefined`或`null`不会真正移除属性,而只是解除了属性与值之间的关联。例如,在以下代码片段中: ```javascript var obj = { bar: 1, foo: 2, baz: 3 }...

    my-garden

    总的来说,"my-garden"项目涵盖了JavaScript基础、DOM操作、事件处理、数据结构、模块化和可能的前端框架使用等多个知识点。通过这个项目,开发者可以深入理解和实践JavaScript在实际应用中的能力,同时也能提升前端...

    ritual_garden:仪式花园的主要投入

    可能有try-catch语句、自定义错误对象、以及使用Promise的错误链来捕获和处理可能出现的问题。 10. **测试**:项目的质量和稳定性可能通过单元测试、集成测试等方式得到保证。JavaScript有许多测试框架,如Jest、...

    gardenHasMany:一个简单的例子有很多关系,和JS模块

    在数据库设计中,这种关系通常通过中间表来实现,而在JavaScript中,我们可以使用对象和数组来表示这种复杂的数据结构。 首先,我们可以通过创建两个核心类——`Garden`和`Plant`来开始构建这个示例。`Garden`类将...

    网上花园棚服务器

    3. **模型(Models)**:这些文件定义了数据结构和业务规则,例如,可能有一个Garden.js文件,用于定义花园对象的属性和操作。 4. **路由(Routes)**:定义了客户端可以请求的不同URL及其对应的处理函数,比如/api...

    jQuery详细教程

    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一...

    JahChrisGardens.github.io

    2. **DOM操作**:JavaScript与HTML文档对象模型(DOM)的交互,用于动态修改页面内容,例如通过`document.getElementById`、`querySelector`等方法选取元素,以及`innerHTML`、`appendChild`等属性和方法改变元素...

Global site tag (gtag.js) - Google Analytics