[TOC]
# 对象
> JavaScript的对象是一种无序的集合数据类型,它由若干键值对(Key,Value)组成,也可以理解为(属性,值)。
JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:
```js
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
```
JavaScript用一个`{...}`表示一个对象,键值对以`xxx: xxx`形式申明,用`,`隔开。
> 注意,最后一个键值对不需要在末尾加`,`,如果加了,有的浏览器将报错。
上述对象申明了一个`name`属性,值是`'小明'`,`birth`属性,值是`1990`,以及其他一些属性。最后,把这个对象赋值给变量`xiaoming`后,就可以通过变量`xiaoming`来获取小明的属性了:
```js
xiaoming.name; // '小明'
xiaoming.birth; // 1990
xiaoming['name']; // '小明'
xiaoming['birth']; // 1990
```
访问属性是通过`.`操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用`''`括起来:
```js
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
```
`xiaohong`的属性名`middle-school`不是一个有效的变量,就需要用`''`括起来。访问这个属性也无法使用`.`操作符,必须用`['xxx']`来访问:
```js
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
```
也可以用`xiaohong['name']`来访问`xiaohong`的`name`属性,不过`xiaohong.name`的写法更简洁。我们在编写JavaScript代码的时候,属性名尽量使用标准的变量名,这样就可以直接通过`object.prop`的形式访问一个属性了。
实际上JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。
如果访问一个不存在的属性会返回什么呢?JavaScript规定,访问不存在的属性不报错,而是返回`undefined`:
~~~
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
~~~
由于JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除属性:
~~~
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
~~~
# 检测是否拥有某一属性
如果我们要检测`xiaoming`是否拥有某一属性,可以用`in`操作符:
~~~
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
~~~
> 如果`in`判断一个属性存在,这个属性不一定是`xiaoming`的,它可能是`xiaoming`继承得到的。
~~~
'toString' in xiaoming; // true
~~~
因为`toString`定义在`object`对象中,而所有对象最终都会在原型链上指向`object`,所以`xiaoming`也拥有`toString`属性。
# hasOwnProperty
要判断一个属性是否是`xiaoming`自身拥有的,而不是继承得到的,可以用`hasOwnProperty()`方法:
~~~
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
~~~
```
<html>
<head>
<script>
var car = {
type: "Fiat",
model: 500,
color: "white",
bee(model) {
console.log(model)
console.log(this.model)
},
bee2(x, y, z) {
console.log(x)
}
};
car.bee('Model');
</script>
</head>
<body>
<h1>测试程序</h1>
</body>
</html>
```
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event(事件)
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范