JavaScript 数组的map和join方法、耽误函数、location对象、本地存储、正则
数组处置惩罚方法map方法
map方法的作用是遍历数组全部元素，然后执行处置惩罚操作，最后返回一个新的数组
语法格式：新数组 = 原来数组.map(function(ele,index){
ele是数组元素，index是下标
执行完操作之后使用return 返回一个新的元素
})
示例
let arr =
let arr2 = arr.map(function(ele,index){
return ele*ele
})
console.log(arr2) 我们循环了每一个元素，然后执行了平方的操作。最后返回一个新的数组给arr2
最后输出arr2的效果是
https://i-blog.csdnimg.cn/direct/4b93de90f0724e1eb9dd624fccd92ff0.png
join方法
join 方法的作用是拼接数组的全部元素，并返回为一个新的字符串
语法格式：变量 = 数组.join() //join默认的是以逗号分隔，也可以自己定义分隔符。如果使用空的字符则全部元素拼接到一起没有分隔符
示例
let arr =
let str = arr.join('')
let str2 = arr.join()
let str3 = arr.join('-')
console.log(str, str2, str3) 最后的输出效果
https://i-blog.csdnimg.cn/direct/244d4fac1cb24163bdc3632b48b0b0ee.png
耽误函数
设置耽误函数
耽误函数：steTimeout(1,2) //1耽误的函数 2耽误多长时间
类似于间歇函数，但是耽误函数只会执行一次。它的运用场景重要是多少秒之后默认跳转这种场景
运用示例：
<style>
.a{
width: 1024px;
height: 300px;
background-color: red;
display: flex;
justify-content: right;
}
.button{
width: 30px;
height: 30px;
display: none;
}
</style>
</head>
<body>
<div class="a">//假设div是广告
<button class="button">X</button>
</div>
<script>
const button = document.querySelector('.button')
setTimeout(function(){
button.style.display = "block"
button.addEventListener('click', function(){
const div = document.querySelector('.a')
div.style.display = 'none'
})
},3000)
</script>
</body> 这个例子是三秒后可以关闭广告，在前三秒关闭按钮是不可见的，只有三秒之后才可以看到关闭按钮，点击关闭按钮之后会把广告的display设置为none
扫除耽误函数
我们在设置耽误函数的时候也会返回一个“序号”，我们可以使用这个序号来扫除这个耽误函数。运用场景可以是：加载页面，发现拥护是vvvvvvvvvip，我们直接扫撤除这个耽误函数然后把广告直接设置为none，如许我们尊贵的vvvvvvvvvip就不用点击关闭广告了
示例
let a = setTimeout(function(){
//这是一个五秒的广告
},5000)
clearTimeout(a) //清掉这个延迟函数 location对象
localtion对象包罗了哪些信息，有什么作用。作用：访问和操作url信息的对象
location.href
获取当前url，如果重新赋值为另一个网站的url则跳转到另一个网站
location.protocol
获取当url协议部分，如https://www.baidu.com ---》获取https这个协议
location.hostname
获取当前url的域名部分，如https://www.baidu.com ---》获取www.baidu.com这个域名
location.port
获取当前url的端口
location.search
获取url中查询字符串部分，包括问号。如https://www.wodefa.com?name=xxx ---》获取到?name=xxx
location.hash
获取url中的锚点部分，包括井号，如https://www.bd.com/#/this ---》获取到#/this
location.reload()
这是一个方法，有小括号。作用是刷新页面
可以通报参数 true。表示逼迫刷新 = ctrl+f5
本地存储
什么是本地存储，本地存储就相当于欣赏器自带的一个小型数据库。我们的数据可以放到这个区域内。本地存储分为两种，第一种是localStorage，这种存储的方式是长期的。我们关闭欣赏器大概页面都是不会让数据消失的，除非我们手动删除。第二种是sessionStorage，这种方式写的数据会跟随欣赏器大概网页的关闭消失。
本地存储数据的方式都是以键对值的方式存储的，都是一个key对应一个value。本地存储只能存储字符串数据，存入别的类型会自动转换字符串。
localStorage
localStorage存储的数据具有长期性
1.添加值：localStorage.setItem("key","value")
2.读取值：localStorage.getItem("key") --->return value
3.删除单个值:localStorage.removeItem("key") --->删除key和key对应的value
4.清空全部键值对:localStorage.clear()
5.求键值对个数:localStorage.length --->return 有几个键值对
6.获取第n个键值对的key:localStorage.key(n)
如果给已有的key重复赋值会覆盖原有值 --->也就是增删改查中的改
sessionStorage
它的增删改查和localStorage一样，语法都是雷同的。唯一差别的就是他们存储数据的生命周期
复杂数据类型的存储
我们可以存储变量、值到欣赏器内，那如果我们需要存储一个对象呢？我们都知道对象也是以键对值的方式存储的，如果我们直接把对象看成value值存储肯定会报错。
这时候我们引入两个语法
1.将复杂数据类型转化为字符串的JSON.stringify(复杂数据类型变量)
2.将转换后的字符串还原为复杂数据类型JSON.parse(需要转换的字符串)
如果在第一个语法中，对象大概数据里面存储了函数、undefined、循环引用的时候，函数会被省略，undefined会存储为null，循环引用会报错。
循环引用就是对象a，b。a对象包罗b，b对象包罗a
在第二个语法中，字符串必须符合对象大概数组的格式才可以转换为原来的，不然也会报错
const obj={
name:"xxx",
age:18,
output:function(){
console.log(`我今年${this.age}岁，我叫${this.name}`)
},
alpha:undefined
}
localStorage.setItem("user",JSON.stringify(obj))
console.log(localStorage.getItem("user")) 在这个案例中，我们最后打印到控制台的value是
https://i-blog.csdnimg.cn/direct/41248eea2b5440b88e7a96132bd4d519.png
这也就阐明确，在转换的存储的过程中函数和未定义的都会省略掉。而且再转化为原来的格式也会丢失掉函数和undefined。
正则表达式
什么是正则表达式
正则表达式feifeifeifeifeifeichang紧张，它可以匹配我们的数据是否符合某种规范，我们在注册账户的时候都会有格式的要求，这个就是正则表达式的运用
JavaScript的正则表达式都是使用 // 包起来的
可以直接匹配某些笔墨，比如我想在“我高数挂科了”如许一句话中匹配 挂科 这两个字
我们就可以直接写一个正则表达式 /挂科/ --》正则不加引号
然后使用test()进行匹配，匹配成功返回true否则返回false
const regex = /挂科/
const str = "我高数挂科了"
regex.test(str)//返回true 这种方法只能匹配一段字符串里面是否有我们想要的信息，但是有些情况下我们要的是这个字符串只有我们想要的信息。这时候就需要两个符号 ^ 和 $
^ 从字符串开头开始检测，也就是以什么开头
$ 匹配字符串结尾，也就是以什么结尾
对于刚才的示例，如果regex是 /^挂科/ 那它的返回值就是false，由于 我高数挂了 这句话的开头是我，不符合我们的正则
又大概是/挂科$/ 返回值依旧是false，由于结尾不是挂科，而是 了
他们组合起来就是限制这个字符串必须是挂科这两个字，多了少了都是false。
元字符和字符类
我们上面说的^和$都是元字符，类似的元字符还有很多
. --》表示匹配除了换行符之外的全部单个字符
* --》匹配前一个元素零次或多次。条件是这个元素需要是连贯的
+ --》匹配前一个元素至少一次，
？--》匹配前一个元素零次大概一次
{n,m} --》匹配前一个元素最少n次最多m次
{n} --》匹配n次
[ ] --》匹配方括号内的任意字符，就是说方括号可以写很多字符，只要我们匹配的字符出现在了这个方括号内就算匹配成功
| --》或，a|b匹配a大概b
还有字符类
\d --》匹配一个数字，等价于 如果想匹配五位数的数字就可以：\d{5}
\D --》匹配一个非数字
\w --》匹配一个字母数字大概下划线，等价于
\W --》匹配一个非字母数字下划线
\s --》匹配一个空缺字符，比如空格、制表符、换行符
\S --》匹配一个非空缺字符
我们在使用正则的时候基本都是使用以下几个方法
1.text() --》这个属于正则表达式的方法，我们使用正则表达式去匹配字符串
使用方法：正则.test(字符串) --》返回true大概false
2.match() --》这个属于字符串方法
使用方法：字符串.match(正则) --》返回匹配到的效果，多个符合项只会返回第一个匹配上的
3.replace() --》使用新的值替换符合条件的值
使用方法：字符串.replace(正则,"替换物") --》返回一个字符串，多个符合选项只会替换第一个
4.split() --》分割字符串
使用方法:str.split(正则) -->以符合正则的元素为断点进行切割，这个元素也会被割走，返回一个数组，数组里面存储的是切割好的元素们
2.3方法里面都是只能匹配一个，如果有很多个需要匹配的就应该使用修饰符了，修饰符书写的位置都是在整个正则的后面----》/ /修饰符
修饰符有三个
第一个是--》g 全局匹配，匹配输入字符串中全部的匹配项
第二个是--》i 不区分巨细写匹配
第三个是--》 m 多行匹配，它会让^$从整个的开头和结尾变为匹配每一行的开头和结尾
正则表达式大部分就是这些了，但是在一样平常使用的时候我们都是使用ai大概专门写正则的网站来写的。
箭头函数
我们之前写的函数有两种，第一种是又名函数 function fn(){}，第二种是匿名函数 function(){}
今天学的箭头函数是 () => {}
箭头函数的括号的作用和其他函数雷同，都是形参列表。
用法1：//这种用法是在有参数的时候用的，没有参数小括号里面就什么都不写
(a,b) =>{
let c
c = a+b
return c
}
用法2：//这种用法是函数体只有一句代码而且直接返回效果，可以省略大括号
(a,b) => a+b
箭头函数没有自己的this，它会继承上下文的this
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]