作者:Kenmen
譯者:前端小智
來源:hackr.io
爲了保證的可讀性,本文采用意譯而非直譯。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你!
爲了回饋讀者,《大遷世界》不定期舉行(每個月一到三次),現金抽獎活動,保底200,外加用戶讚賞,希望你能成爲大遷世界的小錦鯉,快來試試吧
問題1:Java和JavaScript有什麼不同
Java | JavaScript |
Java是一種OOP編程語言。 | JavaScript是一種OOP腳本語言。 |
它創建在虛擬機或瀏覽器中運行的應用程序。 | 代碼只在瀏覽器上運行。 |
需要編譯Java代碼。 | JS代碼都是文本的形式。 |
問題2:什麼 Javascript
JavaScript 是一種輕量級的解釋型編程語言,具有面向對象的特性,允許各位在其他靜態HTML頁面中構建交互性。 該語言的通用核心已嵌入Netscape,Internet Explorer和其他Web瀏覽器中。
問題3: JS 支持哪些數據類型
JS 支持的數據類型:
- Undefined
- Null
- Boolean
- String
- Symbol
- Number
- Object
問題4:JavaScript的特性是什麼
以下是JS的特性:
- JS 是一種輕量級,解釋性編程語言。
- 爲了創建以網絡爲中心的應用程序而設計。
- 補充和集成了 Java
- 補充和集成了 HTML
- 開放和跨平臺
問題5:JavaScript是區分大小寫
是的,JS是一種區分大小寫的語言。關鍵字、變量、函數名和任何其他標識符必須始終使用一致的大寫字母進行使用。
問題6:JS 的優勢是什麼
以下使用JS的優點:
- 更少的服務器交互 - 在將頁面發送到服務器之前,可以驗證用戶輸入,節省了服務器流量,意味着服務器的負載更少
- 立即反饋 - 用戶不需要等待頁面重新加載來查看是否忘記輸入某些內容。
- 增強交互 - 在界面中,當用戶使用鼠標懸停或通過鍵盤激活它們時會做出響應。
- 豐富的接口 - 可以使用JS包含拖放組件和滑塊等項,爲網站提供豐富的界面。
問題7:如何用JS創建對象
JS賊支持對象概念,用如下方式創建即可:
var emp = {
name: "Daniel",
age: 23
};
問題8:如何用JS創建數組
JS 創建數組也很簡單:
var x = [];
var y = [1, 2, 3, 4, 5];
問題9:JS 中的命名函數是什麼以及如何定義:
命名函數在定義後立即聲明名稱,可以使用function
關鍵字定義:
function named(){
// write code here
}
問題10:是否可以將匿名函數分配給變量並將其作爲參數傳遞給另一個函數
可以。一個匿名函數可以分配給一個變量,它也可以作爲參數傳遞給另一個函數。
問題11:JS中的參數對象是什麼&如何獲得傳遞給函數的參數類型
JS 變量arguments
表示傳遞給函數的參數。 使用typeof
運算符,可以獲得傳遞給函數的參數類型。如下:
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(7); //==> "number", 7
func("1", "2", "3"); //==> "string", 3
問題12:JS中變量的作用域是什麼
變量的作用域是程序中定義它的區域,JS變量只有兩個作用域:
- 全局變量 - 全局變量具有全局作用域,這意味着它在JS代碼中的任何位置都可見。
- 局部變量 - 局部變量僅在定義它的函數中可見,函數參數始終是該函數的本地參數。
問題13:JS 中“this
”運算符的用途是什麼?
this
關鍵字引用它所屬的對象。 根據使用位置,它具有不同的值。 在方法中,這指的是所有者對象,而在函數中,這指的是全局對象。
問題14:什麼是回調
回調函數是作爲參數或選項傳遞給某個方法的普通JS函數。它是一個函數,在另一個函數完成執行後執行,因此稱爲回調。在JS中,函數是對象,因此,函數可以接受函數作爲參數,並且可以由其他函數返回。
問題15:什麼是閉包?舉個例子
只要在某個內部作用域內訪問在當前作用域之外定義的變量,就會創建閉包。 它允許你從內部函數訪問外部函數的作用域。 在JS中,每次創建函數時都會創建閉包。 要使用閉包,只需在另一個函數內定義一個函數並暴露它。
問題16:列出一些內置方法及其返回的值。
內置方法 | 返回值 |
CharAt() | 它返回指定索引處的字符。 |
Concat() | 它連接兩個或多個字符串。 |
forEach() | 它爲數組中的每個元素調用一個函數。 |
indexOf() | 它返回指定值第一次出現時調用字符串對象中的索引。 |
length() | 它返回字符串的長度。 |
pop() | 它從數組中刪除最後一個元素並返回該元素。 |
push() | 它將一個或多個元素添加到數組的末尾,並返回數組的新長度。 |
reverse() | 反轉數組元素的順序。 |
問題17: JS中的變量命名約定是什麼?
在JS中命名變量時要遵循以下規則:
- 咱們不應該使用任何JS保留關鍵字作爲變量名。例如,
break
或boolean
變量名無效。 - JS 變量名不應該以數字
(0-9)
開頭。它們必須以字母或下劃線開頭。例如,123name
是一個無效的變量名,但123name
或name123
是一個有效的變量名。 - JS 變量名區分大小寫。例如,
Test
和test
是兩個不同的變量。
問題18:TypeOf 運算符是如何工作的
typeof
運算符用於獲取其操作數的數據類型。 操作數可以是文字或數據結構,例如變量,函數或對象。 它是一個一元運算符,放在它的單個操作數之前,可以是任何類型。 它的值是一個字符串,表示操作數的數據類型。
問題19:如何使用 JS 創建 cookie
創建cookie
的最簡單方法是爲document.cookie
對象分配一個字符串值,如下所示:
document.cookie = "key1 = value1; key2 = value2; expires = date";
問題20:如何使用JS讀取cookie
讀取cookie
就像寫入cookie
一樣簡單,因爲document.cookie
對象的值是cookie
。
-
document.cookie
的值是由分號分隔的name=value
對的列表,其中name
是cookie的名稱,value
是其字符串值。 - 可以使用
split()
方法將字符串分解爲鍵和值。
問題21:如何使用 JS 刪除 cookie
如果要刪除cookie
以便後續嘗試讀取cookie
,則只需將過期日期設置爲過去的時間。 咱們應該定義cookie
路徑以確保刪除正確的cookie
。 如果未指定路徑,某些瀏覽器將不允許咱們刪除cookie
。
問題22:Attribute 和Property之間有什麼區別
- Attribute——提供關於元素的更多細節,如id、類型、值等。
-
Property —— 分配給屬性的值,如
type =“text”
,value ='Name'
等。
問題23:列出在JS代碼中訪問HTML元素的不同方式
下面是在JS代碼中訪問 html 元素的方法列表:
-
getElementById(‘idname’): 按
id
名稱獲取元素 - getElementsByClass(‘classname’): 獲取具有給定類名的所有元素
- getElementsByTagName(‘tagname’): 獲取具有給定標記名稱的所有元素
- querySelector(): 此函數採用css樣式選擇器並返回第一個選定元素
問題24:JS代碼在HTML文件中可以以多少種方式使用
主要有三種:
- 行內
- 內部
- 外部
行內方式:
...
<input type="button" value="點擊有驚喜" onclick="javascript:alert('哈哈哈哈')">
...
內部方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
//聲明一個函數(整個文檔都可以使用)
function surprise() {
alert('恭喜你中了一百萬')/*彈出框*/
}
</script>
</head>
。。。
</html>
外部方式:
...
<!--很多html頁面都可以調用js4.js頁面-->
<script src="../../js/js4.js" type="text/javascript" charset="utf-8">
...
問題25:在JS中定義變量的方法有哪些
在 JS 中聲明變量有三種方式:
-
var –
var
語句用於聲明一個變量,咱們可以選擇初始化該變量的值。例子:var a =10;
變量聲明在代碼執行之前處理。 - const - 常量的值不能通過重新賦值來改變,並且不能重新聲明。
- let - 語句聲明一個塊級作用域的本地變量,並且可選的將其初始化爲一個值。
問題26:什麼是類型化語言
類型化語言中,值與值關聯,而不是與變量關聯,它有兩種類型:
-
動態:在這種情況下,變量可以包含多種類型,如在JS中,變量可以取
number
,string
類型。 - 靜態:在這種情況下,變量只能包含一種類型,就像在Java中聲明爲
string
的變量只能包含一組字符,不能包含其他類型。
問題27:Cookie 與 Local storage 與 Session storage 區別
特性 | Cookie | localStorage | sessionStorage |
數據的生命期 | 一般由服務器生成,可設置失效時間。如果在瀏覽器端生成Cookie,默認是關閉瀏覽器後失效 | 除非被清除,否則永久保存 | 僅在當前會話下有效,關閉頁面或瀏覽器後被清除 |
存放數據大小 | 4K左右 | 一般爲 5MB | |
與服務器端通信 | 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端(即瀏覽器)中保存,不參與和服務器的通信 | |
易用性 | 需要程序員自己封裝,源生的Cookie接口不友好 | 需要程序員自己封裝,源生的Cookie接口不友好 源生接口可以接受,亦可再次封裝來對Object和Array有更好的支持 |
問題28: ‘==‘ 和 ‘===‘ 區別
==
: 兩邊值類型不同的時候,要先進行類型轉換,再比較。 ===
:不做類型轉換,類型不同的一定不等。
一言以蔽之:==
先轉換類型再比較,===
先判斷類型,如果不是同一類型直接爲false
。
問題29:null 和 undefined 區別
undefined
是基本數據類型 表示未定義 缺少的意思。
null
是引用數據類型,是對象,表示空對象
undefined
是從null
派生出來的 所以undefined==null
爲 true
問題 30:undeclared 和 undefined 區別?
undeclared
的變量是程序中不存在且未聲明的變量。 如果程序嘗試讀取未聲明變量的值,則會遇到運行時錯誤。undefined的變量是在程序中聲明但未賦予任何值的變量,如果程序試圖讀取未定義變量的值,則返回undefined
的值。
問題 31: 列出一些JS框架
JS框架是用JavaScript編寫的應用程序框架,它與控制流中的JS庫不同,一些最常用的框架是:
- Vue
- Angular
- React
問題 32: window 與 document 的區別:
window:JS 的 window 是一個全局對象,它包含變量、函數、history
、location
。
document:document
也位於window
之下,可以視爲window
的屬性。
問題 33: innerHTML 和 innerText 的區別
innerHTML:也就是從對象的起始位置到終止位置的全部內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤
問題 34:JS中的事件冒泡是什麼
事件冒泡是HTML DOM API中事件傳播的一種方式,當一個事件發生在另一個元素中的一個元素中,並且兩個元素都註冊了該事件的句柄時。通過冒泡,事件首先由最內部的元素捕獲和處理,然後傳播到外部元素。執行從該事件開始,並轉到其父元素。然後執行傳遞給父元素,以此類推,直到body元素。
問題 35:NaN 是什麼
NaN
即非數值(Not a Number),NaN
屬性用於引用特殊的非數字值,該屬性指定的並不是不合法的數字。
NaN
屬性 與 Number.Nan
屬性相同。
提示: 請使用 isNaN()
來判斷一個值是否是數字。原因是 NaN
與所有值都不相等,包括它自己。
問題 36:JS的原始/對象類型如何在函數中傳遞?
兩者之間的一個區別是,原始數據類型是通過值傳遞的,對象是通過引用傳遞的。
- 值傳遞:意味着創建原始文件的副本。把它想象成一對雙胞胎:他們出生的時候一模一樣,但是雙胞胎中的老大在戰爭中失去了一條腿,而老二卻沒有。
- 引用傳遞: 意味着創建原始文件的別名。當我媽媽叫沙雕的時候,雖然我的名字叫小智,但這並不是說我就突然就克隆了一個自己:我仍然是我,只是可以用不同名字來稱呼我而已。
問題 37:如何在JS中將任意基的字符串轉換爲整數
parseInt(string, radix)
將一個字符串 string
轉換爲 radix
進制的整數, radix 爲介於2-36
之間的數,如下:
parseInt("4F", 16)
問題 38:2+5+ 3的結果是什麼
由於2
和5
是整數,它們將以數字形式相加。因爲3
是一個字符串,它將與 7
拼接,結果是73。
問題 39:export 和 import 是什麼
import
和export
有助於咱們編寫模塊化JS代碼。 使用import
和export
,咱們可以將代碼拆分爲多個文件,如下:
//------ lib.js ------</span>
export const sqrt = Math.sqrt;</span>
export function square(x) {</span>
return x * x;</span>
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------</span>
{ square, diag } from 'lib';
console.log(square(5)); // 25
console.log(diag(4, 3)); // 5
問題40:JS中的“嚴格”模式是什麼以及如何啓用?
嚴格模式是在代碼中引入更好的錯誤檢查的一種方法。
- 當使用嚴格模式時,不能使用隱式聲明的變量,或爲只讀屬性賦值,或向不可擴展的對象添加屬性。
- 可以通過在文件,程序或函數的開頭添加
“use strict”
來啓用嚴格模式
問題41:JS 中的 prompt 框是什麼
提示框是允許用戶通過提供文本框輸入輸入的框。 prompt()
方法顯示一個對話框,提示訪問者輸入。 如果您希望用戶在輸入頁面之前輸入值,則通常會使用提示框。 彈出提示框時,用戶必須在輸入輸入值後單擊“確定”或“取消”才能繼續。
問題42:下面代碼的輸出是什麼?
var Y = 1;
if (eval(function f(){}))
{
y += typeof F;
}
console.log(y);
打印1undefined
。if
條件語句使用eval
求值,因此eval(function f(){})
返回函數f(){}
(爲真)。因此,在if
語句中,執行typeof f
返回undefined,因爲if
語句代碼在運行時執行,而if
條件中的語句在運行時計算。
問題43:call 和 apply有什麼區別
call
和apply
可以用來重新定義函數的執行環境,也就是this
的指向;call
和apply
都是爲了改變某個函數運行時的context
,即上下文而存在的,換句話說,就是爲了改變函數體內部this
的指向。
call()
調用一個對象的方法,用另一個對象替換當前對象,可以繼承另外一個對象的屬性,它的語法是:
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
說明:call
方法可以用來代替另一個對象調用一個方法,call
方法可以將一個函數的對象上下文從初始的上下文改變爲obj
指定的新對象,如果沒有提供obj
參數,那麼Global
對象被用於obj
apply()
和call()
方法一樣,只是參數列表不同,語法:
Function.apply(obj[, argArray]);
說明:如果argArray
不是一個有效數組或不是arguments
對象,那麼將導致一個TypeError
,如果沒有提供argArray
和obj
任何一個參數,那麼Global
對象將用作obj。
問題44:如何在JS中清空數組
有許多方法可以用來清空數組:
方法一:
arrayList = []
上面的代碼將把變量arrayList
設置爲一個新的空數組。如果在其他任何地方都沒有對原始數組arrayList
的引用,則建議這樣做,因爲它實際上會創建一個新的空數組。咱們應該小心使用這種清空數組的方法,因爲如果你從另一個變量引用了這個數組,那麼原始的引用數組將保持不變。
方法二:
arrayList.length = 0;
上面的代碼將通過將其length
設置爲0
來清除現有數組。這種清空數組的方式還會更新指向原始數組的所有引用變量。 因此,當你想要更新指向arrayList
的所有引用變量時,此方法很有用。
方法三:
arrayList.splice(0, arrayList.length);
這處方法也行,當然這種清空數組的方法也將更新對原始數組的所有引用。
方法四:
while(arrayList.length)
{
arrayList.pop();
}
上面的實現也可以空數組,但通常不建議經常使用這種方式。
問題45:以下代碼的輸出什麼
var output = (function(x)
{
delete x;
return x;
}
)(0);
console.log(output);
打印 0
。delete
操作符用於從對象中刪除屬性。這裏x
不是一個對象,而是一個局部變量,刪除操作符不影響局部變量。
問題46:以下代碼的輸出什麼
var X = { foo : 1};
var output = (function()
{
delete X.foo;
return X.foo;
}
)();
console.log(output);
輸出 undefined
。delete
操作符用於刪除對象的屬性。X
是一個具有foo
屬性的對象,由於它是一個自調用函數,所以咱們將從對象X
中刪除foo
屬性。這樣做之後,當咱們試圖引用一個被刪除的foo
屬性時,結果是undefined
。
問題47:以下代碼的輸出什麼
var foo = function Bar()
{
return 7;
};
typeof Bar();
輸出將是引用錯誤
。函數定義只能有一個引用變量作爲其函數名。
問題49:爲什麼要將JS源文件的全部內容包裝在一個函數中
這是一種越來越普遍的做法,被許多流行的JS庫所採用。 這種技術圍繞文件的整個內容創建一個閉包,最重要的是,它可以創建一個私有命名空間,從而有助於避免不同JS模塊和庫之間潛在的名稱衝突。
該技術的另一個特性是允許爲全局變量提供一個簡單的別名,這在jQuery插件中經常使用。
問題50:JS中的轉義字符是什麼
JS轉義字符使咱們能夠在不破壞應用程序的情況下編寫特殊字符。轉義字符(\
)用於處理特殊字符,如單引號、雙引號、撇號和&
號,在字符前放置反斜槓使其顯示。
如:document.write("I am a \"good\" boy")
代碼部署後可能存在的BUG沒法實時知道,事後爲了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文:https://hackr.io/blog/javascr...
交流
乾貨系列文章彙總如下,覺得不錯點個Star,歡迎 加羣 互相學習。
https://github.com/qq44924588...
我是小智,公衆號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨,在進階的路上,共勉!
關注公衆號,後臺回覆福利,即可看到福利,你懂的。