5-30 js对象的创建,js常用方法,js的操作属性

文章目录

  • JS对象的创建
  • 数字转换
  • 随机数的取得
  • JS操作节点属性

JS对象的创建

在之前课中使用的document和console对象是内置对象(已经提供好直接使用的对象),我们也可以根据自己的需要创建对象。

在js中创建对象常见的有三种常用的方式:字面量创建对象,原始的构造函数创建对象,自定义的构造函数创建对象。

DEMO:字面量创建对象

//字面量创建对象
var person={
	//定义对象的属性和属性值
	name:"smith",
	age:"30",
	sex:"女",
	//为对象定义函数
	eat:function(fruit){
		console.log(this.name+"正在吃"+fruit);
	}
}
//访问对象的属性
console.log("名字是:"+person.name+",年龄是:"+person.age+",性别是:"+person.sex);
//调用对象的方法
person.eat("苹果");
  • 字面量创建对象时候直接使用“var 对象名={}” 的方式创建
  • 为对象的属性赋值使用时“属性名:属性值”的方式实现
//原生的构造函数创建对象
var person=new Object();
//为对象对的属性赋值
person.name="张三";
person.age=20;
person.sex="男";
//为对象定义函数
person.eat=function(fruit){
	console.log(this.name+"正在吃"+fruit);
}
//访问对象属性
console.log("名字是:"+person.name+",年龄是:"+person.age+",性别是:"+person.sex);
//调用函数
person.eat("橘子");
  • 先使用new关键字创建完毕对象之后,再为对象的属性赋值或者指定函数。

DEMO: 自定义构造函数创建对象

//自定义的构造函数
function Emp(empno,ename,job,sal){
	this.empno=empno;
	this.ename=ename;
	this.job=job;
	this.sal=sal;

//定义函数
this.eat=function(fruit){
		console.log(this.ename+"正在吃"+fruit);
	}
}
//使用自定义的构造函数创建对象
var emp=new Emp(1001,"李四","技术经理"20000.00)//访问对象的属性
console.log("名字是:"+emp.ename+",编号是:"+emp.empno+",职位是"+emp.job+",薪资是:"+emp.sal);
//调用对象的方法
emp.eat("哈密瓜")

总结:

  • 使用了自定义的构造函数创建对象和java中构造方法的定义是很相似的,也使用了this关键字。
  • 而且构造函数的首写字母也是大写。
  • 在使用构造函数创建对象的时候也需要使用new关键字来调用构造函数。
  • 以上就是js中创建对象常见的三种方式。

数字转换

在开发中可能会遇到需要将一个字符串类型的数字转换成Number类型的数字。
DEMO: 将一个字符串类型数字转换成整数

var  str="10.090909";
var num=parseInt(str);
console.log(num);
  • 使用parselint(“字符串”)的方式转换之后会将小数部分去掉,如果要保留小数部分则可以使用下一个方法”parseFloat()“实现。
  • 在转换的过程如果有非数字的字符出现则只转换第一非数字字符之前的数字。

DEMO: 转换成小数

var str="10000.090909";
var num=parseFloat(str);
console.log(num);
  • 在转换的过程如果有非数字的字符出现则只转换第一非数字字符之前的内容。
  • 如果要将转化后的数字保留两位小数则需要怎么操作呢?

DEMO: 保留指定小数位

var str="10000.0909sss09";
var num=parseFloat(str);
console.log(num.toFixed(2));

随机数的取得

在Java中可以取得随机数,在js中可可以取得随机数,使用一个内置对象是Math,调用Math对象的方法就能生成随机数。

DEMO: 取得随机数

var random=Math.random();
console.log("取得的随机数是:"+random);
  • 取得的随机数是从0~1,包括0但是不包括·,就是[0,1)

DEMO: 取得1~10的随机数

for(var  i=0,i<50;i++){
	var random=Math.random();
	document.write("取得的随机数是:"+Math.floor((random*10+1))+"
"
); }

JS操作节点属性

我们可以使用js取得一个元素对象,那么久可以操作节点的属性。

DEMO: 操作图片的属性

var img=document.getElementsByTagName("img")[0];
//取得0~1之间的数,不包括1
var newSrc="images/"+Math.floor(Math.random()*10+1)+"jpg";
img.setAttribute("src",newSrc);

你可能感兴趣的:(5-30 js对象的创建,js常用方法,js的操作属性)