第一阶段第五周_学习js-CSDN博客

本文链接：https://blog.csdn.net/qq_41510951/article/details/140921731

数据类型

简单类型/基本类型/原始类型：boolean/string/number null/undefined Symbol/bigint
复杂类型/引用类型/对象类型：
标准普通对象 Object {}
标准特殊对象 Array [] Date、Math
非标准特殊对象 String、Number
可调用可执行 Function

20240805周一数组方法

考试：自适应，用弹性盒？？？
undefined+任何数字=NaN
forEach里函数没有return什么什么，不要把他当作一个函数
map
参数和参数相关的操作
如果函数没有return 的时候，返回值是undefined，有些需要return，有些不需要。
百度说：在JavaScript中，当一个函数没有显式地使用return语句返回值时，函数默认返回undefined。这是因为函数的返回值是其执行的结果，如果没有指定返回值，JavaScript默认返回undefined。
怎么判断什么时候需要return，什么时候不需要return呢
数组方法

操作数据 push/pop/shift/unshift
遍历数据 map/forEach/filter/find/findIndex…
- …
  一、数组的方法：JS的ECMA中提供的一系列数组方法
  1、第一类是会改变原数组的方法
  2、第一类是不会改变原数组的方法
  3、第一类是数组的高阶方法
  二、数组方法的语法：数组.方法()
  一、会改变原数组的方法
  一、push() 推、增加
  1、语法：数组名.push(数据)
  2、作用：将数据添加到数组的末尾
  3、返回值：返回的是数组的长度
  var arr = [1,2,3]
  var res = arr.push(44,[55,66,[77]])
  console.log(arr,res)
  二、unshift() 不移位
  1、语法：数组名.unshift(数据)
  2、作用：将数据添加到数组的首位
  3、返回值：返回的是数组的长度
  var res = arr.unshift(0)
  console.log(arr,res)
  三、pop() 爆破
  1、语法：数组.pop()
  2、作用：删除数组中的最后一个数据
  3、返回值：返回的是被删除的数据
  var res = arr.pop()
  console.log(arr,res)
  四、shift() 移位
  1、语法：数组名.shift()
  2、作用：删除数组中的第一个数据
  3、返回值：返回的是被删除的数据
  var res = arr.shift()
  console.log(arr,res)
  五、reverse() 反转 [千万不要和我一样写错了：reserve]
  1、语法：数组名.reverse()
  2、作用：反转数组
  3、返回值：反转以后的新数组
  // var arr = [11,22,33]
  // var res = arr.reverse()
  // console.log(arr,res) // [33,22,11]
  六、sort() 排序
  1、语法：数组名.sort()
  2、作用：数组排序
  3、返回值：返回排序数组
  4、关于sort排序的使用方法
  4.1 升序：数组名.sort(function(a,b){return a-b})
  4.2 降序：数组名.sort(function(a,b){return b-a})
  var arr = [1,2,5,4,3]
  var res = arr.sort()
  console.log(arr,res)
  // 升序
  var res = arr.sort(function(a,b){return a-b})
  console.log(arr,res)
  // 降序
  var res = arr.sort(function(a,b){return b-a})
  console.log(arr,res)
  七、splice() 接头
  1、语法：数组名.splice(多个参数)
  2、作用：删除数据
  3、返回值：被删除的数据
  4、使用方法
  4.1 数组名.splice(开始的索引,删除的个数) 从选择开始的索引开始,删除几个【重要方法】
  4.2 数组名.splice(开始的索引) 从开始索引后面的全部删除
  4.3 数组名.splice(开始的索引,删除个数,数据1,数据2) 从开始索引删除,删除几个,再从当前位置添加
  var arr = [11,22,33,44,55]
  // var res = arr.splice(1,2) // [11,44,55]
  // console.log(arr,res)
  // var res = arr.splice(1)
  // console.log(arr,res)
  var res = arr.splice(1,0,66,77,88,99)
  console.log(arr,res)
  八、sort方法的案例

<script>
    /*
        一、sort方法的补充：只能10以下的数字排序
    */
    //  var arr = [1,2,5,4,7,3,10,22,33,44]
    //  var res = arr.sort()
    //  console.log(res)

    /* 
    
        二、学生成绩排序
    */
   var students = [
        {name:"杨博闻",score:10},
        {name:"李宁",score:20},
        {name:"子瑞",score:30},
        {name:"鹏程",score:50},
        {name:"清洁",score:60}
   ]
    // 1、排序huj
    function fn(students){
        return students.sort(function(a,b){
            
            return b.score - a.score
        })
    }
    var res = fn(students)
    // console.log(res) // 得到的结果就是排序好的成绩

    // 2、思考：如何把成绩拿出来,按照序号 姓名 成绩去排列
    // for(var i=0;i<students.length;i++){
    //     // console.log(i,students[i])
    //     for(var j in students[i]){
    //         console.log(j,students[i][j])       //取出来的是第一个键，和键对应的值bysjd
    //         console.log(students[i].name)       //对象的访问:对象.键的名字bysjd
    //     }
    // }
    // 以上的代码是非常麻烦的,以上代码不是我的思路是你的思路

    // 3、以下代码是我的思路：forEach() 数组的高阶方法,作用和for循环的作用一样也是遍历数组
    // 这里的ren是上方我得到排序号的数组
    res.forEach(function(student,index){
        console.log(student,index)
        console.log(` ${index+1} - ${ name} - ${score} `)
    })
</script>

