JavaScript 对象字面量

浪漫的宇航员

于 2022-04-07 17:24:25 发布

阅读量1k

点赞数

文章标签： javascript java 前端 html5

本文链接：https://blog.csdn.net/m0_57391937/article/details/124019147

版权

5. 对象安全防护(对象拓展，对象密封，对象冻结)

四.对象在实际应用中的表现

概念：对象以键值对的形式存储数据。键也就是对象的属性，值就是一个具体的数据。

一. 对象的基本用法

// 通过Object方式创建
let person = new Object();
person.name = "小黑";
person.age = 22;
person.job = "software Engineer";
person.sayName = function () {
    console.log(this.name);   //this指当前对象
}

person.sayName();   //调用person  实例的方法


//通过对象字面量的方式调用
let person = {
    name:"小黑",
    age 22,
    job:"software Engineer",
    sayName(){
        console.log(this.name);
    }
}


//通过  对象名.属性  的方式调用
console.log(person.name);
person.sayName();


//通过  对象名['属性'] 的方式调用 
console.log(person['name']);


//修改数据
person.name = "小红";
console.log(person.name);  // 小红


//删除数据项 
delete person.name;  


//总结:对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值（键值对）   常用于保存多种数据类型

二. 遍历对象

//遍历对象
let obj = {
    name:"鲁班",
    age:18,
    job:"teacher"
}

//遍历对象  (for in)
for(let i in obj){     //i 表示key
    console.log(obj[i]);
}

三. 属性的类型

1. 数据类型

Configurable：表示属性是否可以通过delete删除并重新定义，是否可以修改它的特性，默认情况是true

Enumerable：表示属性是否可以通过 for-in 循环返回。默认情况下,所有直接定义在对象上的属性这个特性都是true

Writable：表示属性的值是否可以被修改,默认情况下值为true

Value：包含属性实际的值,默认值为undefined

// Object.defineProperty()；方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

//writable
let obj = {};

Object.defineProperty(obj,"name",{
    value:"德玛",
    writable:true     //为true时表示可以被修改
})
obj.name = "德玛西亚";
console.log(obj);



// configurable
let obj = {};

Object.defineProperty(obj,"age",{
    value:20,
    configurable:true   //为true时表示可以被删除
})
delete obj.age;
console.log(obj)



//enumerable 可枚举
let obj = {
    
};

Object.defineProperty(obj,'name',{
    enumerable:false,
    value:'鲁班'
})

Object.defineProperty(obj,'age',{
    enumerable:true,
    value:20
})

Object.defineProperty(obj,'job',{
    enumerable:true,
    value:"coder"
})

console.log(obj);

for(let i in obj){
    console.log(obj[i]);  //20，coder    name属性不可枚举
}

2. 访问浏览器属性

Get：获取函数，在读取属性时调用,默认值为undefined。

set：设置函数，在写入属性时调用,默认值为undefined.

let obj = {};
Object.defineProperty(obj,'name',{
    get(){
        return this.Myname;
    },
    set(newValue){
       this.Myname  = newValue;
    }
})

obj.name = "小橘";

console.log(obj.name);

3.定义多个属性

 let info = {};
 Object.defineProperties(info,{
     name:{
         value:"小橘"
     },
     age:{
         value:20
     },
     job:{
         value:"teacher"
     }
 })

 console.log(info);

4. 检测属性

  // in操作符   判断当前的属性是不是存在于对象中。
   let obj = {myName:'小橘'};
   console.log('myName' in obj);   //true    myName属于 obj中的属性
   console.log('age' in obj);   //false   age不属于obj的属性


 // hasOwnProperty    测试当前属性是不是对象的自有属性
   let obj = {myName:'小橘',age:20};
   console.log(obj.hasOwnProperty("myName"));
   console.log(obj.hasOwnProperty("job"));

// 区别
   let obj = {myName:'小橘',age:20};
   Object.prototype.sayName = "hello world";
   console.log('sayName' in obj);  //true
   console.log(obj.hasOwnProperty('sayName')); //false  只能测试当前属性是不是对象的自有属性

5. 对象安全防护(对象拓展，对象密封，对象冻结)

//阻止对象拓展(阻止拓展)     可以通过Object.isExtensible(对象名)  来检测一下这个对象是否是可拓展的
let obj = {myName:"小橘"};
Object.preventExtensions(obj);   
obj.age = 18;  //undefined  添加不了  

console.log(obj);  //{myName: "小橘"}



//--->过渡
 let obj = {myName:"小橘"};
Object.preventExtensions(obj);
delete obj.myName;

console.log(obj); //可以删除   preventExtensions可以阻止拓展 不能阻止删除



//对象密封(阻止拓展，阻止删除)   可以通过Object.isSealed(对象名)  来判断这个对象是否已经密封
let obj = {myName:"小橘"};
Object.seal(obj);

obj.age = 18;
console.log(obj); //{myName: "小橘"}
delete obj.myName; 
console.log(obj); //{myName: "小橘"}




//--->过渡
let obj = {myName:"小橘"};
 Object.seal(obj);
 obj.age = 18;
 console.log(obj); //{myName: "小橘"}
 delete obj.myName;
 console.log(obj); //{myName: "小橘"}   

 obj.myName = "小橘橘橘子";
 console.log(obj);  //{myName: "小橘橘橘子"}   //对象属性依然可以修改




//对象冻结(这是最严格的防篡改级别，冻结的对象即不可扩展，又密封，且不能修改) 
let obj = {myName:"小橘"};
Object.freeze(obj);

 obj.age = 18;   //不能添加 
 console.log(obj); //{myName: "小橘"}

 delete obj.myName;  //不能删除
 console.log(obj);  //{myName: "小橘"}

 obj.myName = "小橘橘橘子";   //不能修改 
 console.log(obj);  //{myName: "小橘"}

四.对象在实际应用中的表现

 let obj = [
     {
         id:001,
         title:"火影忍者",
         amount:30,
         status:false
     },
     {
         id:002,
         title:"海贼王",
         amount:40,
         status:true
     },
     {
         id:003,
         title:"三国演义",
         amount:20,
         status:false
     },
     {
         id:004,
         title:"西游记",
         amount:50,
         status:false
     }
 ]

  obj.forEach(function(item,value){   
      console.log("编号:"+item.id+"---书名:"+item.title+"---价格:"+item.amount+"---是否有货:"+item.status);   
  })