JavaScript基礎知識整理（1）

macg0406 發布于2019-08-21 16:22 / 763人閱讀

摘要：從這段描述可以得到以下對象小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了，一看到人就會每隔半秒叫一聲地不停叫喚。將一個函數的對象上下文從初始的上下文改變為由指定的新對象。

1、JavaScript數據類型有哪些？

基本數據類型：Number、String、Boolean、Null、Undefined

引用數據類型：Object（Array、Date、RegExp、Function）

那么問題來了，如何判斷某變量是否為數組數據類型？

判斷其是否具有“數組性質”，如slice()方法。可自己給該變量定義slice方法，故有時會失效

obj instanceof Array 在某些IE版本中不正確

obj.constructor === Array

在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法如下：

function isArrayFn(o) {
    if(typeof Array.isArray === "function") {
        return Array.isArray(o);
    } else {
        return Object.prototype.toString.call(o) === "[object Array]"
    }
}
var o1 = [1,2,3,4,5];
var o2 = {a: 1, b: 2};
var o3 = [{a: 1, b: 2}];
isArrayFn(o1);    // true
isArrayFn(o2);    // false
isArrayFn(o3);    // true

2、JavaScript中事件流模型有哪些？

“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播

“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的

“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡

3、什么是Ajax和JSON，它們的優缺點。

Ajax是異步 JavaScript 和 XML，用于在Web頁面中實現異步數據交互。

優點：

　- 可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量

　- 避免用戶不斷刷新或者跳轉頁面，提高用戶體驗

缺點：

　- 對搜索引擎不友好（

　- 要實現ajax下的前后退功能成本較大

　- 可能造成請求數的增加

　- 跨域問題限制

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優點：輕量級、易于人的閱讀和編寫，便于機器（JavaScript）解析，支持復合數據類型（數組、對象、字符串、數字）

4、已知有字符串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”

var str = "get-element-by-id";
var arr = str.split("-");
for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
}
var res = arr.join("");
console.log(res)

5、var numberArray = [3,1,6,7,4,2];

實現對該數組的倒排

實現對該數組的降序排列

var numberArray = [3,1,6,7,4,2];
console.log(numberArray.reverse()); // 2,4,7,6,1,3

numberArray.sort(function(a, b) {
    return b - a;
})
console.log(numberArray) // 7,6,4,3,2,1

6、為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將<, >, &, “進行轉義