二、不会改变原数组的方法
一、concat()
1、语法：数组.concat(数据1,数据2,…)
2、作用：表示将数组进行拼接
3、返回值：返回拼接好的新数组
4、关于push和concat的区别
4.1 push原则上只能添加单个变量数据,concat可以拼接多种数据类型
4.2 push会改变原数组,concat不会改变原数组
var arr = [1,2,3]
var res = arr.concat([44,55,[66,77]])
console.log(arr,res)
二、join() 参加、加入
1、语法：数组.join(“符号”)
2、作用：使用一个符号将多个数组连接在一起,如果不设置符号默认是逗号
3、返回值：拼接后的字符串数组.join(“”)设置为空可以用来将数组转为字符串
var arr = [“我”,“你”]
var res = arr.join(" ")
console.log(arr,res)
三、slice() 剪切、截取
1、语法：数组.slice(多个参数)
2、作用：截取数组
3、返回值：截取的数组
4、slice方法的使用
4.1 slice(开始索引,结束索引) 从开始截取到结束索引,包含开始不包含结束
4.2 slice(开始索引) 从开始截取到结束,所有的数据都会被截取
4.3 开始和结束的索引都是正数的时候,结束一定要大于开始,否则就会返回空
4.4 开始和结束的索引都是负数的时候,第二个参数才是开始,第一个参数才是结束,开始大于结束,否则为空
5、关于splice和slice使用的区别：splice截取是开始下标和个数,slice截取是开始下标和结束下标
var arr = [11,22,33,44,55,66]
var res = arr.slice(1,2) // [22] 从索引1开始,索引2结束
var res = arr.slice(1) // [22, 33, 44, 55, 66]
var res = arr.slice(-3,-2) // [44] 从右往左去数
console.log(res)
四、indexOf() 查找索引
1、语法：数组.indexOf(数据)
2、作用：通过数组查找当前数据出现的第一次的位置
3、关于查找的过程注意点
3.1 indexOf表示从数组的左侧开始查找当前数据出现的第一次位置
3.2 当这个数据不存在于数据的时候会返回-1【重要】
五、lastIndexOf() 查找索引
1、语法：数组.lastIndexOf(数据)
2、作用：通过数组查找当前数据出现的最后一次的位置
3、关于查找的过程注意点
3.1 lastIndexOf表示从数组的左侧开始查找当前数据出现的第一次位置
3.2 当这个数据不存在于数据的时候会返回-1【重要】
var arr = [11,22,33,11,22,33,11,22,33]
var res = arr.indexOf(6)
console.log(res)
var res1 = arr.lastIndexOf(11)
console.log(res1)
三、数组的高阶方法
一、forEach() 对每一项数据进行操作
1、语法：数组.forEach(function(三个参数){对于参数的操作})
2、作用：和for循环类似,都是遍历数组
3、返回值：没有

  <script>
  // for循环遍历数组
    var arr = [1,2,3,4,5]
    // for(var i=0;i<arr.length;i++){
    //     console.log(i,arr[i])
    // }
    // forEach遍历数组
    arr.forEach(function(item,index){
        // 第一个参数a表示数组中的每一项
        // 第二个参数b表示数组中的索引
        // 第三个参数c表示原数组,绝对用不上
        // 考虑代码的严谨性和不成文的规定,习惯性的把三个参数设置为item,index,array
        console.log(index,item)
    })

    // 案例：求数组中的数据和
    var arr = [1,2,3,4,5,6,7,8,9,10]
    var sum = 0
    arr.forEach(function(item){
       sum = sum + item
    })
    console.log(sum)

    // 案例：求数组中最大值的索引
    var arr = [11,22,55,43,24,78,65,41]
    var maxIndex = 0
    arr.forEach(function(item,index){
        // if(){} // 判断相等,然后去重
        if(item > arr[maxIndex]){
            // item是数组中的每一项数据
            // maxIndex是最大值的索引
            maxIndex = index
        }
    })
    console.log(maxIndex)
    </script>

二、map() 映射方法
1、语法：数组.map(function(){})
2、作用：映射数组
3、返回值：和原数组是一样的,只不过数组做了一系列操作
4、注意点：映射的条件需要使用return返回出去
var arr = [1,2,3,4,5]
var res = arr.map(function(item,index){
// console.log(item,index)
return item * 5
})
console.log(res)
三、filter() 过滤器
1、语法：数组.filter(function(){})
2、作用：对数组中的数据进行过滤筛选
3、返回值：返回的是一个经过筛选提取出来的新数组
var arr = [6,7,8,9]
var res = arr.filter(function(item,index){
return item >=8
})
console.log(res)
四、find() 查找,寻找
1、语法：数组.find(function(){})
2、作用：查找数组中满足条件的第一项数据
3、返回值：返回满足需求的第一项数据
findIndex() 查找
1、语法：数组.findIndex(function(){})
2、作用：查找数组中满足条件的第一项数据的索引
3、返回值：返回满足需求的第一项数据的索引

<script>
    //find的使用
    var arr = [1,2,3,4]
    var res = arr.find(function(item,index){
        console.log(item,index)
        // 遍历方法,就会走一遍就返回一遍,结束一遍
        return item >= 1
        // return不仅仅会返回当前函数内部的值,还会将当前的代码暂停
    })
    console.log(res)
	
	//findIndex的使用
	 var res = arr.findIndex(function(item,index){
        return item >=3
    })
    console.log(res)
 </script>

find案例
find方法一般都是需要操作复杂数据类型的,查找后台中数据
*/
var arr = [
{ id: 1, name: “杨博闻”, score: 50 },
{ id: 2, name: “杨博闻1”, score: 58 },
{ id: 3, name: “杨博闻2”, score: 59 },
{ id: 4, name: “杨博闻3”, score: 55 },
{ id: 5, name: “杨博闻4”, score: 59.9 },
]
var id = 5
var res = arr.find(function (item, index) {
return item.id == 5
})
console.log(res)
五、every()
1、语法：数组.every(function(){})
2、作用：判断数组中的每一项是否符合要求
3、返回值：返回一个布尔类型true/false
六、some
1、语法：数组.some(function(){})
2、作用：判断数组中的至少有一项是否符合要求
3、返回值：返回一个布尔类型true/false

<script>
    var arr = [1,2,3,4,5]
    var res = arr.every(function(item){
        return item>=2
    })
    console.log(res)

    var arr = [1,2,3,4,5]
    var res = arr.some(function(item){
        return item>=6
    })
    console.log(res)
</script>

七、reduce() 缩小
1、语法：数组.reduce(function(参数){})
2、作用：先把数组循环一遍,再把数组中的每个值进行相加
3、会在第一个参数前面还有一个参数：表示初始值

<script>
var arr = [1,2,3]
    var res = arr.reduce(function(prev,item){
        console.log(prev,item)
        // 第一次输出的时候prev==1 item==2
        // 第二次输出的时候prev==undefined item==3
        // 上一次两个数据相加的和
        return prev + item
    },0)
    console.log(res)
    /* 
        第一次函数调用的时候：1 + 2 == 3
        第二次函数调用的时候：3 + 3 == 6
    */

    /* 
        第一次函数调用的时候：0 + 1 == 1
        第二次函数调用的时候：1 + 2 == 3
        第三次函数调用的时候：3 + 3 == 6
    */
</script>

