js对象

本篇主要介绍js里如何创建对象,以及for循环访问对象的成员...

什么是对象?

  • 对象,并不是中文里有男女朋友意思,它是从英文里翻译来的,英文叫[Object],目标,物体,物品的意思。
  • 在编程里,我们经常听到有人说,面向对象。那这个对象,你简单来理解,就是一个容器,一个能装变量、函数体的容器。也可以在里面继续装下对象。

对象的创建

    //方法一(推荐)
var obj = {
name : 'rainbow',
run : function(){
console.log('跑步中...')
}
}
//方法二(不推荐)
var obj = new Object()
obj.name = 'rainbow'
obj.run = function(){
console.log('running...')
} //方法三(推荐)
var obj = {}
obj.name = 'rainbow'
obj.say = function(){
console.log('saying ...')
}

ps:

  1. 以上就是创建对象的三种方法,尽量避免第二种方法,因为new Object效率低,建议使用第三种或者第一种
  2. 属性名可以单引,可以双引,也可以不引,但他的类型永远都是string类型
  3. 变量里的成员变量,也可以被赋值方法。但是不推荐这么做。

for循环访问对象成员

for...in

    //先定义一个对象
var obj = {
name : 'rainbow',
age : 20,
sex : 'man',
run : function(){
console.log('I'm running...')
}
} for ( var key in obj ){
if('function' == typeof obj[key]){
obj[key]()
break
}
console.log(obj[key])
} //输出结果如下
rainbow
20
man
I am running... /*估计有些人会问,为什么不是用obj.key访问呢??
那我们不妨打印看看,boj.key是什么?
那请往下看:*/
for (var key in obj) {
console.log(key , typeof key)
console.log(obj.key)//undefined
}
  • 打印如下

ps:我们可以知道,在js里,for...in不能用点运算访问,而是用obj[key]访问,并且方法名也可以访问。

for...of

    //1.使用js内置的对象,创建一个数组对象
var array = new Array(11,56,89,78,-12)
console.log( typeof array )//object
for ( var val of array){
console.log(val)//11,56,89,78,-12
} //2.用的自定义的对象
var obj = {
name : 'rainbow',
age : 20,
sex : 'man',
run : function(){
console.log('I'm running...')
}
}
for ( var val of obj ){
console.log(obj)//obj is not iterable
}
这里报错的意思是,obj这个对象是不可迭代的

总结

  • 用for...of不能迭代自定义对象
  • 用for...in,不能用点运算访问成员,而是用对象[属性名],可以访问一个不存在的属性,但是返回值为undefined
  • 不要使用普通for循环访问对象成员

JavaScript入门-对象的更多相关文章

  1. JavaScript 入门之常见对象

    常见对象 1. Object 对象 2. String 对象 3. Array 对象 4. Date 对象 5. Number 对象 6. 自定义对象 with 语句 为了简化对象调用内容的书写 格式 ...

  2. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  3. JavaScript入门

    本篇内容是学习慕课网相关课程后,总结出可能未来会忘记的内容 (一)JavaScript入门操作 1.js代码插入位置,以及执行顺序 <head> <script type=" ...

  4. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  5. JavaScript入门培训材料(Copy至此以作备份)

    JavaScript简明学习教程 2014年5月31日 目录 一.说明... 2 二.准备知识... 2 (一)HTML. 2 (二)DOM.. 3 三.JavaScript简介... 3 四.Jav ...

  6. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  7. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  8. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  9. 开心菜鸟系列----函数作用域(javascript入门篇)

      1 <!DOCTYPE html>   2 <html>   3 <script src="./jquery-1.7.2.js"></ ...

随机推荐

  1. 利用Java Flight Recorder(JFR)诊断timing及内存问题

    Java Flight Recorder(JFR), 以下简称JFR,请注意这个只有Oracle JDK 1.7(7u40)或以上版本才有, OpenJDK木有这东西. 启用: Java命令行启动参数 ...

  2. Java源码赏析(六)Class<T> 类

    目的 Class 类是每一个程序员都必须了解的,也是使用反射机制的基础. 这篇文章将Class 类的公共方法大致介绍了一遍(省略了安全.枚举.断言.注解相关代码). 代码 package java.l ...

  3. Hive中的集合数据类型

    除了使用础的数据类型string等,Hive中的列支持使用struct, map, array集合数据类型. 数据类型 描述 语法示例 STRUCT 和C语言中的struct或者"对象&qu ...

  4. SpringBoot从入门到精通教程(一)

    写在前面的话: 在很早之前,记笔记时候,我就一直在思考一个问题,我记笔记是为了什么,我一直想不明白 ,后面发现技术跟新迭代的速度实在太快了,笔记刚纪完,技术又跟新了,于是我想了想干脆边写博客,边记笔记 ...

  5. Docker 笔记学习

    文章目录 概述 CentOS7 Docker 安装 启动 Docker 后台服务 镜像加速 Docker常用命令 如何创建一个镜像 存储和载入镜像 上传镜像 容器的基本操作 创建容器 终止容器 如何进 ...

  6. Excel 数据对比,窗口并列排序操作(xlw文件格式的由来)

    步骤1:打开Excel文件,输入一些数据 步骤2:点击视图,创建新窗口(这里就会创建一个和步骤1一抹一样的的表格,我们可以在任务栏上看到) 第三步:点击视图里面的全部重排按钮,在重拍窗口里面选择需要拍 ...

  7. 使用xshell软件进行文件的上传和下载

    1.选择xshell的文件里面的属性-->文件传输,把上传路径和下载路径设置好. 上传路径:介绍我们需要向Linux系统里面传东西. 下载路径:就是我们把Linux系统里面的大小拷贝出来. 2. ...

  8. npm install 报错解决办法

    npm install 报错解决办法 原因是因为node_modules可能有意外改动,导致依赖库不完整,删除项目下的node_modules,在你的项目目录下,重新执行npm install,这会重 ...

  9. JavaWeb基础总结:Filter专题

    Java Servlet Filter Filter 被称为过滤器,其主要作用是对 Servlet 容器调用 Servlet 的过程进行拦截,从而在 Servlet 进行响应处理的前后实现一些特殊功能 ...

  10. 远程调用get和post请求 将返回结果转换成实体类

    package org.springblade.desk.utils; import org.apache.http.client.ResponseHandler; import org.apache ...