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

相关推荐
测试界清流18 小时前
基于pytest的接口测试
前端·servlet
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu18 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢18 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL18 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu19 小时前
Claude Code Templates
前端·人工智能
wangpq19 小时前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js
KongHen19 小时前
完美解决请求跨域问题
前端
前端开发爱好者19 小时前
弃用 uni-app!Vue3 的原生 App 开发框架来了!
前端·javascript·vue.js
再吃一根胡萝卜19 小时前
VS Code Ctrl+/ 注释失效:两套快速修复与冲突排查方案(含可复制配置)
前端