案例
编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型
1、根据题意创建函数把arr和60当做实参传递进函数体内
2、如何判断60是否在当前数组中出现：质数,开关法
3、循环得到数组中的每一值,和传递进来的参数60进行比较
4、相等就为true,不相等就等于false

<script>
 function has(arr,num){
        // 循环得到每个数然后和60进行比较
        for(var i=0;i<arr.length;i++){
            // 判断是否相等
            var flag = false // 表示不存在于函数体内
            if(arr[i]==num){
                flag = true
                break;
            }
        }
        return flag
    }
    var arr = [1,2,3,4,4,3,2,60]
    var res = has(arr,100)
    console.log(res)
</script>

数组去重
1、遍历数组拿到数组中的每一个数据,先放着
2、可以把后面的数据和前面放着的数据进行对比
3、如果相同的情况下,可以把重复的值放到一个新的数组中
4、当循环结束的时候返回的新数组就是去重的结果

<script>
    
    // 1、定义数组
    var arr = [1,2,3,4,4,3,2,60]
    // 由于第一个数永远都不会重复
    var newArr = [arr[0]]
    // 2、循环数组中的每一个数据
    for(var i=1;i<arr.length;i++){
        // 判断每一个数是否重复出现
        var res = has(newArr,arr[i]) // true false
        if(res){
            continue
        }
        else{
            newArr.push(arr[i])
        }
    }
    console.log(newArr)

    // 刚刚封装好的判断数据重复出现函数
    function has(arr,num){
        for(var i=0;i<arr.length;i++){
            var flag = false 
            if(arr[i]==num){
                flag = true
                break;
            }
        }
        return flag
    }
</script>

20240806周二字符串

父级没设置高度，又脱离文档流，高度塌陷
数组塌陷？？？？？？
es：语法ecma语法
a=10不写var表示定义的是全局变量？？？？全局变量和局部变量
任何数据类型都可以使用构造函数
关系表达式的，比较的结果只能是bool
比较运算符，隐式转换？？？？？
都是数字字符串，除了加号，隐式转换成数字类型，然后进行数学运算
es6模板字符串
严格模式了解
数组的截取方法，splice，slice
split最常用的是3.4
字符串中sub两个很常用
字符串也是有遍历方法的
一、数组去重

<script>
    /*
        第一种：得先排序,判断相邻两个是否相同,如果相同我就删除一个
    */
    var arr = [1,1,1,2,2,2,3,3,5,5,4,3,4]
    var res = arr.sort() // sort只能排10以内
    console.log(res)
    for(var i=0;i<arr.length;i++){
        if(arr[i]==arr[i+1]){
            // 表示第一个数和第二个数相同的
            arr.splice(i,1) // 从下标i开始删除相同的第一个数
            // 数组塌陷：修改前面一个数据,后面的数据和索引都会收到影响
            // i--
        }
    }
    console.log(arr)
</script>

第二种方法

<script>
    /*
        第二种方法：Set数据结方法
        1、语法：new Set([数据]) 
        2、注意点：方法操作之后长的像数组但不是,是伪数组
        3、是不接受重复数据的

        转换为数组的方法：都可以转换
        1、语法：Array.from(数据) 转换的方法
        2、展开运算符：[...数据]   一种表达式
    */
    var res = new Set([9,8,7,6,3,4,1,11,14,90,45,9,8,7,6,3,4,1,11,14,90,45])
    console.log(res)
    // 虽然是解决了重复出现的数据,但是你并不是真正的数组
    
    res = Array.from(res)
    console.log(res)

    res = [...res]
    console.log(res)

</script>

二、【了解】ES5中有一个严格模式：在版本更新的时候最初始的想法是考虑将代码形成严谨性
1、使用方法在代码最前面加一句：use strict

<script>
    "use strict" // 为难自己

    var a = 10 // 不写var表示定义的是全局变量
    console.log(a)

    function fn(a,b){
        console.log(a,b)
        console.log(this) // 默认指向的window
    } 
    fn(1,2) // Duplicate parameter name not allowed in this context

</script>

三、字符串的创建
1、单引号：‘只要是键盘上能敲出来的字符都是属于字符串’
2、双引号：“只要是键盘上能敲出来的字符都是属于字符串”
3、反引号：只要是键盘上能敲出来的字符都是属于字符串
4、构造函数：new String(‘只要是键盘上能敲出来的字符都是属于字符串’)
四、字符串的比较【了解】
1、比较的结果只能是布尔类型的值(true/false)
2、字母比数字大
3、字母的小写比大写大
4、字母越靠后越大
5、数字字符串之间比较的时候会按照字符串的位置进行选择比较。
6、特殊情况：中文汉字之间比较 ASCII/unicode

<script>
    // 1、数字和字母对比
    console.log("1">"a") // false
    // 2、字母大写和小写
    console.log("A">"a")  // false
    // 3、字母和字母
    console.log("b">"a")  // true
    // 4、字符和字符
    console.log("我">"你")
    // 5、数字和数字相比
    console.log("10">"2") // 数字字符串之间比较的时候会从左到右比较。取10的第一位1和2比较，结果为false
</script>

五、字符串的基本操作：CURD
1、字符串是只读的，可以获取、遍历，无法修改

<script>
    var str = "王宇晗吃醋了,今晚去陪你"
    // 1、先获取某个字符,字符串和数组一样可以通过下标/索引获取到相对应的数据
    console.log(str[0])
    // 2、尝试修改
    str[0]="陈"
    console.log(str)
    // 3、字符串可不可以使用循环遍历?
    for(var i=0;i<str.length;i++){
        console.log(i,str[i])
    }
</script>

六、字符串的基本方法

<script>
// 1、charAt(索引) 通过索引找到相对应的字符
    var str = "王宇晗吃醋了,今晚去陪你王"
    var res = str.charAt(12) // 找到相对应的字符,没有索引就返回空
    console.log(res)

    // 2、charCodeAt(索引) 通过索引获取字符,再获取字符的相对应ASCII
    var res = str.charCodeAt(1)
    console.log(res)

    // 3、String.fromCharCode(ASCII) 通过ASCII找到对应的字符【了解】
    console.log(String.fromCharCode(97))

    // 4、toLowerCase() 将英文字母字符转换为小写
    console.log("HELLO".toLowerCase())
    // 5、toUpperCase() 将英文字母字符转换为大写
    console.log("hello".toUpperCase())

    // 6、indexOf(字符串)
    // 7、lastIndexOf(字符串)
    var res = str.indexOf("王")
    var res1 = str.lastIndexOf("王")
    console.log(res,res1)

    // 8、concat() 拼接字符串
    var res3 = str.concat("吧")
    console.log(res3)
    </script>

