JavaScript【引用类型】Object 类型

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

 

目录：   1、创建 Object 对象的两种方法

　　　　2、访问对象属性

　　　　3、遍历对象属性

　　　　4、删除对象属性

 

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

var person = new Object();

 

一、创建 Object 对象的两种方法

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

<script>
    var person = new Object();
    person.name = "xiaoxu";
    person.age = 50;
</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）

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

 

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

例如：

<script>
    function displayInfo(args){
        var output = "";
        if(typeof args.name == "string"){
            output += "Name:" + args.name + "\n";
        }
        if(typeof args.age == "number"){
            output += "Age:" +args.age + "\n";
        }
        alert(output);
    }

    displayInfo({
        name : "xiaoxu",
        age : 29
    });

    displayInfo({
        name : "daxu"
    });
</script>

页面效果:

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

 

 

 

二、访问对象属性

可使用点表示法、方括号表示法访问对象属性

<script>
    var person = {
        name : "xiaoxu"
    }
    console.log(person.name);           //点表示法
    console.log(person["name"]);        //方括号表示法
    
    //如果属性名包含会使语法错误的字符，或者属性名使用的是关键字或者保留字，也可以使用方括号表示法
    person["first name"] = "Nico";
    console.log(person["first name"]);
</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变量。 

let person={
    name:"xiaoxu"
}
let {name}=person;
console.log(name);

属性名跟变量名可以不一致，下例通过结构赋值将name属性赋值给name2变量。

let name="xu"
let person={
    name:"xiaoxu"
}
let {name:name2}=person;
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的属性：

function Person(name, age){
    this.name = name;
    this.friends = ['欣欣','刘雨昕'];
}
Person.prototype = {
    constructor : Person,
    sayName : function(){
        console.log( this.name );
    }
}
var p1 = new Person();
p1.propOfp1 = 1;
for(var key in p1){
    console.log( key + ':' + p1[key] );
}

输出：

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 关键字删除对象的属性

var person = {
    'name': '许某某',
    'age': 24,
    'doit': function(){
        console.log('你好');
    }
}
delete person['age'];
for(var key in person){
    console.log(key);
}

输出：

name
doit

遍历属性无打印出 age 属性，age 属性已被删除。