前端JavaScript学习笔记之面向对象的程序设计

前端JavaScript学习笔记之面向对象的程序设计

内置对象及内置函数

基本包装类型

在ES中，数据的分类分为基本数据类型和引用类型。

基本数据类型和引用类型这两个类型其中一个很明显的区别是，引用类型有自己的内置方法，也可以自定义其他方法来操作数据，而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。

为了方便操作基本数据类型，ES提供了3个特殊引用类型（基本包装类型）：Boolean,Number,String。

基本包装类型和其他引用类型一样，拥有内置的方法可以对数据进行额外操作。每当读取一个基本数据类型的时候，后台就会创建一个对应的基本包装类型，从而可以调用一些方法操作这些数据。

var str = 'test';
//substring(start,end),截取从start到end的字符串，不包括end。
var str2 = str.substring(2);
console.log(str2);

如上例str变量存储的值是一个字符串，而‘test’字符串是基本数据类型String类型的值，它调用了substring方法，并将结果保存在了str2中。

为什么它不是对象却能调用对象的方法？

在执行第二行代码的时候，js会自动进行下面的步骤：

​ 1、自动创建String类型的一个实例（和基本类型的值不同，这个实例就是一个基本包装类型的对象）

​ 2、调用实例（对象）上指定的方法

​ 3、销毁这个实例

//用 String 构造函数创建一个实例，这个实例是一个对象
var str = new String('test')
//对象中有内置方法供开发人员调用
var str2 = str.substring()
// 销毁这个实例
str = null
//虽然基本类型的值没有方法可以调用，但是后台临时创建的构造函数实例（也就是对象）上有内置方法可以让我们对值进行操作，因此这样我们就可以对字符串、数值、布尔值这三种基本数据类型的数据进行更多操作，这也是基本包装类型的主要用处：便于操作基本类型值。

经过上面的加工后，基本字符串变的跟对象一样，上面的三个步骤也适用于Boolean、Number类型。

js何时会自动创建一个对应的基本包装类型对象，取决于当前执行的代码是否是为了获取它的值。每当读取一个基本类型的值，也就是当我们需要从内存中获取到它的值时（这个访问过程称为读取模式），这时，后台就会自动创建一个基本包装类型的对象。

引用类型和基本包装类型有什么不同呢？最主要的区别就是对象的生存期。

• 引用类型：使用new操作符创建的引用的类型实例，在执行流离开当前作用域之前一直都保存在内存中。

• 基本包装类型：只存在一行代码的执行瞬间，然后立即销毁。

给基本类型添加方法或属性：

1、增加对应包装对象的原型方法

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last = function(){
  // 返回指定位置的字符
  return this.charAt(this.length - 1);
};
console.log(str.last()); // o 执行到这一句，JS会偷偷做一些事情
// 相当于
// 1.找到基本包装对象，new一个和字符串值相同的对象，
// var str = new String('hello');
// 2.通过这个对象找到了包装对象下的方法并调用 
// str.last();  
// 3.这个对象被销毁
// str = null; 

2、使用new运算符创建String对象

// new运算符
var str = new String('hello');
// 有效属性
str.name = 'HI';
// 有效方法
str.age = function () {
  return 100;
}
console.log(str); //[String: 'hello'] { name: 'HI', age: [Function] }
console.log(typeof str); //object
console.log(typeof str.valueOf()); // 重写valueOf()方法，返回对象表示的基本字符串值
console.log(str.name);  // HI
console.log(str.age()); // 100

Boolean类型

Boolean类型没有特定的属性或者方法。一般直接将Boolean当做一个工具方法来使用。

Number类型

内置属性（静态属性，直接调用即可）

属性	描述
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	使您有能力向对象添加属性和方法。

内置方法（对象方法）

方法	描述
toString	把数字转换为字符串，使用指定的基数。
toLocaleString	把数字转换为字符串，使用本地数字格式顺序。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	方法可在对象的值超出指定位数时将其转换为指数计数法。
valueOf	返回一个 Number 对象的基本数字值。

String类型

对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String也包含对象的通用方法，比如valueOf()、toLocaeString()和toString()方法，但这些方法都返回字符串的基本值。

字符方法

方法	描述
charAt(index)	返回指定索引位置的字符
charCodeAt(index)	以Unicode编码形式返回指定索引位置的字符

