Interesting JavaScript

時間  2019-11-25
標籤 interesting javascript 欄目 JavaScript 简体版
原文   原文鏈接

做者：ManfredHu
連接：http://www.manfredhu.com/2016/07/07/20-interestingJavascript
聲明：版權全部，轉載請保留本段信息，不然請不要轉載javascript

interesting

1.聲明提高

寫出下面代碼的運行結果css

var a,b;
    (function(){
        console.log(a);
        console.log(b);
        var a=b=3;
        console.log(a);
        console.log(b);
    })();
    console.log(a);
    console.log(b);

A. undefined,undefined,3,3,undefined,3
B. undefined,undefined,3,3,undefined,undefined
C. 0,0,3,3,undefined,undefined
D. undefined,undefined,3,3,0,0html

正確答案：A
解釋：代碼至關於下面這樣的過程java

var a,b;
    (function(){
        var a;
        console.log(a); //undefined
        console.log(b); //undefined
        a=3;
        b=3;
        console.log(a); //3
        console.log(b); //3
    })();
    console.log(a); //undefined
    console.log(b); //3

2.變量定義規則

下面符合一個有效的javascript變量定義規則的是？正則表達式

A. _ t2
B. with
C. a bc
D. 2a數組

正確答案： A
考點：ECMAScript語法
解析：with爲關鍵字，空格不行，數字開頭的不行瀏覽器

3.document.getElementById和document.getElementsByTagName

JavaScript中document.getElementById的返回值的類型和document.getElementsByTagName的返回值類型分別是？閉包

A. Array,NodeList
B. Object, HTMLCollection
C. String,NodeList
D. Function,NodeListapp

正確答案： B
解析：這題可能有爭議，瀏覽器測試代碼以下函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Id與TagName類型檢測</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript"> function checkType(element){ console.log(Object.prototype.toString.call(element)); } checkType(document.getElementById('test')); //[object HTMLDivElement] checkType(document.getElementsByTagName('div')); //[object HTMLCollection] </script>
</body>
</html>

4.if/var

下面關於塊內函數的作法哪些是正確的？
A. if(x){ function foo(){}}
B. if(x){ var function foo(){}}
C. if(x){ foo = function(){}}
D. ECMAScript明確的規範了塊級函數，JavaScript實現了這個規範

正確答案：B
解析：測試報錯

5.hasOwnProperty

下列代碼

var obj={}
    ……
    obj.hasOwnProperty("val");

中hasOwnProperty的做用是？
A. 判斷obj對象是否具備val的屬性
B. 判斷obj對象是否具備val的值
C. 判斷obj的原型對象是否具備val的屬性
D. 判斷obj的原型對象是否具備val的值

正確答案：A
解析：hasOwnProperty()函數用於指示一個對象自身(不包括原型鏈)是否具備指定名稱的屬性。若是有，返回true，不然返回false

6.call和apply

下面有關JavaScript中 call和apply的描述，錯誤的是？

A. call和apply都屬於Function.prototype的方法，因此每一個function實例都有call，apply屬性
B. 二者傳遞的參數不同，call函數第一個參數都是傳入給當前對象的對象，apply不是
C. apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入
D. call傳入的則是直接的參數列表。call方法可將一個函數的對象上下問從出事的上下文改變爲thisObj指定的新對象。

正確答案：B
解析:apply和call都是改變函數內部this指向的方法，掛載在Function.prototype下

7.script標籤

（不定項選擇題）給網頁添加javascript的方式有

A. 使用script標籤，將JavaScript代碼寫到<script></script>之間
B. 添加外部javascript文件
C. 使用行內javascript
D. 使用@import引入javascript文件

正確答案：A，B，C
解析：只有CSS能夠用@import方法，題目其實能夠換成CSS，則所有正確

給網頁添加css的方式有
A. 使用style標籤，將JavaScript代碼寫到<style></style>之間
B. 添加外部css文件
C. 使用行內css
D. 使用@import引入css文件

8.parseInt與map

[「1」, 「2」, 「3」].map(parseInt)的輸出結果是
A. [1,NaN,NaN]
B. [1,2,3]
C. [NaN,NaN,NaN]
D. 發生錯誤

正確答案： A. [1,NaN,NaN]
解析：

  • Array.prototype.map(func(currentValue, index, arrary),thisObj)
    map接受兩個參數, 一個回調函數 callback, 一個回調函數的this值。其中回調函數接受三個參數 currentValue, index, arrary
  • parseInt 只接受兩個兩個參數 string, radix(基數).基數。該值介於 2 ~ 36 之間,若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。若是爲0，則直接輸出字符串

以下的例子來看this的運用和基數的例子：

var obj = {
    value:1
};
["1", "2", "3"].map(function(currentValue, index, arrary){
    console.log(this); //輸出3次obj
},obj);

