JavaScript：修訂版本之間的差異

2022年7月5日 (二) 07:20的修訂版本

基本語法

一、變數

JavaScript變數命名規則

1. 變數可以由字母、數字、下劃線、美元符號($)組成
2. 變數必須以字母開頭，也能以 $ 和 _ 符號開頭(不過我們不推薦這麼做)，但絕不能以數字開頭。
3. 變數名稱對大小寫敏感( y 和 Y 是不同的變數)

(一)變數的宣告與作用域

1. let ：只在被{ }包起來的區域中作用，不能在全域存取
   包含：if、else、 for、while、foreach…等等
2. var ：作用域是「函式作用域」，也就是在 function 內宣告的 var，要在該 function 內才有作用，以該 function 範圍為界線，在 function 外面的區域無法取用
3. 函式內未宣告：自己的 function 內如果找不到宣告，就會一層層往外找，直到全域變數為止。function 可以讀取外層已經宣告的變數，
但外層拿不到裡面宣告的變數。

var x = 1;
var doSomeThing = function(y) {
  // 內部找不到 x 就會到外面找，直到全域變數為止。
  // 都沒有就會報錯：ReferenceError: x is not defined
  return x + y;
};
console.log( doSomeThing(50) );   // 51

var x = 1;
var doSomeThing = function(y) {
  x = 100;
  return x + y;
};
console.log( doSomeThing(50) );   // 150
console.log( x );                 // 100

(二)測試變數是否存在

typeof(變數)

typeof(變數) === 'undefined' 表示變數尚未定義

if (typeof Vatiable1 === 'undefined' ) { 變數未定義 }
else if (Vatiable1 === null){ 變數尚未賦值 } 
else { 有值的變數 }

if (變數)

有六種情況為非：undefined、null、、0、Nan 和 false，typeof 操作符只檢查 undefined 或 null。

(三)檢查元素是否在陣列中

1. 陣列名.indexOf(元素)：傳回元素是陣列的第幾個元素，不在則傳回 -1

   indexOf(元素)

   indexOf(元素,搜尋起點的索引)

2. 陣列名.includes(元素)：傳回陣列是否包含元素，IE 以外的瀏覽器支援

   includes(元素)

   includes(元素,搜尋起點的索引)

3. 陣列名.find(元素代表變數 => (對元素的比對條件) )：找出陣列中第一個合條件的元素，IE 以外的瀏覽器支援

   find(元素代表變數 => (對元素的比對條件))

   find((元素代表變數,搜尋起點的索引) => (對元素的比對條件))

4. 陣列名.filter()
5. for 迴圈

範例一

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.indexOf("Pear"));	// 輸出 2
console.log(fruits.indexOf("Tomato"));	// 輸出 -1

範例二

let fruits = ["Apple", "Mango", "Pear", "Peach"];
console.log(fruits.includes("Pear"));	// 輸出 true
console.log(fruits.includes("Tomato"));	// 輸出 false

範例三

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));	// 輸出 21
console.log(age.find(i => i > 21));	// 輸出 43

範例四

let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));	// 輸出 [21, 43, 23, 34]
console.log(age.filter(i => i > 21));	// 輸出 [43, 23, 34]

範例五

二、常數

const Pi = 3.14159265 ;

1. 宣告時就要同時賦值
2. 賦值後就不能被更動了
3. 作用域都只在 {…} 區塊內

三、函式

四、運算

(一)加法

+ 同時作為字串連接與數字相加

let a = 2;
let b = 'hello';

console.log(a += 3); // addition
// expected output: 5

console.log(b += ' world'); // concatenation
// expected output: "hello world"

JSON

1. JSON (JavaScript Object Notation，JavaScript 物件表示法)。
2. 以純文字為基礎，來儲存和交換簡單結構的輕量級「資料交換格式」(類似 XML)。
3. JSON 比 XML(eXtensible Markup Language，可延伸標記式語言)更小、更快且更易解析。

格式

JSON 可以包含物件(Object)或陣列(Array)資料。物件(Object)與陣列(Array)可互相包含，例如 {"array": [{"object": "object"}]}

物件

如：{"name": value, "name": value}，類似 PHP 中的字串索引陣列

1. 一個物件以 { 開始，並以 } 結束，來寫入資料。
2. name 為字串，必須以 "" 括起來。
3. name 與 value 之間使用 : 分隔。
4. 多個 name:value 之間使用 , 分隔。

陣列

如：[value, value] ，類似 PHP 中的註標索引陣列。

1. 一個陣列以 [ 開始，並以 ] 結束，來寫入資料。
2. 多個 value 之間使用 , 分隔。

物件和陣列值

如：{"array": ["string", 10, 1.0, -1, true, false, null]}

1. 物件(Object)：{}。
2. 陣列(Array)：[]。
3. 字串(String)：以 "" 括起來。
4. 數值(number)：0-9 的數字組合(整數、小數或負數)。
5. 布林(boolean)：true 或 false。
6. 空值(Null)：null。

參考資料

1. JSON 格式與 JavaScript 解析教學範例