分享 49 个常用的 JS 方法，赶紧收藏吧
英文 | https://medium.com/@cookbug/49-commonly-used-front-end-javascript-method-packaging-f9be18947086
翻译 | 杨小爱
1、输入一个值并返回其数据类型
代码语言：javascript代码运行次数：0运行复制function type(para) {
return Object.prototype.toString.call(para)
}2、数组去重
代码语言：javascript代码运行次数：0运行复制function unique1(arr) {
return […new Set(arr)]
}
function unique2(arr) {
var obj = {};
return arr.filter(ele => {
if (!obj[ele]) {
obj[ele] = true;
return true;
}
})
}
function unique3(arr) {
var result = [];
arr.forEach(ele => {
if (result.indexOf(ele) == -1) {
result.push(ele)
}
})
return result;
}3、字符串去重
代码语言：javascript代码运行次数：0运行复制String.prototype.unique = function () {
var obj = {},
str =’’,
len = this.length;
for (var i = 0; i if (!obj[this[i]]) { str += this[i]; obj[this[i]] = true; } } return str; } ###### //Remove consecutive strings function uniq(str) { return str.replace(/(\w)\1+/g,’$1') }4、深拷贝、浅拷贝 代码语言：javascript代码运行次数：0运行复制//Deep clone (deep clone does not consider function) function deepClone(obj, result) { var result = result || {}; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { if (typeof obj[prop] ==’object’ && obj[prop] !== null) { // reference value (obj/array) and not null if (Object.prototype.toString.call(obj[prop]) ==’[object Object]’) { // object result[prop] = {}; } else { // array result[prop] = []; } deepClone(obj[prop], result[prop]) } else { // original value or func result[prop] = obj[prop] } } } return result; } // Deep and shallow clones are for reference values function deepClone(target) { if (typeof (target) !==’object’) { return target; } var result; if (Object.prototype.toString.call(target) ==’[object Array]’) { // array result = [] } else { // object result = {}; } for (var prop in target) { if (target.hasOwnProperty(prop)) { result[prop] = deepClone(target[prop]) } } return result; } // Cannot copy function var o1 = jsON.parse(jsON.stringify(obj1));5、reverse的基本原理及外延 代码语言：javascript代码运行次数：0运行复制// Change the original array Array.prototype.myReverse = function () { var len = this.length; for (var i = 0; i var temp = this[i]; this[i] = this[len-1-i]; this[len-1-i] = temp; } return this; }6、圣杯模式的继承 代码语言：javascript代码运行次数：0运行复制function inherit(Target, Origin) { function F() {}; F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constructor = Target; // The final prototype points to Target.prop.uber = Origin.prototype; }7、找出字符串中第一次出现的字母 代码语言：javascript代码运行次数：0运行复制String.prototype.firstAppear = function () { var obj = {}, len = this.length; for (var i = 0; i if (obj[this[i]]) { obj[this[i]]++; } else { obj[this[i]] = 1; } } for (var prop in obj) { if (obj[prop] == 1) { return prop; } } }8、找到元素的第n个父元素 代码语言：javascript代码运行次数：0运行复制function parents(ele, n) { while (ele && n) { ele = ele.parentElement? ele.parentElement: ele.parentNode; n — ; } return ele; }9、返回元素的第n个兄弟节点 代码语言：javascript代码运行次数：0运行复制function retSibling(e, n) { while (e && n) { if (n> 0) { if (e.nextElementSibling) { e = e.nextElementSibling; } else { for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling); } n — ; } else { if (e.previousElementSibling) { e = e.previousElementSibling; } else { for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling); } n++; } } return e; }10、封装mychildren，解决浏览器兼容性问题 代码语言：javascript代码运行次数：0运行复制function myChildren(e) { var children = e.childNodes, arr = [], len = children.length; for (var i = 0; i if (children[i].nodeType === 1) { arr.push(children[i]) } } return arr; }11、判断元素是否有子元素 代码语言：javascript代码运行次数：0运行复制function hasChildren(e) { var children = e.childNodes, len = children.length; for (var i = 0; i if (children[i].nodeType === 1) { return true; } } return false; }12、我在另一个元素后面插入一个元素 代码语言：javascript代码运行次数：0运行复制Element.prototype.insertAfter = function (target, elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(target); } else { this.insertBefore(target, nextElen); } }13、返回当前时间（年、月、日、时、分、秒） 代码语言：javascript代码运行次数：0运行复制function getDateTime() { var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() + 1, minute = date.getMinutes(), second = date.getSeconds(); month = checkTime(month); day = checkTime(day); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); function checkTime(i) { if (i <10) { i = “0” + i; } return i; } return “” + year + “year” + month + “month” + day + “day” + hour + “hour” + minute + “minute” + second + “second” }14、获取滚动条的滚动距离 代码语言：javascript代码运行次数：0运行复制function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.scrollLeft + document.documentElement.scrollLeft, y: document.body.scrollTop + document.documentElement.scrollTop } } }15、获取视口的大小 代码语言：javascript代码运行次数：0运行复制function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8 and below if (document.compatMode === “BackCompat”) { // weird mode return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // Standard mode return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }16、获取任意元素的任意属性 代码语言：javascript代码运行次数：0运行复制function getStyle(elem, prop) { return window.getComputedStyle? window.getComputedStyle(elem, null)[prop]: elem.currentStyle[prop] }17、绑定事件的兼容代码 代码语言：javascript代码运行次数：0运行复制function addEvent(elem, type, handle) { if (elem.addEventListener) {//non-ie and non-ie9 elem.addEventListener(type, handle, false); } else if (elem.attachEvent) {//ie6 to ie8 elem.attachEvent(‘on’ + type, function () { handle.call(elem); }) } else { elem[‘on’ + type] = handle; } }18、解除绑定事件 代码语言：javascript代码运行次数：0运行复制function removeEvent(elem, type, handle) { if (elem.removeEventListener) {//non-ie and non-ie9 elem.removeEventListener(type, handle, false); } else if (elem.detachEvent) {//ie6 to ie8 elem.detachEvent(‘on’ + type, handle); } else { elem[‘on’ + type] = null; } }19、取消冒泡兼容码 代码语言：javascript代码运行次数：0运行复制function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } }20、检查字符串是否为回文 代码语言：javascript代码运行次数：0运行复制function isPalina(str) { if (Object.prototype.toString.call(str) !==’[object String]’) { return false; } var len = str.length; for (var i = 0; i if (str[i] != str[len-1-i]) { return false; } } return true; }21、检查字符串是否为回文 代码语言：javascript代码运行次数：0运行复制function isPalindrome(str) { str = str.replace(/\W/g,’’).toLowerCase(); console.log(str) return (str == str.split(‘’).reverse().join(‘’)) }22、兼容 getElementsByClassName 方法 代码语言：javascript代码运行次数：0运行复制Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) { var allDomArray = document.getElementsByTagName(‘*’); var lastDomArray = []; function trimSpace(strClass) { var reg = /\s+/g; return strClass.replace(reg, ‘’).trim() } for (var i = 0; i var classArray = trimSpace(allDomArray[i].className).split(‘’); for (var j = 0; j if (classArray[j] == _className) { lastDomArray.push(allDomArray[i]); break; } } } return lastDomArray; }23、Motion function 代码语言：javascript代码运行次数：0运行复制function animate(obj, json, callback) { clearInterval(obj.timer); var speed, current; obj.timer = setInterval(function () { var lock = true; for (var prop in json) { if (prop ==’opacity’) { current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100; } else { current = parseInt(window.getComputedStyle(obj, null)[prop]); } speed = (json[prop]-current) / 7; speed = speed> 0? Math.ceil(speed): Math.floor(speed); if (prop ==’opacity’) { obj.style[prop] = (current + speed) / 100; } else { obj.style[prop] = current + speed +’px’; } if (current != json[prop]) { lock = false; } } if (lock) { clearInterval(obj.timer); typeof callback ==’function’? callback():’’; } }, 30) }24、Elastic exercise 代码语言：javascript代码运行次数：0运行复制function ElasticMovement(obj, target) { clearInterval(obj.timer); var iSpeed = 40, a, u = 0.8; obj.timer = setInterval(function () { a = (target-obj.offsetLeft) / 8; iSpeed = iSpeed + a; iSpeed = iSpeed * u; if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) { console.log(‘over’) clearInterval(obj.timer); obj.style.left = target +’px’; } else { obj.style.left = obj.offsetLeft + iSpeed +’px’; } }, 30); }25、封装自己的 forEach() 方法 代码语言：javascript代码运行次数：0运行复制Array.prototype.myForEach = function (func, obj) { var len = this.length; var _this = arguments[1]? arguments[1]: window; // var _this=arguments[1]||window; for (var i = 0; i func.call(_this, this[i], i, this) } }26、封装自己的 Array Filter() 方法 代码语言：javascript代码运行次数：0运行复制Array.prototype.myFilter = function (func, obj) { var len = this.length; var arr = []; var _this = arguments[1] || window; for (var i = 0; i func.call(_this, this[i], i, this) && arr.push(this[i]); } return arr; }27、Array Map() 方法 代码语言：javascript代码运行次数：0运行复制Array.prototype.myMap = function (func) { var arr = []; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i arr.push(func.call(_this, this[i], i, this)); } return arr; }28、Array Every() 方法 代码语言：javascript代码运行次数：0运行复制Array.prototype.myEvery = function (func) { var flag = true; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i if (func.apply(_this, [this[i], i, this]) == false) { flag = false; break; } } return flag; }29、Array Reduce()方法 代码语言：javascript代码运行次数：0运行复制Array.prototype.myReduce = function (func, initialValue) { var len = this.length, nextValue, i; if (!initialValue) { // The second parameter is not passed nextValue = this[0]; i = 1; } else { // Passed the second parameter nextValue = initialValue; i = 0; } for (; i nextValue = func(nextValue, this[i], i, this); } return nextValue; }30、获取url中的参数 代码语言：javascript代码运行次数：0运行复制function getWindonHref() { var sHref = window.location.href; var args = sHref.split(‘?’); if (args[0] === sHref) { return’’; } var hrefarr = args[1].split(‘#’)[0].split(‘&’); var obj = {}; for (var i = 0; i hrefarr[i] = hrefarr[i].split(‘=’); obj[hrefarr[i][0]] = hrefarr[i][1]; } return obj; }31、数组排序 代码语言：javascript代码运行次数：0运行复制// fast queue [left] + min + [right] function quickArr(arr) { if (arr.length <= 1) { return arr; } var left = [], right = []; var pIndex = Math.floor(arr.length / 2); var p = arr.splice(pIndex, 1)[0]; for (var i = 0; i if (arr[i] <= p) { left.push(arr[i]); } else { right.push(arr[i]); } } // recursive return quickArr(left).concat([p], quickArr(right)); } // bubbling function bubbleSort(arr) { for (var i = 0; i for (var j = i + 1; j if (arr[i]> arr[j]) { var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } return arr; } function bubbleSort(arr) { var len = arr.length; for (var i = 0; i for (var j = 0; j if (arr[j]> arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; }32、遍历Dom树 代码语言：javascript代码运行次数：0运行复制// Given a DOM element on the page, the element itself and all its descendants (not just its direct children) will be accessed // For each accessed element, the function passes the element to the provided callback function function traverse(element, callback) { callback(element); var list = element.children; for (var i = 0; i traverse(list[i], callback); } }33、原生js封装ajax 代码语言：javascript代码运行次数：0运行复制function ajax(method, url, callback, data, flag) { var xhr; flag = flag || true; method = method.toUpperCase(); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(‘Microsoft.XMLHttp’); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(2) callback(xhr.responseText); } } if (method ==’GET’) { var date = new Date(), timer = date.getTime(); xhr.open(‘GET’, url +’?’ + data +’&timer’ + timer, flag); xhr.send() } else if (method ==’POST’) { xhr.open(‘POST’, url, flag); xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’); xhr.send(data); } }34、异步加载脚本 代码语言：javascript代码运行次数：0运行复制function loadScript(url, callback) { var oscript = document.createElement(‘script’); if (oscript.readyState) {// ie8 and below oscript.onreadystatechange = function () { if (oscript.readyState ===’complete’ || oscript.readyState ===’loaded’) { callback(); } } } else { oscript.onload = function () { callback() }; } oscript.src = url; document.body.appendChild(oscript); }35、Cookie 管理 代码语言：javascript代码运行次数：0运行复制var cookie = { set: function (name, value, time) { document.cookie = name +’=’ + value +’; max-age=’ + time; return this; }, remove: function (name) { return this.setCookie(name,’’, -1); }, get: function (name, callback) { var allCookieArr = document.cookie.split(‘;’); for (var i = 0; i var itemCookieArr = allCookieArr[i].split(‘=’); if (itemCookieArr[0] === name) { return itemCookieArr[1] } } return undefined; } }36、实现 bind() 方法 代码语言：javascript代码运行次数：0运行复制Function.prototype.myBind = function (target) { var target = target || window; var _args1 = [].slice.call(arguments, 1); var self = this; var temp = function () {}; var F = function () { var _args2 = [].slice.call(arguments, 0); var parasArr = _args1.concat(_args2); return self.apply(this instanceof temp? this: target, parasArr) } temp.prototype = self.prototype; F.prototype = new temp(); return F; }37、实现 call() 方法 代码语言：javascript代码运行次数：0运行复制Function.prototype.myCall = function () { var ctx = arguments[0] || window; ctx.fn = this; var args = []; for (var i = 1; i args.push(arguments[i]) } var result = ctx.fn(…args); delete ctx.fn; return result; }38、实现 apply() 方法 代码语言：javascript代码运行次数：0运行复制Function.prototype.myApply = function () { var ctx = arguments[0] || window; ctx.fn = this; if (!arguments[1]) { var result = ctx.fn(); delete ctx.fn; return result; } var result = ctx.fn(…arguments[1]); delete ctx.fn; return result; }39、防抖 代码语言：javascript代码运行次数：0运行复制function debounce(handle, delay) { var timer = null; return function () { var _self = this, _args = arguments; clearTimeout(timer); timer = setTimeout(function () { handle.apply(_self, _args) }, delay) } }40、Throttle 代码语言：javascript代码运行次数：0运行复制function throttle(handler, wait) { var lastTime = 0; return function (e) { var nowTime = new Date().getTime(); if (nowTime-lastTime> wait) { handler.apply(this, arguments); lastTime = nowTime; } } }41、requestAnimFrame兼容方法 代码语言：javascript代码运行次数：0运行复制window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();42、cancelAnimFrame兼容方法 代码语言：javascript代码运行次数：0运行复制window.cancelAnimFrame = (function () { return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (id) { window.clearTimeout(id); }; })();43、jsonp底层方法 代码语言：javascript代码运行次数：0运行复制function jsonp(url, callback) { var oscript = document.createElement(‘script’); if (oscript.readyState) {// ie8 and below oscript.onreadystatechange = function () { if (oscript.readyState ===’complete’ || oscript.readyState ===’loaded’) { callback(); } } } else { oscript.onload = function () { callback() }; } oscript.src = url; document.body.appendChild(oscript); }44、获取url上的参数 代码语言：javascript代码运行次数：0运行复制function getUrlParam(sUrl, sKey) { var result = {}; sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) { if (!result[key]) { result[key] = val; } else { var temp = result[key]; result[key] = [].concat(temp, val); } }) if (!sKey) { return result; } else { return result[sKey] ||’’; } }45、格式化时间 代码语言：javascript代码运行次数：0运行复制function formatDate(t, str) { var obj = { yyyy: t.getFullYear(), yy: (“” + t.getFullYear()).slice(-2), M: t.getMonth() + 1, MM: (“0” + (t.getMonth() + 1)).slice(-2), d: t.getDate(), dd: (“0” + t.getDate()).slice(-2), H: t.getHours(), HH: (“0” + t.getHours()).slice(-2), h: t.getHours()% 12, hh: (“0” + t.getHours()% 12).slice(-2), m: t.getMinutes(), mm: (“0” + t.getMinutes()).slice(-2), s: t.getSeconds(), ss: (“0” + t.getSeconds()).slice(-2), w: [‘day’,’one’,’two’,’three’,’four’,’five’,’six’][t.getDay()] }; return str.replace(/([a-z]+)/ig, function ($1) { return obj[$1] }); }46、验证邮箱的正则表达式 代码语言：javascript代码运行次数：0运行复制function isAvailableEmail(sEmail) { var reg = /^([\w+\.])+@\w+([.]\w+)+$/ return reg.test(sEmail) }47、函数柯里化 代码语言：javascript代码运行次数：0运行复制//It is a technology that transforms a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the original function), and returns a new function that accepts the remaining parameters and returns the result function curryIt(fn) { var length = fn.length, args = []; var result = function (arg) { args.push(arg); length — ; if (length <= 0) { return fn.apply(this, args); } else { return result; } } return result; }48、大数相加 代码语言：javascript代码运行次数：0运行复制function sumBigNumber(a, b) { var res =’’, //result temp = 0; //The result of bitwise addition and carry a = a.split(‘’); b = b.split(‘’); while (a.length || b.length || temp) { //~~Bitwise not 1. Type conversion, convert to number 2.~~undefined==0 temp += ~~a.pop() + ~~b.pop(); res = (temp% 10) + res; temp = temp> 9; } return res.replace(/⁰+/,’’); }49、单例模式 代码语言：javascript代码运行次数：0运行复制function getSingle(func) { var result; return function () { if (!result) { result = new func(arguments); } return result; } }总结 以上就是我今天与您分享的49个常用的前端JavaScript方法的整理汇总，希望对您有所帮助，如果您觉得有用的话，请分享给您做开发的朋友，也许能够帮助到他。 最后，感谢您的阅读，祝编程愉快