原始类型的包装类
JavaScript的原始类型并非对象类型,所以从理论上来说,它们是没有办法获取属性或者调用方法的
但是,在开发中,我们经常会这样操作
那么为什么会出现这样的现象呢?
- 原始类型是简单的值,默认并不能调用属性和方法
- 这是因为 JavaScript 为了可以使其可以获取属性和调用方法,对齐封装了对应的包装类型
常见的包装类型有:String、Number、Boolean、Symbol、BigInt类型
var name = 'Hello World'
var height = 1.663
/*
function String (str) {
this.str = str
this.length = 11
this.split = function () {
}
}
*/
// 在调用原始类型的属性或者方法时,内部的操作 name = new String(name)
console.log(name.length)
console.log(name.split(' '))
console.log(height.toFixed(2))
/*
var obj = {
name: 'kobe',
running: function () {
}
}
obj.running()
*/
// 原始类型默认也可以手动的创建对象(但是一般没有必要)
var name1 = new String('Hello World')
console.log(typeof name, typeof name1);
包装类型的使用过程
默认情况,当我们调用一个原始类型或者方法时,会进行如下操作
- 根据原始值,创建一个原始类型对应的包装类型对象
- 调用对应的属性或者方法,返回一个新的值
- 将创建的包装类型对象销毁
- 通常 JavaScript 引擎会进行很多的优化,它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用
我们也可以自己来创建一个包装类的对象
- name 是字面量(literal)的创建方式,name1 是 new 创建对象的方式
注意事项:
null
、undefined
没有任何的方法,也没有对应的 “对象包装类”
Number类的补充
number 类型,它有一个对应的数字包装类型 Number
Number 属性补充:
- Number.MAX_SAFE_INTEGER
: JavaScript 中最大的安全整数(9007199254740991)
- Number.MIN_SAFE_INTEGER
: JavaScript 中最大的安全整数(-9007199254740991)
Number 实例方法补充:
- 方法一:toSting(base),将数字转成字符串,并且按照 base 进制进行转化
- base 的范围可以从 2 到 36,默认是 10
- 注意:如果是直接对一个整数进行操作,需要使用 …运算符
- 方法二:toFixed(digits),格式化一个数字,保留 digits 位小数
- digits 的范围是 0 到 20 (包含)之间
- 返回的是一个字符串
Number 类方法补充
- 方法一:Number.parseInt(string,radix),将字符串解析成整数,也有对应的全局方法 parseInt
- 方法二:Number.parseFloat(string),将字符串解析成浮点数,也有对应的全局方法parseFloat
// Number构造函数 -> window.Number
var num = 123 // new Number
// Number 本身是有自己的属性的
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
// 类属性(静态属性 static)
// integer:整数
console.log(Number.MAX_SAFE_INTEGER)
console.log(Number.MIN_SAFE_INTEGER)
// 对象的方法
// toString(base)
var num1 = 1000
console.log(num1.toString(), typeof num1.toString())
console.log(num1.toString(2))
console.log(num1.toString(8))
// console.log(123..toString(2));
var pi = 3.1415926
console.log(pi.toFixed(3))
// 类的方法
// 整数:123
// 浮点数:小数 123.321
var num1 = '123.321'
console.log(Number(num1))
console.log(Number.parseInt(num1))
console.log(Number.parseFloat(num1))
console.log(parseInt(num1))
console.log(parseFloat(num1));
Math对象
除了 Number 类可以对数字进行处理之外,JavaScript 还提供了一个 Math 对象
- Math 是一个内置对象(不是一个构造函数),它拥有一些数字常见属性和数学函数
Math常见的属性
- Math.PI:圆周率,约等于 3.14159
Math常见的方法
- Math.floor:向下取整
- Math.ceil:向上取整
- Math.round:四舍五入取整
- Math.random:生成0~1的随机数(包含0,不包含1)
- Math.pow(x,y):返回x的y次幂
-
// Math -> 对象
console.log(typeof Math) // Object
// Math对象的属性
console.log(Math.PI)
// Math 对象的方法
var num = 3.55
console.log(Math.floor(num)) // 3
console.log(Math.ceil(num)) // 4
console.log(Math.round(num)) // 4
// 另外的方法
// random :随机 0~1
console.log(Math.random())
// 需求:[5~50]的随机数
// [a,b]
// y = a
// x = b - a
// Math.floor(Math.random() * x) + y
for (let i = 0; i < 1000; i++) {
var randomNum = Math.floor(Math.random() * 45) + 5
console.log(randomNum)
}
console.log(Math.pow(2, 5));
String 包装类型
基本使用
String 常见的属性:
- length:获取字符串的长度
操作一:访问字符串的字符
- 通过字符串的索引 str[i]
- 通过 str.charAt(pos) 方法
- 它们的区别是索引的方式没有找到会返回 undefined,而 charAt 没有找到会返回空字符串
字符串的遍历
// 字符串的遍历
for (var i = 0; i < message.length; i++) {
console.log(message[i])
}
// for...of的遍历 -> 迭代器
// 目前可迭代对象:字符串、数组
// 对象不支持for...of遍历
// String对象内部将字符串变成了一个可迭代的对象
for (var char of message) {
console.log(char)
}
修改字符串
字符串的不可变性
- 字符串在定义后是不可修改的,所以下面的操作是没有任何意义的
所以,在我们改变很多字符串的操作中,都是生成了一个新的字符串
- 比如改变字符串的大小写的两个方法
- toLowerCase():将所有字符串转成小写
- toUpperCase():将所有字符串转成大写
查找字符串
方法一:查找字符串位置
- 从 fromIndex 开始,查找 searchValue 的索引
- 如果没有找到,那么返回 -1
- 有一个相似的方法,叫 lastIndexOf,从最后开始找
方法二:是否包含字符串
- 从 position 位置开始查找 searchString,根据情况返回 true 或 false
- 这是 ES6 新增的方法
开头和结尾
方法三:以 xxx 开头
- 从 position 开始,判断字符串是否以 searchString 开头
- 这也是 ES6 新增的方法
方法四:以 xxx 结尾
- 在 length 长度内,判断字符串是否以 searchString 结尾
方法五:替换字符串
- 查找对应的字符串,并且使用新的字符串进行替代
- 这里也可以传入一个正则表达式来查找,也可以传入一个函数来替换
var message = 'my name is jack'
var name = 'jack'
// 判断一个字符串中是否有另一个字符串
// 1.indexOf(searchString,fromIndex)
/*
index:
情况一:搜索到,返回字符串所在的索引位置
情况二:没有搜索到,返回 -1
*/
var index = message.indexOf(name)
if (message.indexOf(name) !== -1) {
console.log('message中包含name')
} else {
console.log('message中不包含name')
}
// 2.ES6中新增方法,就是用来判断包含关系的
if (message.includes(name)) {
console.log('message中包含name')
}
// 3.startWith: 是否以xxx开头
if (message.startsWith('my')) {
console.log('message以my开头')
}
// 4.endsWith: 是否以xxx结尾
if (message.endsWith('jack')) {
console.log('message以jack结尾')
}
// 5.替换字符串 replace
var newMessage = message.replace('jack', 'rick')
console.log(newMessage);
获取子字符串
其他方法
拼接字符串
删除首尾的空格
字符串分隔
- separator:以什么字符串进行分割,也可以是一个正则表达式
- limit:限制返回片段的数量
var str1 = 'Hello'
var str2 = 'World'
var str3 = 'jack'
// 1.字符串的拼接
/*
var newString1 = str1 + str2 + str3
console.log(newString)
*/
// concat方法:链式调用
var newString2 = str1.concat(str2).concat(str3)
var newString3 = str1.concat(str2, str3, 'abc', 'def')
console.log(newString2)
console.log(newString3)
// 2.删除首尾空格
var message1 = ' jack '
console.log(message1.trim())
// 3.字符串切割 split
var message = 'abc-cba-nab-mba'
var items = message.split('-')
var newMessage = items.join('*')
console.log(newMessage)
Q.E.D.