2023-03-08_JSDay09-内置对象及正则表达式

作者: 远方的路_ | 来源:发表于2023-03-07 21:30 被阅读0次

1. call和apply方法

作用: 改变了this的指向, 在 call和apply方法中this指向了第一个参数
call和apply可以让一个对象执行另外一个对象的方法；
call和apply的区别在参数的不同
- call是一个又一个的值
- apply传递是一个数组
没有参数

var obj = {
                name:'张三',
                age:33
            }
function Dog(name,age){
                this.name = name;
                this.age = age;
            }
Dog.prototype.eat = function(){
                console.log('吃肉');
            }
var d1 = new Dog('旺财',3);
d1.eat();

obj.eat();  // 思考报错原因

解决策略
- 给这个对象自己添加一个吃肉的方法
  obj.eat = function(){ console.log('吃肉'); } obj.eat();
- 不给这个对象添加，而是使用apply或者call借用狗的吃肉方法去实现
  d1.eat.apply(obj); //把狗的eat方法调用时的this指向修改为obj，代表obj在执行狗的这个方法 d1.eat.call(obj);
有参数

Dog.prototype.eat = function(a,b){
    console.log(this);
    console.log('吃肉');
    console.log(a,b);
}

var d1 = new Dog('旺财',3);
d1.eat(10,20);

d1.eat.apply(obj,[100,200]);
d1.eat.call(obj,100,200)；

2. Json

Json是一种轻量级的数据交换标准。

json是一种数据格式；现在我们大多数都是通过json数据格式进行前后端数据交互的，json本质上是一个字符串，简称json串
前端往后台传数据的时候，要传json格式的数据json串
在前端json串的格式原形就是对象或者对象的数组；所以我们要先把数据存储为对象或者对象的数组，然后转化为json串进行传递

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

eg:

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的

var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

var a = '阿马';
var b = 100;
var c = '嘿嘿';

//第一步，把数据给封成一个对象
var obj = {
    a: a,
    b: b,
    c: c
}
//第二步，把对象给变为json串，依赖JSON对象的方法
console.log(obj);
var result = JSON.stringify(obj); //把对象转化为json串
console.log(result);

//后端传递回来的数据，我们需要把这个json串转化为对象去操作
console.log(JSON.parse(result));

3. 内置数学Math对象

round, floor,ceil

var num = 1.4;
console.log(Math.round(num)); //四舍五入取整
console.log(Math.floor(num)); //向下取整
console.log(Math.ceil(num)); //向上取整

max min PI pow abs sqrt

sqrt应用场景: 可以在循环条件中缩小判断范围减少循环次数以便于性能提升比如说质数判断判断条件可以直接用开方根来比较

console.log(Math.max(20, 10, 67, 44));
console.log(Math.min(20, 10, 67, 44));
console.log(Math.PI); //圆周率  是一个属性
console.log(Math.pow(2, 5)); //ES5当中常用这个做幂运算
console.log(Math.abs(-5)); //求绝对值
console.log(Math.sqrt(9)); //开方根

random 随机数

拿到任意两个值之间的随机整数

function getRandomInt(a,b){
                return Math.floor(Math.random()*(b - a + 1) + a);
            }
console.log(getRandomInt(1,84));

//拿的是0 - 1之间的一个随机数，包含0但是不包含1
console.log(Math.random());

// 我想拿到0 - 84之间的随机数   
console.log(Math.floor(Math.random()*85 + 0))

//我想拿到1 - 100之间的随机数
console.log(Math.floor(Math.random()*100 + 1));
            
//我想拿到5 - 66之间的随机数
console.log(Math.floor(Math.random()*62 + 5))

练习: 生成随机四位数的验证码

var str = 'QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890';
var code = ''
for (var i = 0; i <= 3; i++) {
    var index = Math.floor(Math.random() * 62)
    var res = str[index]
    code += res
}
document.write(code)

4. 日期和时间对象

当做普通函数使用

var result = Date();
console.log(result);
console.log(Date.now());

当做构造器使用

var date = new Date();
console.log(date);
console.log(date.getFullYear());//拿到年
console.log(date.getMonth());//拿到月   月份是 0 - 11表示的  记得后面+1
console.log(date.getDate());//拿到日

console.log(date.getHours());//小时
console.log(date.getMinutes());//分钟
console.log(date.getSeconds());//秒

console.log(date.toLocaleTimeString());//当前时间的本地格式化字符串
console.log(date.toLocaleDateString());//当前日期的本地格式化字符串

console.log(date.getTime());//1970 年 1 月 1 日到现在 之间的毫秒数
console.log(date.getDay());//拿到星期

练习

