Js通过.或者[]访问对象属性的语法、性能等区别入门教程_对象菜鸟教程网

在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取,例如:function Person() {this.name=” 张三 “; // 定义一个属性 namethis.say=function(){ // 定义一个方法say()return “我的名字是 ” + this.name ;}
}
var a

Js通过.或者[]访问对象属性的语法、性能等区别入门教程

在JavaScript中可以使用 . 或者 [ ] 来访问对象的属性,但是对象中方法只能通过 . 来获取,例如:

Js通过.或者[]访问对象属性的语法、性能等区别入门教程_对象菜鸟教程网

function Person() {
  this.name=" 张三 "; // 定义一个属性 name
  this.say=function(){ // 定义一个方法say()
    return "我的名字是 " + this.name ;
  }
}
var a=new Person();
console.log("姓名:"+a.name); // 使用“.”来访问对象属性
console.log("姓名:"+a["name"]); // 使用“[ ]”来访问对象属性
console.log(a.say());  // 使用“.”来访问对象方法

使用”.”运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?  

1.语法方面的区别

点表示法的对象的属性名是标识符,而后者的属性名则是一个字符串。

2.灵活性方面的区别

在JavaScript编写程序中,可以为对象创建任意数目的属性。但使用”.“运算符来存取一个对象的属性时,属性名是用标识符表示的。而在JavaScript程序中,标识符必须被逐字地输入,它们不是一种数据类型,因此程序不能对其操作。也就是说,标识符是静态的,在程序中必须对其进行硬编码。

而使用数组[]表示法来存取一个对象的属性时,属性名是用字符串表示的。字符串是JavaScript的一种数据类型,因此可以在程序运行中操作并创建它们。

3.性能方面区别

数组[]表示法在存取属性值时会进行表达式运行。而点表示法是直接存取属性值,理论上执行效率会比数组表示法高。性能方面其实可以忽略。

某些场景必须用到数组表示法来动态存取属性值,这个是点表示法无法做到的。

总的来说,这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。

海计划公众号
(0)
上一篇 2020/04/05 01:57
下一篇 2020/04/05 01:57

