《前端面試江湖》

//《前端面試江湖》,2016年買給本身的生日禮物

//8.如何獲取瀏覽器URL中查詢字符串的參數
function getQuery(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)
        return unescape(r[2]);
    return null;
}
//9.如何實現一個刪除字符串左邊空白字符的方法?
//^表示開始,'\s'表示空白字符,'/g'表示全局匹配
function leftTrim(str) {
    return str.replace(/^\s*/g, "");
}

//10.What is the data type that JavaScript's typeof returns?
//undefined,boolean,string,number,object,function

//13.實現字符串反轉主要是把字符串從末尾開始的每個元素截取後,再從新組成一個新的字符串
function revert(str) {
    var temp = ""; //remember to initialize
    for (i = str.length - 1; i > 0; i--) {
        temp += str[i];
    }
    return temp;
}
//18.如何檢測一個變量是一個string類型?請寫出函數實現
function testStr(str) {
    //if((typeof str)=="string")
    if ((typeof str) == "string" || str.constructor == String)
        return true;
    else
        return false;
}

//constructor vs prototype

function Person(name) {
    this.name = name;
    this.showMe = function() {
        alert(this.name);
    }
};

var one = new Person('js');

console.log(one.prototype) //undefined
console.log(typeof Person.prototype); //object
console.log(Person.prototype.constructor); //function Person(name) {...};

//20.有一個字符串abcd-ef-ghi,請用JavaScript將它處理成ghi&ef&abcd.
var str = "abcd-ef-ghi";
var temp = str.split('-');
var result = temp.reverse().join('&');


//請實現鼠標單擊頁面中的任意標籤,alert該😊的名稱
document.onclick = function(e) {
    var e = e || window.event;
    var src = e["target"] || e["srcElement"];
    alert(src.tagName.toLowerCase());
}

//33.下面的javascript代碼段中,alert的結果是多少?
var a = 1;

function f() {
    //alert(a);
    var a = 2;
}
f(); //undefined

//34.結合<span id="outer">12<span id="inner">text</span></span>,談談innerHTML、outerHTML的區別
var childNodes = document.getElementById('inner_outer').getElementsByTagName("p");
//alert(childNodes[0]);
childNodes[0].innerHTML = document.getElementById("outer").innerHTML;
childNodes[1].innerHTML = document.getElementById("outer").outerHTML;
// alert("innerHTML:"+document.getElementById("outer").innerHTML);
// alert("outerHTML:"+document.getElementById("outer").outerHTML);
// alert("innerText:"+document.getElementById("outer").innerText);
// alert("outerText:"+document.getElementById("outer").outerText);

//42.找出id爲「newsList」的HTML元素下的第一個節點,並將其移動到「newsList」的最後
var element = document.getElementById("newsList")
var temp = element.getElementsByTagName("p")[0];
element.removeChild(temp);
element.appendChild(temp);

//書中答案,貌似不可行
// var ul=document.getElementById("newsList").childNodes;
// alert(ul.firstChild.value);
// ul.appendChild(ul.firstChild);

//複製節點
var copy = temp.cloneNode(true);
element.appendChild(copy);

//46.insertAfter()
//DOM沒有提供insertAfter()方法
function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        // 若是最後的節點是目標元素,則直接添加。由於默認是最後
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
        //若是不是,則插入在目標元素的下一個兄弟節點 的前面。也就是目標元素的後面
    }
}
var newElement = document.createElement("p");
var textNode = document.createTextNode("Hi June, just hold on!");
newElement.appendChild(textNode);
document.createAttribute("class");
//insertAfter(newElement,element);
var parent = element.parentNode;
parent.insertBefore(newElement, element);

//48.實現輸出document對象中的全部成員的名稱和類型
// for(key in document){
//     document.write(key+="=="+document[key]+"<br />");
// }

//49.找出全部className包含text的標籤<li>,並將它們的背景顏色設置爲黃色
var list = document.getElementsByTagName("li");
for (i = 0; i < list.length; i++) {
    var temp = list[i].getAttribute("class");
    if (temp != null && temp.indexOf("text") != -1) {
        list[i].style.backgroundColor = "yellow";
    }
}

