JavaScript Day07 JavaScript面向对象详解

1.内置对象及内置函数

1.1.基本包装类型

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

而基本包装类型，严格来说不属于上面两个中的任意一个，但是又和这两种类型息息相关。

基本数据类型和引用类型这两个类型其中一个很明显的区别是，引用类型有自己内置的方法，也可以自定义其

他方法用来操作数据，而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。

但基本数据类型真的没有吗？

对于部分基本类型来说确实是这样的。

按照最新 ES 标准定义，基本数据类型(primitive value)包括 Undefined, Null, Boolean, Number, Symbol, String。

为了便于操作基本类型值，ECMAScript提供了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类型。

1.1.1 JS什么时候会自动创建一个对应的基本包装类型对象呢？

取决于当前执行的代码是否是为了获取他的值。每当读取一个基本类型的值，也就是当我们需要从内存中获取

到它的值时（这个访问过程称为读取模式），这时，后台就会自动创建一个基本包装类型的对象。

var str = 'hhh'
console.log(str) //读取模式，后台自动创建基本包装类型对象
var str2 = str   //赋值给变量 str2，也需要读取 str 的值，同上

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

• 引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中
• 基本包装类型：只存在一行代码的执行瞬间，然后立即销毁

var str = 'test'
str.test = 'hhh'
console.log(str.test) //undefined

上面第二行代码给自动创建的 String 实例对象添加了 test 属性，虽然此刻代码执行时他是生效的，但是在这行代码执行完毕后该 String 实例就会立刻被销毁，String 实例的 test 属性也就不存在了。
当执行第三行代码时，由于是读取模式，又重新创建了新的 String 实例，而这个新创建的 String 实例没有 test 属性，结果也就是 undefined。

1.1.3 怎么才能给基本类型添加方法或者属性呢？

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

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行
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; 

使用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

注意：
在使用 new 运算符创建String，Number，Boolean三种类型的对象时，可以给自己添加属性和方法；或增加对应的包装对象的原型方法；但我们建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。

1.2.Boolean类型

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

1.3.Number类型

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

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

内置方法(对象方法)

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

toString 把数字转换为字符串，使用指定的基数。

var num = 123;
console.log(num.toString()); //123

toLocaleString 把数字转换为字符串，使用本地数字格式顺序。

var num = 123;
console.log(num.toLocaleString()); //123

toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。

var num = 123;
console.log(num.toLocaleString()); //123

toExponential 把对象的值转换为指数计数法。科学计数法

var num = 123;
console.log(num.toExponential()); // 1.23e+2

toPrecision 方法可在对象的值超出指定位数时将其转换为指数计数法。

var num = 123;
console.log(num.toPrecision(2)); // 1.2e+2

valueOf 返回一个 Number 对象的基本数字值。

var num = 123;
console.log(num.valueOf()); // 123 number

1.4.String类型

1.4.1 对象属性

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

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

1.4.2 字符方法

方法	描述
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

1.4.3 字符串操作方法

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

concat(str1,str2…strx) 连接字符串。

str1,str2…strx 将要被连接的字符串

与Array.prototype.concat类似**

var str = 'hello';
console.log(str.concat('world', 'hello', 'javascript')); // helloworldhellojavascript

slice(start,end) 提取字符串的片断，并在新的字符串中返回被提取的部分。

返回字符串start到end(不包括end)之间位置的字符串，start和end可以为负数。

var str = 'hello';
console.log(str.slice(0,3)); // hel

substring(start,end) 提取字符串中两个指定的索引号之间的字符。

返回字符串start到end(不包括end)之间位置的字符串，start和end不可以为负数，没有end的话，提取剩余全部。

var str = 'hello';
console.log(str.substring(0, 3)); // hel
console.log(str.substring(0)); // hello

-substr(start,length) 从起始索引号提取字符串中指定数目的字符。

-返回字符串start(可以为负数)开始的length个字符串

var str = 'hello';
console.log(str.substr(0, 3)); // hel

-字符串位置方法

方法	描述
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()	把字符串转换为大写。本地化

var str = 'hello world';
// 转换为大写
console.log(str.toUpperCase()); //HELLO WORLD
// 转换为小写
console.log(str.toLowerCase()); //hello world

-字符串的模式匹配方法

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

正则表达式在字符串中的应用，在前面的章节已经讲过。以上 match()、replace()、serach()、split()在普通字符串中也可以使用。

var str = 'HELLO World';
console.log(str.match('L'));//找到 L，返回 L 否则返回 null
console.log(str.search('L'));//找到 L 的位置，和 indexOf 类似
console.log(str.replace('L', 'Q'));//把 L 替换成 Q
console.log(str.split(''));//把字符串分割为字符串数组。