字符串的分割方法
一、split() 拆分可以用来将字符串转为数组
1、语法：字符串.split(“分割符号”)
2、作用：将字符串分割很多段,返回一个新的数组
3、关于split方法使用的多种情况
3.1 如果小括号内没有设置任何字符串为空的时候,默认会把字符串转换为数组进行显示
3.2 如果小括号内设置了空字符串,那么会将字符串分割成若干个字符返回一个新的数组
3.3 如果设置字符串并且空格的时候会将字符串分割成两段组成一个新的数组
3.4 如果设置字符串中的某个字符,就会义当前字符为分割符号将字符串分割后返回新数组
3.5 可以设置第二个参数,表示分割之后保留几个字符

<script>
	var str = "hello world"
    var res = str.split() // ['hello world']
    var res1 = str.split("") // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
    var res2 = str.split(" ") // ['hello', 'world']
    var res3 = str.split("o") // ['hell', ' w', 'rld']
    var res4 = str.split("",6) 
    console.log(res4)
</script>

二、slice() 截取方法和数组的用法是一样的
1、语法：字符串.slice()
2、作用：截取字符串
3、slice(开始下标,结束下标) 包含开始不包含结束
4、如果第二个参数不设置的情况下,默认从开始下标一直到结束的数据全部被截取下来
5、两个参数也可以为负数,通常第一个参数要小于第二个参数否则返回值为空
字符串的截取方法
一、substr() 截取
1、语法：字符串.substr(开始下标,截取的个数)
2、作用：对字符串进行截取
3、使用情况：如果只设置一个参数默认会从开始下标到结束全部被截取
二、substring() 截取如果只设置一个参数默认会从开始下标到结束全部被截取
1、语法：字符串.substring(开始下标,结束下标)
2、作用：截取字符串,和slice()方法有点类似
3、关于substring()方法使用的多种情况
3.1 包含开始不包含结束下标
3.2 如果第一个参数是负数的时候,默认会转成0开始
3.3 两个参数不能都设置成负数,返回值为空
3.4 如果开始下标大于结束下标的时候,会互换位置

<script>
	//substr的用法
    var str = "王振洋才是真的ikun"
    var res = str.substr(2,2) // 振
    console.log(res)

    //substring的用法
    var str = "王振洋才是真的ikun"
    var res = str.substring(1,2) // 振
    var res1 = str.substring(1) // 振洋才是真的ikun
    var res2 = str.substring(0,2) // 王振
    var res3 = str.substring(-2,-3) // 为空
    var res4 = str.substring(5,2) // 洋才是
    console.log(res4)
</script>

三、字符串的空格方法，其实就是去掉前面的空格，后面的空格，去掉前和后的空格
处理输入时候字符串前后的空格
1、trimStart() 截取字符串开头空格
2、trimEnd() 截取字符串结束空格
3、trim() 截取字符串所有空格记这个就可以了

<script>
    var str = "1231231"
    var str1 = "     1231231    "
    var res1 = str1.trim()
    console.log(str)
    console.log(res1)
</script>

案例
1、案例：限制用户上传的文件类型,用户只能上传图片类型 .jpg

<script>
	 1、基础版 input.value
    var str = "a.b.c.d.e.jpg"
    // 如果判断用户上传的类型后缀名是.jpg呢?
    var res = str.lastIndexOf(".")      //查找字符串里.字符出现的最后一次的位置-bysjd
    // 截取,第二个参数不设置表示从当前的索引开始后面的全部截取下来
    res = str.slice(res)
    if(res==".jpg"){
        alert("当前的文件类型符合要求可以上传文件")
    }

    // 2、另外一种方法
    var str = "a.b.c.d.e.jpg"
    // 如果判断用户上传的类型后缀名是.jpg呢?
    var res = str.lastIndexOf(".")
    
    res = str.substring(res+1)
    if(res=="jpg" || res=="jpeg" || res=="png" || res=="gif" || res=="webm"){
        // 设置上传的逻辑
    }
</script>

2、翻转单词 “i love you” => “you love i”

<script>
    var str = "i love you"
    str = str.split(" ")
    console.log(str)    //['i', 'love', 'you']bysjd
    var arr = str.reverse()
    console.log(arr)    //['you', 'love', 'i']bysjd
    var res = arr.join(" ")     //使用空格进行拼接bysjd
    console.log(res)
</script>

3、需求：混合数字字母验证码
1、生成随机的验证码,四位或者六位
2、随机数(明天内容)

<script>
    var str ="0123456789abcdefghijklmnopqrstuvwxyz" // 36 => 0~36
    var sum = ""
    for(var i=0;i<6;i++){
        var index = parseInt(Math.random()*str.length)
        var res = str[index] // 6个字符串
        sum += res
    }
    console.log(sum) // 默认生成的随机数会在[0,1)之间
</script>

4、需求：“无论多大麻烦,黑夜总会过去” 过滤敏感字

<script>
    var str = "无论多大麻烦,黑夜总会过去"
    var arr = ["麻烦","黑夜"]
    // 大麻 => **  replace(麻烦,**)
    // 夜总会 => *** replace(黑夜,***)
    for(var i=0;i<arr.length;i++){
        // console.log(i,arr[i])
        var k = ""
        var temp  = arr[i] 
        for(var j=0;j<arr[i].length;j++){   //字符串的遍历bysjd
            // console.log(j,arr[i][j])
            // 使用替换方法
            k = k + "*"
        }
        str = str.replace(arr[i],k)
    }
    console.log(str)
</script>

20240807周三数学和时间对象

学习DOM来操作HTML标签
随机数很重要
要掌握的东西：
math.random
+,设置时间，转换日期格式忘了什么意思了
定时器，延时器，
一、数学方法
一、在JS语法中提供了一个内置的数学对象：Math 数学
1、原则上所有的方法都是针对于数字类型而言
2、如果是数字字符串会转换成数字类型
3、如果是中文汉字或者特殊符号的时候会NaN
随机数
重点：Math.random() 生成0~1之间的随机数 [0,1)
console.log(Math.random())

<script>
    console.log(Math)

    // 1、Math.PI 圆周率(后面不需要设置小括号调用)
    console.log(Math.PI)
    // 2、Math.abs 绝对值
    console.log(Math.abs(-1))
    // 3、Math.max() 最大值
    console.log(Math.max(1,2,3,4,"你好"))
    // 4、Math.min() 最小值
    console.log(Math.min(1,2,3,4,5))
    // 5、Math.ceil() 天花板函数,向上取整
    console.log(Math.ceil(4.0000001))
    // 6、Math.floor() 地板函数,向下取整
    console.log(Math.floor(4.0000001))
    // 7、Math.sqrt() 开根号
    console.log(Math.sqrt(9))
    // 8、Math.pow() 求幂
    console.log(Math.pow(5,2))
    // 9、重点：Math.random() 生成0~1之间的随机数 [0,1)
    console.log(Math.random())
</script>

掌握随机数案例的关键代码
parseInt(Math.random()* (max - min) + min)
parseInt(Math.random() * (max - min+1) + min)

<script>
    // 第一种情况：生成[a,b)随机数
    function getRandom(a,b){
        // 判断传入的实参谁是最大值和最小值
        var max = Math.max(a,b)
        var min = Math.min(a,b)
        return parseInt(Math.random() * (max - min) + min)//关键方法bysjd
        /* 
            1、带入参数,求最小值
                            0        *   10 - 1   + 1  => 1
            2、带入参数,求最大值
                            0.9      *   10 - 1   + 1   => 8.1 + 1 = 9.1
        */
    }
    var res = getRandom(1,10)
    // console.log(res)

     // 第二种情况：生成[a,b]随机数
     function getRandom(a,b){
        // 判断传入的实参谁是最大值和最小值
        var max = Math.max(a,b)
        var min = Math.min(a,b)
        return parseInt(Math.random() * (max - min+1) + min)
        /* 
            1、带入参数,求最小值
                            0        *   10 - 1+1        + 1  => 1
            2、带入参数,求最大值
                            0.9      *   10 - 1 +1        + 1   => 9 + 1 = 10
        */
    }
    var res = getRandom(1,10)
    console.log(res)
</script>

二、时间对象
时间对象：JS语法中内置的一个对象 Date()
1、【掌握】创建时间对象的方法：new Date()
1 获取时间

<script>
    /*
        时间对象：JS语法中内置的一个对象 Date()
        1、创建时间对象的方法：new Date()
    */
    var date = new Date()
    console.log(date) // Wed Aug 07 2024 15:08:32 GMT+0800 (伊尔库茨克标准时间) 东八区
    console.dir(date) // 展开说说,详细信息
    // 由于获取到当前时间不符合中国人的阅读习惯,改写一些时间格式
    // 1、通过日期获取年份：日期对象.getFullYear()
    var year = date.getFullYear()
    // 2、通过日期获取月份：日期对象.getMonth()
    var month = date.getMonth()+1 // 转换月份的时候从0开始的,月份输出的时候会少一个月
    // 3、通过日期获取天数：日期对象.getDate()
    var day = date.getDate()
    // 4、通过日期获取小时：日期对象.getHours()
    var hour = date.getHours()
    // 5、通过日期获取分钟：日期对象.getMinutes()
    var min = date.getMinutes()
    // 6、通过日期获取秒数：日期对象.getSeconds()
    var sec = date.getSeconds()
    // 7、通过日期获取秒数：日期对象.getMilliseconds()
    var mi = date.getMilliseconds()
    console.log(`现在的时间是${year}年${month}月${day}日${hour}时${min}分${sec}秒${mi}毫秒`)
</script>

2 日期格式化
一、获取到日期,使用三种方法把日期转换成年月日时分秒
1、转换成年月日：toLocalDateString()
2、转换成时分秒：toLocalTimeString()
3、转换成年月日时分秒：toLocalString()

<script>
    var date = new Date()
    // 年月日
    console.log(date.toLocaleDateString())
    // 时分秒
    console.log(date.toLocaleTimeString())
    console.log(date.toLocaleString())
</script>

3 设置时间的方法
一、有日期对象之后可以转换成各种格式,也可以设置自己想要的日期对象
1、获取方法：getxxxx()
2、设置方法：setxxxx()
【掌握设置时间的方法】var date1 = new Date(“2024-10-1 13:14:33”)

<script>
	// 1、复杂的设置时间方法【了解】
    var date = new Date()
    console.log(date)
    // 1、通过日期设置年份：日期对象.setFullYear()
    date.setFullYear("2017")
    // 2、通过日期设置月份：日期对象.setMonth()
    date.setMonth(8) 
    // 3、通过日期设置天数：日期对象.setDate()
    date.setDate(10)
    // 4、通过日期设置小时：日期对象.setHours()
    date.setHours(15)
    // 5、通过日期设置分钟：日期对象.setMinutes()
    date.setMinutes(13)
    // 6、通过日期设置秒数：日期对象.setSeconds()
    date.setSeconds(10)
    // 7、通过日期设置秒数：日期对象.setMilliseconds()date.setMilliseconds(111)
    console.log(date) // Invalid Date

    // 2、简单的设置时间方法
    var date1 = new Date("2024-10-1 13:14:33")
    console.log(date1)
</script>

4 时间戳的设置
一、标准时间：格林威治/格林尼治 Thu Jan 01 1970 00:00:00 GMT+0800 (伊尔库茨克标准时间)
二、时间戳：当前日期时间到标准时间的毫秒数
三、有了标准时间,也有了现在的时候,设置其他的时间,使用两个时间进行对比不可以直接相减
四、首先要把时间转换为时间戳,然后相减,得到的结果也是时间戳,最后再把时间戳转换成习惯的时间
【掌握三种方法】使用+获取时间戳的方法
var date = +new Date(“1970/1/1 08:00:30”)
console.log(date)
时间戳转为时间，setTime(时间戳)，new Date(时间戳)

<script>
    // 1、获取到标准时间
    var date = new Date(0)
    console.log(date) // Thu Jan 01 1970 08:00:00 GMT+0800 (伊尔库茨克标准时间) + 8个小时 东八区

    // 2、获取时间戳的方法
    // 第一种：date.getTime()
    // 1、可以自定义时间,把自定义时间转换为时间戳
    // 2、不自定义时间,把默认时间转换为时间戳
    var date = new Date()
    console.log(date.getTime()) // 1723017075585 毫秒数
    var date = new Date("1970/1/1 08:00:30")
    console.log(date.getTime()) // 1723017150000

    // 第二种获取时间戳的方法 date.parse() 【不推荐】
    var date = new Date()
    var res = Date.parse("1970/1/1 08:00:30")
    console.log(res)

    // 第三种获取时间戳的方法
    var date = +new Date("1970/1/1 08:00:30")
    console.log(date)
