js对象属性 通过点(.) 和 方括号([]) 的区别

2023-12-27 07:58

本文主要是介绍js对象属性 通过点(.) 和 方括号([]) 的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、概念区别

1、点操作符: 静态的。
右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接出现再js程序中,它们不是数据类型,因此程序无法修改它们。
2、中括号操作符: 动态的。
方括号里必须是一个计算结果为字符串的表达式,属性名通过字符串表示。字符串是js的数据类型,在程序运行时可以修改和创建它们。

二、实战展示区别:

1、[]–可以用变量作为属性名或访问,而点方法不可以;

   var obj = {};obj.name = '张三';var myName = 'name';console.log(obj.myName);//undefined,访问不到对应的属性console.log(obj[myName]);//张三var person = {name:'gogo'};//([])可以也可以通过字符串访问,但是需要加双引号console.log(person["name"]);// gogo//(.)直接访问字符串console.log(person.name); //gogo

2、[]中括号法–可以用数字作为属性名,而点语法不可以;

   var obj={};//obj.1=1; //Unexpected numberobj[2]=2;//console.log(obj.1)console.log(obj[2]);//2//console.log(obj.2)console.log(obj)//{2: 2}

3、 [] 可以动态访问的属性名,在程序运行时创建和修改属性,点操作符不行!

   //(  []--可以动态设置和获取)var customer={};var addr=['北京','上海','广州','深圳'];for(i=0;i<4;i++){customer["address"+i]=addr[i];}console.log(addr);console.log(customer);var str = "";for(i=0;i<4;i++){str += customer["address" + i] + "\t";}console.log(str);

4、如果属性名中包含会导致语法错误的字符,或者属性名是关键字或者保留字,也可以使用[]方括号表示法。

   //如:(属性名是关键字或者保留字--都可以,但是点语法不严密,不报错,写法提示有错)person['first name'] ='gogo2';  //first name包含一个空格console.log(person['first name']);//console.log(person.first name)//书写不能通过person['for'] ='gogo_for';  //for 是关键字person.if ='gogo_if';  //if是关键字console.log(person['for']);//gogo_forconsole.log(person.for);//gogo_forconsole.log(person['if']);//gogo_ifconsole.log(person.if);//gogo_if

三、举个例子。简单利用:在数组原型链上增加一个去重的方法,并能实现链式写法。

    Array.prototype.myDistinct=function () {var obj={};for(var i=0;i<this.length;i++){var cur=this[i];//对象的属性名不能重复,重复就是修改;让对象的属性名和属性值相同,借以保存不重复的数组元素if(obj[cur]==cur){this[i]=this[this.length-1];//--中括号法可以用数字作为属性名,而点语法不可以;this.length--;i--;continue;}obj[cur]=cur;}//console.log(obj);//{2: 2, 3: 3, 4: 4, 5: 5}obj=null;return this;};var arr=[5,3,3,4,5,4,2];arr.myDistinct().sort().pop();console.log(arr);//[2, 3, 4]var arr1=[3,'a',4,5,4,'b','a'];console.log(arr1.myDistinct());//[3, "a", 4, 5, "b"]

四、总结

概括
1、变量;数字;动态访问、创建、修改;—用[]
2、简单标识符—[]和点都可
具体
1、[]–可以用变量作为属性名或访问,而点方法不可以;
2、[]中括号法–可以用数字作为属性名,而点语法不可以;
3、[] 可以动态访问的属性名,在程序运行时创建和修改属性,点操作符不行!
4、如果属性名中包含会导致语法错误的字符(比如:‘first name’,点方法书写报错,[]方法可以),或者属性名是关键字或者保留字(点方法、[]方法都可以)。

总而言之,用[]准没错!

参考:https://www.cnblogs.com/ljt1412451704/p/8683158.html

这篇关于js对象属性 通过点(.) 和 方括号([]) 的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/542401

相关文章

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

SpringMVC高效获取JavaBean对象指南

《SpringMVC高效获取JavaBean对象指南》SpringMVC通过数据绑定自动将请求参数映射到JavaBean,支持表单、URL及JSON数据,需用@ModelAttribute、@Requ... 目录Spring MVC 获取 JavaBean 对象指南核心机制:数据绑定实现步骤1. 定义 Ja

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

Before和BeforeClass的区别及说明

《Before和BeforeClass的区别及说明》:本文主要介绍Before和BeforeClass的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Before和BeforeClass的区别一个简单的例子当运行这个测试类时总结Before和Befor

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA

C#之List集合去重复对象的实现方法

《C#之List集合去重复对象的实现方法》:本文主要介绍C#之List集合去重复对象的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C# List集合去重复对象方法1、测试数据2、测试数据3、知识点补充总结C# List集合去重复对象方法1、测试数据

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati