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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

Go之errors.New和fmt.Errorf 的区别小结

《Go之errors.New和fmt.Errorf的区别小结》本文主要介绍了Go之errors.New和fmt.Errorf的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考... 目录error的基本用法1. 获取错误信息2. 在条件判断中使用基本区别1.函数签名2.使用场景详细对

Redis中哨兵机制和集群的区别及说明

《Redis中哨兵机制和集群的区别及说明》Redis哨兵通过主从复制实现高可用,适用于中小规模数据;集群采用分布式分片,支持动态扩展,适合大规模数据,哨兵管理简单但扩展性弱,集群性能更强但架构复杂,根... 目录一、架构设计与节点角色1. 哨兵机制(Sentinel)2. 集群(Cluster)二、数据分片

使用Java读取本地文件并转换为MultipartFile对象的方法

《使用Java读取本地文件并转换为MultipartFile对象的方法》在许多JavaWeb应用中,我们经常会遇到将本地文件上传至服务器或其他系统的需求,在这种场景下,MultipartFile对象非... 目录1. 基本需求2. 自定义 MultipartFile 类3. 实现代码4. 代码解析5. 自定

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静

一文带你迅速搞懂路由器/交换机/光猫三者概念区别

《一文带你迅速搞懂路由器/交换机/光猫三者概念区别》讨论网络设备时,常提及路由器、交换机及光猫等词汇,日常生活、工作中,这些设备至关重要,居家上网、企业内部沟通乃至互联网冲浪皆无法脱离其影响力,本文将... 当谈论网络设备时,我们常常会听到路由器、交换机和光猫这几个名词。它们是构建现代网络基础设施的关键组成

redis和redission分布式锁原理及区别说明

《redis和redission分布式锁原理及区别说明》文章对比了synchronized、乐观锁、Redis分布式锁及Redission锁的原理与区别,指出在集群环境下synchronized失效,... 目录Redis和redission分布式锁原理及区别1、有的同伴想到了synchronized关键字

javaSE类和对象进阶用法举例详解

《javaSE类和对象进阶用法举例详解》JavaSE的面向对象编程是软件开发中的基石,它通过类和对象的概念,实现了代码的模块化、可复用性和灵活性,:本文主要介绍javaSE类和对象进阶用法的相关资... 目录前言一、封装1.访问限定符2.包2.1包的概念2.2导入包2.3自定义包2.4常见的包二、stati

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六