摘要:新手經(jīng)常犯的一個錯誤是將一個方法從對象中拿出來,然后再調(diào)用,希望方法中的是原來的對象。如果不做特殊處理的話,一般會丟失原來的對象。
1. 快速排序算法
方法一
function quicksort(n,left,right){ var p; if(lefttemp) right--; if(left 方法二
function quickSort(arr,left,right){ var p; if(lefttemp) right--; if(left 2. 深度克隆clone(繼承) var cloneObj = function(obj){ var str, newobj = obj.constructor === Array ? [] : {}; if(typeof obj !== "object"){ return; } else if(window.JSON){ str = JSON.stringify(obj), //系列化對象 newobj = JSON.parse(str); //還原 } else { for(var i in obj){ newobj[i] = typeof obj[i] === "object" ? cloneObj(obj[i]) : obj[i]; } } return newobj; }; //測試 var obj = {a: 0, b: 1, c: 2}; var arr = [0, 1, 2]; //執(zhí)行深度克隆 var newobj = cloneObj(obj); var newarr = cloneObj(arr); //對克隆后的新對象進行成員刪除 delete newobj.a; newarr.splice(0,1); console.log(obj); console.log(arr); console.log(newobj); console.log(newarr); /* 結(jié)果: {a: 0, b: 1, c: 2} [0, 1, 2] {b: 1, c: 2} [1, 2] */3. 找出字符串或者數(shù)組中出現(xiàn)相同字符, 并且打印出次數(shù)最多的次數(shù)和字符var str = "abcdefgaffffda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:" + max + " max_key:" + max_key);4. 解析url為json數(shù)據(jù)格式 也叫將url的查詢參數(shù)解析成字典對象同類型function getUrl(url){ //var arr=url.split("?")[1].split("&"); var arr = []; var a3= []; arr = url.split("?"); a1 = arr[1]; a2 = a1.split("&"); obj = {}; for(var i=0;i //正則方法 function getQueryObject(url) { url = url == null ? window.location.href : url; var search = url.substring(url.lastIndexOf("?") + 1); var obj = {}; var reg = /([^?&=]+)=([^?&=]*)/g; search.replace(reg, function (rs, $1, $2) { var name = decodeURIComponent($1); var val = decodeURIComponent($2); val = String(val); obj[name] = val; return rs; }); return obj; }5. 通用事件注冊函數(shù)var obj = document.getElementById("p"); var type = click; function fun() {} function addEvent(obj, type, fun) { if (obj.addEventListener) { obj.addEventListener(type, fun, false); } else if (obj.attachEvent) { obj.attachEvent("on" + type, fun); } else { obj["on" + type] = fun; } }6. 寫一個獲取url中參數(shù)的值的函數(shù)function getRequest() { var url = window.location.search; var oRequest = new Object(); if (url.indexOf("?") !== -1) { url = url.substr(1); // 取得?以后的字符串 var reqArr = url.split("&"); for (var i = 0; i < reqArr.length; i++) { oRequest[(reqArr[i].split("="))[0]] = unescape((reqArr[i].split("="))[1]); } } return oRequest; }7. JS中的數(shù)據(jù)類型? 如何斷定一個變量是否是String類型var str = new String("abcd"); console.log(typeof str); // object console.log(str instanceof String); //true console.log(str.constructor == String); //true console.log(Object.prototype.toString.call(str) === "[object String]"); // true var str1 = "abcd"; console.log(typeof str1); // string console.log(str1 instanceof String); //fasle console.log(str1.constructor == String); //true console.log(Object.prototype.toString.call(str1) === "[object String]"); // true*/8. 請實現(xiàn), 鼠標點擊頁面中的任意標簽, alert該標簽的名稱.( 注意兼容性)document.onclick = function(e) { var e = e || window.event; var obj = e.target || e.srcElement; alert(obj.tagName.toLowerCase()); }9. js異步加載的三種解決方案(1) defer,只支持IE (2) async: (3) 創(chuàng)建script,插入到DOM中,加載完畢后callBack,見代碼: function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){//IE script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; }else{//firefox,safari,chrome,opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); }10. 二分搜索,從數(shù)組中找到findvaluefunction binarySearch(arr,start,end,findvalue){ var arr = arr.sort(function(a,b){return a-b}); var mid=Math.floor((start+end)/2); var midvalue = arr[mid]; if(midvalue==findvalue){ return mid; }else if(findvalue11. javascript保留兩位小數(shù)midvalue){ binarySearch(arr,mid+1,end,findvalue); }else{ return -1; } } num.toFixed(2); function toDecimal(x) { var f = parseFloat(x) if(isNaN(f)){ return false; } var f = Math.round(x*100)/100; var s = f.toString(); var rs = s.indexOf("."); if(rs<0){ rs=s.length; s+="."; } while(s.length<=rs+2){ s+="0"; } return s; }12. 編寫一個方法 求一個字符串的字節(jié)長度;英文占一個, 中文占兩個方法一: function getStrlen(str) { var len = str.length; var re = /[u4e00-u9fa5]/; for(var i=0;i13. 編寫一個方法 去掉一個數(shù)組的重復元素255) len++; } return len; } 方法一:該方法數(shù)組內(nèi)順序不變
function delRepeat(arr){ var a = []; for(var i=0,l=arr.length;i19,對象深拷貝方法二:該方法由于排序原因,導致去重后數(shù)組內(nèi)元素排序不同
function unique(arr){ arr.sort(); var re=[arr[0]]; for(var i=1,len=arr.length;i方法三:數(shù)組過濾
function unique(arr){ return arr.filter((item, index, array) => array.indexOf(item) === index); }方法四:ES6
Array.form(...new Set(arr)) [...new Set(arr)]13 輸入兩個數(shù)字,輸出這兩個數(shù)字的最大公約數(shù)。如16,4輸出4。最大公約數(shù)就是<=最小的那個數(shù),那就從最小的那個數(shù)開始一個一個試
function maxDivisor(num1,num2){ var max=num1>num2?num1:num2, min=num1>num2?num2:num1; for(var i=min;i>=1;i--){ if(max%i==0&&min%i==0){ return i; } } }順帶也寫下最小公倍數(shù)就是>=最大的那個數(shù),那就從最大的那個數(shù)開始一個一個試
function minDivisor(num1,num2){ var max=num1>num2?num1:num2, min=num1>num2?num2:num1; for(var i=max;i>=max;i++){ if(i%max==0&&i%min==0){ return i; } } }方法挺多,還有輾轉(zhuǎn)相除法,用遞歸做。
function maxDivisor(num1,num2){ if(num2==0){ return num1; }else{ return maxDivisor(num2,num1%num2); } }14. JavaScript中如何檢測一個變量是一個String類型? 請寫出函數(shù)實現(xiàn)//判斷是否是String function isString(str){ return ((str instanceof String) || (typeof str).toLowerCase() == "string"); } //測試案例 var s1 = "abc", var s2 = new String("abc"); console.log(isString(s1)+" "); console.log(isString(s2)); //JS里面String的初始化有兩種方式:直接賦值和String對象的實例化 var str = "abc"; var str = new String("abc"); //通常來說判斷一個對象的類型使用typeof,但是在new String的情況下的結(jié)果會是object //此時需要通過instanceof來判斷 obj.constructor == String; obj instanceof String;15. 鼠標點擊頁面中的任意標簽, alert該標簽的名稱.( 注意兼容性)方法一: DOM0級事件 document.onclick = function(e){ var e = e||window.event; var target = e.target || e.srcElement; console.log(target.tagName.toLowerCase()); } 方法二: DOM2級事件 事件代理 function callback(e) { var e = e || window.event; var target = e.target || e.srcElement; console.log(target.tagName); } if (document.addEventListener) { document.addEventListener("click", callback, false) } else if (document.attachEvent) { document.attachEvent("onclick", callback) } else { document["onclick"] = callback; }手寫Function.bind函數(shù)bind()方法會創(chuàng)建一個新函數(shù),當這個新函數(shù)被調(diào)用時,它的this值是傳遞給bind()的第一個參數(shù), 它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù).
bind() 最簡單的用法是創(chuàng)建一個函數(shù),使這個函數(shù)不論怎么調(diào)用都有同樣的 this 值。JavaScript新手經(jīng)常犯的一個錯誤是將一個方法從對象中拿出來,然后再調(diào)用,希望方法中的 this 是原來的對象。(比如在回調(diào)中傳入這個方法。)如果不做特殊處理的話,一般會丟失原來的對象。從原來的函數(shù)和原來的對象創(chuàng)建一個綁定函數(shù),則能很漂亮地解決這個問題:this.x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 81 var retrieveX = module.getX; retrieveX(); // 9, because in this case, "this" refers to the global object // Create a new function with "this" bound to module //New programmers (like myself) might confuse the global var getX with module"s property getX var boundGetX = retrieveX.bind(module); boundGetX(); // 81Polyfill(兼容舊瀏覽器)if (!Function.prototype.bind) { Function.prototype.bind = function () { var self = this, // 保存原函數(shù) context = [].shift.call(arguments), // 保存需要綁定的this上下文 args = [].slice.call(arguments); // 剩余的參數(shù)轉(zhuǎn)為數(shù)組 return function () { // 返回一個新函數(shù) self.apply(context,[].concat.call(args, [].slice.call(arguments))); } } }https://github.com/lin-xin/bl...寫一個判斷質(zhì)數(shù)的isPrime()函數(shù),當其為質(zhì)數(shù)時返回true,否則返回false。function isPrime(number) { if (typeof number !== "number" || !Number.isInteger(number)) { // Alternatively you can throw an error. return false; } if (number < 2) { return false; } if (number === 2) { return true; } else if (number % 2 === 0) { return false; } var squareRoot = Math.sqrt(number); for(var i = 3; i <= squareRoot; i += 2) { if (number % i === 0) { return false; } } return true; }16通用事件處理函數(shù)// event(事件)工具集,來源:github.com/markyun
EventUtil = { // 頁面加載完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 參數(shù): 操作的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、需要執(zhí)行的函數(shù)、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, function() { handler.call(element); }); } else { element["on" + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEnentListener) { element.removeEnentListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, // 阻止事件 (主要是事件冒泡,因為IE不支持事件捕獲) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默認行為 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 獲取事件目標 getTarget : function(event) { return event.target || event.srcElement; }, // 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event; getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } }; //獲取瀏覽器頁面當前坐標 EventUtil.addEvent(btn,"click",function(e){ e = EventUtil.getEvent(e); var pageX = e.pageX, pageY = e.pageY; if(!pageX) { pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if(!pageY) { pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } console.log("頁面X軸坐標為:"+pageX + " "+ "頁面Y軸坐標為:"+pageY);});
17javascript 事件派發(fā) dispathEvent單個派發(fā)事件
//document上綁定自定義事件onDataRes document.addEventListener("onDataRes", function (event) { alert(event.eventType); }, false ); var obj = document.getElementById("obj"); //obj元素上綁定click事件 obj.addEventListener("click", function (event) { alert(event.eventType); }, false ); //調(diào)用document對象的 createEvent 方法得到一個event的對象實例。 var event = document.createEvent("HTMLEvents"); // initEvent接受3個參數(shù): // 事件類型,是否冒泡,是否阻止瀏覽器的默認行為 event.initEvent("onDataRes", true, true); event.eventType = "message"; //觸發(fā)document上綁定的自定義事件onDataRes document.dispatchEvent(event);*/ /*var event1 = document.createEvent("HTMLEvents"); event1.initEvent("click", true, true); event1.eventType = "message"; //觸發(fā)obj元素上綁定click事件 document.getElementById("test").onclick = function () { obj.dispatchEvent(event1); };支持ie瀏覽器通用派發(fā)事件觸發(fā)
var dispatch = function(ele, evt) { if(document.addEventListener){ var event = document.createEvent("HTMLEvents"); event.initEvent(evt, true, true); document.dispatchEvent(event); }else { var event = document.createEventObject(); document.fireEvent("on"+evt, event) } } var li = document.getElementById("li"); document.addEventListener("onDataRes", function (event) { alert(event.eventType); }, false ); dispatch(li, "onDataRes")18,事件代理對比1.方法一:循環(huán)綁定
2.方法2 ,事件代理,綁定到ul元素上
1.遞歸解決
let obj = {name:"fiona-SUN"}; let copyFunc = (originObj) => { let copyObj = {}; for(let key in originObj){ copyObj[key] = originObj[key]; } return copyObj; }; let copyObj = copyFunc(obj); copyObj.name = "fiona"; console.log(copyObj.name); // "fiona" console.log(obj.name); // "fiona-SUN"方法二:通過JSON去解析
let obj = {name:"fiona-SUN"}; let copyObj = JSON.parse(JSON.stringify(obj)); copyObj.name = "fiona"; console.log(copyObj.name); // "fiona" console.log(obj.name); // "fiona-SUN"方法三:es6之展開Object.assign(拷貝obj的內(nèi)容到一個新的堆內(nèi)存,copyObj存儲新內(nèi)存的引用)
let obj = {name:"fiona-SUN"}; let copyObj = Object.assign({}, obj); copyObj.name = "fiona"; console.log(copyObj.name); // "fiona" console.log(obj.name); // "fiona-SUN"方法四:es6之展開運算符(僅用于數(shù)組)
let arr = [1,2,3]; let copyArr = [...obj]; copyArr[2] = 0; console.log(copyArr[2]); // 0 console.log(arr[2]); // 220, JS獲取對象最大層級數(shù)var res = 1; function loopGetLevel(obj, level) { var level = level ? level : 1; if (typeof obj === "object") { for (var key in obj) { if (typeof obj[key] === "object") { loopGetLevel(obj[key], level + 1); } else { res = level + 1 > res ? level + 1 : res; } } } else { res = level > res ? level : res; } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92344.html
摘要:編程藝術第版筆記第章簡史的起源是公司和公司合作開發(fā)的。第章文檔對象用戶定義對象內(nèi)建對象如等。宿主對象由瀏覽器提供的對象。偽協(xié)議非標準化的協(xié)議。結(jié)構(gòu)樣式行為要分離。壓縮腳本第章案例研究圖片庫改進版共享事件函數(shù)需要多個函數(shù)都在頁面加載時執(zhí)行。 《JavaScript DOM 編程藝術(第2版)》筆記 第1章:JavaScript 簡史 JavaScript 的起源 JavaScript 是...
摘要:編程藝術第版筆記第章簡史的起源是公司和公司合作開發(fā)的。第章文檔對象用戶定義對象內(nèi)建對象如等。宿主對象由瀏覽器提供的對象。偽協(xié)議非標準化的協(xié)議。結(jié)構(gòu)樣式行為要分離。壓縮腳本第章案例研究圖片庫改進版共享事件函數(shù)需要多個函數(shù)都在頁面加載時執(zhí)行。 《JavaScript DOM 編程藝術(第2版)》筆記 第1章:JavaScript 簡史 JavaScript 的起源 JavaScript 是...
摘要:編程藝術第版筆記第章簡史的起源是公司和公司合作開發(fā)的。第章文檔對象用戶定義對象內(nèi)建對象如等。宿主對象由瀏覽器提供的對象。偽協(xié)議非標準化的協(xié)議。結(jié)構(gòu)樣式行為要分離。壓縮腳本第章案例研究圖片庫改進版共享事件函數(shù)需要多個函數(shù)都在頁面加載時執(zhí)行。 《JavaScript DOM 編程藝術(第2版)》筆記 第1章:JavaScript 簡史 JavaScript 的起源 JavaScript 是...
摘要:從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章,涉及到優(yōu)化等多個方面。 TypeScript 入門教程 從 JavaScript 程序員的角度總結(jié)思考,循序漸進的理解 TypeScript。 網(wǎng)絡基礎知識之 HTTP 協(xié)議 詳細介紹 HTT...
摘要:子類繼承自父類的方法可以重新定義即覆寫,被調(diào)用時會使用子類定義的方法什么是多態(tài)青蛙是一個對象,金魚也是一個對象,青蛙會跳,金魚會游,定義好對象及其方法后,我們能用青蛙對象調(diào)用跳這個方法,也能用金魚對象調(diào)用游這個方法。 1、專用術語 面向?qū)ο缶幊坛绦蛟O計簡稱:OOP,在面向?qū)ο缶幊讨谐S玫降母拍钣校簩ο蟆傩浴⒎椒ā㈩悺⒎庋b、聚合、重用與繼承、多態(tài)。 2、什么是對象? 面向?qū)ο缶幊痰闹攸c...
摘要:異步編程解決方案筆記最近讀了樸靈老師的深入淺出中異步編程一章,并參考了一些有趣的文章。另外回調(diào)函數(shù)中的也失去了意義,這會使我們的程序必須依賴于副作用。 JavaScript 異步編程解決方案筆記 最近讀了樸靈老師的《深入淺出NodeJS》中《異步編程》一章,并參考了一些有趣的文章。在此做個筆記,記錄并鞏固學到的知識。 JavaScript異步編程的兩個核心難點 異步I/O、事件驅(qū)動使得...
閱讀 3043·2021-11-25 09:43
閱讀 1626·2021-11-24 11:15
閱讀 2359·2021-11-22 15:25
閱讀 3501·2021-11-11 16:55
閱讀 3240·2021-11-04 16:10
閱讀 2773·2021-09-14 18:02
閱讀 1685·2021-09-10 10:50
閱讀 1070·2019-08-29 15:39