面向对象的程序设计

目录

内置对象及内置函数

1.1基本包装类型

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

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

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

使用new运算符创建String对象

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

1.1.1.Boolean类型

1.1.2.Number类型

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

 内置方法(对象方法)

1.1.3.String类型

对象属性

​编辑 字符方法

字符串操作方法

字符串位置方法

大小写转换方法

字符串的模式匹配方法

1.2.Math对象

对象属性

对象方法(常用)

1.3.Date对象

 扩展库

Moment.js

​编辑

b.lodash

---

内置对象及内置函数

1.1基本包装类型

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

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

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

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

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

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

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

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

基本包装类型，和其他引用类型一样，拥有内置的方法可以对数据进行额外操作。

每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。

比如：

var str = 'hello';
var res = str.split();
console.log(res,typeof res,typeof str);

上面 str 变量存储的值是一个字符串，'hello' 字符串是基本数据类型 String 类型的值。然而它调用了split方法，并将结果保存在了res中。

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

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

        1.自动装箱 将基本数据类型包装为特殊引用类型 string String()

        2.直接访问方法或者属性  str.split("")

        3.自动拆箱 将特殊引用数据类型转换为基本数据类型。

// 模拟操作
var str = new String('hello');      //装箱
console.log(str.length);
console.log(str.substring(2));
console.log(typeof str);
str = null;                          //拆箱

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

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

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

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

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

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

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

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

var str = 'h1';
String.prototype.last = function(){
    console.log('我是last方法');
}
str.last();

使用new运算符创建String对象

var str = new String('hello');
str.name = 'zhangsan';
str.sayName = function(){
    console.log(this.name);
};
str.sayName();
console.log(typeof str); //object
console.log(str,typeof str,typeof str.valueOf(),str.valueOf);

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

1.1.1.Boolean类型

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

1.1.2.Number类型

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

 内置方法(对象方法)

// 静态方法
var num = 123.456
// toString()   转换为字符串
console.log(num.toString());
// toLocaleString() 转换为本地化的字符串
console.log(num.toLocaleString());
// toFixed(n)    保留n位小数
console.log(num.toFixed(2));
// toExponential()  转换为科学计数法
console.log(num.toExponential());
// toPrecision(n)  保留n位转换为科学计数法  
console.log(num.toPrecision(2));
// valueOf()    返回本身的值
console.log(num.valueOf());

 

1.1.3.String类型

对象属性

 字符方法

 

// 字符方法
var str = 'hello world javascript'     
// charAt(index)    返回下标对应字符
console.log(str.charAt(10));
// charCodeAt(index)    返回下标对应字符的unicode码
console.log(str.charCodeAt(10));

字符串操作方法

 

// 字符串操作方法
// concat(str1,str2,str3)   拼接字符串  返回拼接好的字符串
var str = 'hello';
console.log(str.concat('world','javascript'));

 

 

var str = 'hello world javascript';
// slice(start,end)   start和end可以是正数也能是负数  截取字符串  返回截取的字符串
console.log(str.slice(2,10));
console.log(str.slice(-10,15));
console.log(str.slice(-10,-2));
// substring(start,end) end可写可不写   start和end不可以是负数  截取字符串  返回截取的字符串
console.log(str.substring(2));
console.log(str.substring(2,5));
// substr(start,length) 截取字符串  返回截取的字符串
console.log(str.substr(2,11));
console.log(str.substr(-12,11));

 

字符串位置方法

// 字符串位置方法
var str = 'hello world javascript';
// indexOf(str,n)   n可写可不写 str查找的字符串 返回第一次查找到的字符串的索引
console.log(str.indexOf('a'));
console.log(str.indexOf('a',14));
// lastIndexOf(str,n)   n可写可不写 str查找的字符串 返回第一次查找到的字符串的索引
console.log(str.lastIndexOf('l'));
console.log(str.lastIndexOf('l',8));

 

大小写转换方法

 

