Javascript中对象的知识点大总结
前言
学计算机的大多数都听过一个梗:没有对象咋办,咱们来new一个!那么这个对象到底是啥呢,在编程语言中如何去实现呢? 这篇文章我总结了在JS中对象相关的知识点,无论你是编程萌新还是老手,都能通过本文快速学习或是回顾对象的重要知识点,希望能帮助到你们~
一、对象的定义方式
第一种:使用new
这就是开玩笑常说的方式,new一个:
var person = new Object();
person.name = 'alice';
person.age = '10';
这里定义了一个名为person的对象,它有两个属性分别是name和age,这里也对这两个属性进行了赋值
除了上面的点以外还有[ ]的赋值方式:
person['age']= '10';
第二种:对象字面量
- 简单字面量
直接看下面例子:
var person2 = {};
person2.name='Alice';
person2['age'] = '15';
person2.action = function(){
return '我是一个对象'
};
document.getElementById("test").innerHTML = person2.action();
直接定义person2为一个对象,然后下面给其属性name和age进行赋值
- 嵌套字面量
这里的键名加不加引号都是可行的。定义对象之后直接在括号里面以键值对的方式完成赋值
var person3 = {
name:'Jack',
age:16,
action:function(){
return this.name
}
};
person3.action() ; //Jack
二、对象属性的获取方法
对象属性的获取
上面我们讲了对象属性的设置方式有 . 和 [ ] 两种,这里对象属性的获取方式也是有这两种。
. 是取自身属性
[ ] 可以是变量,如下例子:
var obj = {};
obj.name = 'Javascript';
obj['age'] = 18;
obj.name;
obj['age'];
var a = 'age';
obj[a]; //18
对象属性的枚举
我们还可以用 for in 来遍历对象的属性,如下:
var obj2 = {name:'Javascript',age:18,id:1};
for(o in obj2){
console.log(o) //获取键名 name age id
console.log(obj2[o]); //获取value值
};
通过这个方法我们能获取到键名和value的值,在数组中也能使用这个方法,不过得到的是索引的值
var arr = ['a','b','c'];
for(a in arr){
console.log(a) //得到是索引 0123
};
三、对象的常用方法
对象序列化(对象和字符串转换)
什么是对象序列化?先来看一下定义:
序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程(来自百度百科)
大家会比较好奇,在实际开发中哪里会用到这个?
比如:获取后台传来的数据是对象格式,我们需要把它存入浏览器本地,这个时候就需要转换为json字符串进行存储,废话不多说,来看怎么实现;
- 对象转json字符串 JSON.stringify()
- json字符串转对象 JSON.parse()
var obj3 = {name:'abc',age:18,id:1};
console.log(typeof JSON.stringify(obj3)) //string
console.log(typeof obj3); //object
var str = JSON.stringify(obj3);
console.log(typeof JSON.parse(str)); //object
hasOwnProperty()
该方法可以判断对象的自有属性是否存在,用来检测
返回的结果是布尔 满足条件true 反之false
var o = {
flag:'a'
};
o.hasOwnProperty('flag')
assign()
该方法主要用于对象的合并
var o2 = {name:'abc',age:18};
var o3 = {id:1,address:'武汉'};
var o4 = Object.assign(o2,o3);
console.log(o4) //{name: "abc", age: 18, id: 1, address: "武汉"}
如果属性相同,则后面会覆盖前面的属性,不同则添加
var o5 = {num:'10',address:'重庆'};
console.log(Object.assign(o4,o5)) ;
结果为: {name: “abc”, age: 18, id: 1, address: “重庆”, num: “10”}
defineProperty()
直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
var o6 = {};
Object.defineProperty(o6,'name',{
value:'张三',
writable:false
//属性是否可以修改 true可以修改 false只读
});
定义多个属性
Object.defineProperties(o6,{
'name':{
value:'abc',
writable:false
},
'age':{
value:18,
writable:false
}
});
o6 //{name:'abc',age:18}
keys()
返回一个由一个给定对象的自身可枚举属性组成的数组
var o7 = {name:'abc',age:18};
var a2 = Object.keys(o7);
//返回的是数组 ["name", "age"]
values()
返回一个给定对象自己的所有可枚举属性值的数组
var a3 = Object.values(o7) //["abc", 18]
entries()
返回一个给定对象自身可枚举属性的键值对数组
var a4 = Object.entries(o7)
//[["name", "age"],["abc", 18]]
最后
如有补充欢迎评论区留言补充,纯手敲整理不易,对你有帮助点赞支持下呀~