//65.請編寫代碼擴展JavaScript的string對象,讓其擁有一個新的方法killpoint()來刪除字符串中的全部英文句號「.」,請用盡可能少的代碼實現。

String.prototype.killpoint = function() {
    return this.replace(/\./g, '');
}

//66.對string對象進行擴展,使其具備刪除先後空格的方法
String.prototype.bothtrim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

//67
//獲取字符數組
String.prototype.toCharArray = function() {
    return this.split("");
}

//獲取n個相同的字符串
String.prototype.repeat = function(num) {
    var tempArr = [];
    for (var i = 0; i < num; i++) {
        tempArr.push(this);
    }
    return tempArr.join("");
}

//字符串逆序 (數組逆序有reverse方法)
String.prototype.reverse = function() {
    return this.split("").reverse().join("");
}

//測試是不是數字
String.prototype.isNumeric = function() {
    var tempFloat = parseFloat(this);
    if (isNaN(tempFloat))
        return false;
    return tempFloat == this;
}

//測試是不是整數
String.prototype.isInt = function() {
    if (this == "NaN")
        return false;
    return this == parseInt(this);
}

//合併多個空白爲一個空白
String.prototype.oneSpace = function() {
    //* 匹配前面元字符0次或屢次;+ 匹配前面元字符1次或屢次;? 匹配前面元字符0次或1次
    //此處應該用+,表示至少有一個空白
    return this.replace(/\s+/g, ' ');
}

//保留數字
String.prototype.leftNum = function() {
    return this.replace(/[^\d]+/g, "");
}

//保留字母
String.prototype.leftChar = function() {
    return this.replace(/[^a-zA-Z]+/g, "");
}

//保留中文
String.prototype.getCn = function() {
    return this.replace(/[^\u4e00-\u9fa5\uf900-\ufa2d]/g, "");
}

//獲得字節長度,[^\x00-\xff]匹配雙子節字符,通常就像漢字
String.prototype.getBinLen = function() {
    return this.replace(/[^\x00-\xff]/g, "--").length;
}

//從左截取指定長度到字符串
String.prototype.left = function(n) {
    return this.slice(0, n);
}

//從右截取指定長度到字符串
//0,1,2,3,4,5
String.prototype.right = function(n) {
    return this.slice(this.length - n);
}

//21頁html編碼,unicode轉化

//請用JavaScript實現獲取5個0-99之間不相同的隨機數
function getRandomArr() {
    var randomArr = new Array();
    for (var i = 0; i < 5; i++) {
        var temp = Math.floor(Math.random() * 100);
        if (randomArr.indexOf(temp)) {
            randomArr.push(temp);
        }
    }
    return randomArr;
}

//求兩數最大公約數,Highest Common Factor(HCF)
function hcf(number1, number2) {
    for (var i = Math.min(number1, number2); i > 0; i--) {
        if (number1 % i == 0 && number2 % i == 0)
            return i;
    }
}

//獲取一個1-50的隨機不重複數組
function randomNum() {
    var arr1 = [];
    var number = 50;
    for (var i = 1; i <= number; i++) {
        arr1.push(i); //先把1-50有序地放入數組
    }
    var arr2 = [];
    for (var j = number; j > 0; j--) {
        //Math.random是爲了獲取剩餘未放入arr2的元素個數,[0,50)
        //Math.floor是向下取整的,因此index返回[0,49]
        var index = Math.floor(Math.random() * j);
        //arr1.splice(index,1)表明從arr1數組中刪除index這一項,並返回被刪的元素,同時arr1會被刪除該項
        arr2.push(arr1.splice(index, 1));
    }
    return arr2;
}