console.log(parseInt('1', 0)); //1
console.log(parseInt('123', 0)); //123
console.log(parseInt('2', 1)); //NaN
console.log(parseInt('3', 2)); //NaN

當["1", "2", "3"].map(parseInt)的時候，傳入parseInt的參數爲currentValue,index

interesting

9.Function.prototype.name

function foo() { }
var oldName = foo.name;
foo.name = "bar";
console.log([oldName, foo.name]);

A. [‘foo’,’bar’]
B. [‘foo’,’foo’]
C. [‘bar’,’bar’]
D. [‘bar’,’foo’]

答案：B.[‘foo’,’foo’];

函數的name屬性指向函數名，掛載在Function.prototype下，因此不要給函數賦值屬性name哈。而且這個屬性是不可改變的.

因此下面這樣的例子就不要出現了

function foo() {}
foo.name = "bar"; //bad,你竟然真忘了Function.prototype.name是一個不可修改的屬性！！

測試代碼：

console.log(Function.prototype.hasOwnProperty('name')); //true

10.正則test方法的參數問題

var lowerCaseOnly =  /^[a-z]+$/;
[lowerCaseOnly.test(null), lowerCaseOnly.test()]

A. false, true
B. false,true
C. true,true
D. true,false
答案: C.true, true

如題所示，test方法若是參數爲null或者不屑，則默認返回true

11.變量做用域

寫出這段代碼的運行結果

<SCRIPT type="text/javascript"> var bb = 1; function aa(bb) { bb = 2; console.log(bb); }; aa(bb); console.log(bb); </SCRIPT>

正確答案： 2 1

12.+-操做符

以下代碼輸出的結果是什麼：

console.log(1+ "2"+"2");
console.log(1+ +"2"+"2");
console.log("A"- "B"+"2");
console.log("A"- "B"+2);

正確答案：
122 //數字與字符串+則數字默認轉換爲字符串
32 //+號會將字符串2先轉化爲數字，這種也是經常使用的將字符串轉換爲數字的方式
NaN 2
NaN

解析：插播——常見的將字符串轉換爲數字的方法：

  1. parseInt,具體使用請看前面第8題
  2. +"123" 相似這種寫法，好比某個參數不肯定是否是數字能夠這樣 +data.len
  3. Number方法

從帶寬（精簡壓縮後）考慮會用第二種，因此一般會在代碼上大量看到這種寫法

13.null和Object的關係

[typeof null, null instanceof Object]的輸出結果是

正確答案：object, false
解析：
null爲一個空的對象，這個對象存在可是裏面一點東西都沒有，至關於有堆空間可是裏面沒有屬性。而undefined能夠理解爲連堆空間都沒有（至少表現出來是這樣的不是嗎？）
null instanceof Object爲false是由於null連屬性都沒有，更沒有檢測原型鏈的_proto_和prototype了。

14.+運算符優先於?:運算符

var val = ‘smtg’;
console.log(‘Value is ’ + (val === ‘smtg’) ? ‘Something’ : ‘Nothing’);
正確答案： ‘Something’

interesting

15.變量做用域

寫出下面代碼的執行效果
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

正確答案： Goodbye Jack

編譯語法分析後代碼（聲明提高）以下

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name); //Goodbye Jack
    } else {
        console.log('Hello ' + name);
    }
})();

16.

寫出下面題的答案

var END = Math.pow(2, 53);
    var START = END - 100;
    var count = 0;
    for (var i = START; i <= END; i++) {
        count++;
    }
    console.log(count);

正確答案：不會輸出，由於END是最大值了，
解析：在 JS 裏, Math.pow(2, 53) == 9007199254740992 是能夠表示的最大值. 最大值加一仍是最大值. 因此循環不會停

17.浮點數的不許確性

輸出0.1+0.2 === 0.3的結果，並簡單地解釋。
解析：經典的題目，浮點數由於存在偏差，因此不能用===斷定，一般在金額處理的時候會乘以10/100倍來小數部分的數據

18.正則表達式replace的高級用法

寫出答案

"1 2 3".replace(/\d/g, parseInt)

答案：1, NaN, 3
解析：replace() 方法的參數第二個參數能夠是函數而不是字符串。在這種狀況下，每一個匹配都調用該函數，它返回的字符串將做爲替換文本使用。

1.該函數的第一個參數是匹配模式的字符串
2.接下來的參數是與模式中的子表達式匹配的字符串，能夠有 0 個或多個這樣的參數
3.接下來的參數是一個整數，聲明瞭匹配在 stringObject 中出現的位置
4.最後一個參數是 stringObject 自己。

題目中由於沒有子表達式匹配，即()括起來的匹配項，因此傳入parseInt的參數三次分別爲：

parseInt("1", 0) //1，由於當基數爲0時候直接輸出第一個參數
parseInt("2",2) //NaN，由於2進制只有01兩個數字
parseInt("3",4) //3，由於不超過四進制的最大值4

19.getPrototypeOf根據proto獲取類型

