JavaScript对象

简介: JavaScript对象

一,什么是对象?为什么需要对象

在这里插入图片描述
为什么需要对象

二,创建对象的三种方式

在这里插入图片描述

1.利用字面量创建对象

在这里插入图片描述
在这里插入图片描述

var obj = {} //创建了一个空的对象

var obj = {
    uname: '张三', //属性
    age: 18, //属性  多个属性或方法之间用逗号隔开
    sayHi: function() { //方法   方法冒号后跟的是一个匿名函数
        console.log('hi~');
    }

}

//使用对象:对象名.属性或对象名['属性名']     对象名.方法()
console.log(obj.age); //18
console.log(obj['uname']); //张三
obj.sayHi(); //hi~

变量,属性,函数,方法总结
在这里插入图片描述

2.利用new Object创建对象

var obj = new Object(); //创建了一个空对象
//追加对象和方法 利用赋值的方法,每个属性和方法之间分号分隔
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

3.利用构造函数创建对象

在这里插入图片描述

因为一次创建一个对象,里面有很多属性和方法相同,我们只能复制,因此我们可以利用函数的方法重复这些相同的代码,而这个函数就叫做构造函数

构造函数里面封装的不是普通代码,而是对象

语法格式:

//构造函数的语法格式
//属性和方法前面必须要加this
//构造函数不需要return就可以返回结果
function 构造函数名(形参,形参,...){   //构造函数名首字母要大写
    this.属性 = 值;
    this.方法 = function (){
        语句
    }
}
//调用构造函数  必须要用new
new 构造函数名(实参,实参,...);

注意:构造函数名首字母一般要大写

实例:

function Star(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang);
    }
}

var zs = new Star('张三', 18, '男'); //调用构造函数返回的是一个对象
console.log(typeof zs); //判断数据类型 结果为object即对象

//调用属性和方法
console.log(zs.age); //18
console.log(zs['sex']); //男 

zs.sing('我是罪人'); //我是罪人

构造函数与对象
在这里插入图片描述

三,new关键字

在这里插入图片描述

四,遍历对象

for..in语句用于对数组或者对象的属性进行循环操作

//格式 
for (变量 in 对象) {
    循环体;
}
var obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sing: function() {
        console.log('sang');
    }
}


for (var k in obj) {   //k不赋值
    console.log(k); //k 变量 输出得到的是属性名或方法名
    console.log(obj[k]); //输出属性值和方法
}

使用 for in 时里面的变量常用 k 或 key

相关文章
|
14天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
21 3
|
17天前
|
JavaScript 前端开发 开发者
JavaScript的`Math`对象
【4月更文挑战第21天】JavaScript的`Math`对象
18 3
|
1天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
10 1
|
2天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
8 1
|
9天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
9天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
9天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
9天前
|
JavaScript 前端开发
JavaScript 日期对象
JavaScript 日期对象
|
9天前
|
存储 JavaScript 前端开发
JavaScript对象
JavaScript对象
|
9天前
|
JavaScript 前端开发
JavaScript的math对象
JavaScript的math对象