// 字符串大小写方法
var str1 = 'HELLO WORLD JAVASCRIPT';
var str2 = 'hello world javascript';
// toLowerCase  //toLocaleLowerCase
console.log(str1.toLowerCase());
console.log(str1.toLocaleLowerCase());
// toUpperCase  //toLocaleUpperCase
console.log(str2.toUpperCase());
console.log(str2.toLocaleUpperCase());

 

字符串的模式匹配方法

 

// 字符串模式匹配方法
var str = 'hello world javascript';
// search(str)   检索与正则表达式相匹配的值  返回第一个匹配的下标
console.log(str.search('ri'));
// match(str)  找到一个或多个正则表达式的匹配 返回数组 ['str',index: ,input:str,group:];
console.log(str.match('lo'));
// split()  将字符串分割为字符串数组
console.log(str.split(' '));
// replace(str,替换的字符串)    返回替换后的字符串  
console.log(str.replace('lo','LO'));  
console.log(str.replace('l','L'));  
console.log(str.replace(/l/g,'L'));  

 

1.2.Math对象

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

对象属性

  

对象方法(常用)

// 静态方法
// 求最大值 最小值
console.log(Math.max(1,2,3,4,5));
console.log(Math.min(1,2,3,4,5));
// 向上取整 向下取整
console.log(Math.ceil(2.1));
console.log(Math.floor(2.7));
// 四舍五入
console.log(Math.round(2.4));
console.log(Math.round(2.7));
// 产生随机数
console.log(Math.random());
// 平方根
console.log(Math.sqrt(16));

 

// 抽取一个元素
var arr = ['奥地利','匈牙利','波西米亚','卡斯蒂利亚','葡萄牙','法兰西','勃艮第','英格兰','苏格兰','波兰','立陶宛','莫斯科'];
function random(){
    // 获得随机索引
    var index = parseInt(Math.random()*arr.length);
    console.log(arr[index]);
}
random();

 

1.3.Date对象

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

var now = new Date();
console.log(now);
// 方法
// 年
console.log(now.getFullYear());
// 月
console.log(now.getMonth());
// 日
console.log(now.getDay());  //星期
console.log(now.getDate()); //日期
// 时
console.log(now.getHours());
// 分
console.log(now.getMinutes());
// 秒
console.log(now.getSeconds());
// 时间戳
console.log(now.valueOf());

 扩展库

Moment.js

JavaScript日期处理类库

/**
 * 使用commonjs模块化规范引入momentjs
 */
var moment = require('moment');
// console.log(moment);
var now = new Date();
console.log(now);
/**
 * moment(需要处理时间日期).format(处理时间日期的格式)
 */
console.log(moment(now).format('YYYY-MM-DD HH:mm:ss'));
console.log(moment(now).format('MMMM Do YYYY h:mm:ss a'));

 

b.lodash

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

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

// 引入lodash库
var _ = require('lodash');
// 实现深拷贝 cloneDeep
var obj = {
    name:'zhangsan',
    age:12
}
var obj1 = _.cloneDeep(obj)
obj1.name = 'terry';
console.log(obj,obj1);

/**
 * ._chunk  分割
 */
var arr = [1,2,3,4,5,6];
var res = _.chunk(arr,2);
console.log(res);

/**
 * uniq 数组去重复
 */

var arr = [1,2,3,2,1];
var res = _.uniq(arr);
console.log(res);

/**
 * compact 返回真值组成的数组 返回数组元素中不为假值数组元素
 */
var arr = ["",NaN,false,1,'hello'];
var res = _.compact(arr);
console.log(res);

/**
 * drop(arr,number)   每次从头部移除一个或者参数个数组元素
 */
var arr = [1,2,3,4,5];
var res = _.drop(arr,3);
console.log(res);

/**
 * indexOf(arr,要查找的数组元素,fromIndex) 查找数组元素
 */
var arr = [1,2,3,4,5,'hello',null,'hello'];
var res = _.indexOf(arr,'hello',6);
console.log(res);