function getDateAndTimeNow(){
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var time = date.toLocaleTimeString();
                
    return '现在是：' + year + '年' + month + '月' + day + '日 '+ time;
}
            
var result = getDateAndTimeNow();
console.log(result);

5. 包装类

我们都知道js分为基本数据类型和引用数据类型。

基本数据类型数据可以有属性吗？答案是没有，但是为什么基本数据类型却可以调用一些方法呢。

var str="hello world";
 var long=str.length;
 console.log(long);   //得出结果为11

明明没有却可以调用length的属性，就是因为包装类的原因，函数在执行的前一刻发现你写的代码其实是存在问题的，但是因为js是解释型语言，系统会为你进行包装类的操作。

js中提供了三种特殊的引用类型（String Number Boolean）每当我们给基本数据类型赋属性值时后台都会给我们偷偷转换调用包装类

包装对象一共有三种：数字字符串布尔值

// 基础数据类型只有三个有包装类: string, number, boolean
var str = 'hello world';

// var str = new String('hello world') // 1. 创建出一个和基本类型值相同的对象
// var long = str.length // 2 这个对象就可以调用包装对象下的方法, 并且返回给long变量
// str = null // 3. 之后这个临时创建的对象就被销毁了

var long = str.length; // str没有属性 所以执行这步之前后台自动执行了以上三步

6. 正则表达式

1. 实例化创建对象

实例化的创建
var reg = new RegExp(pattern,flags);
pattern:正则表达式
flags:标识(修饰符)，可以不写。
标识主要包括：
1. i 忽略大小写匹配
2. m 多行匹配，即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项
3. g 全局匹配模式应用于所有字符串，而非在找到第一个匹配项时停止

2. 实例化的基本使用

判断字符串中是否有a

var reg = new RegExp('a');
使用test方法检测函数规则
console.log(reg.test('abc'));
console.log(reg.test('bc'));

判断字符串中是否有ab

var reg = new RegExp('ab');
console.log(reg.test('abc'));
console.log(reg.test('acb'));

判断字符串中是否包含a或者b，需要忽略大小写

var reg = new RegExp('a|b','i');
console.log(reg.test('azz'));
console.log(reg.test('Azz'));

3. 字面量创建对象

使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单
使用构造函数创建更加灵活

var reg = /a/i; 
console.log(typeof reg);
console.log(reg.test("abc"));

4. 字面量的基本使用

创建一个正则表达式，检查一个字符串中是否有a或b
使用 | 表示或者的意思

var reg = /a|b|c/;
console.log(reg.test("a"));

创建一个正则表达式检查一个字符串中是否有字母

reg = /a|b|c|d|e|f|g|....../;
console.log(reg.test("a"));

[abc]：查找方括号内任意一个字符。

[^abc]：查找不在方括号内的字符。

[0-9]：查找从 0 至 9 范围内的数字，即查找数字。

[a-z]：查找从小写 a 到小写 z 范围内的字符，即查找小写字母。

[A-Z]：查找从大写 A 到大写 Z 范围内的字符，即查找大写字母。

[A-z]：查找从大写 A 到小写 z 范围内的字符，即所有大小写的字母。

reg = /[A-z]/;
console.log(reg.test("a"));

检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
[^ ] 除了

reg = /[^ab]/;
reg = /[^0-9]/;

5. 正则相关的方法

split

var str = "1a2b3c4d5e6f7";
/*
* split()
*   - 可以将一个字符串拆分为一个数组
*   - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
*   - 这个方法即使不指定全局匹配，也会全都拆分
*/
            

* 根据任意字母来将字符串拆分

var result = str.split(/[A-z]/);
console.log(result);

search

/*
* search()
*   - 可以搜索字符串中是否含有指定内容
*   - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
*   - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
*   - serach()只会查找第一个，即使设置全局匹配也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
            
//console.log(result);  // 6

match

/*
* match()
*   - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
*   - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
*       我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
*       可以为一个正则表达式设置多个匹配模式，且顺序无所谓
*   - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
* 
*   
*/
str = "1a2a3a4a5e6f7A8B9C";
            
result = str.match(/[a-z]/ig);
console.log(result[2]); // a
console.log(result); // ['a', 'a', 'a', 'a', 'e', 'f', 'A', 'B', 'C']

replace

/*
* replace()
*   - 可以将字符串中指定内容替换为新的内容
*  - 参数：
*       1.被替换的内容，可以接受一个正则表达式作为参数
*       2.新的内容
*  - 默认只会替换第一个
*/
str = "1a2a3a4a5e6f7A8B9C";
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");
            
console.log(result);

6. 数量修饰符

通过量词可以设置一个内容出现的次数

