JavaScript 数组的map和join方法、延迟函数、location对象、本地存储、正则表达式、箭头函数

数组处理方法

map方法

map方法的作用是遍历数组所有元素，然后执行处理操作，最后返回一个新的数组

语法格式：新数组 = 原来数组.map(function(ele,index){

ele是数组元素，index是下标

执行完操作之后使用return 返回一个新的元素

})

示例

javascript 复制代码

  let arr = [1,2,3,4,5,6,7,8,9]
  let arr2 = arr.map(function(ele,index){
    return ele*ele
  })
  console.log(arr2)

我们循环了每一个元素，然后执行了平方的操作。最后返回一个新的数组给arr2

最后输出arr2的结果是

join方法

join 方法的作用是拼接数组的所有元素，并返回为一个新的字符串

语法格式：变量 = 数组.join() //join默认的是以逗号分隔，也可以自己定义分隔符。如果使用空的字符则所有元素拼接到一起没有分隔符

示例

javascript 复制代码

  let arr = [1,2,3,4,5,6,7,8,9]
  let str = arr.join('')
  let str2 = arr.join()
  let str3 = arr.join('-')
  console.log(str, str2, str3)

最后的输出结果

延迟函数

设置延迟函数

延迟函数：steTimeout(1,2) //1延迟的函数 2延迟多长时间

类似于间歇函数，但是延迟函数只会执行一次。它的运用场景主要是多少秒之后默认跳转这种场景

运用示例：

javascript 复制代码

<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就不用点击关闭广告了

示例

javascript 复制代码

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

在第二个语法中，字符串必须符合对象或者数组的格式才可以转换为原来的，不然也会报错

javascript 复制代码

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是

这也就说明了，在转换的存储的过程中函数和未定义的都会省略掉。并且再转化为原来的格式也会丢失掉函数和undefined。

正则表达式

什么是正则表达式

正则表达式feifeifeifeifeifeichang重要，它可以匹配我们的数据是否符合某种规范，我们在注册账户的时候都会有格式的要求，这个就是正则表达式的运用

JavaScript的正则表达式都是使用 // 包起来的

可以直接匹配某些文字，比如我想在"我高数挂科了"这样一句话中匹配挂科这两个字

我们就可以直接写一个正则表达式 /挂科/ --》正则不加引号

然后使用test()进行匹配，匹配成功返回true否则返回false

javascript 复制代码

const regex = /挂科/
const str = "我高数挂科了"
regex.test(str)  //返回true

这种方法只能匹配一段字符串里面是否有我们想要的信息，但是有些情况下我们要的是这个字符串只有我们想要的信息。这时候就需要两个符号 ^ 和 $

^ 从字符串开头开始检测，也就是以什么开头

$ 匹配字符串结尾，也就是以什么结尾

对于刚才的示例，如果regex是 /^挂科/ 那它的返回值就是false，因为我高数挂了这句话的开头是我，不符合我们的正则

又或者是/挂科$/ 返回值依旧是false，因为结尾不是挂科，而是了

他们组合起来就是限制这个字符串必须是挂科这两个字，多了少了都是false。

元字符和字符类

我们上面说的^和$都是元字符，类似的元字符还有很多

. --》表示匹配除了换行符之外的所有单个字符

* --》匹配前一个元素零次或多次。前提是这个元素需要是连贯的

--》匹配前一个元素至少一次，

？--》匹配前一个元素零次或者一次

{n,m} --》匹配前一个元素最少n次最多m次

{n} --》匹配n次

[ ] --》匹配方括号内的任意字符，就是说方括号可以写很多字符，只要我们匹配的字符出现在了这个方括号内就算匹配成功

| --》或，a|b匹配a或者b

还有字符类

\d --》匹配一个数字，等价于[0-9] 如果想匹配五位数的数字就可以：\d{5}

\D --》匹配一个非数字

\w --》匹配一个字母数字或者下划线，等价于[A-Za-z0-9_]

\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：//这种用法是在有参数的时候用的，没有参数小括号里面就什么都不写

javascript 复制代码

(a,b) =>{
let c
c = a+b
return c
 }

用法2：//这种用法是函数体只有一句代码并且直接返回结果，可以省略大括号

javascript 复制代码

(a,b) => a+b

箭头函数没有自己的this，它会继承上下文的this