实用代码段

# javascript

如何防止别人在你的网页打开控制台？

setInterval(()=>debugger)

# 函数防抖

防抖动是将多次执行变为最后一次执行

  var timer
  function hiFrequency(){
      if(timer){
          clearTimeout(timer)
      }
        timer = setTimeout(function(){
             console.log('do something')
        }, 300)
  }
  hiFrequency()
  hiFrequency()
  hiFrequency()

1
2
3
4
5
6
7
8
9
10
11
12

# 函数节流

节流是将多次执行变成每隔一段时间执行。

//待补充

# 简单的递归

function sun(n){
	if(n===1){
		return 1
	}else{
		return n+sun(n-1)
	}
}
sun(5) // 1+2+3+4+5 ==> 15

1
2
3
4
5
6
7
8

# 逆转消息

'abc'.split('').reverse().join('')

# 函数柯里化

function fn(template){
	return function(data){
    	return template.replace(`{name}`,data.name)
	}
}
var t=fn('<div>hi, I am {name}</div>')
t({name:"weibo"}) //"<div>hi, I am weibo</div>"
t({name:"jack"})  //"<div>hi, I am jack</div>"

1
2
3
4
5
6
7
8

# 浅拷贝

Object.assign() 主要用于浅拷贝或是合并对象
JSON.parse()和JSON.stringify() 只能够解析json表示的数据结构，因此函数这种不能被json表示的类型将不能被正确处理。

# 数组去重复

Array.from(new Set([1,2,2]))

# 事件代理

ul>li*8>{A$}


var ul=document.querySelector('ul')
ul.onclick=(e)=>{
  if(e.target.tagName=='LI'){
    console.log(e.target.innerText)
  }
}

1
2
3
4
5
6
7

# 当前元素的index

var index = [].indexOf.call(e.target.parentNode.children, e.target);

# 将NodeList转数组

1. const nodelistToArray = Array.prototype.slice.call(nodelist);
2. const nodelistToArray = [...nodelist]
3. const nodelistToArray = Array.from(nodelist)

1
2
3

# 严格相等（NaN，+0，-0）

1. Object.is(NaN,NaN) //true
2. Object.is(+0,-0)	//false

1
2
3

# 生存min~max整数的随机数

Math.floor(Math.random()*(max-min+1)+min);

# 实时监控dom

const myObserver = new ResizeObserver(entries => {
    console.log(entries)
});
const someEl = this.$el.querySelector(".box");
myObserver.observe(someEl);

1
2
3
4
5

# 过滤不要的对象属性（如过滤xxx，yyy属性）

let {yyy,xxx,...obj} = {xxx: 'XXX', yyy: 'YYY', el3: '3',asd:"asd",obj:{a:"aa"}};
console.log(obj)

1
2

#代码段

上次更新: 2024/07/21, 21:46:04

← 前端资源书籍→