charAt(index) 返回指定索引位置的字符。index，必需。表示字符串中的某个位置的数字，即字符在字符串中的下标。

var str = 'hello';
console.log(str.charAt(0)); // h

charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符。index，必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

var str = 'hello';
console.log(str.charCodeAt(0)); // 104

字符串操作方法

方法	描述
concat()	连接字符串。
slice()	方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
substring()	提取字符串中两个指定的索引号之间的字符。
substr()	从起始索引号提取字符串中指定数目的字符。

字符串位置方法

方法	描述
indexOf(str,n)	从n开始搜索第一个str，并将搜索的索引值返回
lastIndexOf(str,n)	从n开始搜索的最后一个str，并将搜索的索引值返回

indexOf(str,n) 从n开始搜索第一个str，并将搜索的索引值返回。

n为可选的整数参数，合法取值是0到string.length-1。如果省略该参数，则将从字符串的首字符开始检索。

var str = 'hello world';
console.log(str.indexOf('l')); // 2

lastIndexOf(str,n) 从n开始搜索的最后一个str，并将搜索的索引值返回。

n为可选的整数参数，合法取值是0到string.length-1.如果省略该参数，则将字符串的首字符开始检索。

var str = 'hello world';
console.log(str.lastIndexOf('l')); // 9

两者如果都没有找到，则返回-1。

大小写转换方法

方法	描述
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toLocaleLowerCase()	把字符串转换为小写。本地化
toLocaleUpperCase()	把字符串转换为大写。本地化

字符串的模式匹配方法

方法	描述
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。

Math对象

Math对象用于执行数学任务，Math对象并不像Date和String那样是对象的类，因此没有构造函数Math(),像Math.sin()这样的函数只是函数，不是某个对象的方法。无需创建，只要通过Math作为对象使用就可以调用其所有属性和方法。

对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

对象常用方法

比较方法

Math.min() 求一组数中的最小值

console.log(Math.min(2,1,3,4,4)); //1

Math.max() 求一组数中的最大值

console.log(Math.max(2,1,3,4,4)); //4

将小数舍入为整数的几个方法

Math.celi() 向上舍入

console.log(Math.ceil(2.1)); //3

Math.floor() 向上舍入

console.log(Math.floor(2.7)); //2

Math.round() 四舍五入

console.log(Math.round(2.7)); //3
console.log(Math.round(2.1)); //2

随机数

Math.random() 返回一个大于0小于1的一个随机数[0,1)

Date对象

Date对象用于处理日期和时间。是js提供的内置构造函数。

创建Date对象的语法：

var myDate = new Date();
console.log(myDate); //2021-08-30T14:27:30.481Z
//在node环境和浏览器环境输出不同

Date对象自动把当前日期和时间保存为其初始值。

new Date() 在传入参数的时候，可以获取到一个传递进去的时间

var myDate = new Date();
console.log(myDate); //2021-08-30T14:27:30.481Z
//在node环境和浏览器环境输出不同

常用对象方法

var time = new Date();

// 获取当前时间，使用toString()进行转换
console.log(time.toString()); //Mon Aug 30 2021 22:52:12 GMT+0800 (GMT+08:00)
// 获取当前时间 本地化字符串
console.log(time.toLocaleString()); // 2021-8-30 22:52:12

// getFullYear() 方式是得到指定字符串中的哪一年
console.log(time.getFullYear()) // 2021

// getMonth() 方法是得到指定字符串中的哪一个月份
// 这里要有一个注意的地方
// 月份是从 0 开始数的
// 0 表示 1月，1 表示 2月，依此类推
console.log(time.getMonth()) // 7  实际是8月

// getDate() 方法是得到指定字符串中的哪一天
console.log(time.getDate()) // 30

// getHours() 方法是得到指定字符串中的哪小时
console.log(time.getHours()) // 22

// getMinutes() 方法是得到指定字符串中的哪分钟
console.log(time.getMinutes()) // 45

// getSeconds() 方法是得到指定字符串中的哪秒钟
console.log(time.getSeconds()) // 23

// getDay() 方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）
console.log(time.getDay()) // 1

// getTime() 方法是得到执行时间到 格林威治时间 的毫秒数 时间戳
console.log(time.getTime()) // 1630334723399