【总结】javaScript集合

最新推荐文章于 2023-03-30 22:03:51 发布

禾小毅

最新推荐文章于 2023-03-30 22:03:51 发布

阅读量173

点赞数 1

分类专栏：总结文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50450473/article/details/119916365

版权

总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、深度优先遍历算法

<body>
   <div id="app">
      <ul>
         <li><a href="">{{total}}</a></li>
         <li><a href="">{{total}}</a></li>
         <li><a href="">{{count}}</a></li>
         <li><a href="">{{count}}</a></li>
         <li><a href="">{{count}}</a></li>
      </ul>
      <ul>
         <li><a href="">{{total}}</a></li>
         <li><a href="">{{total}}</a></li>
         <li><a href="">{{total}}</a></li>
         <li><a href="">{{count}}</a></li>
         <li><a href="">{{count}}</a></li>
       </ul>
    </div>
</body>

<script>
 var vm = new Vue({
   el: '#app',
   data: {}
 })

// 遍历父元素下的所有子元素，nodeName 是指标签名
// 深度优先遍历算法:当碰到一个元素，既有兄弟，又有子，优先向子级查询，只有所有子级查找完，再查找兄弟
// 深度优先遍历算法
function getChildren(parent) {
   let children = parent.children
   for (var child of children) {
      // console.log(child.nodeName)
      this.getChildren(child)
      let total = 12100
      let count = 5
      if (child.innerHTML=='{{total}}') {
         child.innerHTML = total
      } else if(child.innerHTML=='{{count}}'){
         child.innerHTML = count
      }
   }
}
this.getChildren(document.body)
</script>

2、异步，回调函数根据相同的按钮点击显示不同的值

<div>
   <button>click me!</button>
   <button>click me!</button>
   <button>click me!</button>
   <button>click me!</button>
   <button>click me!</button>
</div>

<script>
  function getNoData(num){
     let button = document.querySelectorAll('button')
     for(let i=0;i<button.length;i++){
        button[i].onclick=function(){
           console.log(i)
        }
     }
     for(var i = 0; i < num.length; i++){
        (function(i){  // 局部函数自调形成闭包
           console.log('fdfsd'+i)
        }(i))
     }
     for(let i=0;i<num.length;i++){
        setTimeout((i) => { // 异步，回调函数，let ES6，函数自调
           console.log(i)
        }, 50);
     }
  }
  this.getNoData(50)
</script>

3、观察者模式

let data ={
   money:1000,
   setMoney(money){
   this.money = money
   this.notify()
},
lookArr:[],
notify(){
  this.lookArr.forEach((look)=>{ // 要求，凡是进入lookArr数组中的对象，必须自身携带一个 getMoneny()函数，表示自己是关注money变化的
    look.getMoney()
  })
}
}
var obj1={
   money:0,
   getMoney(){
      console.log(`obj1获得被修改的money:${data.money}`)
      this.money=data.money
   }
}
var obj2={
  money:0,
  getMoney(){
     console.log(`obj2获得被修改的money:${data.money}`)
     this.money=data.money
  }
}
data.lookArr.push(obj1)
data.lookArr.push(obj2)
data.setMoney(500)
console.log(obj1.money,obj2.money)
data.setMoney(600)
console.log(obj1.money,obj2.money)

4、正则

// 简单替换/高级替换
// 替换敏感词，需求（简单替换/高级替换）
// 1.简单替换：将所有找到的敏感词都替换为统一的新词
// 2.高级替换：根据每次找到的敏感词的不同，动态选择不同的新词
// a.str.replace(/正则/ig,'新值')
// 把所有小字开头的人名替换为**
// var str = "老师，请用 小红 我的 朋友 造句。 小亮：小红是我的朋友。小然：朋友，小红是我的。"
var str ="you can you up,no can no bibi"
// 查找以小开头的人名组合成数组
var arr= str.match(/小[\u4e00-\u9fa5]/g)
console.log(arr)
// 如果字符串中没有带小的数据,无论找到与否都不报错
console.log(`共替换${arr!=null?arr.length:0}处`)
        
// 字符串是不变类型，必须用变量才能接住 var arr=
var arr1= str.replace(/小[\u4e00-\u9fa5]/gi,'**')
console.log(arr1)
console.log(str)
// 数组可变类型，直接用本身接就能接住
var nums=[22,1455,12,1,74]
// sort排序
nums.sort(
  function(a,b){
     return a-b
  }
)
console.log(nums)
        
// 高级替换
// 将每个单词的首字母改成大写
var words='my is xiang qing qing' // \b 第一个位置，i忽略大小写，g全文查找
var w = words.replace(/\b[a-z]/ig,function(keyword){
    // 必须要求，函数带形参、用return回调
    // 根据keyword不同，返回不同的新值
    return keyword.toLocaleUpperCase()
})
console.log(w)

let a = " fsd fds ffsad "
// 函数可以去掉字符串开头的空字符
function ltrim(a){
   return  a.replace(/^\s+/,'')
}
// 函数可以去掉字符串结尾的空字符
function rtrim(a){
   return  a.replace(/\s+$/,'')
}
// 函数可以去掉字符串开头和结尾的空字符,程序默认只找第一个符合条件的词，因此必须加上g
function trim(a){
   return  a.replace(/^\s+|\s+$/g,'')
}
console.log(ltrim(a))
console.log(rtrim(a))
console.log(trim(a))
// ES6 提供了去空格的函数,旧浏览器不兼容的情况，就自己写
console.log(a.trimLeft())
console.log(a.trimRight())
console.log(a.trim())

5、切割

let url="http://localhost:5500/public/index.html?id=5#top"
// shift 提出第一个元素
// 先按://切割，取第0部分
var a1 = url.split('://')
var protocol= a1[0]
// 剩余部分保存再变量b中继续执行后续操作,切割 # 再保存
var b2 = a1[1].split('#')
var toptxt = '#'+b2[1]
// 切割 ? 再保存
var c1 = b2[0].split('?')
var hash = '?'+c1[1]
// 切割 / 再保存
var d1 = c1[0].split('/')
// 将数组第一个元素踢出数组——主机名+端口号
var host = d1.shift()
// 将剩余部分按 / 拼接形成相对路径
var pathName = '/' + d1.join('/')
// 将host再按 ：切割，分成主机名和端口号
var ho = host.split(':')
var hostname= ho[0]
var port= ho[1]
console.log(protocol)
console.log(hostname)
console.log(host)
console.log(port)
console.log(pathName)
console.log(toptxt)
console.log(hash)

6、正则表达式解析url，另一种实现方法：零宽断言

let url1="http://localhost:5500/public/index.html?id=5#top"
let reg =/([a-z]+):\/\/([a-zA-Z0-9.]+):(\d+)((\/[a-z.]+)+)(\?([a-z]+=[a-z0-9]+&?)+)(#[a-z]+)/i
// match可将正则中（）中 的值，单独存放在一个变量中
var uarr = url1.match(reg)
var uhttp = uarr[1]
var ups = uarr[2]
var uport = uarr[3]
var upath = uarr[4]
var upathname = uarr[6]
var umd = uarr[8]
console.log(uhttp)
console.log(ups)
console.log(uport)
console.log(upath)
console.log(upathname)
console.log(umd)

7、自定义指令

<body>
   <div id="app">
      <input v-focus>
      <button>百度一下</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   // 定义指令
   Vue.directive('focus',{
      inserted(donElem){
         donElem.focus()
      }
   })
</script>
<script>
   var vm = new Vue({
      el: '#app',
      data: {}
   })
</script>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~