您可能感兴趣的内容

  • DecorativeLetterAnimations入门知识一款基于Anime.js和CSS3的炫酷文字动画特效

    DecorativeLetterAnimations基础知识教程 官方网址:https://tympanus.net/Development/DecorativeLetterAni…

    2020/03/06
  • audio标签以及audio对象入门教程_audio小白教程

    一.audio标签简单语法属性属性值描述autoplay如果出现该属性,则音频在就绪后马上播放。controls如果出现该属性,则向用户显示控件,比如播放按钮。loop如果出现该属性,则每当音频结束时重新开始播放。preload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autopl

    2020/03/24
  • w3school使用攻略全球最大的中文 Web 技术教程。

    w3school基础入门 官方网址:http://www.w3school.com.cn/ 简介描述:全球最大的中文 Web 技术教程。

    2020/03/05
  • 浅谈js防抖和节流小白常识_防抖基础教程

    防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)从滚动条监听的例子说起先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求– 监听浏览器滚动事件,返回当

    2020/03/22
  • css3新增的背景属性有哪些?基础知识入门_背景指南教程

    1、css3新增属性之background-size:指定背景图片尺寸在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。div{
    background:url(img_flwr.

    2020/03/22
  • 掌握依赖注入5大原则,无需额外编代码!入门基础_代码使用攻略

    如果是第一次接触这个概念,可能会一时没有头绪,网上的各种解释可能会让你更加混乱,并觉得它没那么简单。 其实依赖注入本身是单纯、简单的。简单来说,依赖注入是一种方式、方法或者说手段,是让被注入者和注入者之间建立关联的手段。依赖注入的目的是松耦合,是交互对象之间的松耦合。今天,小芯带来的文章主要描述了关于进行依赖注入(dependency injection,D

    2020/03/20
  • 10种免费的工具让你快速的、高效的使用数据可视化小白基础_可视化基础知识入门

    不要简单地展示数据,用它讲个故事!是的,我们有数据,并有了数据的洞察,然后呢?显然,下一步将是与人们交流这些发现,以便他们采取必要的行动。最有效的数据交流方式之一就是讲故事。但是要成为有效的讲述者,我们需要简化事情,而不是使事情复杂化,这样使得分析的真正本质不会丢失。在讲故事和可视化方面,有许多工具可供选择。有些是免费的,有些是付费订阅的。有些简单直观,但缺

    2020/03/26
  • nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具使用教程_nuxt基础知识教程

    Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器,推荐尝试。目前Nuxt.js官方文档目前已经覆盖了大部分常用需求 , 这篇文章主要讲nuxt工程中一些需要注意的知识点,以及一些比较常用的功能介绍。安装和部署npm install -g vue-cli

    2020/03/26
  • 一对一聊天:美女一对一单独聊天基础指南_直播基础知识教程

    寻找一对一聊天? 来这里,这儿有国内最受欢迎的在线视频聊天约会互动社区,拥有数以万计的一对一视频聊天直播室。 每天,美女主播都参加视频聊天约会直播,数百万网民同时参加,签约主播将拥有自己的聊天室,在视频聊天室中在线唱歌,与歌迷互动。 社交软件上的小姐姐们,点击下载为你汇集一对一随机视频聊天、1对1手机视频聊天软件、可以一对一视频的app等,都是非常好用的能直

    2020/03/24
  • JavaScript 防篡改对象指南攻略_对象小白指南

    开发过程中,每个开发者定义的对象可能不想要被别的开发者所重写或者新增对象属性,这时候可以将对象变为防篡改对象,当然防篡改对象也有分级别的不可拓展对象javaScript里面的对象默认都是可以拓展的,也就是说创建一个对象,可以给这个对象添加属性和方法// 此代码在非严格模式下
    var obj = {name:’zyp’,age:’20’
    }
    obj.sayNa

    2020/03/29
  • 腾讯文档基础知识_在线多人协作文档工具

    腾讯文档基础知识 官方网址:https://docs.qq.com 简介描述:在线多人协作文档工具 《腾讯文档》是一个可多人协作的在线文档编辑和管理工具,支持Word和Excel文…

    2020/03/11
  • HTTP慢速攻击菜鸟教程下载_攻击攻略教程

    漏洞原理HTTP慢速攻击也叫slow http attack,是一种DoS攻击的方式。由于HTTP请求底层使用TCP网络连接进行会话,因此如果中间件对会话超时时间设置不合理,并且HTTP在发送请求的时候采用慢速发HTTP请求,就会导致占用一个HTTP连接会话。如果发送大量慢速的HTTP包就会导致拒绝服务攻击DoS。3种攻击方式1.Slow headers(也

    2020/03/22
  • IT天空使用攻略_一个以电脑技术为主题的综合性 IT 论坛

    IT天空使用攻略 官方网址:https://www.itsk.com/ 简介描述:一个以电脑技术为主题的综合性 IT 论坛 IT天空 是一个以电脑技术为主题的综合性 IT 论坛,主…

    2020/03/06
  • vue之按钮权限及优雅请求API入门基础_api入门基础教程

    系统开发中按钮级权限控制也是非常重要的功能之一,可以严格控制不同角色用户所拥有的功能权限。自定义v-permission指令首先可以通过vue的自定义指令来控制按钮(div,link也阔以)等的显示与否以及是否禁用状态。具体可查看官方文档vue自定义指令。/*** 定义vue permission指令** el:指令所绑定的元素,可以用来直接操作 DOM *

    2020/03/22
  • JS合并两个有序数组小白知识_数组基础教程

    代码如下:function merge(nums1, nums2) {var len1 = nums1.length – 1;var len2 = nums2.length – 1;var len = nums1.length + nums2.length – 1;while (len1 >= 0 && len2 >= 0) {nums1[len–] =

    2020/03/24
  • 设计师10大必备HTML动画工具入门百科_动画菜鸟指南

    HTML 5已经成为Web开发者当中最流行的语言之一,“健壮的”语言有很大的生产优质万维网内容的能力。HTML 5在近三年的增长迅猛,新引入HTML 5的技术更加的优秀。HTML 5技术被现代浏览器所支持,如Chrome、Firefox、Internet Explorer等等。而今天,我们将为您推荐十个HTML 5动画工具,希望对您的工作有所帮助。1. Mi

    2020/03/30