创建DOM
第一种:
for(let i=0;i<1000;i++){
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el);
}
第二种:
let html =[];
for(let i=0;i<100;i++){
html.push('<p>'+i+'</p>');
}
document.body.innerHTML = html.join('');
if else优化
const mod= new Map(
[
['phone',100],
['age',20],
['time',899]
]
);
const pric = (name)=>{
return mod.get(name);
}
pric('age');
includes优化
const arr= [1,2,3,4,5,6];
function verif(id){
if(arr.includes(id)){
return '包含'
}else{
return '不包含'
}
}
verif(3);
数组去重
方法一:
function reap(arr) {
let newArr=[];
for(let i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])=== -1){
newArr.push(arr[i]);
}
}
return newArr;
}
reap([1,2,3,4,1,2,3]);
方法二 :
[...new Set([1,2,3,4,5,1,2,3])]
节流函数
持续触发 scroll 事件时,并不立即执行 handle 函数,当 1000 毫秒内没有触发 scroll 事件时,才会延时触发一次 handle 函数。
function debounce(fn, wait) {
let timeout = null
return function () {
if (timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))
转换成驼峰形式
css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式
function toCamel(str) {
let arr = str.split("-");
let newstr ='';
for (var i = 1; i < arr.length; i++) {
var str = arr[i];
var upper = str[0].toUpperCase();
str = str.replace(str[0], upper);
arr[i] = str;
}
for(let i=0;i<arr.length;i++){
newstr += arr[i];
}
return newstr;
}
console.log(toCamel('font-size'));
RGB转换成16进制
function colorRGBtoHex(color) {
var rgb = color.split(',');
var r = parseInt(rgb[0].split('(')[1]);
var g = parseInt(rgb[1]);
var b = parseInt(rgb[2].split(')')[0]);
var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
}
toHexString('rgb(100,200,100)');