以下为学习《JavaScript 高级程序设计》》(第 3 版) 、《ECMAScript 6入门》所做笔记。
目录: 1、创建 Object 对象的两种方法
2、访问对象属性
3、遍历对象属性
4、删除对象属性
引用类型有时候也被称为类或者对象定义。引用对象的值(对象)是引用类型的一个实例。新对象是使用new操作符跟一个构造函数来创建的,如下:
var person = new 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 }
注意:简写的对象方法不能用作构造函数,会报错。
使用对象字面量语法能够给人封装数据的感觉。使用对象字面量也是向函数传递大量可选参数的首选方式。
例如:
1 <script> 2 function displayInfo(args){ 3 var output = ""; 4 if(typeof args.name == "string"){ 5 output += "Name:" + args.name + "\n"; 6 } 7 if(typeof args.age == "number"){ 8 output += "Age:" +args.age + "\n"; 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>
输出:
还可以用ES6的解构赋值访问对象属性(可参考:https://es6.ruanyifeng.com/#docs/destructuring#%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC),下例通过解构赋值将name属性赋值给name变量,然后输出name变量。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let person={ 2 name:"xiaoxu" 3 } 4 let {name}=person; 5 console.log(name);
属性名跟变量名可以不一致,下例通过结构赋值将name属性赋值给name2变量。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 let name="xu" 2 let person={ 3 name:"xiaoxu" 4 } 5 let {name:name2}=person; 6 console.log(name2); //xiaoxu
上面两个例子都是输出:
如果访问不存在的属性,会得到 undefined。
在解构赋值的时候可以对不存在对象中的属性设置默认值,将属性赋值给变量,这样子,通过变量访问该属性时就得到默认值。
下例对象不存在 err 属性,解构赋值的时候给 err 变量设置默认值,那访问变量 err 的时候就得到默认值 “没有错误”。
let person={ name:"xiaoxu" } let {name,err="没有错误"}=person; console.log(person.err); //undefined console.log(err); //没有错误
for-in 语 句 可 以 用 来 枚 举 对 象 的 属 性 。
下面创建一个Person对象,new一个p1实例,用for-in来枚举p1的属性:
1 function Person(name, age){ 2 this.name = name; 3 this.friends = ['欣欣','刘雨昕']; 4 } 5 Person.prototype = { 6 constructor : Person, 7 sayName : function(){ 8 console.log( this.name ); 9 } 10 } 11 var p1 = new Person(); 12 p1.propOfp1 = 1; 13 for(var key in p1){ 14 console.log( key + ':' + p1[key] ); 15 }
输出:
name:undefined friends:欣欣,刘雨昕 propOfp1:1 constructor:function Person(name, age){ this.name = name; this.friends = ['欣欣','刘雨昕']; } sayName:function(){ console.log( this.name ); }
用 for-in 枚举 global 的属性:
1 for(var propName in global){ 2 console.log( propName ); 3 }
输出:
global
clearInterval
clearTimeout
setInterval
setTimeout
queueMicrotask
clearImmediate
setImmediate
使用 delete 关键字删除对象的属性
1 var person = { 2 'name': '许某某', 3 'age': 24, 4 'doit': function(){ 5 console.log('你好'); 6 } 7 } 8 delete person['age']; 9 for(var key in person){ 10 console.log(key); 11 }
输出:
name
doit
遍历属性无打印出 age 属性,age 属性已被删除。