第十九节：包装对象和内置对象

最新推荐文章于 2022-03-04 11:21:09 发布

静静小白

最新推荐文章于 2022-03-04 11:21:09 发布

阅读量342

点赞数

分类专栏： js学习整理文章标签： javascript

本文链接：https://blog.csdn.net/qq_43628158/article/details/121979276

版权

js学习整理专栏收录该内容

30 篇文章 7 订阅

订阅专栏

1、包装对象

为什么基础类型可以使用属性或方法？
在JS中虽然只有对象有属性和方法，但是基础数据类型也可调用方法，这是因为JS解释器遇到点或者中括号，会判断前面的东西是否为对象，如果是直接执行，如果不是则说明是基础数据类型，解释器会创建一个和基础类型对应的一个对象，让后去访问这个对象对应的属性或者方法，当属性访问或者方法执行结束后，这个对象会立即被删除掉，所以基础数据类型也可以使用方法。
包装对象： 在调用的同时被创建的对象被称之为包装对象。
基础数据类型调用方法的过程： 创建包装对象——调用方法——删除包装对象
数字、字符串、布尔有包装对象
null、undefined没有包装对象，所以调用方法和属性会报错

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"
new Number(123).valueOf()  // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

var num,str,boo;
num=1234;
str='abcd';
boo=true;
num.length;//undefined
str.length;//4
boo.length;//undefined
null.len;//报错 Cannot read properties of null (reading 'length')

//面试题  包装对象的坑
var str='abc';
str.length = 4;//赋值完成创建的包装对象，创建完成直接被销毁
str.length;//依然为3

注意：包装对象在调用时被创建，调用之后被删除
对象都有两个基础方法valueOf()和toString()，所以包装对象也有这两个方法。
①布尔类型
布尔类型仅有这两个方法可用，实际开发中没太大用处。

new Boolean(true).valueOf();//true
new Boolean(false).valueOf();//false
new Boolean(false).toString();//'false'
new Boolean(true).toString();//'true'

②数字类型
数字类型除了这两个方法，还可调用toFixed()、toExponential()、toPrecision()

方法	用法	语法
toFixed()	把 Number 四舍五入为指定小数位数的数字	NumberObject.toFixed(num)；num规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替
toExponential()	可把对象的值转换成指数计数法	NumberObject.toExponential(num)；num规定指数计数法中的小数位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将使用尽可能多的数字
toPrecision()	对象的值超出指定位数时将其转换为指数计数法	umberObject.toPrecision(num) ；num规定必须被转换为指数计数法的最小位数。该参数是 1 ~ 21 之间（且包括 1 和 21）的值。有效实现允许有选择地支持更大或更小的 num。如果省略了该参数，则调用方法 toString()，而不是把数字转换成十进制的值

toFixed()注意要点：
——最多保留20位，超过20会报错；
——正常浏览器都是采用四舍五入，最早的ie6或ie7可能会有不同，如果想要兼容，可自己封装保留小数的方法
——得到的结果为string类型

new Number(123).valueOf(); //结果： 数字123
new Number(123).toString();//结果：字符串 '123'
var num=123;
num.valueOf();//123
num.toString();//'123'
num.toFixed(2);//结果：保留两位小数，数据类型为字符串'123.00'
var num = 15200000000000;
num.toExponential();//'1.52e+13'
num.toExponential(0);//保留0位小数'2e+13'
num.toPrecision();直接转换为字符串 '15200000000000'
num.toPrecision(8);//超出8位用指数表示 '1.5200000e+13'
//toFixed和toExponential参数表述保留小数的位数，toPrecision参数表示总的位数

③字符串类型