function escapeHtml(str) {
    return str.replace("/[<>"&]/g", function(match) {
        switch(match) {
            case "<":
                return "<";
                break;
            case ">":
                return ">";
                break;
            case "":
                return """;
                break;
            case "&":
                return  "&"
                break;
        }
    });
}

7、用js實現隨機選取10–100之間的10個數字，存入一個數組，并排序。

var iArray = [];

function getRandom(istart, iend) {
    var iChoice = iend - istart + 1;
    return Math.floor(Math.random() * iChoice + istart);
}

for (var i = 0; i < 10; i++) {
    iArray.push(getRandom(10, 100));
}

console.log(iArray.sort());

8、有這樣一個URL：http://item.taobao.com/item.h...，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

function getUrlParam(url) {
    var result = {};
    url = url.split("?")[1];
    var map = url.split("&");
    for (var i = 0; i < map.length; i++) {
        result[map[i].split("=")[0]] = map[i].split("=")[1];
    }
    return result;
}
var url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
var res = getUrlParam(url);
console.log(res);// {a: "1", b: "2", c: "", d: "xxx", e: undefined}

9、正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什么不同？匹配郵箱的正則表達式？

當使用RegExp()構造函數的時候，不僅需要轉義引號（即”表示”），并且還需要雙反斜杠（即表示一個）。使用正則表達字面量的效率更高。

10、如何循環輸出1、2、3？

for (var i = 0; i < 3; i++) {
    setTimeout((function() {
        console.log(i)
    })(i))
}

11、寫一個function，清除字符串前后的空格。（兼容所有瀏覽器）

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^s+/g, "").replace(/s+$/g, "");
    }
}
var str = " this is a test string ";
alert(str.trim() == "this is a test string") // true

12、實現一個函數clone，可以對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值復制

考察點1：對于基本數據類型和引用數據類型在內存中存放的是值還是指針這一區別是否清楚

考察點2：是否知道如何判斷一個變量是什么類型的

考察點3：遞歸算法的設計

function clone (obj) {
    var res;
    if (obj instanceof Array) {
        res = [];
        var i = obj.length;
        while (i--) {
            res[i] = clone(obj[i]);
        }
        return res;
    }
    else if (obj instanceof Object) {
        res = {};
        for (var k in obj) {
            res[k] = clone(obj[k]);
        }
        return res;
    }
    else {
        return obj;
    }
}

13、小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下對象：

function Dog () {
    this.wow = function () {
        console.log("wow")
    }
    this.yelp = function () {
        this.wow();
    }
}

小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了(MadDog)，一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用代碼來實。（繼承，原型，setInterval）

function MadDog () {
    this.yelp = function () {
        var self = this;
        setInterval(function () {
            self.wow();
        }, 500);
    }
}

MadDog.prototype = new Dog();
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

14、下面這個ul，如何點擊每一列的時候alert其index?（閉包）


    1
    2
    3


// 方法一
var lis = document.getElementById("test").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = (function (a) {
        return function () {
            alert(a)
        }
    })(i);
}

// 方法二
var lis = document.getElementById("test").getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    (function (i) {
        lis[i].addEventListener("click", function () {
            alert(i)
        })
    })(i)
}

15、給String對象添加一個方法，傳入一個string類型的參數，然后將string的每個字符間價格空格返回，例如：

addSpace(“Hello World”) // -> ‘h e l l o  w o r l d’

String.prototype.space = function () {
    return this.split("").join(" ");
}

var str = "hello world";
console.log(str);// hello world
console.log(str.space());// h e l l o   w o r l d

16、定義一個log方法，讓它可以代理console.log的方法。

function log (str) {
    console.log(str);
}

如果需要滿足多個參數？

function log () {
    console.log.apply(this, arguments);
}

log(111,222,333）// 111 222 333

call和apply的區別？

對于apply和call兩者在作用上是相同的，即是調用一個對象的一個方法，以另一個對象替換當前對象。將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

但兩者在參數上有區別的。對于第一個參數意義都一樣，但對第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3]) 。

function Person (name, age) {
    this.name = name;
    this.age = age;
    this.speakname = function () {
        alert(this.name)
    }
    this.speakage = function () {
        alert(this.age)
    }
}

function Man (name, age, sex) {
    Person.call(this, name, age);    // 繼承Person對象 this指向Person
    this.sex = sex;
    this.speaksex = function () {
        alert(this.sex)
    }
}

var person = new Man("ashin", 35, "man");
person.speakname();
person.speakage();
person.speaksex();

17、在Javascript中什么是偽數組？如何將偽數組轉化為標準數組？

偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。

var fakeArray = {0: "a", 1: "b", length: 2}; // 偽數組
var arr = Array.prototype.slice.call(fakeArray);

假設接第八題題干，我們要給每個log方法添加一個”app”前綴，比如’hello world!’ ->’app hello world!’。

function log () {
    var args = Array.prototype.slice.call(arguments);
    args.unshift("hello nodejs");
    console.log.apply(this, args);
}

log(1,2);    // hello nodejs 1 2

18、Javascript中callee和caller的作用？

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）

var result = [];
function fn (n) {
    if (n == 1) {
        result = 1;
    }
    else if (n == 2) {
        result = 1;
    }
    else {
        if (result[n]) {
            return result[n];
        }
        else {
            // arguments.callee 表示 fn()
            result[n] = arguments.callee(n-1) + arguments.callee(n-2);
            return result[n];
        }
    }
}

19、原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的所有元素加載完畢后才能執行。

$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。

function ready (fn) {
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function () {
            // 注銷事件 避免反復觸發
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            fn();// 執行函數
        }, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function () {
            if (readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                fn();
            }
        })
    }
}

20、（設計題）想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS）

給需要拖拽的節點綁定mousedown, mousemove, mouseup事件

mousedown事件觸發后，開始拖拽

mousemove時，需要通過event.clientX和clientY獲取拖拽位置，并實時更新位置

mouseup時，拖拽結束

需要注意瀏覽器邊界的情況

云服務器 GPU云服務器 javascript基礎知識 javascript知識基礎javascript javascript基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88458.html

前端知識點整理——javascript

摘要：如果函數沒有名稱函數表達式，就叫做匿名回調函數。回調函數不一定用于異步，同步阻塞場景下也會用到回調函數。比如說要求在執行完某些操作后執行回調函數。通過標簽訪問跨域的地址，返回一個參數為請求數據的的回調函數，而不再直接是數據。 javascript 作為junior developer,僅僅覺得這些問題經常在我面試的時候被問到，好記性不如爛筆頭，自己整理記錄一遍~~~ 1.javascr...

ermaoL 2019-08-26 11:55 評論0 收藏0
JavaScript易錯知識點整理

摘要：知識點變量作用域上方的函數作用域中聲明并賦值了，且在之上，所以遵循就近原則輸出等于。上方的函數作用域中被重新賦值，未被重新聲明，且位于之下，所以輸出全局作用域中的。上方利用方法進行對象的深拷貝可以避免源對象被篡改的可能。前言本文是我學習JavaScript過程中收集與整理的一些易錯知識點，將分別從變量作用域，類型比較，this指向，函數參數，閉包問題及對象拷貝與賦值這6個方面進行由...

vincent_xyb 2019-08-22 10:46 評論0 收藏0
JavaScript易錯知識點整理

摘要：知識點變量作用域上方的函數作用域中聲明并賦值了，且在之上，所以遵循就近原則輸出等于。上方的函數作用域中被重新賦值，未被重新聲明，且位于之下，所以輸出全局作用域中的。若執行則會輸出。上方利用方法進行對象的深拷貝可以避免源對象被篡改的可能。前言本文是我學習JavaScript過程中收集與整理的一些易錯知識點，將分別從變量作用域，類型比較，this指向，函數參數，閉包問題及對象拷貝與賦值...

2shou 2019-08-21 11:51 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
JavaScript基礎整理之數組(一)

摘要：原文發布在數組應該是日常開發中最常見的數據結構了，雖然常見，但是卻不一定能優雅地處理好，中數組的處理方法很多，各個方法的參數返回值是否修改原數組等也容易記混。原文發布在：http://blog.xiaofeixu.cn/2017... 數組應該是日常開發中最常見的數據結構了，雖然常見，但是卻不一定能優雅地處理好，JavaScript中數組的處理方法很多，各個方法的參數、返回值、是否修...

dingda 2019-08-21 17:04 評論0 收藏0