摘要:輸入一個值,返回其數(shù)據(jù)類型數(shù)組去重字符串去重去除連續(xù)的字符串深拷貝淺拷貝深克隆深克隆不考慮函數(shù)引用值且不為對象數(shù)組原始值或深淺克隆是針對引用值數(shù)組對象無法復(fù)制函數(shù)底層原理和擴(kuò)展改變原數(shù)組圣杯模式的繼承最終的原型指向找出字符串中第一
1.輸入一個值,返回其數(shù)據(jù)類型
function type(para) { return Object.prototype.toString.call(para) }2.數(shù)組去重
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.字符串去重
String.prototype.unique = function () { var obj = {}, str = "", len = this.length; for (var i = 0; i < len; i++) { if (!obj[this[i]]) { str += this[i]; obj[this[i]] = true; } } return str; } ###### //去除連續(xù)的字符串 function uniq(str) { return str.replace(/(w)1+/g, "$1") }4.深拷貝 淺拷貝
//深克隆(深克隆不考慮函數(shù)) function deepClone(obj, result) { var result = result || {}; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { if (typeof obj[prop] == "object" && obj[prop] !== null) { // 引用值(obj/array)且不為null if (Object.prototype.toString.call(obj[prop]) == "[object Object]") { // 對象 result[prop] = {}; } else { // 數(shù)組 result[prop] = []; } deepClone(obj[prop], result[prop])
} else { // 原始值或func result[prop] = obj[prop] } }
}
return result;
} // 深淺克隆是針對引用值 function deepClone(target) { if (typeof (target) !== "object") { return target; } var result; if (Object.prototype.toString.call(target) == "[object Array]") { // 數(shù)組 result = [] } else { // 對象 result = {}; } for (var prop in target) { if (target.hasOwnProperty(prop)) { result[prop] = deepClone(target[prop]) } } return result; } // 無法復(fù)制函數(shù) var o1 = JSON.parse(JSON.stringify(obj1));5.reverse底層原理和擴(kuò)展
// 改變原數(shù)組 Array.prototype.myReverse = function () { var len = this.length; for (var i = 0; i < len; i++) { var temp = this[i]; this[i] = this[len - 1 - i]; this[len - 1 - i] = temp; } return this; }6.圣杯模式的繼承
function inherit(Target, Origin) { function F() {}; F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constructor = Target; // 最終的原型指向 Target.prop.uber = Origin.prototype; }7.找出字符串中第一次只出現(xiàn)一次的字母
String.prototype.firstAppear = function () { var obj = {}, len = this.length; for (var i = 0; i < len; 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級父元素
function parents(ele, n) { while (ele && n) { ele = ele.parentElement ? ele.parentElement : ele.parentNode; n--; } return ele; }9. 返回元素的第n個兄弟節(jié)點
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,解決瀏覽器的兼容問題
function myChildren(e) { var children = e.childNodes, arr = [], len = children.length; for (var i = 0; i < len; i++) { if (children[i].nodeType === 1) { arr.push(children[i]) } } return arr; }11.判斷元素有沒有子元素
function hasChildren(e) { var children = e.childNodes, len = children.length; for (var i = 0; i < len; i++) { if (children[i].nodeType === 1) { return true; } } return false; }12.我一個元素插入到另一個元素的后面
Element.prototype.insertAfter = function (target, elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(target); } else { this.insertBefore(target, nextElen); } }13.返回當(dāng)前的時間(年月日時分秒)
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 + "年" + month + "月" + day + "日" + hour + "時" + minute + "分" + second + "秒"
}14.獲得滾動條的滾動距離
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.獲得視口的尺寸
function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其以下 if (document.compatMode === "BackCompat") { // 怪異模式 return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // 標(biāo)準(zhǔn)模式 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }16.獲取任一元素的任意屬性
function getStyle(elem, prop) { return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop] }17.綁定事件的兼容代碼
function addEvent(elem, type, handle) { if (elem.addEventListener) { //非ie和非ie9 elem.addEventListener(type, handle, false); } else if (elem.attachEvent) { //ie6到ie8 elem.attachEvent("on" + type, function () { handle.call(elem); }) } else { elem["on" + type] = handle; } }18.解綁事件
function removeEvent(elem, type, handle) { if (elem.removeEventListener) { //非ie和非ie9 elem.removeEventListener(type, handle, false); } else if (elem.detachEvent) { //ie6到ie8 elem.detachEvent("on" + type, handle); } else { elem["on" + type] = null; } }19.取消冒泡的兼容代碼
function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } }20.檢驗字符串是否是回文
function isPalina(str) { if (Object.prototype.toString.call(str) !== "[object String]") { return false; } var len = str.length; for (var i = 0; i < len / 2; i++) { if (str[i] != str[len - 1 - i]) { return false; } } return true; }21.檢驗字符串是否是回文
function isPalindrome(str) { str = str.replace(/W/g, "").toLowerCase(); console.log(str) return (str == str.split("").reverse().join("")) }22.兼容getElementsByClassName方法
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 < allDomArray.length; i++) {
var classArray = trimSpace(allDomArray[i].className).split(" "); for (var j = 0; j < classArray.length; j++) { if (classArray[j] == _className) { lastDomArray.push(allDomArray[i]); break; } }
}
return lastDomArray;
}23.運動函數(shù)
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.彈性運動
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方法
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 < len; i++) { func.call(_this, this[i], i, this) } }26.封裝自己的filter方法
Array.prototype.myFilter = function (func, obj) { var len = this.length; var arr = []; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { func.call(_this, this[i], i, this) && arr.push(this[i]); } return arr; }27.數(shù)組map方法
Array.prototype.myMap = function (func) { var arr = []; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { arr.push(func.call(_this, this[i], i, this)); } return arr; }28.數(shù)組every方法
Array.prototype.myEvery = function (func) { var flag = true; var len = this.length; var _this = arguments[1] || window; for (var i = 0; i < len; i++) { if (func.apply(_this, [this[i], i, this]) == false) { flag = false; break; } } return flag; }29.數(shù)組reduce方法
Array.prototype.myReduce = function (func, initialValue) { var len = this.length, nextValue, i; if (!initialValue) { // 沒有傳第二個參數(shù) nextValue = this[0]; i = 1; } else { // 傳了第二個參數(shù) nextValue = initialValue; i = 0; } for (; i < len; i++) { nextValue = func(nextValue, this[i], i, this); } return nextValue; }30.獲取url中的參數(shù)
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.length; i++) { hrefarr[i] = hrefarr[i].split("="); obj[hrefarr[i][0]] = hrefarr[i][1]; } return obj; }31.數(shù)組排序
// 快排 [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 < arr.length; i++) { if (arr[i] <= p) { left.push(arr[i]); } else { right.push(arr[i]); } } // 遞歸 return quickArr(left).concat([p], quickArr(right)); } // 冒泡 function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = i + 1; j < arr.length; 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 < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; }32.遍歷Dom樹
// 給定頁面上的DOM元素,將訪問元素本身及其所有后代(不僅僅是它的直接子元素) // 對于每個訪問的元素,函數(shù)講元素傳遞給提供的回調(diào)函數(shù) function traverse(element, callback) { callback(element); var list = element.children; for (var i = 0; i < list.length; i++) { traverse(list[i], callback); } }33.原生js封裝ajax
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.異步加載script
function loadScript(url, callback) { var oscript = document.createElement("script"); if (oscript.readyState) { // ie8及以下版本 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管理
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 < allCookieArr.length; i++) { var itemCookieArr = allCookieArr[i].split("="); if (itemCookieArr[0] === name) { return itemCookieArr[1] } } return undefined; } }36.實現(xiàn)bind()方法
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.實現(xiàn)call()方法
Function.prototype.myCall = function () { var ctx = arguments[0] || window; ctx.fn = this; var args = []; for (var i = 1; i < arguments.length; i++) { args.push(arguments[i]) } var result = ctx.fn(...args); delete ctx.fn; return result; }38.實現(xiàn)apply()方法
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.防抖
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.節(jié)流
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兼容性方法
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();42.cancelAnimFrame兼容性方法
window.cancelAnimFrame = (function () { return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (id) { window.clearTimeout(id); }; })();43.jsonp底層方法
function jsonp(url, callback) { var oscript = document.createElement("script"); if (oscript.readyState) { // ie8及以下版本 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上的參數(shù)
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.格式化時間
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: ["日", "一", "二", "三", "四", "五", "六"][t.getDay()] }; return str.replace(/([a-z]+)/ig, function ($1) { return obj[$1] }); }46.驗證郵箱的正則表達(dá)式
function isAvailableEmail(sEmail) { var reg = /^([w+.])+@w+([.]w+)+$/ return reg.test(sEmail) }47.函數(shù)柯里化
//是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù),并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù) 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.大數(shù)相加
function sumBigNumber(a, b) { var res = "", //結(jié)果 temp = 0; //按位加的結(jié)果及進(jìn)位 a = a.split(""); b = b.split(""); while (a.length || b.length || temp) { //~~按位非 1.類型轉(zhuǎn)換,轉(zhuǎn)換成數(shù)字 2.~~undefined==0 temp += ~~a.pop() + ~~b.pop(); res = (temp % 10) + res; temp = temp > 9; } return res.replace(/^0+/, ""); }49.單例模式
function getSingle(func) { var result; return function () { if (!result) { result = new func(arguments); } return result; } ## }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/116104.html
摘要:前言隨著前端的不斷發(fā)展,很多開發(fā)人員已經(jīng)開始使用等框架,但是很少有人去深入分析以及的源碼本人也是,至今還停留在使用的層面。最近還在寫一些的筆記,有興趣的小白也可以看下我的博客文章源碼分析地址 前言 隨著前端的不斷發(fā)展,很多開發(fā)人員已經(jīng)開始使用react、vue等web框架,但是很少有人去深入分析vue以及react的源碼(本人也是,至今還停留在使用的層面)。框架的使用勢必會有更新迭代的...
閱讀 2373·2021-11-24 10:26
閱讀 2565·2021-11-16 11:44
閱讀 1695·2021-09-22 15:26
閱讀 3565·2021-09-10 11:11
閱讀 3178·2021-09-07 10:25
閱讀 3615·2021-09-01 10:41
閱讀 1002·2021-08-27 13:11
閱讀 3498·2021-08-16 11:02