charAt()方法可返回指定位置的字符stringObject.charAt(index)
charCodeAt() 返回在指定的位置的字符的 Unicode 编码，语法：stringObject.charCodeAt(index)
concat()连接字符串，一般不使用此方法，常用方法为+号进行字符串拼接stringObject.concat(stringX,stringX,…,stringX)
indexOf() 检索字符串语法：stringObject.indexOf(searchvalue,fromindex)
searchvalue检索字符串,fromindex从哪个位置开始，formindex可省略，省略则从0开始检测，如果有则返回查找字符第一次出现的位置，没有则返回-1
lastIndexOf() 从后向前搜索字符串，与indexOf参数一样，只不过查找方法从后向前查找
split() 把字符串分割为字符串数组语法：stringObject.split(separator,howmany)，
separator分割标识,howmany返回数组长度限制，每个字符都分隔开，separator设置为空字符串‘’
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分，语法：stringObject.slice(start,end)，包含开始不包含结尾
substr() 从起始索引号提取字符串中指定数目的字符，语法：stringObject.substr(start,length)
substring() 提取字符串中两个指定的索引号之间的字符，语法：stringObject.substring(start,stop)
toLowerCase() 把字符串转换为小写。语法：stringObject.toLowerCase()
toUpperCase() 把字符串转换为大写。语法：stringObject.toUpperCase()
trim() 清除前后空格
trimLeft() 清除左边空格
trimRight() 清除右边空格

以上为es5可用的方法

'hello word'.charAt(2);//返回下标2位置的字符，下标从0开始
'hello word'.charCodeAt(2);//108
'leo'.concat(' is a boy');//'leo is a boy'
'leo'.concat(' is',' a',' boy');//'leo if a boy'
'hello'+' word';//'hello word'
'abcd'.split('');//(4) ['a', 'b', 'c', 'd']
'abcd'.split('',2);//设置返回数组长度为2 (2) ['a', 'b']
'abcd'.split('b');//(2) ['a', 'cd']
//slice()、substr()、substring()
'abcdefghijklmb'.slice(2,4);//从2开始截取，截取到4，包含2不包含4'cd'
'abcdefghijklmb'.slice(1,5);//'bcde'
'abcdefghijklmb'.substr(1,1);//从1开始，截取1个  'b'
'abcdefghijklmb'.substr(1,3);//从1开始，截取3个 'bcd'
'abcdefghijklmb'.substring(1,5);//从1开始到5结束，包含1不包含5 'bcde'

slice()和substring()的区别：
▶ 当第二个参数小于第一个参数时，substring会把两个参数调转过来；slice不会调转，会返回空字符串
▶ 如果传入负数，substring会当成0来处理，slice会当成倒数第几位处理
substr()的区别：
▶ substr第二个表示长度，而非下标位置
▶ 因为第二个表示长度，所以第二个为负数不会颠倒处理
▶ 如果第一个数为负数，则表示从倒数第几位

'abcdefghijklmb'.slice(5,1);//''
'abcdefghijklmb'.substring(5,1);//'bcde'
'abcdefghijklmb'.slice(5,-2);//'fghijkl'
'abcdefghijklmb'.substring(2,-1);//'ab'
'abcdefghijklmb'.substr(-2,1);//'m'
'abcdefghijklmb'.substr(2,-1);//''

trim()、trimLeft()、trimRight()，三个方法均没有参数

'  abc  defghijklmb  '.trim();//'abc  defghijklmb'
'  abc  defghijklmb  '.trimLeft();//'abc  defghijklmb  '
'  abc  defghijklmb  '.trimRight();//'  abc  defghijklmb'

es6可能会用到的方法

padStart() 字符串不够指定长度头部补全。接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串
padEnd() 字符串不够指定长度尾部补全
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
repeat()方法返回一个新字符串，表示将原字符串重复n次

//如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
//如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串
'abc'.padStart(10, '0123456789')// '0123456abc'
//如果省略第二个参数，默认使用空格补全长度
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '
//常见用途是为数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"
//提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

padStart()和padEnd()方法参考
includes(), startsWith(), endsWith() 用来确定一个字符串是否包含在另一个字符串中；第一个参数表示查找的字符串，都支持第二个参数，表示开始搜索的位置

let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
//参数是负数或者Infinity，会报错
'na'.repeat(Infinity)// RangeError
'na'.repeat(-1)// RangeError
//如果参数是 0 到-1 之间的小数，则等同于 0
'na'.repeat(-0.9) // ""
//参数NaN等同于 0
'na'.repeat(NaN) // ""
//如果repeat的参数是字符串，则会先转换成数字
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

