撩課-Web大前端每天5道面試題-Day5
阿新 • • 發佈:2018-12-06
1.寫一個深度克隆方法(es5)?
/** * 深拷貝 * @param {object}fromObj 拷貝的物件 * @param {object}toObj 目標物件 */ function deepCopyObj2NewObj(fromObj, toObj) { for(var key in fromObj){ // 1. 取出鍵值對 var fromValue = fromObj[key]; // 2. 檢查當前的屬性值是什麼型別 if(!isObj(fromValue)){ // 如果是值型別,那麼就直接拷貝賦值 toObj[key] = fromValue; }else { // 如果是引用型別, // 那麼就再呼叫一次這個方法, // 去內部拷貝這個物件的所有屬性 var tempObj = new fromValue.constructor; console.log(fromValue.constructor); deepCopyObj2NewObj(fromValue, tempObj); toObj[key] = tempObj; } } } /** * 輔助函式, 判斷是否是物件 * @param {object}obj * @returns {boolean}*/ function isObj(obj) { return obj instanceof Object; }
2. es6中let,const,var的區別是什麼?
var :宣告全域性變數; let :宣告塊級變數,即區域性變數, 定義後可以修改; const :用於宣告常量,就是定義後 不能再修改值或者引用值的常量, 也具有塊級作用域
3. 對陣列[1,2,3,8,2,8]進行去重,es5或者es6方法?
es四種方式: Array.prototype.unique1 = function() { // 1. 定義陣列 vartemp = []; // 2. 遍歷當前陣列 for(var i = 0; i < this.length; i++) { // 3.如果當前陣列的第i已經儲存進了臨時陣列, // 那麼跳過,否則把當前項push到臨時數組裡面 if (-1 === temp.indexOf(this[i])) { temp.push(this[i]); } } return temp; }; Array.prototype.unique2 = function() { //1. hash為hash表,r為臨時陣列 var hash = {}, temp=[]; // 2.遍歷當前陣列 for(var i = 0; i < this.length; i++) { // 3. 如果hash表中沒有當前項 if (!hash[this[i]]) { // 4.存入hash表 hash[this[i]] = true; // 5.把當前陣列的當前項 // push到臨時數組裡面 temp.push(this[i]); } } return temp; }; Array.prototype.unique3 = function() { var n = [this[0]]; for(var i = 1; i < this.length; i++){ if (this.indexOf(this[i]) === i) { n.push(this[i]); } } return n; }; Array.prototype.unique4 = function() { this.sort(); var re=[this[0]]; for(var i = 1; i < this.length; i++) { if( this[i] !== re[re.length-1]) { re.push(this[i]); } } return re; }; es6: Array.prototype.unique = Array.prototype.unique || function () { return [...new Set(this)]; };
4. 說說對es6中=>的理解?
箭頭函式相當於匿名函式, 並且簡化了函式定義, 箭頭左邊是引數, 右邊是返回值。 箭頭函式看上去 是匿名函式的一種簡寫, 但實際上,箭頭函式和 匿名函式有個明顯的區別: 箭頭函式內部的this是詞法作用域, 由上下文確定。
5. 點選一個按鈕,發出ajax請求,如何防止使用者在此請求方式返回之前再次點選?
// 點選提交按鈕的時候, // 把這個提交這個處理函式給解綁掉, // 請求完成的時候在繫結回來 function clickHandler(){ $(this).unbind('click', clickHandler); $.ajax({ url : 'url', dataType : 'json', type : 'post', success : function (data) { if (data.success) { //提交成功做跳轉處理 } else { //處理失敗,重新繫結點選事件 $(self).click(clickHandler); } } }); } $('#itlike').click(clickHandler); // 可以點選後讓按鈕不可用, // 如果提交失敗可以再次設定為可用 // 1.讓按鈕不可用 $("#itlike").attr("disabled","disabled"); $.ajax({ url : 'url', dataType : 'json', type : 'post', success : function (data) { if (data.success) { // 提交成功做跳轉處理 } else { // 處理失敗,重新繫結點選事件 // 讓按鈕可用 $("#itlike").removeAttr("disabled"); } } });