//請編寫儘量簡潔的javascript代碼,找到在第一個數組array1中出現,而在第二個數組array2中沒有出現的數字
//indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
//i: 1,23,45
//ii: 5,6,7,22,24,46
function getUniqueNum(array1, array2) {
    var str = array2.join("-"); //5-6-7-22-24-46
    var result = [];
    for (var i = 0; i < array1.length - 1; i++) {
        if (str.indexOf(array1[i]) == -1)
            result.push(array1[i]);
    }
    return result;
}

//編寫函數,用於過濾一個數組內重複的元素,並用這些元素重構一個新數組,新數組內也不能有重複元素
//var arrNum=[1,4,1,1,3,3,4,6,7,8,3,7,0,11,22,22];
//[5,4,1,1,3,3,4,6,7,8,3,7,0,11,22,23,23,23,25,35,4,5]
function rmRepeat(arrNum) {
    var str = "," + arrNum.join(',') + ","; //首尾加",",防止首尾元素控制不到
    var newArr = [];
    for (var i = 0; i < arrNum.length; i++) {
        //",1,"這樣的分割,防止",11,"這樣的元素也被"arrNum[i]==1"剔除了
        if (str.indexOf("," + arrNum[i] + ",") != -1) {
            newArr[newArr.length] = arrNum[i];
        }
        while (str.indexOf("," + arrNum[i] + ",") != -1) {
            str = str.replace("," + arrNum[i] + ",", ","); //遍歷str,刪除其中跟arrNum[i]項相同的項
        }
    }
    return newArr; //newArr只放了arrNum中不一樣項
    //結果應爲[5,4,1,3,6,7,8,0,11,22,23,25,35]
}

//現有一個數組(元素爲數字,而且有可能重複),請給Array.prototype增長一個方法(方法名自取),該方法能去掉數組中所有最大和最小的數字
Array.prototype.rmMaxMin = function() {
    var min = Math.min.apply(null, this); //查找最小數字
    var max = Math.max.apply(null, this); //查找最大數字
    for (var i = 0; i < this.length; i++) {
        if (min == this[i] || max == this[i]) {
            this.splice(i, 1);
        }
    }
    return this;
}

//在以下數組的第二個元素後插入一個元素3
var arr = [1, 2, 4, 5, 6];
arr.splice(1, 0, 3);

//將數組["a","b"],["c","d"]合併,而且刪除第二個元素
var arr1 = ["a", "b"];
var arr2 = ["c", "d"];
var str = arr1.join("-") + "-" + arr2.join("-"); //a-b-c-d
var mergerArr = str.split("-");
mergerArr.splice(1, 1);

//請寫出以下JavaScript代碼片斷的運行結果
var my_arr = [];
for (var i = 0; i <= 5; i++) {
    my_arr.push(i * (i + 1));
}
var val = 0;
while (val = my_arr.pop()) {
    console.log(val + " ");
}

//請寫一個函數removeVoid(arr),刪除該數組中值爲「null,undefined」的項,返回原數組。
//removeVoid([null,1,"334","null","undefined",undefined])
function removeVoid(arr) {
    for (var i = 0; i < arr.length; i++) {
        if (!arr[i] || arr[i] == "" || typeof(arr[i]) == "undefined") {
            arr.splice(i, 1);
        }
    }
    return arr;
}

//105.數組pop(),push(),shift(),unshift()  -長點(push,unshift)的是長度,短點的是值
/*
pop():從集合中把最後一個元素刪除,並返回這個元素的值;
push():在集合中添加元素,並返回新的長度;
unshift():在集合開頭添加一個或多個元素,並返回新的長度;
shift():從集合中把第一個元素刪除,並返回這個元素的值
*/

