Javascript中幾個看起來簡單,卻不一定會做的題

来源:https://www.cnblogs.com/bairuihan/archive/2018/03/25/8647648.html
-Advertisement-
Play Games

Javascript作為前端開發必須掌握的一門語言,因為語言的靈活性,有些知識點看起來簡單,在真正遇到的時候,卻不一定會直接做出來,今天我們就一起來看看幾道題目吧 題目1 var val = 'smtg'; console.log(' Value is' + (val 'smtg') ? 'Some ...


Javascript作為前端開發必須掌握的一門語言,因為語言的靈活性,有些知識點看起來簡單,在真正遇到的時候,卻不一定會直接做出來,今天我們就一起來看看幾道題目吧

題目1

var val = 'smtg';

console.log(' Value is' + (val === 'smtg') ? 'Something' : 'Nothing');

這道題考察的知識點是運算符的優先順序。

首先,小括弧的優先順序是最高的,所以首先會做判斷,val與smtg相等返回true。因此最後這道題等價於判斷是執行下麵的語句1還是語句2.

//語句1 

'Value is' + (true ? 'Something' : 'Nothing');

//語句2

'Value is true' ? 'Something' : 'Nothing';

根據運算符優先順序我們知道,連接元算符+的優先順序要高於條件運算符?的優先順序,因此實際執行的是語句2,所以最後返回的結果是

'Something'.

題目2

我們再來看看下麵這道題。

  var ary = [0,1,2];

  ary[6] = 6;

 var result = ary.filter(function(x){

  return x === undefined; 

});

console.log(result);

這道題考察的時候數組的初始化和filter方法。

第一眼看上去,以為會輸出[undefined,undefined,undefined],但是實際輸出卻是undefined,為什麼會這樣?

這是因為在JavaScript里存在稀疏數組的概念,數組在初始化時,只會對已經確定索引的選項進行初始化,對於不存在索引的選項不進行初始化,通過以下代碼可以確定。

  0 in ary;//true

  1 in ary;//true

  3 in ary;//false     

  4 in ary;//false

  6 in ary;//true 

對數組使用in運算符時,是通過枚舉數組的索引,通過3和4返回false可以知道,ary[3]和ary[4]實際是不存在的,未進行初始化。

我們再來看看 Array.prototype.filter方法和polyfill,註意代碼中標註的地方。

Array.prototype.filter = function(fun /*thisArg*/){

  if(this === void 0 || this === null){

    throw new TypeError();

  }

  var t = Object(this);

  var len = t.length >>> 0;

  if(typeof fun !== 'function'){

    throw new TypeError();

  }

  var res = [];

  var thisArg = arguments.length >=2 ? arguments[1]:void 0;

  for(var i = 0;i<len;i++){

    if(i in t){  //註意這裡,使用的是in運算符

      var val = t[i];

      if(fun.call(thisArg,val,i,t)){

        res.push(val);

      }

    }

  }

  return res;

}

在filter方法源碼中,我發現使用了in運算符,而arg數組沒有對索引為3,4,5的值進行初始化,因此會直接跳過執行,所以最後返回undefined。

 

題3

function caseshow(val){

  switch(val){

    switch(value){

      case 'A':

        console.log('A');

                        break;

       case 'B':

        console.log('B');

                        break;

         case 'C':

        console.log('C');

                        break;

      default:
        console.log('do not know!');

    }          

  }      

}    

caseshow(new String('A'));

咋一看,很多人會以為輸出'case A',但實際輸出'do not know'。why?
這道題考察的知識點是:switch和string,我們需要知道一下兩點:

1,JavaScript中switch執行的是嚴格相等(===)。
2,字元串和string的實例不一樣。

第二點我們可以測試下。

var s_p = 'foo';
var s_o = new String(s_p)

console.log(typeof s_p) //'string'
onsole.log(typeof s_o) //'object'
onsole.log(s_p === s_o) //'false'

因此針對題目中的'A'與String('A')並不嚴格相等,最終會返回‘do not know’

 

題4
針對上面的題目3,我們稍作一點改動,成為下麵的題目4,再看看結果輸出什麼?
function caseshow2(val){
switch(val){
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case undefined:
    console.log('undefined');
    break;
  default:
    console.log('do not know!');
}
}
caseshow2(String('A'));
題目4相對於題目3,只是在最後調用的時候傳入的參數是String('A'),它的結果就變成了'Case A'。這是為什麼呢?

其實很簡單,String(X)返回的是一個字元串而不會生成一個新的String實例,因此與'A'是嚴格相等的。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.安裝MySQL 2.啟動MySQL 3.為MySQL設置密碼 a.進入資料庫 b.修改MySQL密碼為123 4.設置遠程登陸 5.重啟MySQL資料庫 吐槽一句 Centos比Ubuntu好用 ...
  • 本篇文章主要介紹資料庫事務的四大特性ACID,以及資料庫的隔離級別。 ...
  • 一.安裝版本簡介 MySQL是一個小巧玲瓏但功能強大的資料庫,目前十分流行。但是官網給出的安裝包有兩種格式,一個是msi格式,一個是zip格式的。很多人下了zip格式的解壓發現沒有setup.exe,面對一堆文件一頭霧水,不知如何安裝。 MySQL安裝文件分為兩種,一種是msi格式的,一種是zip格 ...
  • viewDidLoad:是視圖第一次載入到記憶體中後調用的,viewWillApear:則是在每次視圖顯示到屏幕上之前調用。 參考資料:《iOS編程指南》 ...
  • 引子用戶行為統計(User Behavior Statistics, UBS)一直是移動互聯網產品中必不可少的環節,也俗稱埋點。在保證移動端流量不會受較大影響的前提下,PM們總是希望埋點覆蓋面越廣越好。目前常規的做法是將埋點代碼封裝成工具類,但凡工程中需要埋點(如點擊事件、頁面跳轉)的地方都插入埋點 ...
  • android QMI機制 概論 android QMI機制 QMUX android QMI機制 Qcril初始化流程 android QMI機制 QCRIL消息發送 android QMI機制 底層消息發送 android QMI機制 Modem消息接收 android QMI機制 modem消 ...
  • 關於 微信公眾號:前端呼啦圈(Love-FED) 我的博客:勞卜的博客 知乎專欄:前端呼啦圈 前言 Hello,大家好,又與大家見面了,這次給大家分享下前端異常監控中需要瞭解的異常捕獲與上報機制的一些要點,同時包含了實戰性質的參考代碼和流程。 首先,我們為什麼要進行異常捕獲和上報呢? 正所謂百密一疏 ...
  • 調用方解決跨域的方法只有一種,那就是隱藏跨域。 何為隱藏跨域? 隱藏跨域的核心思路是通過反向代理隱藏跨域以欺騙瀏覽器 什麼是反向代理?反向代理是指通過中間伺服器使得訪問同一個功能變數名稱的兩個不同url最終會去往兩個不同的伺服器 一:反向代理 - Nginx配置 在之前的被調用方解決跨域中,訪問的請求是絕對 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...