字符串方法示例：
字符串翻转

var x='hello word';
x.split('').reverse().join('');//'drow olleh'

获取今天是星期几

var d = new Date().getDay();//获取星期对应的数字,6
var nowWeek='今天是星期' + '日一二三四五六'.charAt(d);
nowWeek; //'今天是星期六'

字符串的HTML对象

var a='abcd';
console.log(a.big());//<big>abcd</big>
console.log(a.fontcolor('#f00'));//<font color="#f00">abcd</font>
console.log(a.bold());//<b>abcd</b>
...

在浏览器控制台输入a点（a.）即可查找对应方法
字符串正则方法
search()搜索、match()匹配、replace()替换
关于正则后面详解

2、内置对象

单体内置对象，简称内置对象；
内置对象不需要使用new操作符进行实例化；
关于new操作符实例化及构造方法下节详解；
JS中真正的内置对象，不需要使用new操作符进行实例化的只有两个：global对象、math对象

第一个：global对象

在不同的环境下，表示的也不一样
在浏览器环境下，其实global对象就是window对象，更准确一点为window对象一部分。

global对象常见的属性和方法：
①处理数字的方法：isFinite()、isNaN()、parseFloat()、parseInt()

isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
②处理URI的方法
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。（不会对所有字符进行编码，例如？!之类的不会进行处理）
encodeURIComponent() 把字符串编码为 URI 组件（会对所有特殊字符进行编码）
escape() 对字符串进行编码。（已废弃）
unescape() 对由 escape() 编码的字符串进行解码。（已废弃）

var x='https://editor.csdn.net/md?articleId=121979276';
encodeURIComponent(x);//'https%3A%2F%2Feditor.csdn.net%2Fmd%3FarticleId%3D121979276'
encodeURI(x);//'https://editor.csdn.net/md?articleId=121979276'

③另外一个：eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
eval()方法接收一个字符串，能把字符串当成语句进行执行；

eval("2+2")；//4
eval("console.log(11111)");//11111
//常用一：将json字符串对象转换为对象，低版本的用法，高版本可使用JSON对象，json为es5新增对象
var str='{"yzId":4083,"yzCode":"282123654","yzName":"test","yzlxId":1,"deptId":100,"deptName":"管理中心","areaId":-1}';
eval('('+str+')');
eval('({"yzId":4083,"yzCode":"282123654","yzName":"test","yzlxId":1,"deptId":100,"deptName":"管理中心","areaId":-1})');
//常用二：动态的声明变量

为什么要加（）？
原因在于：eval本身的问题。由于json是以“{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式

eval('{}');//undefined
eval('({})');//{}

eval的问题
eval声明变量不存在变量提升，eval执行时才会被创建；
严格模式下eval定义的变量在eval外面访问不到；
无法使用调试工具调试；
非常影响性能；
存在安全隐患；

global的属性

global大部分属性都是构造函数，例如number、function、error，只有三个属性是特殊的值：undefined、NaN、infinity

global.undefined;//undefined
global.NaN;//NaN
global.Infinity;//Infinity
global.undefined === window.undefined;//true

第二个：math对象

math对象参考手册
可能会用到的方法：

round(x) 四舍五入。
ceil(x) 对数进行上舍入。
floor(x) 对 x 进行下舍入。
max(x,y,z,…,n) 返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n) 返回 x,y,z,…,n中的最低值。
abs(x) 返回 x 的绝对值
random() 返回 0 ~ 1 之间的随机数。 (无参数)

//round四舍五入，ceil上舍如，floor下舍入
Math.round(1.2);//1
Math.round(1.6);//2
Math.ceil(1.2);//2
Math.ceil(1.5); //2
Math.ceil(-1.1); //-1
Math.floor(1.9); //1
Math.floor(1.1); //1
Math.floor(-1.1); //-2

random()生成随机字符串

Math.random().toString(36);//默认包含数字和字母
Math.random().toString(36).replace(/[0-9]/g,'');//清除数字
//[n, m]的整数(n<m)的公式
Math.floor(Math.random()*(m-n+1)+n);
//返回1-8的整数,包含1和8
Math.floor(Math.random()*8+1);