JavaScript-基本知識上(from AlphaCamp)

張凱喬
7 min readJan 23, 2018

--

開始點技能樹了,先來整理一下基本語法
(因為要打codewars的JS,腦袋一片空白)

認識ECMA Script

ECMAscript 是語法的標準,而 JavaScript 是語言本身;或說 ECMAscript 是一個程式語言,而 JavaScript 則是其所延伸的軟體工具。目前這兩種說法較為普及。

我覺得有Javascript與ECMAScipt之間一個很重要的差別
除了腳色不太一樣之外(也就是David所說 規範與軟體工具)
還有就是Javascript有ECMAScript沒有的東西,BOM跟DOM

參考

console.log(“Hello World”)

console.log是開發JS語言的重要工具,這個log不會顯示在網頁上
可以利用chrom的開發人員工具中的console讀取

譬如說你不知道這個element是啥
就把他丟進去console.log去讀取

註解方式

// 這是單行註解 (Comment),不會加入執行程式碼,只為輔助閱讀。
/*
這是多行註解,可以用多行註解寫較完整的描述。
在這份檔案裡,會介紹註解、變數、數學運算、邏輯判斷等。
*/

變數型態與宣告

宣告變數的方式是var
變數的種類主要有三種:數值、字串與布林值

有幾個東西要注意
第一個是undefined,宣告變數之後沒有給值就是預設undefined
第二個是null,變數不參考到其他變數時使用,要直接指定(var y=null;)
第三個是NaN

可以使用語法typeof 查詢物件的型態

參考

http://www.codedata.com.tw/javascript/essential-javascript-data-type/

另外 JS的變數也不一定要使用var宣告
但使用上會有些微差異,此外 AC也建議每個變數都var宣告
若不宣告會占用較多記憶體,拖慢網頁瀏覽速度

http://www.codedata.com.tw/javascript/essential-javascript-variable/

弱型態轉換

JS屬於偏向弱型態,意思是不同變數型態有時可以自動轉換

var result = '3' - '2';
console.log(result); // 1
console.log(typeof result); // number

對或錯(True & False)

在 JavaScript 中若結合布林值作 +、-、*、/ 等運算,true 會被當作 1,而 false 會被當作 0。例如:

1 + true;  //2
1 + false; //1

在JS中,除了 0、NaN、’’、null、undefinied 是假的(false)之外,其他都是真的(true)。

參考

http://www.codedata.com.tw/javascript/essential-javascript-4-weak-type-wat/

數學運算子

  • 加法運算符號 +
  • 減法運算符號 -
  • 乘法運算符號 *
  • 除法運算符號 /
  • 餘數運算符號 %

比較運算子

  • ==
  • >=
  • <=
  • >
  • <
  • !=

補充: 嚴格比較符號===,用於比較左右兩邊的數值和變數種類

邏輯運算子

  • &&:AND
  • ||:OR
  • !:NOT

補充:
使用 NOT 反轉布林值和進行反向判斷
!符號的常見用法:

  • 把布林值反轉:false 會變成 true,true 會變成 false。
  • 進行反向判斷:在控制流程時,因 if 只有在 true 時才能執行對應的程式碼,因此可以用 NOT 可以進行反向判斷,透過 NOT 把 false 變成 true,達到反向判斷的效果。

Array 和 Map結構

相信大家都對Array跟Hash不陌生
直接放語法了(特別注意符號的使用方式,例如()、[]、{})

Array的部分~
push用來加入資料、concat帶入合併的陣列

var names = ["Arch", "Bernard", "Ellen"];names.push("Claire");   
console.log(names); // ["Arch", "Bernard", "Ellen", "Claire"]
var admins = ["Sali", "Lilian"];
var alphacamp = names.concat(admins);
console.log(alphacamp); // ["Arch", "Bernard", "Ellen", "Claire", "Sali", "Lilian"]

另外,"Splice"可以插入、刪除
根據帶入的資料,會有三種用法:
— splice(1):從 index 1 開始刪除,會刪除 index 1 和之後所有陣列內
— splice(2, 2):從 index 2 開始刪除 2 個陣列的內容
— splice(2, 2, “Data”):從 index 2 開始刪除 2 個陣列內容,並把 Data 插入 index 2

Map的部分~
set加入資料、get取出資料、delete刪除資料

var map = new Map(); 
map.set("name", "Arch");

var name = map.get("name");
console.log(name); // Arch
map.delete("name"); //delete會直接刪除整組
//使用 Map 的 size 方法取得 Map 裡 key 和 value 的數量
console.log(map.size); // 0

補充Array與Map的用法

Array常用的 參考上述
特別注意到array有map這個用法,但是跟map結構沒有關係

.include(value) 查詢陣列是否包含value,返回布林值
.sort() 排序字串,請特別注意排序數字時的情況
參考下列連結

.find() 也會用於查詢,但是使用上比較麻煩一點
要配合function使用,僅回傳第一個符合條件的值

var array1 = [5, 12, 8, 130, 44];var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// expected output: 12

JavaScript 裡陣列(Array)中的 .map() 和 .reduce()
有點複雜...先留著 希望以後用得上

Map常用的~
參考下面連結

.clear() 直接清空
.has(key) 查詢是否有這個key並返回布林值

弄完基礎中的基礎了
我覺得難的是function與class
下篇再整理,這篇先這樣

--

--

No responses yet