js获取对象的属性值两种方式

 更新时间:2024年10月24日 11:47:50   作者:林小白的日常  
这篇文章主要介绍了js获取对象的属性值两种方式,在JavaScript中访问对象的属性值可以通过点运算符(.)或括号运算符([])两种方式,文中将两种方式的代码介绍的非常详细,需要的朋友可以参考下

获取对象的属性值,有两种方式。

方式一:

对象.属性名

let obj = {
	name:'张三',
	age:23
};
console.log(obj.name);      //张三

方式二:

对象[属性名]

let obj = {
	name:'张三',
	age:23
};
console.log(obj['name']);  //张三

两种方式有什么不同?

1.[ ]运算符可以用数字作为属性名,点运算符不能

let obj = {
	name:'张三',
	age:23,
	1:'数字'
};
console.log(obj[1]);  //数字
console.log(obj.1);      //报错

报错的运行结果:

2.[ ]运算符可以用变量作为属性名,点运算符不能

let obj = {
	name:'张三',
	age:23,
	1:'数字'
};
			
let key = 'name'
console.log(obj[key]);  //张三
console.log(obj.key);      //undefined

运行结果:

总结 

到此这篇关于js获取对象的属性值两种方式的文章就介绍到这了,更多相关js获取对象属性值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js防阻塞加载的实现方法

    js防阻塞加载的实现方法

    下面小编就为大家带来一篇js防阻塞加载的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 浅谈JS中的!=、== 、!==、===的用法和区别

    浅谈JS中的!=、== 、!==、===的用法和区别

    下面小编就为大家带来一篇浅谈JS中的!=、== 、!==、===的用法和区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Quasar Input:type=

    Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能

    这篇文章主要介绍了Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • javascript forEach通用循环遍历方法

    javascript forEach通用循环遍历方法

    循环遍历一个元素是开发中最常见的需求之一,那么让我们来看一个由框架BASE2和Jquery的结合版本吧.
    2010-10-10
  • 如何解决前端JavaScript处理流式响应的坑

    如何解决前端JavaScript处理流式响应的坑

    axios是一个支持node端和浏览器端的易用、简洁且高效的http库,这篇文章主要介绍了如何解决前端JavaScript处理流式响应的坑,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-06-06
  • js实现倒计时秒杀效果

    js实现倒计时秒杀效果

    这篇文章主要为大家详细介绍了js实现倒计时秒杀效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript/TypeScript 前端实现文件上传到 MinIO 完整指南

    JavaScript/TypeScript 前端实现文件上传到 MinIO 完整指南

    本文介绍了前端使用JavaScript/TypeScript实现文件上传到MinIO对象存储的完整方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-12-12
  • javascript中字体浮动效果的简单实例演示

    javascript中字体浮动效果的简单实例演示

    这篇文章主要介绍了javascript中字体浮动效果的简单实例演示,在一些网站上经常遇到当鼠标移导航栏的时候,能够使其弹出下拉选项,现在就演示一下这种功能,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Bootstrap源码解读下拉菜单(4)

    Bootstrap源码解读下拉菜单(4)

    这篇文章主要源码解读了Bootstrap下拉菜单,介绍了Bootstrap各式各样的下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js实现计算器功能

    js实现计算器功能

    这篇文章主要为大家详细介绍了js实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论