面向对象的程序设计
1.内置对象及内置函数
1.1基本包装类型
ES中数据的分类分为：基本数据类型（number ，Boolean，string，undefined，null，symbol ） 和 引用类型（object， 函数 ，数组）
严格说基本包装类型 并不属于两个中的任意一个。
基本数据类型和引用类型的明显区别是：
引用类型有自己的内置的方法，也可以自定义其他方法来操作数据，而基本数据类型不可以
为了实现可以在基本数据类型上使用方法，ECMAScript提供了3个特殊引用类型（基本包装类型）：Boolean、Number、String
当读取一个基本类型值的时候，后台就会创建基本包装类型对象，从而可以调用一些方法操作这些数据 例：
var str = 'test';
//substring(start,end),截取从start到end的字符串，不包括end。
var str2 = str.substring(2);
console.log(str2);
Q1:为什么不是对象却可以调用对象的方法，这个过程是怎样实现的？
基本包装类型发挥了作用，在内部实现了这样的流程：
1.在访问str属性的时候，会创建一个包含字符串字面值的特殊对 象，并且具有相应的方法，例如substring()。
2.该方法运行并返回一个新的字符串
3.特殊对象被销毁，只留下原始值 str。
// js后台是如何处理的 装箱 拆箱
//用 String 构造函数创建一个实例，这个实例是一个对象
var str = new String('test'); //装箱
//对象中有内置方法供开发人员调用
var str2 = str.substring(2);
//销毁这个实例
str = null;//拆箱
Q2：Js在什么时候会自动创建一个对应的基本包装类型对象
从内存中获取到基本类型的值时，这个访问过程成为读取模式。
var str = 'hhh'
console.log(str) //读取模式，后台自动创建基本包装类型对象
var str2 = str //赋值给变量 str2，也需要读取 str 的值，同上
Q3:引用类型和基本包装类型最主要的区别在于对象的生存期
引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中
基本包装类型：只存在一行代码的执行瞬间，然后立即销毁
var str='lfl';
str.test='hhh';
console.log(str.test);//undefined 已经被销毁
Q4:如何给基本类型添加方法或者属性
- 增加对应的包装对象的原型方法
// 通过prototype
var str='hello';
// charAt(索引位置)
String.prototype.last=function(){
return this.charAt(this.length-1);
}
console.log(str.last());//o
-
使用new运算符创建String对象
// 通过new操作符来新建String对象 var str2 = new String('test'); //有效属性 str2.name = 'zhangsan'; //有效方法 str2.age = function () { return 66; } console.log(str); //[String: 'test'] { name: 'zhangsan', age: [Function] } console.log(typeof str); //object console.log(typeof str.valueOf()); // 重写valueOf()方法，返回对象表示的基本字符串值 console.log(str2.name);//zhangsan console.log(str2.age());//66注意：在使用 new 运算符创建String，Number，Boolean三种类型的对象时，可以给自己添加属性和方法；或增加对应的包装对象的原型方法；但我们建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。
Boolean类型
没有特定的属性或者方法 ，一般直接当作一个工具方法使用
// Boolean 对object进行转换 只要对象中有值 true // 对象为null false var falseObj = new Boolean(false); var result = falseObj && true; console.log(result);//true // 当做工具方法 console.log(Boolean(''));//falseNumber类型
- 内置属性（静态属性，直接调用即可）
// 最大值 console.log(Number.MAX_VALUE);//1.7976931348623157e+308 // 最小值 console.log(Number.MIN_VALUE);//5e-324 /* NaN 非数字值 NEGATIVE_INFINITY 负无穷大，溢出时返回该值 POSITIVE_INFINITY 正无穷大，溢出时返回该值 prototype 使您有能力向对象添加属性和方法 */- 内置方法（对象方法）
var num=123; // 1.toString 把数字转换为字符串，使用指定的基数 console.log(num.toString()); // 2.toLocaleString 把数字转换为字符串，使用本地数字格式顺序 console.log(num.toLocaleString()); //123 // 3.toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。 console.log('￥'+num.toFixed(2)); // 4.valueOf 返回一个 Number 对象的基本数字值 console.log(num.valueOf(),typeof num.valueOf()); // 5.toExponential 把对象的值转换为指数计数法。科学计数法 console.log(num.toExponential()); // 6.toPrecision 把对象的值转换为指数计数法。科学计数法 console.log(num.toPrecision(2));String类型
属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 String 也包含对象的通用方法，比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值。
var str='Hello World'; // 返回某个指定位置的字符 charAt(index) console.log(str.charAt(6));//W // 返回某个指定字符的字符编码 charCodeAt(index) console.log(str.charCodeAt(1));//101-
字符串操作方法
var str='Hello World'; // 拼接字符 concat(str1,str2...strx) console.log(str.concat('你好','世界'));//Hello World你好世界 // 截取字符串的一部分 slice(start,end) console.log(str.slice(2,3));//l //substring(start,end) console.log(str.substring(2,5));//llo // 截取指定长度的字符串 substr(start,length) console.log(str.substr(2,6));//llo Wo -
字符串位置方法
var str='Hello World'; // 从头开始检索 找不到返回-1 //indexOf(str,n) 从n开始搜索第一个str，并将搜索的索引值返回 console.log(str.indexOf('e'));//1 // 从字符串最后面开始检索 找不到返回-1 //lastindexOf(str,n) 从n开始搜索第一个str，并将搜索的索引值返回 console.log(str.lastIndexOf('o'));//7// 大写转换 console.log(str.toUpperCase());//HELLO WORLD // 大写转换 本地化 console.log(str.toLocaleUpperCase());//HELLO WORLD // 小写转换 console.log(str.toLowerCase());//hello World // 小写转换 本地化 console.log(str.toLocaleLowerCase());//hello World// 找到一个或者多个正则表达式的匹配 //找到返回匹配内容信息，否则返回null console.log(str.match('o'));//[ 'o', index: 4, input: 'Hello World', groups: undefined ] // 替换正则表达式匹配的内容 // 找不到返回-1 和indexOf类似 console.log(str.replace(/he/i,'hi'));//hillo World // 检索与正则表达式相匹配的值 console.log(str.search('h'));//-1 // 分隔字符串为字符串数组 console.log(str.split(' '));//[ 'Hello', 'World' ]
Math对象
Math.min() //求一组数中的最小值
Math.max() //求一组数中的最大值
Math.ceil() 向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
Math.random() 返回大于0小于1的一个随机数 [0，1)
实例：
// 内置的属性
// Π
console.log(Math.PI);//3.141592653589793
//平方根
console.log(Math.sqrt(2));//1.4142135623730951
// 内置的方法
// 最大值
console.log(Math.max(3,2,11,5,88));//88
// 最小值
console.log(Math.min(3,2,11,5,88));//2
// 对于小数值得舍入为整数
// ceil() 向上取整
console.log(Math.ceil(2.1));//3
// floor() 向下取整
console.log(Math.floor(2.1));//2
// round() 四舍五入
console.log(Math.round(2.1));//2
//random() 随机数
var arr=['猪八戒','孙悟空','唐僧','沙和尚']
var result=arr[Math.floor(Math.random())]
console.log(result);//随机抽取四个角色中的一个
Date对象 https://www.w3school.com.cn/jsref/jsref_obj_date.asp
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Date 函数的引用。 |
| prototype | 使您有能力向对象添加属性和方法。 |
getFullYear() 返回年份 如2020
getMonth() 返回日期中的月份数，返回值0(1月)-11(12月)
getDate() 返回是日期对象中的几号。
getHours() 返回日期中的小时
getMinutes() 返回日期中的分钟数
getSeconds() 返回一个日期的秒数
getDay() 返回日期中的星期几
getMilliseconds() 返回日期中的毫秒数
getTime() 将一个日期对象以毫秒形式返回
扩展库
Moment.js http://momentjs.cn/
//node.js 中使用
//在当前目录下使用node安装moment库
npm install moment --save
//浏览器中使用
// 可以下载js文件，也可使用对应的cdn文件,bootcdn
<script src="moment.js"></script>
<script>
moment().format();
</script>
// 模块化导入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'));//September 2nd 2021, 19:46:24 pm
console.log(moment().format('YY-MM-DD'));//21-09-02
// 时间戳转换
console.log(moment(parseInt(1630334723399)).format('YYYY-MM-DD HH:mm:ss'));//2021-08-30 22:45:23
lodash
解决浅拷贝问题
// 引入lodash函数
var _ = require('lodash');
// 解决深拷贝浅拷贝
var obj={
name:'zhangsan',
age:19
}
// 使用cloneDeep方法
var obj2=_.cloneDeep(obj);
obj2.age=20;
console.log(obj); //{ name: 'zhangsan', age: 19 }
console.log(obj2);//{ name: 'zhangsan', age: 20 }
//1.将数组（array）拆分成多个 size 长度的区块，组成一个新数组 _.chunk(array, [size=1])
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));//[ [ 'a', 'b' ], [ 'c', 'd' ] ]
//2. 创建一个新数组，包含原数组中所有的非假值元素 _.compact(array)
// false，null,0,"",undefined,NaN均为假值
console.log(_.compact([0,2,4,true,'zhanngsan',6,NaN,null]));//[ 2, 4, true, 'zhanngsa', 6 ]
//3. 创建一个切片数组，去除array前面的n个元素 n默认为1 _.drop(array, [n=1])
console.log(_.drop([1,2,3,4,5,6],3));//[4,5,6]
// 4. 返回首次 value 在数组array中被找到的索引值 否则返回-1 _.indexOf(array, value, [fromIndex=0])
console.log(_.indexOf([1,2,3,4,5],2));//1
// 5. 创建一个去重后的array数组副本。只有第一次出现的元素才会被保留 _.uniq(array)
console.log(_.uniq([2,2,1,1,4,3,5,3]));//[ 2, 1, 4, 3, 5 ]
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
