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

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();//'tru'

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

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、内置对象

第一个：global对象

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("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('{}');//undefined
eval('({})');//{ 
        }

global的属性

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

第二个：math对象

//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

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);