js对象语法及常用功能

对象
JavaScript 提供多个内建对象，比如 Object、String、Date、Array 等等，此外 JavaScript 允许自定义对象。

对象：带有属性和方法的特殊数据类型。

1.创建 JavaScript 对象

 

1.1 通过new关键字创建对象

var obj = new Object();
// 添加属性
obj.name = "小明";
// 添加方法
obj.sleep = function () {
    console.log(this.name + "在睡觉");
};

1.2通过字面量创建对象

var obj = {
    name : "xiaoming",
    age : "18",
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};

注意: 属性名字可以加双引号也可以不加双引号。

1.3 通过构造函数创建对象

// 注意：此处建议方法名首字母大写
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function(name) {
        console.log("你好: " + name + "!");
    };
}

// 创建两个Person对象
var person1 = Person("ande", 18);
var person2 = Person("dahuan", 28);

2.访问对象的属性

2.1 通过点语法访问对象属性

var obj = {
    name : "xiaoming",
    age : 18,
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};
// 访问属性值
console.log(obj.name);   // 输出："xiaoming"
console.log(obj.age);    // 输出：18

2.2 通过中括号法访问对象属性

[  ] 法可以用变量或者数字作为属性名，而点方法不可以；
 

var obj = {
    name : "xiaoming",
    age : 18,
    110 : "110",
    show : function (girlfriend) {
        console.log(this.name + "的女朋友是" + girlfriend);
    }
};
// 访问属性值
console.log(obj["name"]);   // 输出："xiaoming"
var age = "age";
console.log(obj[age]);      // 输出：18
console.log(obj["110"]);    // 输出："110"

3.访问对象的方法

var obj = {
    name : "xiaoming",
    age : 18,
    show : function (girlfriend) {
        console.log("xiaoming的女朋友是" + girlfriend);
    },
    sleep : function () {
        console.log("xiaoming在睡觉")
    }
};
// 访问对象方法
obj.show("小红");
obj.sleep();

4. this关键字

this是JavaScript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

4.1 纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象(Global)。

var index = 0;
function fun() {
    // 此处的this代表就是全局对象window
    this.index = 1;
}
fun();
console.log(index);   // 输出：1

因为我们使用window.fun()来调用函数，调用函数的那个对象是window，所以this指向的也是window。

4.2 在对象内使用

作为对象方法的调用，this 指向当前实例对象。

var point = {
    x : 0,
    y : 0,
    moveTo : function(x, y) {
        this.x += x;
        this.y += y;
    }
};

point.moveTo(10, 10);
console.log("x: " + point.x + " y: " + point.y);  // 输出：x: 10 y: 10

4.3 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象(object)，这时this就指这个新对象。

function Student() {
    this.name = "ande";
}
var stu = new Student();
console.log(stu.name);        // 输出："ande"

5、遍历对象

5.1 使用for...in循环遍历

var obj = {
    name : "xiaoming",
    age : 18,
    sex : "男",
    tel : "18911450210"
};
// for...in循环遍历
for(var attr in obj) {
    if (typeof obj[attr] != "function") {
        console.log("属性操作：" + obj[attr]);
    }
}

5.2 使用Object.keys()遍历

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};

Object.keys(obj).forEach(function(key){

     console.log(key,obj[key]);

});

5.3 使用Object.getOwnPropertyNames(obj)遍历

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){

    console.log(key,obj[key]);

});

5.4 使用Reflect.ownKeys(obj)遍历

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){

console.log(key,obj[key]);

});

6 判断属性是否存在

判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。

6.1点( . )或者方括号( [ ] )

　　通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。

// 创建对象
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name            //"lei"
test["name"]         //"lei"

// 获取不存在的属性
test.age             //undefined

// 获取原型上的属性
test["toString"]     //toString() { [native code] }// 新增一个值为undefined的属性test.un = undefinedtest.un              //undefined    不能用在属性值存在，但可能为 undefined的场景

所以，我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。

这种方式很简单方便，局限性就是：不能用在x的属性值存在，但可能为 undefined的场景。 in运算符可以解决这个问题

6.2 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

 

let test = {
    name:'lei',
    un:undefind
}

'name' in test        //true
'un' in test             //true
'toString' in test    //true
'age' in test           //false

示例中可以看出，值为undefined的属性也可正常判断。

　　这种方式的局限性就是无法区分自身和原型链上的属性，在只需要判断自身属性是否存在时，这种方式就不适用了。这时需要hasOwnProperty()

6.3 hasOwnProperty()

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

let test = {
    name:'zhangsan'
    
}

test.hasOwnProperty('name')        //true   自身属性
test.hasOwnProperty('age')           //false  不存在
test.hasOwnProperty('toString')    //false  原型链上属性

总结

　　三种方式各有优缺点，不同的场景使用不同的方式，有时还需要结合使用，比如遍历自身属性的时候，就会把 for ··· in  ···和 hasOwnProperty()结合使用。

7 对象合并

7.1ES6提供了Object.assign() ，用于合并/复制对象的属性。

Object.assign(target, source_1, ..., source_n)

它会修改target对象，然后将它返回：先将source_1对象的所有可枚举属性复制给target，然后依次复制source_1等的属性。

 let form = {name: 'liming', sex: '男'};
    let obj = {class: '一班', age: 15};
    console.log('before', form);
    Object.assign(form, obj);
    console.log('after', form);

 注意

直接拿原有一个对象作为目标对象，合并后，原对象会被改变。例如上面的“form“， 通过最后一句after的打印可以看出，form被改变了，有可能会影响页面中用到它的地方。所以，如果是两个对象在其他处还有用，建议声明一个额外的空对象作为目标对象，这样不会影响到2个原对象。

 let form = {name: 'liming', sex: '男'};
    let obj = {class: '一班', age: 15};
    console.log('before', form);
    Object.assign({},form, obj);
    console.log('after', form);

7.2 扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

<script>
    let obj1 = {
        name:'zhang',
        age:20
    }

    let obj2 = {
        sex:'男'
    }

    let obj = {...obj1,...obj2}

    //等同于
    // let obj = Object.assign({},obj1,obj2)

    console.log(obj)
</script>