JavaScript【引用类型】Object 类型

以下为学习《JavaScript 高级程序设计》》(第 3 版) 跟《ECMAScript 6入门所做笔记。

引用类型有时候也被称为或者对象定义。引用对象的值(对象)是引用类型的一个实例。新对象是使用new操作符跟一个构造函数来创建的,如下:

var person = new Object();

创建 Object 对象的两种方法

1. 使用 new 操作符后跟 Object 函数

1 <script>
2     var person = new Object();
3     person.name = "xiaoxu";
4     person.age = 50;
5 </script>

2. 使用对象字面量表示法

var person = {        //“ { ” 是对象字面量的开始
    method: function(){    //方法
        return 'hi';
    },
    name : "xiaoxu",    //name是属性,xiaoxu是name属性的值。用逗号来分隔不同的属性
    "age": 50,            //属性名也可以使用字符串。数值属性名会自动转换成字符串
        5: true           //对象最后一个属性后不需要添加逗号
}

在 ES6 中,属性跟方法可以简洁表示。使用字面量方式定义对象(使用大括号)时,ES5 只允许用标识符做对象的属性名,ES6 允许用表达式作为对象的属性名(即把表达式放在方括号内)。

const name = 'xiaoxu';
const person = {
    //属性简写
    name,        //等同于 name:name,
    //方法简写 
    method(){    //等同于 method: function(){...}
        return 'hi';
    },
    //ES6 允许表达式作为对象的属性名,即把表达式放在方括号内
    ['a'+'bc']: 123
}
console.log(person);    //输出:{ name: 'xiaoxu', method: [Function: method], abc: 123 }

(学习资料:https://es6.ruanyifeng.com/#docs/object#%E5%B1%9E%E6%80%A7%E7%9A%84%E7%AE%80%E6%B4%81%E8%A1%A8%E7%A4%BA%E6%B3%95

注意:简写的对象方法不能用作构造函数,会报错。

使用对象字面量语法能够给人封装数据的感觉。使用对象字面量也是向函数传递大量可选参数的首选方式

例如:

 1 <script>
 2     function displayInfo(args){
 3         var output = "";
 4         if(typeof args.name == "string"){
 5             output += "Name:" + args.name + "
";
 6         }
 7         if(typeof args.age == "number"){
 8             output += "Age:" +args.age + "
";
 9         }
10         alert(output);
11     }
12 
13     displayInfo({
14         name : "xiaoxu",
15         age : 29
16     });
17 
18     displayInfo({
19         name : "daxu"
20     });
21 </script>

页面效果:

弹出窗口,点击确定之后,又弹出一个窗口。

 

访问对象属性

 1 <script>
 2     var person = {
 3         name : "xiaoxu"
 4     }
 5     console.log(person.name);           //点表示法
 6     console.log(person["name"]);        //方括号表示法
 7     
 8     //如果属性名包含会使语法错误的字符,或者属性名使用的是关键字或者保留字,也可以使用方括号表示法
 9     person["first name"] = "Nico";
10     console.log(person["first name"]);
11 </script>

输出:

原文地址:https://www.cnblogs.com/xiaoxuStudy/p/12242794.html