function f() {}
    var a = f.prototype, b = Object.getPrototypeOf(f);
    console.log(a === b);

答案：false
解析以下：

function f() {}
var a = f.prototype; //Object
var c = new f();
var b = Object.getPrototypeOf(f); //function
var d = Object.getPrototypeOf(c); //Obejct
console.log(a === b); //false
console.log(d === a); //true

函數的原型是一個對象，而函數的原型會是函數，對象的原型會是對象
題目這裏就是讓你混淆普通函數的原型究竟是什麼？函數仍是對象？
答案是函數，由於普通函數的_proto_指向的是Function.prototype，因此Object.getPrototypeOf拿到的是function

JavaScript Object Layout

你能夠狠狠戳這裏去看我之前寫的15條規則解析JavaScript對象佈局

這裏應該能夠看的很清楚了，函數Foo的prototype是Foo.prototype
而Object.getPrototypeOf拿的是_proto_指向的Function.prototype,因此輸出的是一個function。
而普通對象，如圖的o1,o2，_proto_指向的是Object.prototype

interesting

20.[,]和join

[,,,].join(", ")

答案: 「, , 」
解析：

[,,,].lenth //3
[,,,].join('-') //--

因此這題很明顯了，三個逗號默認忽略最後一個，而後用’-‘會在兩項中間添加鏈接符

21.Function.length和new Function.length

var a = Function.length,
    b = new Function(1,'2234').length;
console.log(a === b);

答案 false
解析：a爲1，b爲0，不相等

22.Math.min()和Math.max()在沒有參數時候的奇葩狀況

var min = Math.min(), max = Math.max()
min < max

答案；false
解析：min爲Infinity，b爲-Infinity，結果是min > max

min() 方法可返回指定的數字中帶有最低值的數字。
Math.min(x,y) 若是沒有參數，則返回 Infinity。若是有某個參數爲 NaN，或是不能轉換成數字的非數字值，則返回 NaN。

max() 方法可返回兩個指定的數中帶有較大的值的那個數。
Math.max(x…) 若是沒有參數，則返回 -Infinity。若是有某個參數爲 NaN，或是不能轉換成數字的非數字值，則返回 NaN。

23.閉包

function aa() {
        console.log("aaa");
        return function(){
            console.log("bbb");
        };
    }
    console.log(aa);
    console.log(aa());
    console.log(aa()());

答案：

function aa() {
    console.log("aaa");
    return function(){console.log("bbb");};
}
aaa
function(){console.log("bbb");};
aaa
bbb
undefined

第一個輸出aa的函數體，你們都懂
第二個執行了aa()，輸出文本"aaa"，同時返回了裏面的匿名函數
第三個在第二步的基礎上執行了匿名函數，最後再輸出一個bbb，最後由於執行函數沒有返回值，返回了undefined

24.類數組（array like)

類數組對象是什麼？說一下你知道的JavaScript裏面類數組對象有哪些，類數組怎麼轉化爲數組？

類數組: 指向對象元素的數字索引下標以及 length 屬性告訴咱們對象的元素個數,可是不具備諸如 push 、 forEach 以及 indexOf 等數組對象具備的方法
常見例子: DOM方法 document.getElementsByClassName() 的返回結果（實際上許多DOM方法的返回值都是類數組）以及特殊變量 arguments

因此一般要有一個轉換的過程，藉助 Array.prototype.slice 能夠實現:

Array.prototype.slice.call(arguments) //arguments轉化爲普通數組

25.構造函數與靜態方法

寫出下面代碼輸出的結果並寫出你的解題思路？

function Foo() {
        getName = function () { console.log (1); };
        return this;
    }
    Foo.getName = function () { console.log (2);};
    Foo.prototype.getName = function () { console.log (3);};
    var getName = function () { console.log (4);};
    function getName() { console.log (5);}

    //請寫出如下輸出結果：
    Foo.getName();
    getName();
    Foo().getName();
    getName();
    new Foo.getName();
    new Foo().getName();
    new new Foo().getName();

答案：

Foo.getName();//2
    getName();//4
    Foo().getName();//1
    getName();//1
    new Foo.getName();//2
    new Foo().getName();//3
    new new Foo().getName();//3

26.典型閉包

下面代碼的運行結果是？

<html>
<head>
    <meta charset="utf-8">
    <title>DOM進階</title>
    <script type="text/javascript"> window.onload=function(){ var buttons=document.getElementsByName('button1'); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ console.log(i); }; } }; </script>
</head>
<body >
    <input type="button" name="button1" value="按鈕1" />
    <input type="button" name="button1" value="按鈕2" />
    <input type="button" name="button1" value="按鈕3" />
    <input type="button" name="button1" value="按鈕4" />
    <input type="button" name="button1" value="按鈕5" />
</body>
</html>

這個錯新手估計會犯，當初的我也是。
閉包，點那個按鈕都是輸出 buttons.length 的值，這裏是5

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程