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. STM32 GPIO输入输出(基于HAL库)

    一.基础认识 GPIO全名为General Purpose Input Output,即通用输入输出.有时候简称为"IO口".通用,说明它是常见的.输入输出,就是说既能当输入口使用 ...

  2. mysql 8.0 改变数据目录和日志目录(一)

    一.背景 原数据库数据目录:/data/mysql3306/data,日志文件目录:/data/mysql3306/binlog 变更后数据库目录:/mysqldata/3306/data,日志文件目 ...

  3. SpringBoot从入门到精通教程(三)

    在上一篇中,我们已经讲了,SpringBoot 如何构建项目,和SpringBoot的HelloWorld, 那这一节我们继续讲 Thymeleaf Thymeleaf 官网: Thymeleaf T ...

  4. nacos注册中心源码流程分析

    作为一个注册中心,和eureka类似,核心的功能点: 1.服务注册:nacos客户端携带自身信息向nacos服务端进行注册. 2.服务心跳:客户端定时向服务端发送心跳,告知服务端自己处于可用状态 3. ...

  5. ArrayList的删除姿势你都知道了吗

    引言 前几天有个读者由于看了<ArrayList哪种遍历效率最好,你真的弄明白了吗?>问了个问题普通for循环ArrayList为什么不能删除连续重复的两个元素?其实这个描述是不正确的.正 ...

  6. SpringBoot项目 @Value("${}") 引入的配置文件的变量不生效 , 需要重启服务才生效解决方案

    最近在开发项目的时候遇到的问题,有的变量需要能动态修改,于是决定把该常量放在配置文件中,以后修改配置文件就行了,但是在修改了配置文件的数据之后获取的还是之前的数据,需要重启服务才生效,怎么决解这个问题 ...

  7. C语言结构体参数传递

    结构体的形参或实参传递和和一般的程序一样: #include<stdio.h> #include<string.h> struct student //结构体定义 { char ...

  8. String 类的常用方法都有那些?

    1.indexOf():返回指定字符的索引. 2.charAt():返回指定索引处的字符. 3.replace():字符串替换. 4.trim():去除字符串两端空白. 5.split():分割字符串 ...

  9. 前端JS获取用户位置

    精确至城市 (基于腾讯位置服务的IP定位,需申请KEY)

  10. ubuntu虚拟机启用双网卡IP配置

    首先要登入自己的虚拟机,这里以ubuntu为例. 配置两块网卡,一块eth0为NAT模式,另一块为eth1仅主机模式 # 进入网卡配置页面vi /etc/network/interfaces # Th ...