量词只对它前边的一个内容起作用

{n} 正好出现n次

{m,n} 出现m-n次

{m,} m次以上

+ 至少一个，相当于{1,}

* 0个或多个，相当于{0,}

? 0个或1个，相当于{0,1}

var reg = /a{3}/;
var reg = /(ab){3}/;
var reg = /b{3}/;
var reg = /ab{1,3}c/;
var reg = /ab{3,}c/;
var reg = /ab+c/;
var reg = /ab*c/;
var reg = /ab?c/;

7. 边界修饰符

^ 以...开始

$ 以...结尾
eg:
'^abc' 匹配以abc开头
‘abc$' 匹配以abc结尾

练习: 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
1. 以1开头
2. 第二位3-9任意数字
3. 三位以后任意数字9个

var phoneStr = "13067890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));

8. 单字修饰符

. 匹配任意字符，除了换行符

[] 用来表示一组字符,单独列出：[abc] 匹配 'a'，'b'或'c'

\d 匹配任意数字，等价于 [0-9].

\D 匹配任意非数字

\w 匹配字母数字及下划线

\W 匹配非字母数字及下划线

\s 匹配任意空白字符，等价于 [\t\n\r\f].

\S 匹配任意非空字符

9. 邮件正则

var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var reg = /^\w+@[A-z0-9]+(.[A-z]{2,5}){1,2}/;
            
var email = "haha.hello@163.com";
            
console.log(emailReg.test(email));

7. 扩展

1. 数组

数组当做普通数组：

var arr = [1,2,3,4];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

数组当做对象：

var arr = [1,2,3,4];
//那么A一定是对象，B一定是对象的属性，把数组当对象用加了一个属性和值
arr.heihei = 'haha';//A.B 
arr['100'] = 5;
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]); // 1,2,3,4, undefined(96), 5
}
for(var i in arr){
       console.log(i); // 0, 1, 2, 3, 100, heihei
       console.log(arr[i]); // 1, 2, 3, 4, 5, haha
}

var arr = [1,2,3,4];
//那么A一定是对象，B一定是对象的属性，把数组当对象用加了一个属性和值
arr.heihei = 'haha';//A.B 
arr['100'] = 5;
for(var key in arr){
    console.log(key,arr[key]);
}

2. 函数

函数当作普通函数

function fn(){
    console.log('i love you');
}           
fn();//当函数去用，就是调用函数实现函数表面上的功能；一个东西加括号，那么括号前面一定函数，函数是在当函数用；

函数当作对象

function fn(){
    console.log('i love you');
}
fn.hehe = 'heihei';   //A.B  那么代表这个函数是在当对象用；
console.log(fn); // ƒ fn() {console.log('i love you');}
console.dir(fn); // ƒ fn() 当做对象展开
for(var key in fn){
    console.log(key,fn[key]); // hehe heihei
    }

3.垃圾回收机制

栈空间的释放是代码执行完毕就销毁了
堆空间的释放是靠垃圾回收机制进行的
当程序函数或者整个程序执行完成后，栈里面所有的东西都被释放销毁，堆当中的数据可能还在，只是没有任何的变量指向（引用），那么堆当中的数据就会变成垃圾对象。回收机制会在适当的时候将垃圾对象清理回收；
如果我们在程序当中需要去删除对象，那么就将这个对象的变量赋值为null，代表这个对象引用被改变，这个对象也就成了垃圾对象，其实删除对象就是让堆当中的对象数据成为垃圾对象；
var a = {};
a里面存了 {}地址 a指向了{}这个对象
a = null; 把a的指向断开了；

案例练习

var num1 = 55;
var num2 = 66; 
function f1(num, num1) {
   num = 100;
   num1 = 100;
   num2 = 100;
   console.log(num); // 100
   console.log(num1); // 100
   console.log(num2);  // 100
}
f1(num1, num2);
console.log(num1); // 55
console.log(num2); // 100
console.log(num)；// 报错

var a = [1,2,3];//new Array
var b = [1,2,3];//new Array
console.log(a == b); // false

function Person(name, age, salary) {
     this.name = name;
     this.age = age;
     this.salary = salary;
}

function f1(pp) {
      pp.name = "ls";
      pp = new Person("aa", 18, 10);
}
var p = new Person("zs", 18, 1000);
console.log(p.name);  // zs
f1(p);
console.log(p.name); // ls

2023-03-08_JSDay09-内置对象及正则表达式

1. call和apply方法

作用: 改变了this的指向, 在 call和apply方法中this指向了第一个参数

call和apply可以让一个对象执行另外一个对象的方法；

call和apply的区别在参数的不同

没有参数

有参数