//109.請分別描述JavaScript中prototype,constructor,this,arguement的含義
/*
prototype:prototype的行爲相似於c++中的靜態域,將一個屬性添加微prototype的屬性,這個屬性將被該類型建立的全部實例所共享,可是這種共享是隻讀懂。換句話說,對象在讀取某個屬性時,老是先檢查自身域懂屬性表,若是有這個屬性,則會返回這個屬性,不然就會讀取prototype域,返回prototype域上的屬性。另外,JavaScript容許prototype域引用任何類型的對象。所以,若是對prototype域懂讀取依然沒有找到這個屬性,則JavaScript將遞歸地查找prototype域所指向對象的prototype域,直到這個對象的prototype域爲它自己或者出現循環爲止;

constructor:即構造函數,在對象建立或者實例化時被調用的方法。一般使用該方法來初始化數據成員和所需資源。構造器constructor不能被繼承,所以不能重寫overriding,但能夠被重載overloading。對象的constructor屬性返回建立該對象的函數的引用。

this:在JavaScript中,this一般指向的是正在執行的函數自己,或者是志向該函數所屬的對象(運行時)。當咱們在頁面中定義函數doSomething()時,它當owner是頁面,或者是JavaScript中的window對象(或global對象)。對於一個onclick屬性,則爲它所屬的HTML元素所擁有,this應該指向該HTML元素。

argument:全部的函數都有屬於本身的一個arguments對象,它包括了函數所要調用的參數。它不是一個數組,若是用typeof arguements,那麼返回的是object。雖然咱們能夠用調用數據的方法來調用arguments。好比length、index方法。
*/

//110.寫一個函數,參數爲一個元素,返回指定元素的第一個子元素,要求兼容IE6/7/8,FireFox,Safari,Chrome,函數越簡單越好。
function getFirst(el) {
    var nodes = el.children; //獲取元素下全部的子節點
    return nodes.length != 0 ? nodes[0] : null;
}

//js的預編譯,變量提高
var b = 1;

function c() {
    console.log(b);
    if (!b) {
        var b = 2;
    }
    console.log(b);
}
c(); //undefined    2

//拓展,變量提高
(function() {
    a = 5; //因爲下邊的var a=10;致使變量提高,a預編譯,是局部變量
    console.log(window.a); //無聲明此全局變量,故是undefined
    var a = 10;
    console.log(a);
})(); //undefined   10

//下面JavaScript代碼的運算結果是2仍是undefined?請闡述緣由。
function show() {
    var b = 1;
    a = ++b;
    //return a;
}
show();
console.log(a); //2

//117.請寫一個函數closest(element,className),傳入DOM對象及CSS名稱,或者標籤名稱,查找到離它自身最近到父節點
function closest(element, className) {
    var parent = null;
    if (element) {
        if (element.className == className)
            parent = element.parentNode;
    }
    return parent;
}

//118.請寫一個函數getParameters()來獲取瀏覽器地址欄url所有參數,並返回一個JSON串。
function getParameters(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&])*(&|$)");
    var str = window.location.search.substr(1).match(reg);
    console.log(window.location.href);
    console.log(window.location.search);
    console.log(window.location.search.substr(1));
    console.log(window.location.search.substr(1).match(reg));
    if (str != null)
        return decodeURI(str[2]);
    else return null;
}

//119.請寫一個函數來驗證電子郵件到格式是否正確。
function checkEmail(mail) {
    var reg = new RegExp("^[a-zA-Z0-9_.]+@[a-zA-Z0-9_]+.[a-zA-Z0-9_]+$");
    if (mail.match(reg))
        return true;
    else
        return false;
}

//已知對象var obj={....},但對象的屬性未知,如何對該對象的屬性進行遍歷?
function allProperties(obj) {
    //用來保存全部的屬性名稱和值
    var props = "";
    //開始遍歷
    for (var p in obj) {
        if (obj[p] == "function") {
            obj[p]();
        } else {
            //p爲屬性值,obj[p]爲對應屬性的值
            props += p + "=" + obj[p]+
            "\t";

        }
    }
    //最後顯示全部的屬性
    alert(props);
}

//127. 請使用JavaScript語言建立一個對象來表明一個學生,學生主要有如下屬性:
//姓名Jeriy(字符串類型)/年齡22(整型)/三個朋友(Li,Chen,Zhang,數組)/會踢足球(類型爲方法,彈出'football'字符串便可),並調用Jeriy踢足球(彈出football字符)
function xs(name, age, friend) {
    this.name = name;
    this.age = age;
    this.friend = friend;
}
xs.prototype.play = function() {
    alert('football');
}
var s = new xs("Jeriy", 22, ["Li", "Chen", "Zhang"]);
s.play();

