JavaScript 对象字面量

一. 对象的基本用法

二. 遍历对象

三. 属性的类型

1. 数据类型

2. 访问浏览器属性

3.定义多个属性

4. 检测属性

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 表示keyconsole.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);  //trueconsole.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);   })

JavaScript 对象字面量相关推荐

JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
字面量、对象字面量、函数字面量、函数定义
#1.字面量(literal) 用于表达一个固定值的表示法,又叫常量. [JS程序执行到代码中的字面量,会立即知道它是什么类型的数据,值是多少] #2.对象字面量语法: {k1:v1, k2:v2, ...
学习新对象字面量语法
目标使用简写属性名称使用简写方法名称使用计算属性名称问题哪些部分是冗余的? const person={name:name,address:address,sayHello:function ...
js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
const的使用 || 对象增强写法 (对象字面量)
const的使用 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
利用对象字面量创建对象
利用对象字面量创建对象 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
js练习题:对象字面量的形式创建一个名字为可可的狗对象
js练习题:对象字面量的形式创建一个名字为可可的狗对象名称:可可类型:阿拉斯加犬年龄:5岁颜色:棕红色技能:汪汪汪(Call),演电影(ShowFilm) <!DOCTYPE html ...
php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
对象、对象的属性、对象字面量、枚举对象中的属性、可变类型、变量和对象——JS对象
目录一.对象二.对象的属性三.对象字面量四.枚举对象中的属性五.可变类型六.变量和对象数据类型: 原始值:(不可变类型) 1.数值 Number 2.大整数 BigInt 3.字符串 S ...

JavaScript 对象字面量

一. 对象的基本用法

二. 遍历对象

三. 属性的类型

1. 数据类型

2. 访问浏览器属性

3.定义多个属性

4. 检测属性

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

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

JavaScript 对象字面量相关推荐

最新文章

热门文章