Summarize the JS functions commonly used in front-end development (2)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summarize the JS functions commonly used in front-end development (2)

王林

Aug 21, 2019 pm 05:27 PM

本文接上一篇：总结前端开发中常用的JS功能函数（一）

25、unique：数组去重，返回一个新数组

function unique(arr){
    if(!isArrayLink(arr)){ //不是类数组对象
        return arr
    }
    let result = []
    let objarr = []
    let obj = Object.create(null)
    
    arr.forEach(item => {
        if(isStatic(item)){//是除了symbol外的原始数据
            let key = item + &#39;_&#39; + getRawType(item);
            if(!obj[key]){
                obj[key] = true
                result.push(item)
            }
        }else{//引用类型及symbol
            if(!objarr.includes(item)){
                objarr.push(item)
                result.push(item)
            }
        }
    })
    
    return resulte
}

26、Set简单实现

window.Set = window.Set || (function () {
    function Set(arr) {
        this.items = arr ? unique(arr) : [];
        this.size = this.items.length; // Array的大小
    }
    Set.prototype = {
        add: function (value) {
            // 添加元素,若元素已存在,则跳过，返回 Set 结构本身。
            if (!this.has(value)) {
                this.items.push(value);
                this.size++;
            }
            return this;
        },
        clear: function () {
            //清除所有成员，没有返回值。
            this.items = []
            this.size = 0
        },
        delete: function (value) {
            //删除某个值，返回一个布尔值，表示删除是否成功。
            return this.items.some((v, i) => {
                if(v === value){
                    this.items.splice(i,1)
                    return true
                }
                return false
            })
        },
        has: function (value) {
            //返回一个布尔值，表示该值是否为Set的成员。
            return this.items.some(v => v === value)
        },
        values: function () {
            return this.items
        },
    }

    return Set;
}());

27、repeat：生成一个重复的字符串，有n个str组成，可修改为填充为数组等

function repeat(str, n) {
    let res = &#39;&#39;;
    while(n) {
        if(n % 2 === 1) {
            res += str;
        }
        if(n > 1) {
            str += str;
        }
        n >>= 1;
    }
    return res
};
//repeat(&#39;123&#39;,3) ==> 123123123

28、dateFormater：格式化时间