//129.編寫一個函數,去掉數組的重複元素
//[1,1,1,2,3,4,2,5,3,4,1]
//indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
function unique(arr) {
    var temp = new Array(); //存放惟一數的數組
    var str = "," + arr.join(",") + ","; //",1,1,1,2,3,4,2,5,3,4,1,"
    for (var i = arr.length - 1; i >= 0; i--) {
        if (str.indexOf("," + arr[i] + ",") != -1) {
            //找到arr[i]在str中存在後,push進數組,同時刪除str中相應的值
            temp.push(arr[i]);
            //注意此處不添加右邊逗號,防止出現「,2,2,」這種狀況,new RegExp(replaceStr,'g')只會匹配到左邊或者右邊那個',2,',致使有殘留,若用while循環遍歷則可用加右逗號的形式來作匹配
            var replaceStr = "," + arr[i];
            str = str.replace(new RegExp(replaceStr, 'g'), ",");
        }
    }
    return temp;
}

//130.如何建立一個對象
/*
能夠利用JavaScript的語法特徵,以類的思想來建立對象
(1)原始方法,代碼以下:
這種方式的問題是若是須要屢次建立對象,那麼須要重複代碼屢次,不利於代碼的複用
*/
var obj=new Object();
obj.name="Koji";
obj.age=21;
obj.showName=function(){
    alert(this.name);
}
obj.showAge=function(){
    alert(this.age);
}
obj.showName();
obj.showAge();

/*
(2)工廠方法,這種方法提升了代碼重用率
*/
function createObj(){
    var obj=new Object();
    obj.name="Koji";
    obj.age=21;
    obj.showName=function(){
        alert(this.name);
    }
    obj.showAge=function(){
        alert(this.age);
    }
}
var obj1=createObj();
var obj2=createObj();
obj1.showName();
obj2.showAge();

/*
還能夠改變工廠方法,傳入參數賦值.
但此方式雖然能夠提升代碼的重用率,但和麪相對象中類的概念相比,有一個很大的缺陷。面相對象強調對象的屬性私有,但對象的方法是共享的。而下述方法的工廠方法中建立對象時,要爲每一個對象建立各自私有的方法。同時,因爲每一個對象都建立相同的方法,因此很浪費內存。
*/
function createObj(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.showName=function(){
        alert(this.name);
    }
    obj.showAge=function(){
        alert(this.age);
    }
    return obj;
}
var obj1=createObj("Koji",22);
var obj2=createObj("Luo",21);
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();

//改進代碼:
/*
下面經過定義幾個函數對象,解決了不一樣對象持有函數對象的私有問題。如今全部對象的方法都持有上面兩個函數的引用。但這麼一來,對象的函數又和對象相互獨立了,這和麪向對象中特定方法屬於特定類的思想不符合。
*/
function createObj(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.showName=showName;
    obj.showAge=showAge;
    return obj;
}
function showName(){
    alert(this.name);
}
function showAge(){
    alert(this.age);
}
var obj1=createObj("Koji",22);
var obj2=createObj("Luo",21);
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();

/*
(3)構造函數方式,定義一個構造函數,用來生成對應的對象,能夠類比java中的構造函數
*/
function Person(name,age){
    this.name=name;
    this.age=age;
    this.showName=function(){
        alert(this.name);
    }
    this.showAge=function(){
        alert(this.age);
    }
    var obj1=new Person("Koji",22);
    var obj2=new Person("Luo",21);
    obj1.showName();
    obj1.showAge();
    obj2.showName();
    obj2.showAge();
}

