一、JavaScript 对象分类
对象只是一种特殊的数据。对象拥有属性和方法。
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数…
JavaScript 中的对象分类:
- 自定义对象
- 内置对象
- DOM对象
- BOM对象
二、自定义对象
JavaScript 自身提供的对象,不能满足我们所有需求,当我们需要一种对象,可是javascript没有提供的时候,我们就需要自己动手定义我们需要的对象,自己创建的对象就是自定义对象。
自定义对象有2种创建方式:
1. 使用 字面量{} 创建对象
使用对象字面量{}来创建对象,语法格式如下:
var 对象名称{
name1 : value1,
name2 : value2,
...
nameN : valueN }
其实就是{ }花括号里面以键值对的方式创建表达这个对象的属性和方法,键值对之间用逗号,
隔开。
访问对象的属性 有2种方式:
- 对象名称.属性名称
- 对象名称[‘属性名称’]——注意方括号[ ]里面的属性必须加引号
访问对象的方法 只有1种方式:
- 对象名称.对象方法()
注意:访问对象的方法只能使用第一种.的方式访问,第二种[]的方式不能访问方法,会返回undefined
所以:访问对象的属性和方法,建议统一采用第一种.的方式
// 案例1:使用字面量{}创建对象
var stu = {
name: '张三',
age: 25,
address: '西安',
getStuInfo: function () {
return this.name + ',' + this.age + ',' + this.address; // this指向stu对象
}
}
// 访问对象的属性
console.log(stu.name); // 张三
console.log(stu['address']); // 西安
// 访问对象的方法
var info = stu.getStuInfo();
console.log(info); // 张三,25,西安
2. 利用 new Object 创建对象
利用 new Object 创建对象,语法案例如下:
var person = new Object(); // 创建一个空的对象
person.uname = '李四'; // 为空对象添加属性和方法
person.age = 20;
person.sex = '男';
person.sayHi = function () {
console.log('你好!');
}
console.log(person.uname + ',' + person.age + ',' + person.sex); // 访问属性,返回:李四,20,男
person.sayHi(); // 调用方法,返回:你好!
注意:
-
Object() :第一个字母大写
-
new Object() :需要 new 关键字
-
添加属性和方法的格式:对象.属性 = 值;(后面用
分号;
隔开)
3. 利用构造函数创建对象
因为一次创建一个对象,里面很多的属性和方法是大量相同的,比较繁琐;此时可以利用函数的方法,重复这些相同的代码,我们就把这个函数称为构造函数。
这个函数不一样,里面封装的不是普通代码,而是对象。
构造函数
是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。
我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
// 声明构造函数:
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 值1; // 逗号分隔
this.属性名2 = 值2;
this.属性名3 = 值3;
this.方法名 = function(){
};
}
// 调用构造函数--创建对象
var obj = new 构造函数名(实参1,实参2,实参3)
案例:
// 声明构造函数:
function Stars(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log(sang);
}
}
// 调用构造函数--创建对象1
var ldh = new Star('刘德华', 50, '男');
console.log(typeof ldh); // 返回:object
console.log(ldh.name); // 访问属性 返回:刘德华
ldh.sing('冰雨'); // 调用方法并给方法传实参 返回:冰雨
// 调用构造函数--创建对象2
var zxy = new Star('张学友', 51, '男');
console.log(zxy.sex);
zxy.sing('李香兰');
注意:
- 构造函数名需要首字母大写。
- 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候,必须用 new 来调用构造函数。
// 声明构造函数:(没有参数)
function stu() {
this.name = '王五';
this.age = 28;
this.address = '上海';
this.getInfo = function () {
return this.name + ',' + this.age + ',' + this.address;
}
}
// 创建对象
var stuobj = new stu();
console.log(stu.name); // 访问属性
var info = stuobj.getInfo();
console.log(info); // 访问方法
三、内置对象
内置对象是JavaScript 语言本身提供的对象。
JavaScript 提供多个内建对象,比如 String、Date、Array 等等
1. Number 数字对象
1)创建对象 new Number()
var x = new Number(100);
注意: 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
2)常见的属性和方法
① 属性
Number.MAX_VALUE 最大值
- MAX_VALUE 是 Javascript Number对象的静态属性,只能通过 Number.> MAX_VALUE 调用
- 使用自定义的Number x(x.MAX_VALUE ) 将无法获取 MAX_VALUE 属性
Number.MIN_VALUE 最小值
- 是 JavaScript 中可表示的最小的数,该数值接近 0 ,但不是负数,近似> 值为 5 x 10-324
- 与最大值同理,MIN_VALUE属性也只能通过Number.MAX_VALUE 调用
// Number.MAX_VALUE 最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
var a = 100;
console.log(a.MAX_VALUE); // 返回undefined
// Number.MIN_VALUE 最小值
console.log(Number.MIN_VALUE); // 5e-324 (接近 0 ,但不是负数)
② 方法
toString()
把数字转换为字符串语法:
number.toString(基数)
- 基数一般不填
- 基数若填,填写2、8、16:表示把数字转换为字符串,并以二进制、八进> 制、十六进制显示
var num1 = 20;
console.log(num1.toString()); // 20 (字符串型)
console.log(num1.toString(2)); // 10100 (字符串型 二进制)
console.log(num1.toString(8)); // 24 (字符串型 八进制)
console.log(num1.toString(16)); // 14 (字符串型 十六进制)
Number.parseInt(‘字符串’)
将字符串转换成整数。和全局方法
parseInt('字符串')
作用一致。Number.parseFloat(‘字符串’)
将字符串转换成浮点数。和全局方法parseFloat('字符串')
作用一致。给字符串,返回整数
// 去掉小数,只取整数,不四舍五入
var str1 = '99.9';
console.log(Number.parseInt(str1)); // 99
console.log(parseInt(str1)); // 99
console.log(typeof parseInt(str1)); // number
console.log(parseInt('99.1')); // 99
console.log(Number.parseFloat(str1)); // 99.9
console.log(parseFloat(str1)); // 99.9
console.log(parseFloat('3.1415')); // 3.1415
console.log(parseFloat('120px')); // 120 会去掉这个px单位
toFixed(保留小数的位数)
把 Number 四舍五入为指定小数位数的数字。给数字,返回指定小数位数的数字
var pi = 3.1415926;
console.log(pi.toFixed(2)); // 3.14
console.log(pi.toFixed(3)); // 3.142
console.log(pi.toFixed(4)); // 3.1416
isNaN()
是全局函数。判断其参数是否是非数字值。给任意类型参数,返回布尔值
需要注意的是,isNaN() 函数其实并不能像它的描述中所写的那样,数字值返回 false,其他返回 true。
实际上,它是判断一个值能否被 Number() 合法地转化成数字。
- 数字形式的字符串。例如 “123”、"-3.14",虽然是字符串型,但被 isNaN() 判为数,返回 false。(“12,345,678”,“1.2.3” 这些返回 true)
- 空值。null、空字符串""、空数组[],都可被Number()合法的转为0,于是被isNaN认为是数,返回false。(undefined、空对象{}、空函数等无法转数字,返回true)
console.log(isNaN(123)); // false
console.log(isNaN('123')); // false 能被Number()合法地转化成数字
console.log(isNaN(5 - 2)); // false
console.log(isNaN(0)); // false
console.log(isNaN(null)); // false 能被Number()合法的转为0
console.log(isNaN(undefined)); // true
3)注意事项
-
数字默认显示为十进制;
“0” 开头的是八进制,“0x” 开头的是十六进制;
可以使用 toString(2/8/16) 方法输出2进制、8进制、16进制
-
没有具体区分整数和小数
-
所有 JavaScript 数字均为 64 位
-
整数(不使用小数点或指数计数法)最多为 15 位
-
小数的最大位数是 17,浮点数运算有精度问题
-
极大或极小的数字可通过科学计数法来表示
-
无穷大Infinity、无穷小**-Infinity**;(基于它们的加减乘除运算结果还是无穷大/小)
-
NaN——不是一个数字。
可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值
4)与基本类型的差别【变量就是对象,注意类型】
有 new 是对象,没有new 是基本类型的数字型。
var x = new Number(50);
var y = 50;
console.log(typeof x); // object x是对象类型
console.log(typeof y); // number y是数字类型
2. String 字符串对象
1)创建对象
var str1=new String('hello');
var str2 = 'hello';
var str3='hello,world';
2)常见的属性和方法
① 属性
length
返回字符串的长度(字符数)。
console.log(str1.length); // 5
console.log(str3.length); // 11
② 方法
includes()
查找字符串中是否包含指定的子字符串。给字符串,返回布尔值(有:true;没有:false)
console.log(str1.includes("ell")); // true
console.log(str1.includes("wel")); <