ES6：解构赋值及对象方法

解构赋值

 对象解构

起别名：通过：来进行取名

//对象解构赋值
var obj = { uname: "张三", age: 21, sex: "男" }
// var uname = obj.uname;
// var age = obj.age;
// var sex = obj.sex

//给变量起别名，用冒号
//以前的变量名自动失效
 var { uname: xxx, age: yyy, sex } = obj

扩展运算符的使用

​ 注意：扩展运算符必须放在最后

var obj = { uname: "张三", age: 21, sex: "男" }
//扩展运算符的使用
 var { uname, ...age } = obj
// console.log(uname, age)
 

// console.log(uname, age)      
// console.log(xxx, yyy, sex)
// console.log(uname, age, sex)

多层解构

//对象解构：多层解构
 var obj = {
  uname: "张三",
   age: 21,
   shcool: {
     name: "积云教育",
     address: "海淀"
   }
 }

 let { uname, age,shcool ,shcool: { name, address } } = obj

在函数中的运用

//形参里面的大括号，不是对象，是解构赋值
function demo({ uname, age }) {
    console.log(uname, age)
}

demo({ uname: "张三", age: 21 })

 数组解构

var arr = ["北京", "上海", "广州", "深圳"]
// var a = arr[0]
// var b = arr[1]
// var c = arr[2]
// var d = arr[3]

//顺序要对应准确
// var [xxx, yyy, c, d] = arr;

//扩展运算符的使用
var [a, b, ...c] = arr
console.log(a, b, c)

ES6常用对象方法

• Object.assign ()  合并对象

通过复制一个或多个对象来创建一个新的对象

var obj1 = { uname: "张三", age: 12 }
var obj2 = { school: "积云教育", address: "海淀" }

//合并对象
// var result = Object.assign(obj1, obj2)
// console.log(result)

// console.log(obj1)

 注意：对象的key是唯一的，当对象的key相同时，obj2的key会将obj1的key覆盖。

 // 合并对象
        var obj1 = {
            name:"小明",
            age:21
        }

        var obj2 = {
            uname:"小花",
            age:15
        }

        var result = Object.assign(obj1,obj2)
        console.log(result);
        

•  Object.defineProperty() 给对象添加一个属性并指定该属性的配置

//对象添加属性
    var obj = { uname: "小明", age: 32 }
//参数1：要添加属性的目标对象
//参数2：要添加或修改的属性
//参数3：属性的描述对象
    Object.defineProperty(obj,"sex",{
        value:"男",              // 属性值
        enumerable:true,        // 可枚举  默认为false
        writable:true,          //可修改，可写   默认为false
        configurable:true       //可配置，可删除    默认为false
    })
    console.log(obj);

•  可枚举就可以理解为能够循环遍历，如果为默认值，获取不到添加的数key值
• 当需要修改key值是 writable 为默认值时 是无法修改的 必须改为true是才可写
• 如果需要删数当前属性需要将configurable 改为true  

• Object.defineProperties()给对象添加多个属性并分别指定它们的配置

 //对象添加属性
    var obj = { uname: "小明", age: 32 }
    //参数1：要添加属性的目标对象
    //参数2：要添加或修改的属性
    Object.defineProperties(obj, {
        "sex": {
            value: "男",              // 属性值
            enumerable: true,        // 可枚举  默认为false
            writable: true,          //可修改，可写   默认为false
            configurable: true       //可配置，可删除    默认为false
        },
        "hobby":{
            value:"羽毛球",
            enumerable:true,
            writable:true,
            configurable:true
        }
    })
    console.log(obj);

 注意：这里这有两个参数第一个还是要添加属性的目标对象，第二个是对象形式，是将要添加的属性和属性描述对象以键值对的形式来进行书写。

• Object.entries () 返回给定对象自身可枚举属性的 [key, value] 数组。 

 引用上方代码

var obj = { uname: "小明", age: 32 }
    //参数1：要添加属性的目标对象
    //参数2：要添加或修改的属性
    Object.defineProperties(obj, {
        "sex": {
            value: "男",              // 属性值
            enumerable: true,        // 可枚举  默认为false
            writable: true,          //可修改，可写   默认为false
            configurable: true       //可配置，可删除    默认为false
        },
        "hobby":{
            value:"羽毛球",
            enumerable:false,
            writable:true,
            configurable:true
        }
    })

//打印对象可枚举的属性
    console.log(Object.entries(obj))

 这是能获取可枚举的属性  返回值为二维数组

------------（这里我将hobby属性的可枚举的属性设为false 打印结果是没有获取到hobby属性）

• Object.freeze()方法可以冻结对象，被冻结的对象不能修改或是删除属性。
• Object.isFrozen()方法检测对象是否被冻结，返回布尔值，

// 冻结对象
    var obj = { uname: "小明", age: 32 }
    Object.freeze(obj)
    // 冻结后修改属性
    obj.uname = "明天会更好"  
    // 冻结后删除属性
    delete obj.uname
    // 冻结后可遍历对象
    for(var k in obj){
        console.log(k);
    }
    console.log(obj);
    // 检测是否冻结   返回值为：true false
    console.log(Object.isFrozen(obj));

对象冻结后，不可修改对象属性，不可删除属性，但是可以可以读取遍历对象，

•  Object.seal()放方法是封印对象，被封印的对象不可删除，不能添加属性 

• Object.isSealed()，检测对象是否被封印，返回值为布尔值

 // 封印对象
    var obj = { uname: "小明", age: 32 }
    Object.seal(obj)
    obj.age = 333  //可修改
    delete obj.age //不可删除
    obj.sex = "男性" //不可添加
    console.log(obj);
    // 检测是否被封印  返回值为：true false
    console.log(Object.isSealed(obj));

•  Object.getOwnPropertyNames()方法返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名。

var obj = {uname:"小明",age:22}
    Object.defineProperty(obj,"sex",{
        value:"男性",
        enumerable:false //不可枚举
    })
    var result = Object.getOwnPropertyNames(obj)
    console.log(result);

•  Object.getOwnPropertyDescriptor()返回对象指定的属性配置。

 var obj = {uname:"小明"}
    // 添加属性 添加属性配置  
    Object.defineProperty(obj,"age",{
        value:21,
        enumerable:false,
        configurable:true,
        writable:false
    })
    // 打印属性的配置
    console.log(Object.getOwnPropertyDescriptor(obj,"age"));

 这里为了方便展示 使用 Object.defineProperty（）添加了属性以及属性配置

返回对象属性的配置（属性描述对象） 

• Object.getOwnPropertySymbols() 返回一个数组，它包含了指定对象自身所有的符号属性。

var obj = {[ Symbol('姓名')]:"小明",age:21}
    
    console.log(Object.getOwnPropertySymbols(obj));

 对象属性必须带有symbol 属性，否则无法获取到

•  Object.getPrototypeOf()返回指定对象的原型对象。

 var obj = {uname:"小明",age:21}
    var result = Object.getPrototypeOf(obj)
    console.log(result);

• Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。 
•  Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组

 var obj = {uname:"小明",age:21}
    // 修改属性的可枚举属性
    Object.defineProperty(obj,"age",{
        enumerable:false,      //修改为不可枚举
    })
    console.log(Object.keys(obj));  //key  （属性）
    console.log(Object.values(obj));  //value （属性值）

 注意：这里只可以获取到可枚举的属，以数组的形式返回。