</script>

5 定时器和延时器
一、定时器：表示将代码每隔一定的时间就会执行一次
1、语法：==window.setInterval(function(){},时间,==第三个参数是回调函数,基本用不上)
2、使用的注意点：有三个参数,第一个参数是函数必须设置,第二个参数可以不设置(默认10ms),第三个参数不设置
二、关于定时器使用的注意点
1、定时器在项目中能不用就不要使用,一直存在于浏览器的内存中会使用浏览器变得非常卡顿
2、使用了定时器需要手动清除定时器：clearInterval(定时器的名字/定时器的返回值)
3、定时器的返回值是按照定时器的书写顺序返回的数字：第一个定时器返回1,第二个定时器返回2…
三、延时器的使用：等待一段时间再去执行代码setTimeout(function(){
四、使用方法

<script>    
    //1、定时器的使用-bysjd
    var timer = setInterval(function(){
        console.log("你快乐吗1111?" ) // 重新渲染页面
    },1000)
    // 定时器的返回值
    console.log(timer) // 1
    function fn1(){
        clearInterval(1)
    }

    var timer2 = setInterval(function(){
        console.log("你快乐吗2222?" ) // 重新渲染页面
    },1000)
    // 定时器的返回值
    console.log(timer2) // 2
    function fn2(){
        clearInterval(2)
    }
	//2、延时器的使用-bysjd
   setTimeout(function(){
        alert("你真的快乐?")
   },5000)
</script>

定时器案例

<script>
    /*
         案例1：获取本地时间并让时间动起来
    */
    setInterval(function () {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth()
        var day= date.getDate()
        var hour = date.getHours()
        var min = date.getMinutes()
        var sec = date.getSeconds()
        // DOM结构.innerHTML = 值 把值显示在我设置的DOM结构中
        var res = ` 现在的时间是${year}年${month}月${day}日${hour}时${min}分${sec}秒`
        box.innerHTML = res
    }, 1000)

	/*
        案例2：班级毕业时间的倒计时
        2024-07-08 ~ 2024-12-28 国庆、中秋
        1、获取到当前时间 => 时间戳
        2、获取到未来时间 => 时间戳
	*/
	setInterval(function () {
        // 当前时间
        var date = +new Date()
        // 未来时间
        var future = +new Date("2024/12/28 21:00:00")
        var res = future - date
        console.log(date, future, res)
        // 得到了两个时间的相减时间戳,转换成时间
        // 1、天
        var day = parseInt(res / 1000 / 60 / 60 / 24)
        // 2、小时
        var hour = parseInt(res / 1000 / 60 / 60) % 24
        // 3、分钟
        var min = parseInt(res / 1000 / 60) % 60
        // 4、秒
        var sec = parseInt(res / 1000) % 60
        var res = `距离去社会上遭毒打还剩： ${day}天${hour}时${min}分钟${sec}秒 `
        box.innerHTML = res
    }, 1000)
</script>

同步和异步
一、什么是同步
表示只能做一件事情,做完这件事才能去做下一件事情
二、什么是异步
2、解释：表示可以同时做多件事情
三、在JS代码中有哪些是同步的有哪些是异步的(JS就是同步的)
1、说明JS代码永远先执行同步代码,同步代码结束之后再去执行异步代码
2、代码从上到下执行的时候碰到同步代码执行执行,碰到异步代码先把它存在队列中
四、哪些是属于同步代码：for循环、对象、数据、函数调用
五、那些事属于异步代码：定时器

20240808周四

作业
把获取到的颜色字符串给到浏览器设置背景颜色
1、语法：DOM结构.style.css属性 = css属性值
2、DOM结构：标签结构,最简单的获取方式设置id属性(目前用用,这种方法有问题)
background-color
注意哪些是需要掌握的
老师使用console调试

一、bom浏览器对象模型，有一系列的方法可以操作浏览器
获取浏览器的窗口大小
一、JS的BOM方法中提供了一系列可以获取浏览器窗口大小的方法
1、BOM中的方法window是可以省略的
2、获取到的值是数字类型,默认值单位是像素,只不过没有显示
3、如果需要操作这个值,需要拼接到单位(获取到的浏览器窗口尺寸只是可读的)
1、获取浏览器窗口尺寸大小(包含滚动条的大小)
1.1 window.innerWidth 获取浏览器的宽度
1.2 window.innerHeight 获取浏览器的高度
2、获取浏览器窗口尺寸大小(不包含滚动条的大小)
2.1 document.documentElement.clientWidth 获取浏览器的宽度
2.2 document.documentElement.clientHeight 获取浏览器的高度

浏览器的地址栏信息
一、在BOM中提供了一些方法可以获取到浏览器中地址栏的信息
1、方法：window.location
2、window.location.href = “跳转的地址”
3、window.location.reload(true) 重复加载
4、window.location.search 查找的是地址栏中的参数
console.log(location) // 记录了在地址栏里面的一些方法
console.log(location.href)//获取到地址
location.href = “http://www.4399.com”//设置地址
window.location.reload(true) // 不要把加载页面设置在全局中
html代码：

姓名：
javascript代码: console.log(window.location.search)

浏览器的历史记录
一、通常在页面中点击之后会出现前进和后退的按钮,在BOM中也提供了一系列方法可以模拟历史记录
1.history.back() 返回到上一个页面,相当于浏览器的后退按钮
2.history.forward() 前进到下一个页面(下一个页面必须是点击以后的页面)，相当于浏览器的前进按钮
3.history.go(数值) 正负数都可以(前进和后退的页面数量)
onclick事件的第一种方法
html代码：

这是第一个页面

点击跳转到第二个页面
点击
js代码：
function fn(){
history.forward()
}
onclick事件的第二种方法
html代码：
按钮
js代码：
btn.onclick = function(){}

浏览器的信息
// 浏览器的名称、版本等信息，关于浏览器的信息，window下面的对象navigator记录
console.log(navigator.appCodeName) // 返回浏览器的代码名
console.log(navigator.appName) // 返回浏览器的名称
console.log(navigator.appVersion) // 返回浏览器的平台和版本信息
console.log(navigator.cookieEnabled) // 返回指明浏览器是否启用cookie的布尔值
console.log(navigator.platform) // 返回运行浏览器的操作系统平台
console.log(navigator.userAgent) // 返回由客户机发送服务器的user-agent头部的值

浏览器弹窗方法
// 1.window.alert(“警告弹窗”)
// 2.confirm(“提示弹窗”)
// 3.prompt(“输入弹窗”)

浏览器事件
一、事件：用户和浏览器之间发生的一种交互的行为(点击、跳转、滚动…)
二、在BOM中也提供了常见的三种方法事件：需要设置行为,在事件的前面添加一个on
1、onload() 表示加载,当页面显示完全后再去加载
2、onscroll() 表示页面有滚动条,当滚动条变化的时候触发事件
3、onresize() 表示浏览器窗口发生变化时候会触发事件

一、滚动条事件浏览器的滚动条距离顶部的间距
1、onscroll当滚动条滚动的时候会触发事件
2、获取滚动条滚动之后距离浏览器顶部的间距大小
2.1 距离顶部的间距：document.documentElement.scrollTop
2.2 距离左侧的间距：document.documentElement.scrollLeft
3、获取滚动条距离顶部和左侧两个方法是有兼容问题的(针对IE浏览器)
（var top = document.documentElement.scrollTop || document.body.scrollTop）
3.1 距离顶部的间距：document.body.scrollTop
3.2 距离左侧的间距：document.body.scrollLeft

一、浏览器的对象方法
1、window.open(“路径/地址”)
2、window.close()
html代码
打开一个页面
关闭打开页面
js代码
function openWin(){
fn = window.open(“http://www.baidu.com”)
}
function closeWin(){
fn.close()
}

本地存储
一、在浏览器中有一种保存数据的方法：本地存储
1、是存在浏览器中,依赖于浏览器
2、浏览器如果关闭当前存储的数据是否会存在?
二、本地存储的分类
1、storage
1.1 localstorage 本地存储
1.2 sessionstorage 会话存储/临时存储
2、cookie
三、关于本地存储(localstorage)的使用
1、localstorage会存储在浏览器中,会永久的存储在浏览器中,浏览器是否不关闭不会影响
2、localstorage可以跨页面通讯
3、localstorage存储一般是基本数据类型(字符串数据类型)
四、关于本地存储(localstorage)的使用方法
1、增加：window.localstorage.setItem(key,value)
2、修改：window.localstorage.setItem(key,value)
3、删除：window.localstorage.removeItem(key)
4、查询：window.localstorage.getItem(key)
5、清除：window.localStorage.clear()
本地存储能不能是对象或者数组形式?
js代码
var obj = {name:“张三”,age:18}
// window.localStorage.setItem(“第一个数据”,obj)
// console.log(window.localStorage.getItem(“第一个数据”))
// 先考虑将对象转换成字符串之后再存储
window.localStorage.setItem(“第一个数据”,JSON.stringify(obj))
var res = window.localStorage.getItem(“第一个数据”)
res = JSON.parse(res)
console.log(res)

一、本地存储之sessionStorage：临时存储/会话存储
1、临时存储关闭了浏览器,数据就会丢失
2、临时存数也是只能存字符串数据类型
3、临时存储可以跨页面通讯但是有一些前提条件,打开的新页面不可以获取到数据
二、本地存储sessionstorage的使用方法
1、增加：window.sessionStorage.setItem(key,value)
2、修改：window.sessionStorage.setItem(key,value)
3、删除：window.sessionStorage.removeItem(key)
4、查询：window.sessionStorage.getItem(key)
5、清除：window.sessionStorage.clear()

一、本地存储之cookie
1、只能存储字符串,存储的格式是"key=value"
2、存储的时候大小只有4KB(常见的面试题),通常用来存储用户的密码
3、关于cookie的时效性：默认和sessionStorgae的存储时间是一样的关闭浏览器就没有了
4、如果想要设置cookie的存储时长,可以设置时长(7天免登陆)
5、cookie在使用的时候必须要依赖于服务器(在vscode中下载一个插件Live Server)
6、cookie会随着前后端交互的过程中一直存在,cookie会随着前后端交互进行携带
7、前端中只能使用JS操作cookie,但是后台所有的语言都可以操作cookie
8、存在域名依赖：只能在同一个域名中进行操作,不可以跨域名操作
二、关于cookie的相关方法操作
1、设置：document.cookie = “key=value”
2、设置时效：document.cookie = “key=value;expires=时间对象”

二、总结storage和cookie之间的区别
1、出现时间：cookie是有JS语言的时候就出现了,storage是HTML5版本中才有的
2、存储大小：cookie是4KB,storage是20M左右
3、参数传递：cookie前后端有交互就会自动携带,storage不会
4、操作方法：cookie只要是后端语言都可以操作,storage只有JS才能操作
5、过期时间：cookie会话存储,可以设置过期时间,storage不可以设置
三、local和session
1、localstorage：永久存储,直接跨页面通讯
2、sessionstorage：会话存储,只能通过当前页面跳转的才可以通讯
3、相同点：只能存储字符串,不建议存储其他复杂数据类型,最终使用的时候还是需要转回字符串类型

20240809周五正则表达式

记d和w
元字符检测到第一个就返回了
要求给正则要能读出来
一、正则表达式：是JS数据类型中的一种复杂数据类型 Regular Expression
1、正则表达式：表示正常的规则,通常用来验证字符串是否符合你的要求
2、创建方式
2.1 直接创建/字面量创建：==var reg = / 正则符号 / ==
2.2 构造函数方式创建：var reg = new RegExp(“正则符号”)

二、在正则中有很多方法可以去=='检测’你写的字符串是否符合要求==
1、test() 匹配
2、exec() 捕获
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
一、test()：表示匹配字符串是否需要正则表达式的写法
1、语法：正则表达式.test(字符串)
2、返回值：布尔类型
3、正则表达式的特性：默认都会从字符串的左侧开始,一直往右侧进行检索
var patt = /e/;
patt.test(“The best things in life are free!”);
返回结果：true
二、exec()：表示检索字符串，满足要求的从字符串中捕获(提取/获取)出来
1、语法：正则表达式.exec(字符串)
2、返回值：满足需求的提出来之后，会存在一个新的数组中,不满足的时候会返回null

三、正则中的字符串的方法
一、match() 只能在 string中执行一次匹配，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。如果没有找到任何匹配的文本，将返回 null。
1、语法：字符串.match(正则表达式)
2、返回值：从左到右的进行检索,检索到第一个符合需求的时候会放在一个数组中,否则返回null
二、replace(要换下的字符串,新的字符串) 替换字符串
1、语法：字符串.replace(正则表达式,新的字符串)
2、返回值：满足就会返回被替换的完整的字符串,否则返回原来的字符串
var str = “2313gdhagjd”
var reg = /2313/ //如果 var reg = /0/，则返回2313gdhagjd
var res = str.replace(reg,“*”)
console.log(res) //*gdhagjd
三、search()
1、语法：字符串.search(reg)
2、返回值：找到之后就会返回对应字符的索引值,否则就返回-1
var str = “Visit Runoob!”;
var n = str.search(/Runoob/i);
输出结果：6
四、split()
1、语法：字符串.split(reg)
2、返回值：以字符为分隔符,组成多段数据存在数组中
var str = “2313gdhagjd”
var reg = /3/
var res = str.split(reg)
console.log(res) //输出结果[‘2’, ‘1’, ‘gdhagjd’]
// 拓展：特殊情况
var str = “姓名+年龄”
var reg = /+/ //会报错，所以这里要写/[+]/
var res = str.split(reg)
console.log(res) // Invalid regular expression: /+/: Nothing to repeat

四、元字符和标识符
1、元字符：正则表达式中有哪些官方提供的规范字符
2、标识符：修饰当前正则表达式的检索方式/表达方式
1、普通元字符

\d 表示一位数字(0-9)
2. \D 表示一位非数字
3. \s 表示一位空白内容(空格, 缩进, 制表符, …)
4. \S 表示一位非空白内容
5. \w 表示一位数字(0-9)字母(a-zA-Z)下划线(_) 任意内容
6. \W 表示一位非数字字母下划线内容
7. . 表示一位非换行的任意内容
8. \ 表示转义符：把有意义的符号转换成没有意义的文本,把没有意义的文本转换成有意义的符号
一、边界元字符：在正则中可以设置一些符号,规定字符串是以xx开头或者xx结束的
1、^ 表示开始的
2、$ 表示结束的
3、把两个符号放在开始和结束位置,表示当前的字符串一定要是xx开始xx结束
// 3、定义一位0~9之间的数字,开头和结束都是一个数字
var reg = /^\d$/
var str = “2”
console.log(reg.test(str))
一、限定元字符：表示当前出现的次数有多少
1、{n} 表示当前这个字符会出现n次
2、{n,m} 表示当前这个字符最少会出现n次,最多会出现m次
3、{n,} 表示当前这个字符最少会出现n次,最多会出现无限次
// 1、{n} //字符串于正则表达式对比，是否出现两次数字，如果是，返回数字构成的数组，
var reg = /\d{2}/
var str = “abc123213123123”
console.log(str.match(reg)) //[‘12’, index: 3, input: ‘abc123213123123’, groups: undefined]
二、还可以使用一些特殊符号表示当前字符出现的次数(没有匹配到的就会返回空数组)
1、+ 最少一位,最多不限制
2、? 最多有一位,或者没有
3、* 所有的
4、.* 万能匹配,表示满足第一个后面全部被选择到
// 1、+
var reg = /\d+/
var str = “abc1567898765678”
console.log(str.match(reg)) //输出结果 [‘1567898765’]
// 2、?
var reg = /\d?/
var str = “123132123123123213213123abc”
console.log(str.match(reg)) //输出结果 [‘1’]
// 3、*
var reg = /\d*/
var str = “123abc123”
console.log(str.match(reg)) //输出结果[‘123’]
// 4、.* 有哪些就会输出哪些
var reg = /\d.*/
var str = “a1a2b3c1d23e”
console.log(str.match(reg)) //输出结果[‘1a2b3c1d23e’]
一、特殊元字符
1、() 一个整体
2、| 或者
3、[] 包含
4、[^] 非
5、- 至
以下代码的输出结果全是true

<script>
    // 1、()
    var reg = /^(123){2}$/
    var str = "123123"
    console.log(reg.test(str))

    // 2、|
    var reg = /^(123|456){2}$/ // 这个整体可以是123 也可以是456
    var str = "123123"
    console.log(reg.test(str))

    // 3、[]
    var reg = /^[abcd]$/ // 只能是一个字符,要么是a b c d
    var str = "b"
    console.log(reg.test(str))

    // 4、[^]
    var reg = /^[^abcd]$/ // 只能是一个字符,不能要是a b c d,其他的字符都是可以的
    var str = "1"
    console.log(reg.test(str))

    // 5、- 
    var reg = /^[0-9]$/ // 是0到9之间的一个数字
    var str = "6"
    console.log(reg.test(str))
</script>

一、重复元字符【了解】
1、符号：\数字
2、例子：\1 表示前面的小括号内的内容需要重复出现1遍，即要出现两遍
var reg = /^(abc|def)\1$/
console.log(reg.test(“abcabc”)) //true
console.log(reg.test(“abcdef”)) //false
console.log(reg.test(“defdef”)) //true

一、标识符：在正则中检索字符的时候默认会从左到右进行检索,但是每次遇到第一个符合需求的时候就会停止检索,并不能把所有的字符串全部检索一遍
1、考虑使用正则中的标识符：g、i
2、g：global 表示所有的
3、i：ignore 表示忽略的
// 1、g 表示全局：会在字符串中从左到右全部检索一遍符合会全部输出
var reg = /\d+/g
var str = ‘1a2b3c4d5e6f’
console.log(str.match(reg)) //输出结果[‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’]
// 2、i 表示忽略大小写
var reg = /js/gi
var str = “we very like js,because JS is very nb”
var res = str.replace(reg,“TS”)
console.log(res) //输出结果we very like TS,because TS is very nb

一、正则有两大特性：懒惰性、贪婪性
1、懒惰性：正则每次检索的时候都会从索引为[0]的位置开始检索并且检索到第一个符合需求的字符就立马返回了
1.1 解决懒惰性：在正则表达式的后面设置一个g全局检索
2、贪婪性：.* 检索到字符之后,有多少内容都会全部输出
2.1 解决贪婪性：在限定元字符之后添加一个?

案例
在这里插入图片描述