javasript-访问对象属性'.'和'[]'两种方式的区别

1.概念区别

点操作符：静态，右侧必须是一个以属性键命名的标识符

中括号操作符：动态，括号里必须是一个字符串

2.实例区别

2.1 新建变量作为属性名

如这个例子，创建myName这个字符串变量作为属性名，只有[]操作符能访问到。

        const obj = {
            name : 'yoimiya'
        }
        const myName = 'name';
        
        console.log(obj[myName]); // yoimiya
        console.log(obj.myName); //undefined

2.2 数字作为属性名

只有[]可以用数字作为属性名

        const obj = {
            123 : 'yoimiya'
        }

        console.log(obj[123]); // yoimiya
        console.log(obj.123); //报错

2.3 动态创建属性名

[]可以动态创建属性名和对应的属性值

        var customer = {};
        var addr = ['北京', '上海', '广州', '深圳'];
        for (i = 0; i < 4; i++) {
            customer["address" + i] = addr[i];
        }

        console.log(customer);
        //{address0: '北京', address1: '上海', address2: '广州', address3: '深圳'}

2.4 引起错误的属性名

属性名如果是关键字或者是语法不正确的字符串，也只能用[]来表示：

        const person = {};

        //键名带有空格 不合语法 只能用[]访问
        person['first name'] = 'yoimiya';
        console.log(person['first name']);//yoimiya
        console.log(person.first name);//报错

        //键名是关键字 不被推荐 不过都不会报错 但还是推荐用[]访问
        person['if'] = 'key word1';
        person.for = 'key word2'