JavaScript学习第九章-第三部分(内建对象)
JavaScript学习第九章-第三部分(内建对象)
- 包装类
- 字符串方法
- 正则表达式
- 垃圾回收
1、包装类
在JS中，除了直接创建原始值外，也可以创建原始值的对象。
-
通过 new String() 可以创建String类型的对象
-
通过 new Number() 可以创建Number类型的对象
-
通过 new Boolean() 可以创建Boolean类型的对象
-
注意，千万不要这么做
字符串类型
let str = new String(‘hello’);
let str1 = ‘hello’;
// 这样使用了到时候两个值判断就不相等了
console.log(str === str1);// false
数字类型
let num = new Number(11);
boolean 类型
let bool1 = new Boolean(true);
let bool2 = new Boolean(true);
// 那么这样判断就不相等了
console.log(bool1 === bool2);//false
js包装类
JS中一共有5个包装类
String --> 字符串包装为String对象
Number --> 数值包装为Number对象
Boolean --> 布尔值包装为Boolean对象
BigInt --> 大整数包装为BigInt对象
Symbol --> 符号包装为Symbol对象
- 通过包装类可以将一个原始值包装为一个对象，
当我们对一个原始值调用方法或属性时，JS解释器会临时将原始值包装为对应的对象
然后调用这个对象的属性或方法
- 由于原始值会被临时转换为对应的对象，这就意味着对象中的方法都可以直接通过原始值来调用
包装类的应用
包装类实际是在底层进行转换调用的，底层帮我们实现了；
//转为包装类的好处就是，我们设置值的时候不报错
let str3 = ‘hello’;
//如果不做包装类，那么该地方肯定就报错了
str3.name = ‘孙悟空’;
// 该步骤是先转为包装类，然后有一个临时变量挂载，等使用完毕后就移除了
console.log(str3.name);//undefined
//如一个数字类型的，调用它的 toString()方法，实际上就是使用的包装类
let num1 = 1;
num1 = num.toString();
console.log(num1);//11
// 如果直接使用 null.toString() 会发生什么
//null.toString();//ncaught TypeError: Cannot read properties of null (readin
2、字符串方法
- 参考地址：
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
- 字符串其本质就是一个字符数组
属性+方法
- 属性和方法：
- length 获取字符串的长度
- 字符串[索引] 获取指定位置的字符
- str.at() （实验方法）
- 根据索引获取字符，可以接受负索引
-str.charAt() - 根据索引获取字符
- str.concat()
- 用来连接两个或多个字符串
- str.includes()
- 用来检查字符串中是否包含某个内容
有返回true
没有返回false- str.indexOf()
- str.lastIndexOf()
- 查询字符串中是否包含某个内容
- str.startsWith()
- 检查一个字符串是否以指定内容开头
- str.endsWith()
- 检查一个字符串是否以指定内容结尾
- str.padStart()
- str.padEnd()
- 通过添加指定的内容，使字符串保持某个长度
- str.replace()
- 使用一个新字符串替换一个指定内容
- str.replaceAll()
- 使用一个新字符串替换所有指定内容
- str.slice()
- 对字符串进行切片
- str.substring()
- 截取字符串
- str.split()
- 用来将一个字符串拆分为一个数组
- str.toLowerCase()
- 将字符串转换为小写
- str.toUpperCase()
- 将字符串转换为大写
- str.trim()
- 去除前后空格
- str.trimStart()
- 去除开始空格
- str.trimEnd()
- 去除结束空格
- 字符串[索引] 获取指定位置的字符
- length 获取字符串的长度
字符串使用方法同数组
let str1 = ‘hello’;
console.log(str1[0]);//h
//遍历
// for(let char of str1) {
// console.log(char)
// }
属性
不需要通过方法调用，直接调用里面的属性即可
length 长度
// length 长度
let result = str1.length;
console.log(result);//5
方法
方法1 at()
// 方法1 at() （实验方法）根据索引获取字符,负数 从后往前
result = str1.at(-1);
console.log(result);//5
方法2 charAt()
// 方法2 charAt() 下标索引 不接受负值
result = str1.charAt(0);
console.log(result);//h
方法3 concat()
result = str1.concat(’ how are you’);
console.log(result);// hello how are you
includes()
// 方法3 includes()
str1 = “hello hello how are you”
result = str1.includes(‘how’);
console.log(result);//true
indexOf()
str2 = “hello how are you”
// 方法4 str.indexOf() 字符串下标位置,第一个字符位置
result = str1.indexOf(‘hello’)
console.log(result)
lastIndexOf()
// 方法5 str.lastIndexOf() 字符串下标位置,最后一个字符位置
result = str1.lastIndexOf(‘you’)
console.log(result)
endsWith()
result = str1.endsWith(‘you’)
console.log(result);//true
padStart()
/ 方法7 padStart 从开头 第一个参数为总共多少个长度，第一个为需要补充的字符
str1 = “100”;
result = str1.padStart(7,‘0’);
console.log(result);//0000100
padEnd()
// 方法8 padEnd 从结尾 第一个参数为总共多少个长度，第一个为需要补充的字符
result = str1.padEnd(7,‘0’);
console.log(result);//1000000
replace()
str2 = “hello hello how are you”
// 方法9 replace() 字符串替换,只能替换一个
result = str2.replace(‘hello’,‘张三’);
console.log(result);// 张三 hello how are you
replaceAll()
// 方法10 replaceAll() 字符串替换,只能替换一个
result = str2.replaceAll(‘hello’,‘张三’);
console.log(result);// 张三 张三 how are you
slice()
// 方法11 slice() 对字符串进行切片
result = str2.slice(0,5);
console.log(result)//hello
substring()
// 方法12 substring() 截取字符串
result = str2.substring(0,5);
console.log(result)//hello
split()
let str3 = “abc@bcd@efg@jqk” // [“abc”, “bcd”, “efg”, “jqk”]
// 方法13 split() 用来将一个字符串拆分为一个数组
result = str3.split(‘@’);
console.log(result)//[‘abc’, ‘bcd’, ‘efg’, ‘jqk’]
toLowerCase()
str3 = “abcdABCD”
// 方法14 toLowerCase() 将字符串转换为小写
result = str3.toLowerCase();
console.log(result)//abcdabcd
toLowerCase()
// 方法15 toLowerCase() 将字符串转换为大写
result = str3.toUpperCase();
console.log(result)//ABCDABCD
trim()
str3 = " ab c "
// 方法16 trim() 去除前后空格
result = str3.trim();
console.log(result)//ab c
str3 = " ab c "
// 方法17 trimStart() trimEnd 去除开始空格
result = str3.trimEnd();
console.log(result)// ab c
3、正则表达式
正则表达式
- 正则表达式用来定义一个规则
- 通过这个规则计算机可以检查一个字符串是否符合规则 或者将字符串中符合规则的内容提取出来
- 正则表达式也是JS中的一个对象， 所以要使用正则表达式，需要先创建正则表达式的对象
- new RegExp() 可以接收两个参数：
- （字符串） 1.正则表达式
- 2.匹配模式
- new RegExp() 可以接收两个参数：
创建方式
// 创建方式1 通过构造函数来创建一个正则表达式的对象
let reg = new RegExp(‘a’,‘i’);
// 创建方式2 使用字面量来创建正则表达式
reg = /a/i;
reg = /\w/;
// \w 这种如果通过构造方法，需要使用 \ 转义
reg = new RegExp(‘\w’);
console.log(reg);// /\w/
使用方法
//使用方式
reg = new RegExp(‘a’);
// 通过正则表达式检查一个字符串是否符合规则
let str = ‘a’;
let result = reg.test(str);
console.log(result);//true
console.log(reg.test(‘b’));//false
console.log(reg.test(‘abc’));//true
console.log(reg.test(‘bcdaefg’));//true
reg = /a/;
console.log(reg.test(‘bddfe’));//false
4、正则表达式语法
1.在正则表达式中大部分字符都可以直接写2.| 在正则表达式中表示或3.[] 表示或（字符集）[a-z] 任意的小写字母[A-Z] 任意的大写字母[a-zA-Z] 任意的字母[0-9]任意数字4.[^] 表示除了[^x] 除了x5. . 表示除了换行外的任意字符6. 在正则表达式中使用\作为转义字符7. 其他的字符集\w 任意的单词字符 [A-Za-z0-9_]\W 除了单词字符 [^A-Za-z0-9_]\d 任意数字 [0-9]\D 除了数字 [^0-9]\s 空格\S 除了空格\b 单词边界\B 除了单词边界8. 开头和结尾^ 表示字符串的开头$ 表示字符串的结尾
使用示例
<script>// | 或 let reg = /abc|bcd/;console.log(reg.test('abc'));//trueconsole.log(reg.test('bcd'));//trueconsole.log(reg.test('azasbc'));//false// [] 或reg = /[a-z]/;console.log(reg.test('azasbc'));//truereg = /[A-Z]/;console.log(reg.test('azasbc'));//false// 匹配模式 i 表示忽略大小写reg = /[a-z]/iconsole.log(reg.test('azasbc'));//true// [^] 表示除了 xx 之外的数据 reg = /[^a-z]/;console.log(reg.test('azasbc'));//false// . 表示除了换行外的任意字符reg = /./;console.log(reg.test('\n'));//false// 如果想匹配字符中间带来 . 的需要转移reg = /\./console.log(reg.test('abcdg.dfdkjk'));//true// 其他 \w 任意的单词字符 [A-Za-z0-9_]reg = /\w/;console.log(reg.test('ab12334cdgd'));//true// ^ 表示字符串的开头reg = /^ab/;console.log(reg.test('a'));//true// $ 匹配结束位置的reg = /a$/;console.log(reg.test('bcagda'));//true// 只匹配字母a，完全匹配，要求字符串必须和正则完全一致reg = /^a$/;console.log(reg.test('a'));//trueconsole.log(reg.test('aaaa'));//false// 匹配开始 和结尾reg = /^abc$/;console.log(reg.test('abc'));//trueconsole.log(reg.test('aac'));//false</script>
5、正则表达式-量词
量词
{m} 正好m个
{m,} 至少m个
{m,n} m-n个
+ 一个以上，相当于{1,}
* 任意数量的a
? 0-1次 {0,1}
使用示例
<script>// {} 必须是指定的个数let reg = /a{3}/;console.log(reg.test('aaa'));//trueconsole.log(reg.test('abb'));// falsereg = /^a{3}$/console.log(reg.test('aaa'));//true// 以 ab 开头,ab 结尾 必须三个ab reg = /^(ab){3}$/;console.log(reg.test('ababab'));//trueconsole.log(reg.test('ab'));//false// 以a-z 字符开头和结尾，且必须有三位长度reg = /^[a-z]{3}$/;console.log(reg.test('abcagdgsada'));//falseconsole.log(reg.test('abc'));//true// {,}至少m个 至少 3 个 reg = /^[a-z]{3,}$/;console.log(reg.test('abcagdgsada'));//trueconsole.log(reg.test('abca111gdgsada'));//false// 至少3个，最多 5个字母reg = /^[a-z]{3,5}$/;console.log(reg.test('abcagdgsada'));//falseconsole.log(reg.test('abcb'));//true// + 一个以上，相当于{1,}reg = /^ba+$/;console.log(reg.test('baaaaaaaa'));//true// * 任意数量reg = /^ba*$/;console.log(reg.test('b'));//true// ? 0 -1 次 最多出现一次 reg = /^ba?$/;console.log(reg.test('ba'));//trueconsole.log(reg.test('b'));//trueconsole.log(reg.test('baa'));//false</script>
6、正则表达式-exec
re.exec()
- 获取字符串中符合正则表达式的内容
使用示例
7、正则小练习
- 提取手机号，从以下的字符串中
- dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd
基本提取
// 首先编写一个手机号的正则
let reg = /1[3-9]\d{9}/g;
let result;
while(result = reg.exec(str)) {
console.log(result[0]);
}
console.log(“==============>”)
提取后脱敏
// 将手机号进行脱敏操作 前三位 *** 后四位 reg = /(1[3-9]\d)\d{4}(\d{4})/g;while (result = reg.exec(str)) {console.log(result);console.log(result[1]+"****"+result[2]);}
8、正则表达式-字符串
split()
- 可以根据正则表达式来对一个字符串进行拆分
- search() 可以去搜索符合正则表达式的内容第一次在字符串中出现的位置
- replace() 根据正则表达式替换字符串中的指定内容
- match() 根据正则表达式去匹配字符串中符合要求的内容
- matchAll() 根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配) 它返回的是一个迭代器
使用示例
<script>let str = "a@b@c@d";//传统 split 方法let result = str.split("@");console.log(result);//Array(4)// 提取 abc / adc 字符串str = "孙悟空abc猪八戒adc沙和尚";result =str.split(/a[bd]c/);console.log(result);//['孙悟空', '猪八戒', '沙和尚']// searchstr = "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"result = str.search('13715678903');// 6console.log(result)result = str.search(/1[3-9]\d{9}/);// 6console.log(result)// replace() 替换result = str.replace(/1[3-9]\d{9}/g,'哈哈哈');console.log(result);// dajsdh哈哈哈jasdlakdkjg哈哈哈djashdjka哈哈哈sdadadasd// match() 根据正则表达式去匹配字符串中符合要求的内容result = str.match(/1[3-9]\d{9}/g);console.log(result);// ['13715678903', '13457890657', '13811678908']// matchAllresult = str.matchAll(/1[3-9](\d{9})/g)for (let item of result) {console.log(item)}</script>
1752499097596)
9、垃圾回收
垃圾回收（Garbage collection）
- 和生活一样，生活时间长了以后会产生生活垃圾
段时间后也会产生垃圾- 在程序的世界中，什么是垃圾？
个对象没有任何的变量对其进行引用，那么这个对象就是一个垃圾 - 垃圾对象的存在，会严重的影响程序的性能
中有自动的垃圾回收机制，这些垃圾对象会被解释器自动回收，我们无需手动处理 - 对于垃圾回收来说，我们唯一能做的事情就是将不再使用的变量设置为null
- 在程序的世界中，什么是垃圾？
使用示例
<script>let obj = { name: "孙悟空" }let obj2 = obj// 指向为空，那么就进行垃圾回收obj = nullobj2 = null
</script>