随着現在技術行業門檻的不斷提高,大多數的小夥伴們想要學前端或者是入門前端行業,就必須要掌握一定基礎的 JavaScript 語言知識,本文檔将介紹絕大部分常用的 JavaScript 語言基礎知識且将同樣概念添加 Java 語言進行對比,幫助你快速學習了解。
語言概述
JavaScript 是一門腳本語言,用在網頁上增強頁面功能,是一門動态語言是以不需要進行編譯、部署。
JavaScript 是弱類型的語言,文法比較簡單,掌握基本文法之後怎麼寫都可以,比 Java 靈活的多,同時不需要依賴 IDE,任何文本編輯器都可以進行開發。當然如果你用 IDEA 等 IDE 更是錦上添花。
JavaScript 比較常見的運作環境就是 Web 浏覽器,比如 Chrome 直接打開 console 輸入 JavaScript 代碼即可運作實時看到結果:
提示:在 Chrome 中,右擊網頁選擇『檢查』即可打開開發者工具,可以切換到 console 面闆。詳情可以看如何使用控制台。
提示:控制台比較常用的有 console.log方法,它可以列印一些内容、變量值等到你的控制台輔助開發,等同 Java 中的 System.out.println方法。
文法基礎
變量定義
*let 定義普通變量(推薦),詳情:連結。*const定義常量,後面隻能讀不能寫,詳情:連結。*var 定義普通變量,不建議使用。
var 由于缺失某些特性,不建議使用,關于 let 和 var 的對比,詳情見:連結。
由于 JavaScript 是弱類型語言,是以你不需要聲明變量的資料類型。
JavaScript:
let x = 20;
Java:
float x = 20.0;double x = 20.0;int x = 20;
具體支援的資料類型參照下面文檔。
資料類型
資料類型基礎知識詳見:連結 ,這裡針對常用的幾種進行重點講解。
基礎類型包括:Undefined、Null、Boolean、Number、String,引用類型包括:Object、Array、Function。當一個變量值為引用類型的時候,直接指派其他變量傳遞的是引用。同樣的,引用的資料在某個地方改變了值會影響所有調用這個變量的地方。這跟 Java 裡面引用概念一樣。
undefined 和 null
聲明一個變量沒有指派,直接通路目前變量可以得到 undefined。不同于 Java 針對不同資料類型有不同的初始值:
JavaScript:
let x;console.log(x); // -> undefined
Java:
int x;System.out.println(x); // -> 0
通路一個對象上不存在的 key 也會取到 undefined。
let a = {};console.log(a.b); // -> undefined
null 表示空值。它不同于 undefined,它是有值的隻不過是一個空值,而 undefined 是未定義的臨時兜底的預設值。undefined 和 null 具體的差別請參見:連結。
基本的資料類型(number、boolean、string)
基本的資料類型:
console.log(typeof 10); // -> numberconsole.log(typeof '10'); // -> stringconsole.log(typeof true); // -> booleanconsole.log(typeof "true"); // -> string
JavaScript 中帶引号的均為字元串,可以是單引号也可以是雙引号。不同于 Java 字元串隻能使用雙引号表示。JavaScript 沒有 int、float 和 double 之分。
數組(array)
數組類型,棧結構,有序數組。每個 item 可以是任意類型的值,資料類型類似 Java 的 ArrayList ,比如:
// 字元串數組['string', 'aaa']// 對象和字元串混合數組[{ aa: 'aaa', bb: 'bbb',}, 'string']// 函數數組[() => { return '這是一個函數'}, () => { return '這是一個函數'}]
如果需要取得特定需要的值,直接擷取(比如擷取第一個資料):
JavaScript:
array[0];
Java:
list.get(0);
數組是有序的,周遊數組需要使用流程控制語句 for 等。為了友善,array 内置了一些數組常用操作方法可以簡化常用操作,詳情可見:連結。
比較常用 forEach 和 map 方法,可以重點關注下用法。
簡易循環舉例:
JavaScript:
let list = [];list.push('aa');list.push('bb');for(let i=0; i { console.log(val, i);});
Java:
List list = new ArrayList();list.add('aa');list.add('bb');for(int i=0; i { System.out.println(val);});
相比 Java 的 add 操作,JavaScript array 的出棧入棧删除的方法名略有不同,常見的 push 入棧、pop 出棧,具體的參照 連結。
對象(object)
對象類型,無序,需要指定 key 等資訊關聯值,類似 Java 的 HashMap,比如:
JavaScript:
let obj = { name: 'string 字元串', home: { province: '山東' }};obj.age = 18;console.log(obj.home.province);let key = 'age';console.log(obj[key], obj['age']);delete obj.name;
Java:
HashMap obj = new HashMap();obj.put('age', 18);obj.get('age');obj.remove('age');
如果不确定 key 的值(變量)可以使用如下方法調用:
let key = 'age';obj[key]; // -> 18
是以可以用來做 key value 的資料映射使用。由于弱類型存儲的值可以多種多樣,比 Java 使用起來要容易一些。詳情:連結
函數(function)
函數類型,用來建立一個函數,通常會傳回一個資料。
JavaScript:
function fun(a, b) { return a + b;}fun(1, 2); // -> 3;
Java:
public static int fun(int a, int b) { int result; result = a + b; return result;}fun(1, 2);
函數是一個可執行的小程式,根據參數處理一些邏輯并傳回一段新的資料,在 JavaScript 中用非常多,為此 ES6(新版 JavaScript 語言規範)新增了箭頭函數文法,用來簡化函數書寫:
let add = function(a, b) { return a + b;};等同于let add = (a, b) => { return a + b;};循環語句中也非常直覺友善:list.forEach((a, b) => { console.log(a + b);});
箭頭函數有個重要的特點就是自動綁定了目前的作用域,作用域的概念,JavaScript 和 Java 的一樣,JavaScript 中可以使用 bind、call、apply 三個方法改變函數執行的作用域,簡單差別如下:
- bind 方法,建立一個新的函數的引用并綁定到一個作用域特定作用域上面,同時支援傳參。bind(作用域對象, 參數1, 參數2)
- apply、call 方法,直接調用執行該函數,在執行的時候将函數内部的作用域綁定到參數指定的作用域。call(作用域)
這幾個方法詳情:
- 連結
箭頭函數聲明和特性:
- 連結
函數作用域:
- 連結
- 連結
設定函數參數的預設值:
- 連結
類型轉換
類型轉換可以通過調用類型的類進行轉換,比如将變量 a 轉換成 Number 類型,可以使用:
JavaScript:
let a = '10';a = Number(a);
Java:
int x;(double)x;
除了這種比較正規的方法之外,跟 Java 一樣還有其他慣用方法進行轉換。
轉換 number 類型
JavaScript:
let a = '12.33';console.log(parseInt(a)); // -> 12 numberconsole.log(parseFloat(a)); // -> 12.33 number
Java:
int i = Integer.parseInt(“123”);
轉換 string 類型
同 Java 每個類型的值都含有 toString() 方法。
let a = 12.33;console.log(a.toString()); // -> '12.33'将 Object 轉成 JSON 字元串let obj = { a: 'aa', b: 'bb'};console.log(JSON.stringify(obj)); // -> '{"a":"aa","b":"bb"}'let objStr = '{"a":"aa","b":"bb"}';console.log(JSON.parse(objStr)); // -> {a:"aa", b:"bb"}
轉換 boolean 類型
JavaScript 中的 boolean 的值比較多,空字元串、數字 0、null、undefined 均為布爾值的 false。此外 ! 表示取目前布爾值的反值,可以通過 !! 巧妙的将值轉換成布爾值類型的資料。
JavaScript:
console.log(!!'a'); // -> trueconsole.log(!!''); // -> false 空字元串console.log(!!0); // -> false 數字 0console.log(!!10); // -> trueconsole.log(!!null); // -> falseconsole.log(!!undefined); // -> falseconsole.log(!![].length); // -> false
流程控制、比較、運算符等
- 流程控制if:連結switch:連結for: 連結while: 連結
- 比較:連結
- 運算符:連結
基本跟 Java 一樣,下面介紹幾個 JavaScript 比較常用、特殊的知識點:
== 和 === 的差別
JS 是弱類型語言,=== 表示全等判斷,會把類型也進行比較:
2 == '2' // -> true2 === '2' // -> false
+ 運算符會改變資料類型
運算符會導緻資料類型的改變,這是因為運算符同時表示多種含義導緻。+ 運算符既可以連結字元串,也可以計算數字,使用時需要注意:
2 + 2 // -> 4 number2 + '2' // -> '22' string
ES6 新版文法增強功能
ES6 是新一代 JavaScript 文法規範,裡面新增了非常多的文法和功能,而且往 Java 等傳統語言靠攏。比如 class 類定義、箭頭函數、真正的 Set、Map 資料類型等。下面僅列出比較推薦的用法,有一些用法由于不太穩定暫時不推薦使用。
...obj 擴充運算符
object 的指派需要周遊相關字段,比如:
let bb = { age: 18, sex: 'male',};let aa = { name: '浩睿',};// 在 aa 上面新增 bb 的屬性需要aa.age = bb.age;aa.sex = bb.sex;
這樣就比較麻煩,你必須知道所有 key 而且每次新增都需要改動相關字段。為此,ES6 規範将擴充運算符(...)引入對象。就上面的例子,可以這樣寫:
let bb = { age: 18, sex: 'male', name: '後面的同 key 内容會覆寫前面的'};let aa = { name: '浩睿', ...bb,};
相當于把某個對象拆開分别指派,遇到同樣的 key 後面内容會覆寫前面的資訊。