function dateFormater(formater, t){
    let date = t ? new Date(t) : new Date(),
        Y = date.getFullYear() + &#39;&#39;,
        M = date.getMonth() + 1,
        D = date.getDate(),
        H = date.getHours(),
        m = date.getMinutes(),
        s = date.getSeconds();
    return formater.replace(/YYYY|yyyy/g,Y)
        .replace(/YY|yy/g,Y.substr(2,2))
        .replace(/MM/g,(M<10?&#39;0&#39;:&#39;&#39;) + M)
        .replace(/DD/g,(D<10?&#39;0&#39;:&#39;&#39;) + D)
        .replace(/HH|hh/g,(H<10?&#39;0&#39;:&#39;&#39;) + H)
        .replace(/mm/g,(m<10?&#39;0&#39;:&#39;&#39;) + m)
        .replace(/ss/g,(s<10?&#39;0&#39;:&#39;&#39;) + s)
}
// dateFormater(&#39;YYYY-MM-DD HH:mm&#39;, t) ==> 2019-06-26 18:30
// dateFormater(&#39;YYYYMMDDHHmm&#39;, t) ==> 201906261830

29、dateStrForma：将指定字符串由一种时间格式转化为另一种。From的格式应对应str的位置

function dateStrForma(str, from, to){
    //&#39;20190626&#39; &#39;YYYYMMDD&#39; &#39;YYYY年MM月DD日&#39;
    str += &#39;&#39;
    let Y = &#39;&#39;
    if(~(Y = from.indexOf(&#39;YYYY&#39;))){
        Y = str.substr(Y, 4)
        to = to.replace(/YYYY|yyyy/g,Y)
    }else if(~(Y = from.indexOf(&#39;YY&#39;))){
        Y = str.substr(Y, 2)
        to = to.replace(/YY|yy/g,Y)
    }

    let k,i
    [&#39;M&#39;,&#39;D&#39;,&#39;H&#39;,&#39;h&#39;,&#39;m&#39;,&#39;s&#39;].forEach(s =>{
        i = from.indexOf(s+s)
        k = ~i ? str.substr(i, 2) : &#39;&#39;
        to = to.replace(s+s, k)
    })
    return to
}
// dateStrForma(&#39;20190626&#39;, &#39;YYYYMMDD&#39;, &#39;YYYY年MM月DD日&#39;) ==> 2019年06月26日
// dateStrForma(&#39;121220190626&#39;, &#39;----YYYYMMDD&#39;, &#39;YYYY年MM月DD日&#39;) ==> 2019年06月26日
// dateStrForma(&#39;2019年06月26日&#39;, &#39;YYYY年MM月DD日&#39;, &#39;YYYYMMDD&#39;) ==> 20190626

// 一般的也可以使用正则来实现
//&#39;2019年06月26日&#39;.replace(/(\d{4})年(\d{2})月(\d{2})日/, &#39;$1-$2-$3&#39;) ==> 2019-06-26

30、getPropByPath：根据字符串路径获取对象属性：‘obj[0].count’

function getPropByPath(obj, path, strict) {
      let tempObj = obj;
      path = path.replace(/\[(\w+)\]/g, &#39;.$1&#39;); //将[0]转化为.0
      path = path.replace(/^\./, &#39;&#39;); //去除开头的.

      let keyArr = path.split(&#39;.&#39;); //根据.切割
      let i = 0;
      for (let len = keyArr.length; i < len - 1; ++i) {
        if (!tempObj && !strict) break;
        let key = keyArr[i];
        if (key in tempObj) {
            tempObj = tempObj[key];
        } else {
            if (strict) {//开启严格模式，没找到对应key值，抛出错误
                throw new Error(&#39;please transfer a valid prop path to form item!&#39;);
            }
            break;
        }
      }
      return {
        o: tempObj, //原始数据
        k: keyArr[i], //key值
        v: tempObj ? tempObj[keyArr[i]] : null // key值对应的值
      };
};

31、GetUrlParam：获取Url参数，返回一个对象

function GetUrlParam(){
    let url = document.location.toString();
    let arrObj = url.split("?");
    let params = Object.create(null)
    if (arrObj.length > 1){
        arrObj = arrObj[1].split("&");
        arrObj.forEach(item=>{
            item = item.split("=");
            params[item[0]] = item[1]
        })
    }
    return params;
}
// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}

32、downloadFile：base64数据导出文件，文件下载

function downloadFile(filename, data) {
	let DownloadLink = document.createElement(&#39;a&#39;);
	if (DownloadLink) {
		document.body.appendChild(DownloadLink);
		DownloadLink.style = &#39;display: none&#39;;
		DownloadLink.download = filename;
		DownloadLink.href = data;
		if (document.createEvent) {
			let DownloadEvt = document.createEvent(&#39;MouseEvents&#39;);
			DownloadEvt.initEvent(&#39;click&#39;, true, false);
			DownloadLink.dispatchEvent(DownloadEvt);
		} else if (document.createEventObject) {
			DownloadLink.fireEvent(&#39;onclick&#39;);
		} else if (typeof DownloadLink.onclick == &#39;function&#39;) {
			DownloadLink.onclick();
		}
		document.body.removeChild(DownloadLink);
	}
}

33、toFullScreen：全屏

function toFullScreen() {
	let elem = document.body;
    elem.webkitRequestFullScreen
    ? elem.webkitRequestFullScreen()
    : elem.mozRequestFullScreen
    ? elem.mozRequestFullScreen()
    : elem.msRequestFullscreen
    ? elem.msRequestFullscreen()
    : elem.requestFullScreen
    ? elem.requestFullScreen()
    : alert("浏览器不支持全屏");
}

34、exitFullscreen：退出全屏

function exitFullscreen() {
	let elem = parent.document;
	elem.webkitCancelFullScreen
	? elem.webkitCancelFullScreen()
	: elem.mozCancelFullScreen
	? elem.mozCancelFullScreen()
    : elem.cancelFullScreen
    ? elem.cancelFullScreen()
    : elem.msExitFullscreen
    ? elem.msExitFullscreen()
    : elem.exitFullscreen
    ? elem.exitFullscreen()
    : alert("切换失败,可尝试Esc退出");
}

35、requestAnimationFrame：window动画

window.requestAnimationFrame = window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
		//为了使setTimteout的尽可能的接近每秒60帧的效果
		window.setTimeout(callback, 1000 / 60);
	}
window.cancelAnimationFrame = window.cancelAnimationFrame ||
	window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame ||
    function (id) {
		//为了使setTimteout的尽可能的接近每秒60帧的效果
        window.clearTimeout(id);
	}

36、_isNaN：检查数据是否是非数字值

function _isNaN(v){
    return !(typeof v === &#39;string&#39; || typeof v === &#39;number&#39;) || isNaN(v)
}

37、max：求取数组中非NaN数据中的最大值

function max(arr){
    arr = arr.filter(item => !_isNaN(item))
    return arr.length ? Math.max.apply(null, arr) : undefined
}
//max([1, 2, &#39;11&#39;, null, &#39;fdf&#39;, []]) ==> 11

38、min：求取数组中非NaN数据中的最小值

function min(arr){
    arr = arr.filter(item => !_isNaN(item))
    return arr.length ? Math.min.apply(null, arr) : undefined
}
//min([1, 2, &#39;11&#39;, null, &#39;fdf&#39;, []]) ==> 1

39、random：返回一个lower-upper直接的随机数。（lower、upper无论正负与大小，但必须是非NaN的数据）

function random(lower, upper) {
	lower = +lower || 0
	upper = +upper || 0
	return Math.random() * (upper - lower) + lower;
}
//random(0, 0.5) ==> 0.3567039135734613
//random(2, 1) ===> 1.6718418553475423
//random(-2, -1) ==> -1.4474325452361945

40、Object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组

Object.keys = Object.keys || function keys(object) {
	if (object === null || object === undefined) {
		throw new TypeError(&#39;Cannot convert undefined or null to object&#39;);
	}
	let result = [];
	if (isArrayLike(object) || isPlainObject(object)) {
		for (let key in object) {
			object.hasOwnProperty(key) && (result.push(key))
		}
	}
	return result;
}

41、Object.values:返回一个给定对象自身的所有可枚举属性值的数组

Object.values = Object.values || function values(object) {
	if (object === null || object === undefined) {
		throw new TypeError(&#39;Cannot convert undefined or null to object&#39;);
	}
	let result = [];
	if (isArrayLike(object) || isPlainObject(object)) {
		for (let key in object) {
			object.hasOwnProperty(key) && (result.push(object[key]))
		}
	}
	return result;
}

42、arr.fill:使用value值填充array，从start位置开始，到end位置结束（但不包含end位置），返回原数组

Array.prototype.fill = Array.prototype.fill || function fill(value, start, end) {
    let ctx = this
    let length = ctx.length;
    
    start = parseInt(start)
    if(isNaN(start)){
        start = 0
    }else if (start < 0) {
        start = -start > length ? 0 : (length + start);
      }
      
      end = parseInt(end)
      if(isNaN(end) || end > length){
          end = length
      }else if (end < 0) {
        end += length;
    }
    
    while (start < end) {
        ctx[start++] = value;
    }
    return ctx;
}
//Array(3).fill(2) ===> [2, 2, 2]

43、arr.includes:用来判断一个数组是否包含一个指定的值，如果是返回true，否则返回false，可指定开始查询的位置

Array.prototype.includes = Array.prototype.includes || function includes(value, start) {
	let ctx = this;
	let length = ctx.length;
	start = parseInt(start)
	if(isNaN(start)) {
		start = 0
	} else if (start < 0) {
		start = -start > length ? 0 : (length + start);
	}
	let index = ctx.indexOf(value);
	return index >= start;
}

44、返回数组中通过测试（函数fn内判断）的第一个元素的值

Array.prototype.find = Array.prototype.find || function find(fn, ctx) {
	ctx = ctx || this;
	let result;
	ctx.some((value, index, arr), thisValue) => {
		return fn(value, index, arr) ? (result = value, true) : false
	})
	return result
}

45、arr.findIndex:返回数组中通过测试（函数fn内判断）的第一个元素的下标

Array.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx){
    ctx = ctx || this
    
    let result;
    ctx.some((value, index, arr), thisValue) => {
        return fn(value, index, arr) ? (result = index, true) : false
    })
    
    return result
}

46、performance.timing:利用performance.timing进行性能分析

window.onload = function() {
	setTimeout(function() {
		let t = performance.timing;
		console.log(&#39;DNS查询耗时 ：&#39; + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
        console.log(&#39;TCP链接耗时 ：&#39; + (t.connectEnd - t.connectStart).toFixed(0))
        console.log(&#39;request请求耗时 ：&#39; + (t.responseEnd - t.responseStart).toFixed(0))
        console.log(&#39;解析dom树耗时 ：&#39; + (t.domComplete - t.domInteractive).toFixed(0))
        console.log(&#39;白屏时间 ：&#39; + (t.responseStart - t.navigationStart).toFixed(0))
        console.log(&#39;domready时间 ：&#39; + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
        console.log(&#39;onload时间 ：&#39; + (t.loadEventEnd - t.navigationStart).toFixed(0))
        if (t = performance.memory) {
			console.log(&#39;js内存使用占比：&#39; +  (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + &#39;%&#39;)
		}
	})
}

47、禁止某些键盘事件

document.addEventListener(&#39;keydown&#39;, function(event) {
	return !(
		112 == event.keyCode ||		//禁止F1
		123 == event.keyCode ||		//禁止F12
		event.ctrlKey && 82 == event.keyCode ||		//禁止ctrl+R
		event.ctrlKey && 18 == event.keyCode ||		//禁止ctrl+N
		event.shiftKey && 121 == event.keyCode ||  		//禁止shift+F10
		event.altKey && 115 == event.keyCode ||		//禁止alt+F4
		"A" == event.srcElement.tagName && event.shiftKey		//禁止shift+点击a标签
	) || （event.returnValue = false）
});

48、禁止右键、选择、复制

[&#39;contextmenu&#39;, &#39;selectstart&#39;, &#39;copy&#39;].forEach(function(ev) {
	document.addEventListener(ev, function(event) {
		return event.returnValue = false;
	})
});

以上两篇文章就是整理的48个前端开发常用函数，欢迎大家继续补充。谢谢！

更多JavaScript相关内容请访问PHP中文网：https://www.php.cn/

The above is the detailed content of Summarize the JS functions commonly used in front-end development (2). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AM

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Dead Rails - How To Tame Wolves

3 weeks agoByDDD

Blue Prince: How To Get To The Basement

3 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),