Javascript中的对象

对象

JS中数据类型分为两大类：基本类型数据， 引用类型数据 。主要区别是位于的内存位置不同。
值类型：存储在栈中
引用类型：存储在堆里

对象是属性的无序集合。属性：分两部分：属性名、属性值。
属性值可以是任意的数据类型： 字符串、数字、布尔值、null、undefined、数组、对象、函数等

一，对象的操作

对象的属性操作可以通过两种语法： 方括号语法、 点语法

1.增加属性

obj["xingbie"] = "男";  
obj.xingbie = "男";
obj[xingbie + 1] = "男";

主要区别：方括号里，是一个JS的执行环境 里面可以写js代码 点语法，点什么就是什么

2.删除属性

var obj2 =  {
            age: 33,
            sex: "男"
         }
delete obj2.age;

3.循环 for… in循环 专门用于循环对象

for (var i in obj) {
    console.log(obj[i]);
}

i表示属性名 obj表示被循环的对象
obj[i]才能得到里面的对应属性值
obj.i 只能得到i属性

二，对象的属性特性

对象是由属性组成的。
可是在ES5之前，只要能够得到一个对象，就可以随意修改它的属性。
于是ES5中规定了对象的属性有4个特性

1 value
2 writable
3 enumerable
4 configurable

    //因为增加了属性的新特性所以定义属性的方式发生了变化
    var obj = {
        a: 1
    }
   // 定义对象的属性的特性：ES5的方式
    Object.defineProperty(obj, "color", {
        value: 'red',
        writable: false,
        enumerable: false,
        configurable: false  // 不可以再次配置color属性
    })

//因为enumerable设置为false的原因，循环不到color属性
     for (var i in obj) {
         console.log(i)
     }

//因为writable设置为false的原因，无法改变color属性
     obj.color = "blue";
     console.log(obj.color);

     inp.oninput = function() {
         var value = this.value;
         obj.color = value;
     }

ES5还对对象的属性增加了两个函数 一个叫做get 一个叫做set

Object.defineProperty(obj, "color", {
    get: function () {
        console.log("获取")
        return this._color;
    },
    set: function (value) {
        console.log("设置")
        title.innerHTML = value;
        inp.value = value;
        this._color = value;
    },
    // value: 'red',
    // writable: false,
    enumerable: false,
    configurable: false  // 不可以再次配置color属性
})

obj.color = 123;

三，对象的静态方法

//对象的属性操作有几种：读取、修改、删除、添加 

 Object.preventExtensions(); // 禁止拓展 
 Object.preventExtensions()
 var obj = {
     name: "王五",
     sex: "男",
     age: 22
 }
 Object.preventExtensions(obj);
 //增加新属性不可以了 但是 修改、删除依旧可行
 obj.married = false;
 obj.name = "王六";
 delete obj.sex;
 console.log(obj)


 Object.seal() // 密封 不可以增加 不可以删除 可以修改 可以读取
 var obj = {
     name: "王五",
     sex: "男",
     age: 22
 }

 Object.seal(obj);
 obj.married = false;
 obj.name = "王六";
 delete obj.sex;
 console.log(obj)


 Object.freeze() // 冻结 不可以增加 不可以删除 不可以修改 只能读取
 var obj = {
     name: "王五",
     sex: "男",
     age: 22,
     son: {
         age: 1
     }
 }
 Object.freeze(obj);
 obj.married = false;
 obj.name = "王六";
 delete obj.sex;
 console.log(obj);

四，对象的方法 （es6新增）

对象的方法在ES6中增加了两个静态方法

1.Object.assign() 浅复制方法

第一个参数表示接收属性的对象
之后的每一个参数表示提供属性的对象 如果具备相同属性名，则以后面的为准

var obj = {}
var obj1 = {
    name: "张三",
    age: 15,
    sex: '男',
    married: false,
    girlFriend: {
        name: '小花',
        age: 14
    }
}
var obj2 = {
    age: 13
}

Object.assign(obj, obj1, obj2);
// console.log(obj);
obj.girlFriend.age = 15; // 修改一个对象的内容
console.log(obj1.girlFriend.age); // 结果影响到了另一个对象 说明是浅复制

2. Object.is() 用于比较两者是否全等

console.log(NaN === NaN); //false
console.log(Object.is(NaN, NaN));// true

console.log(0 === -0); //true
console.log(Object.is(0, -0)) //false