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

相关文章

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文

什么是ReFS 文件系统? ntfs和refs的优缺点区别介绍

《什么是ReFS文件系统?ntfs和refs的优缺点区别介绍》最近有用户在Win11Insider的安装界面中发现,可以使用ReFS来格式化硬盘,这是不是意味着,ReFS有望在未来成为W... 数十年以来,Windows 系统一直将 NTFS 作为「内置硬盘」的默认文件系统。不过近些年来,微软还在研发一款名

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

Python中判断对象是否为空的方法

《Python中判断对象是否为空的方法》在Python开发中,判断对象是否为“空”是高频操作,但看似简单的需求却暗藏玄机,从None到空容器,从零值到自定义对象的“假值”状态,不同场景下的“空”需要精... 目录一、python中的“空”值体系二、精准判定方法对比三、常见误区解析四、进阶处理技巧五、性能优化

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例