JavaScript对象获取属性的方法(.和[]方式)

时间：2024-02-25 09:59:55

js对象获取属性有两种方法：1.通过.的方式  2. 通过[]方式

// 通过.方式获取属性值，key是静态的
var aa = {name: "zhang", age: 18};
console.log(aa.name);
 
// 通过[]获取属性值, key是动态的，可以是字符串，或者数字的形式
var bb = {"apple": 3, "pear": 2}
var cc = {1: "number1", 2: "number2"}
console.log(bb["apple"]);
console.log(cc[1]);  // 注意这里的写法跟数组容易混淆，cc仍是对象，不是数组
 
// 获取对象所有key的方法
console.log(Object.keys(bb));  // 输出[ \'apple\', \'pear\' ]

那什么是静态什么是动态？

前言：

今天封装了一个函数，发现写的时候用 [ ] 就可以， . 就不可以,就觉得非常奇怪，后来查看了一些大佬的技术博客之后，终于弄懂了这个问题，下面我跟大家分享一下。

代码：获取任意一个元素的任意属性

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 100px;
        height: 100px;
        background: pink;
        /* position: absolute; */
        left: 100px;
        top:50px;
    }
</style>
    
<body>
    <input type="button" value="按钮" id="btn">
    <div id="box"></div> 
    <script>
        var box = document.getElementById(\'box\'); 
        function getStyle(element,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(element,null)[attr];
            }else{
                return element.currentStyle[attr];
            }
        }
        document.getElementById(\'btn\').onclick=function(){
            // console.log(box.offsetLeft)
            console.log(getStyle(box,\'top\'));   //50px，是一个字符串类型
        }
    </script>
</body>
注意： 以上代码若将[attr]换成.attr就获取不到了，原因就是 通过.方式获取属性值，key是静态的，通过[]获取属性值, key是动态的，可以是字符串，或者数字的形式，那这里的attr是我传的参数，值是可变的，当然就不可以用.的方式获取属性值啦~小伙伴们不要采坑哦！

相关文章