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

相关文章

Java利用Spire.XLS for Java自动化设置Excel的文档属性

《Java利用Spire.XLSforJava自动化设置Excel的文档属性》一个专业的Excel文件,其文档属性往往能大大提升文件的可管理性和可检索性,下面我们就来看看Java如何使用Spire... 目录Spire.XLS for Java 库介绍与安装Java 设置内置的 Excel 文档属性Java

MySQL 筛选条件放 ON后 vs 放 WHERE 后的区别解析

《MySQL筛选条件放ON后vs放WHERE后的区别解析》文章解释了在MySQL中,将筛选条件放在ON和WHERE中的区别,文章通过几个场景说明了ON和WHERE的区别,并总结了ON用于关... 今天我们来讲讲数据库筛选条件放 ON 后和放 WHERE 后的区别。ON 决定如何 "连接" 表,WHERE

Mybatis的mapper文件中#和$的区别示例解析

《Mybatis的mapper文件中#和$的区别示例解析》MyBatis的mapper文件中,#{}和${}是两种参数占位符,核心差异在于参数解析方式、SQL注入风险、适用场景,以下从底层原理、使用场... 目录MyBATis 中 mapper 文件里 #{} 与 ${} 的核心区别一、核心区别对比表二、底

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

input的accept属性让文件上传安全高效

《input的accept属性让文件上传安全高效》文章介绍了HTML的input文件上传`accept`属性在文件上传校验中的重要性和优势,通过使用`accept`属性,可以减少前端JavaScrip... 目录前言那个悄悄毁掉你上传体验的“常见写法”改变一切的 html 小特性:accept真正的魔法:让

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

Spring Boot Interceptor的原理、配置、顺序控制及与Filter的关键区别对比分析

《SpringBootInterceptor的原理、配置、顺序控制及与Filter的关键区别对比分析》本文主要介绍了SpringBoot中的拦截器(Interceptor)及其与过滤器(Filt... 目录前言一、核心功能二、拦截器的实现2.1 定义自定义拦截器2.2 注册拦截器三、多拦截器的执行顺序四、过

C# Semaphore与SemaphoreSlim区别小结

《C#Semaphore与SemaphoreSlim区别小结》本文主要介绍了C#Semaphore与SemaphoreSlim区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录一、核心区别概览二、详细对比说明1.跨进程支持2.异步支持(关键区别!)3.性能差异4.API 差

Java中自旋锁与CAS机制的深层关系与区别

《Java中自旋锁与CAS机制的深层关系与区别》CAS算法即比较并替换,是一种实现并发编程时常用到的算法,Java并发包中的很多类都使用了CAS算法,:本文主要介绍Java中自旋锁与CAS机制深层... 目录1. 引言2. 比较并交换 (Compare-and-Swap, CAS) 核心原理2.1 CAS

sqlserver、mysql、oracle、pgsql、sqlite五大关系数据库的对象名称和转义字符

《sqlserver、mysql、oracle、pgsql、sqlite五大关系数据库的对象名称和转义字符》:本文主要介绍sqlserver、mysql、oracle、pgsql、sqlite五大... 目录一、转义符1.1 oracle1.2 sqlserver1.3 PostgreSQL1.4 SQLi