/*
(4)原型方法
*/
function Person(){//定義了一個空構造函數,且不能傳遞參數
    //將全部的屬性的方法都賦予給prototype屬性
    Person.prototype.name="Koji";
    Person.prototype.age=22;
    Person.prototype.showName=function(){
        alert(this.name);
    }
    Person.prototype.showAge=function(){
        alert(this.age);
    }
    var obj1=new Person();
    var obj2=new Person();
    obj1.showName();
    obj1.showAge();
    obj2.showName();
    obj2.showAge();
}
/*
當生成Person對象時,prototype的屬性都賦值給了新的對象。那麼屬性和方法是共享的。首先,該方法的問題是構造函數不能傳遞參數,每一個新生成的對象都有默認值。其次,方法共享沒有任何問題。可是,當屬性是可改變狀態的屬性時,屬性共享就有問題了。
*/
function Person(){)//定義了一個空構造函數,且不能傳遞參數
    Person.prototype.age=22;
    Person.prototype.array=new Array("Koji","Luo");
    Person.prototype.showAge=function(){
        alert(this.age);
    }
    Person.prototype.showArray=function(){
        alert(this.array);
    }
    var obj1=new Person();
    var obj2=new Person();
    obj1.array.push("Kyo");
    obj1.showArray();//Koji,Luo,Kyo
    obj2.showArray();//Koji,Luo,Kyo

/*
(5)混合的構造函數/原型方式
屬性私有後,改變各自的屬性不會影響別的對象。同時,方法也是由各個對象共享的。在語義上符合面向對象編程的要求。
*/
function Person(name,age){
    this.name=name;
    this.age=age;
    this.array=new Array("Koji","Luo");
}
Person.prototype.showName=function(){
    alert(this.name);
}
Person.prototype.showArray=function(){
    alert(this.name);
}
var obj1=new Person("Koji",22);
var obj2=new Person("Luo",21);
obj1.array.push("Kyo");
obj1.showArray();//Koji,Luo,Kyo
obj1.showName();//Koji
obj2.showArray();//Koji,Luo
obj2.showName();//Luo

/*
(6)動態原型方法
*/
function Person(name,age){
    this.name=name;
    this.age=age;
    this.array=new Array("Koji","Luo");
    if(typeof Person._initialized=="undefined"){
        Person.prototype.showName=function(){
            alert(this.name);
        }
        Person.prototype.showArray=function(){
            alert(this.array);
        }
        Person._initialized=true;//設置爲true,沒必要再爲prototype添加方法
    }
}
var obj1=new Person("Koji",22);
var obj2=new Person("Luo",21);
obj1.array.push("Kyo");
obj1.showArray();//Koji,Luo,Kyo
obj1.showName();//Koji
obj2.showArray();//Koji,Luo
obj2.showName();//Luo

132.什麼是js的原型模型及原型鏈?javascript

原型模型的主要思想是,先借用已有系統做爲原型模型,經過不斷改進「樣品」,使得最後的產品就是用戶所須要的。原型模型經過向用戶提供原型來獲取用戶的反饋,使開發出的軟件可以真正反映用戶的需求。原型模型經過向用戶提供原型來獲取用戶的反饋,使開發出的軟件可以真正反映用戶的需求。同時,原型模型採用逐步求精的方法完善原型,使得原型可以快速開發,避免了像瀑布模型同樣在冗長的開發過程當中難以對用戶的反饋作出快速開發,避免了像瀑布模型同樣在冗長的開發過程當中難以對用戶的反饋作出快速的響應。相對瀑布模型而言,原型模型更符合人們開發軟件的習慣,是目前較流行的一種實用軟件生存期模型。html

 

今年生日送給本身的禮物之一,想爲了年尾的面試刷題用的,不過發現這書錯誤的地方真的很多,纔看25頁,就已經找出了7處錯誤左右。。。。試圖聯繫做者去勘誤,竟然還聯繫不上,大寫的尷尬。。。。anyway,做爲刷題來鞏固知識點仍是不錯的。前端

我會把須要寫寫調適調適的整理出來,也放github: https://github.com/yifon/WebLearning.git  ,沒什麼規則,純屬本身整理了好看,等有時間了這書刷完了再把本身確認書中絕對有錯的地方整理修正下。java

相關文章
相關標籤/搜索