2.Math对象

Math 对象用于执行数学任务。

2.1使用 Math 的属性和方法的语法：

// 获取π的值
var pi = Math.PI;
console.log(pi); //3.141592653589793
// 求平方根
var sqrt_value = Math.sqrt(16);
console.log(sqrt_value); //4

**注释：**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对象方法过多，只需掌握常用的即可，其他可参考MDN文档

常用方法

比较方法

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.ceil() 向上舍入

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)

console.log(Math.random()); // 随机数

1.3.Date对象

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

创建Date对象的语法：

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

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

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

var time = new Date('2020-06-06 06:06:06')
console.log(time) 
// node环境下  2020-06-05T22:06:06.000Z
// 浏览器环境下 Sat Jun 06 2020 06:06:06 GMT+0800 (中国标准时间)

还可以传递多个数字参数

// 第一个参数表示年
// 第二个参数表示月份，月份从0开始计数，0表示1月，11表示12月
// 第三个参数表示该月份的第几天，1~31
// 第四个参数表示当天的几点，0~23
// 第五个参数表示的是该小时的多少分钟，0~59
// 第六个参数表示该分钟的多少秒，0~59
var time = new Date(2020, 00, 1, 10, 10, 10);
console.log(time);
// node环境下  2020-01-01T02:10:10.000Z
// 浏览器环境下 Wed Jan 01 2020 10:10:10 GMT+0800 (中国标准时间)

• 常用对象方法

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

其他方法可查看https://www.w3school.com.cn/jsref/jsref_obj_date.asp

2.扩展库

a.Moment.js

JavaScript日期处理类库

Node.js中使用

// 在当前目录下使用node安装moment库
npm install moment --save

// 模块化导入moment
var moment = require('moment');
// 设置本地语言为中文
require('moment/locale/zh-cn')
moment.locale('zh-cn');

// 根据对应的格式输出当前时间
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
//八月 30日 2021, 11:07:46 晚上

浏览器中使用

// 可以下载js文件，也可使用对应的cdn文件,bootcdn
<script src="moment.js"></script>
<script>
    moment().format();
</script>

时间戳转换

console.log(moment(parseInt(1630334723399)).format('YYYY-MM-DD HH:mm:ss'));
//2021-08-30 22:45:23
//有关format的格式，参考http://momentjs.cn/docs/#/displaying/format/

其他方法见http://momentjs.cn/

b.lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 遵循 MIT 开源协议发布，并且支持最新的运行环境。 查看各个构件版本的区别并选择一个适合你的版本。

https://www.lodashjs.com/

解决浅拷贝问题

var _ = require('lodash');
var obj = {
  name:'zhangsan',
  age: 18
}
// 使用cloneDeep方法
var obj2 = _.cloneDeep(obj);
obj2.age = 20;
console.log(obj); // { name: 'zhangsan', age: 18 }
console.log(obj2); // { name: 'zhangsan', age: 20 }

_.chunk(array, [size=1])

定义

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

参数

array (Array): 需要处理的数组
[size=1] (number): 每个数组区块的长度

返回

(Array): 返回一个包含拆分区块的新数组（相当于一个二维数组）。

示例

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

_.compact(array)

定义

创建一个新数组，包含原数组中所有的非假值元素。例如false, null, 0, “”, undefined, 和 NaN 都是被认为是“假值”。

参数

array (Array): 待处理的数组

返回

(Array): 返回过滤掉假值的新数组

示例

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

_.drop(array, [n=1])

定义

创建一个切片数组，去除array前面的n个元素。（n默认值为1。）

参数

array (Array): 要查询的数组。
[n=1] (number): 要去除的元素个数。

返回

(Array): 返回array剩余切片。

示例

_.drop([1, 2, 3]);
// => [2, 3]
 
_.drop([1, 2, 3], 2);
// => [3]
 
_.drop([1, 2, 3], 5);
// => []
 
_.drop([1, 2, 3], 0);
// => [1, 2, 3]

_.indexOf(array, value, [fromIndex=0])

定义

返回首次 value 在数组array中被找到的 索引值， 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。

参数

array (Array): 需要查找的数组。
value (*): 需要查找的值。
[fromIndex=0] (number): 开始查询的位置。

返回

(number): 返回 值value在数组中的索引位置, 没有找到为返回-1。

示例

_.indexOf([1, 2, 1, 2], 2);
// => 1
 
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

_.uniq(array)

定义

创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

参数

array (Array): 要检查的数组。

返回

(Array): 返回新的去重后的数组。

示例

_.uniq([2, 1, 2]);
// => [2, 1]