属性的枚举、修改、删除

属性的枚举、修改、删除

先来看下属性吧

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    const pro = Object.getOwnPropertyDescriptor(student,'name')
    console.log(pro);

</script>

***

• 小结：configurable： 意思是是否可以删除这个属性
  enumerable：意思是是否枚举，遍历
  writable：意思是是否修改编辑

---

现在我们来添加一个属性

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:true,
        enumerable:true,
        value:'男',
        writable:true
    })
    console.log(student);


</script>

此时，打印student对象，添加了一个sex属性

现在来验证 configurable 这个属性

现在 configurable 为true 时，我们可以用delete删除sex属性，删除成功
现在我们把configurable改为false，我们再来验证是否可以删除

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:false,
        enumerable:true,
        value:'男',
        writable:true
    })
    // console.log(student);

    delete student.sex
    console.log(student);


</script>

此时 sex这个属性依旧还在，验证了 configurable 这个属性是否可以删除

现在我们来验证 enumerable 这个属性 是否可以枚举遍历

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:true,
        enumerable:true,
        value:'男',
        writable:true
    })

    // delete student.sex


    for(let a in student){
        console.log(a);
    }



</script>

• 当我们enumerable为true时，可以遍历出name、age、sex三个属性

现在我们把enumerable改为false

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:true,
        enumerable:false,
        value:'男',
        writable:true
    })

    // delete student.sex


    for(let a in student){
        console.log(a);
    }



</script>

• 此时只能遍历出name、age两个属性

• 所以验证了enumerable属性是否可以枚举遍历

接下来验证writable 属性

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:true,
        enumerable:false,
        value:'男',
        writable:true
    })

    student.sex = '女'
    console.log(student);

    



</script>

• 此时性别已经改了
• 现在我们把writable改为false

<script>
    const student = {
        name:'一只屁橘',
        age:18
    }

    // const pro = Object.getOwnPropertyDescriptor(student,'name')
    // console.log(pro);

    Object.defineProperty(student,'sex',{
        configurable:true,
        enumerable:false,
        value:'男',
        writable:false
    })

    student.sex = '女'
    console.log(student);

    



</script>

• 但是打印结果依旧是男，验证writable属性如果是false的话，是不能修改该属性的。