Int's blog

在這篇有介紹過json格式，這篇會來介紹如何用js讀取json。

假設我們有一個json檔:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

[{
  "id": 1,
  "first_name": "Frannie",
  "last_name": "Sandeland",
  "email": "fsandeland0@sogou.com",
  "gender": "Female",
  "ip_address": "227.100.11.35"
}, {
  "id": 2,
  "first_name": "Batsheva",
  "last_name": "Biswell",
  "email": "bbiswell1@miitbeian.gov.cn",
  "gender": "Female",
  "ip_address": "214.81.196.38"
}, {
  "id": 3,
  "first_name": "Priscilla",
  "last_name": "Mapletoft",
  "email": "pmapletoft2@reference.com",
  "gender": "Genderfluid",
  "ip_address": "37.45.100.248"
}]

假設我想要讀取第二筆的email，那這邊就要先觀察這個格式最外層，上一篇也說過通常最外層是陣列，這裡也是，那我就要寫成:

1
2
3

let data = `這裡貼上剛剛的data`;

let target = data[1];

這邊就會得到第二筆資料全部內容，可是我要怎麼單獨取出email欄位? 很簡單，因為這層是物件，用物件取值的方法就行了，寫法有兩種:

1
2
3

let target = data[1].email;

let target = data[1]['email'];

這樣就可以拿到第二筆資料的email了，把上面的code整理一下:

1
2
3
4
5

let data = `這裡貼上剛剛的data`;

let target = data[1].email //或是 data[1]['email'];

console.log(target); //執行結果: bbiswell1@miitbeian.gov.cn

是不是很簡單? 這篇裡有提到物件的讀取方法，但我還沒有寫文章介紹過，下次會整理一篇物件相關的文章，謝謝觀看。

JSON是一種資料儲存的格式，全名為JavaScript Object Notation，但json格式不只可以在js中使用，其他語言也可以，其中在做網路請求時也很常使用json格式來傳遞資料。

格式

1
2
3
4
5
6
7
8
9
10
11
12

[
 {
   "name": "Ming",
   "age": 18,
   "sex": "male"
 },
 {
  "name": "Amy',
  "age": 20,
  "sex", "female"
 }
]

其實跟js的物件格式很像，你可以用陣列包裹物件，或是用物件包裹陣列，不同的是key會包在雙引號裡面。比較常見的用法是如同範例程式中用陣列包裹。

json格式算是我最喜歡的資料格式，可能是因為我當初在學校學java第一個學怎麼處理的資料格式就是json。

下篇會來介紹如何用js讀取json的值。

在css中常常要自己去計算padding、margin等等的推擠造成的盒模型大小不同，所以css有提供一個叫border-box的方法讓你不用去計算。

box-sizing

這個就是用來選擇是否使用border-box，不修改的話預設會是content-box。

1
2
3

.box{
	box-sizing: content-box;
}

border-box

想要使用border-box只需要把content-box做修改即可

1
2
3

.box{
	box-sizing: border-box;
}

套用到所有元素

因為border-box很方便，所以開發者通常會希望一次都套用到所有元素上，這時候就可以這樣寫

1
2
3
4
5

*, 
*::before, 
*::after{
	box-sizing: border-box;
}

這樣所有元素都會吃到border-box，* 代表全部，至於before和after就是擬態選擇器中有稍微提到的pesudo class，這部分以後會一起介紹。

其實我之前切版都沒有使用到，下次應該會來試試，這樣我就不用自己計算推擠了。

在css中有種被稱作pesudo class的類別，可以用來做一些互動效果，最常見的就是a link上會用到的hover。而css中要選取pesudo class就要用到pesudo class selector，中文翻作擬態選擇器。

語法

1
2
3

a:hover{
	color: #000;
}

使用分號後接上pesudo class的名稱就是pesudo class selector，常見的pesudov class除了hover還有 active、link等等。因為很多就不一一列出，有興趣可以參閱MDN網站

這篇只是介紹最簡單的用法，因為深入的原理等等我還沒學會，如果有機會我會再寫文章來詳細介紹的。

因為之前發的運算子文章都是分開發的，雖然有資料夾整理好，不過我覺得要調整一下順序跟增加優先級表格。

文章整理

• 順序大致會比照MDN的順序

1. 賦值運算子

2. 比較運算子

3. 算數運算子

4. 位元運算子

5. 邏輯運算子

6. 三元運算子

7. 關係運算子

8. 其他:

   1. delete、逗號運算子、字串運算子
   2. typeof、void

運算子優先級

這篇也繼續把剩下的運算子補齊。

typeof

typeof有兩種寫法:

1
2
3

typeof 運算元

typeof(運算元)

這兩種意思都一樣，使用typeof回傳運算元的資料型態，非常方便，所以這個運算子也是相當常見。

void

void也有兩種寫法:

1
2
3

void 運算式

void(運算式)

void會解析運算式然後回傳undefined，白話一點就是不回傳任何東西但可以執行後面的運算式。可以被使用在a連結中:

1

<a href="javascript:void(0)">點擊這裡，甚麼都不會發生</a>

當使用者點擊連結時， void(0)會被解析為undefined， 而甚麼都不會發生。這個算是比較少見，但偶爾會看到有人使用來增加程式的可讀性。

寫了這麼多篇運算子也結束了，這篇就是運算子介紹完結篇，下次會出一篇總整理方便大家找。

前面幾篇幾乎把所有的運算子都介紹過一遍了，這篇會介紹幾個寫起來篇幅比較少的運算子。

一元運算子: delete

之前在算術運算子篇中也有介紹其他的一元運算子，這篇會把最後的一元運算子介紹給大家。

delete可以刪除物件、物件屬性、陣列元素等等。刪除後物件會變成undefined

1
2
3
4
5
6
7

delete 物件名稱;

delete 物件名稱.屬性;

delete 物件名稱[index];

delete 屬性; //只有在with中才能使用

逗點運算子

常用於迴圈內，可以同時進行兩種條件式判斷

1
2
3

for(i = 0, j = 0; i < n, j <= n, i++, j++){
	.....
}

字串運算子

其實就是 ‘+’，只是他也可以用來連接字串

1
2
3
4
5
6

let str1 = 'this';
let str2 = 'is';

let str3 = str1 + str2;

console.log(str3);//執行結果: thisis

昨天在做六角的作業時有項任務是要架設GGG環境(用gulp建立github page)，但是我的node是最新版本(v16)，而gulp要求的版本只能在v12~v14(其實我不確定是不是gulp，因為當初報錯是node-sass找不到)，反正結論就是要用v14，我就想說找個可以隨意切換版本的，因為刪掉重裝好像有點硬A，所以我就找到nvm這個東西。殊不知，問題一堆，安裝環境這東西真的是搞死我。

先一步一步來說好了，一開始我是先按照六角給的指示安裝了一個node.exe(v14)，可是我電腦的環境沒辦法被這東西蓋掉，我裡面的v16還是活得好好的，所以我就跑去裝nvm，參考了蠻多篇，我也不知道為什麼大家都寫的這麼不清楚，所以我這邊會好好解釋。

nvm安裝步驟

1. 去官網下載nvm-setup.exe，你要載zip也行，裡面打開也就一個一樣的exe。

2. 載完之後執行他，按下一步之後停下，把這個路徑記起來。

   

   再下一步是nodejs路徑

   

   這裡請把nodejs資料夾移到一個名字沒有空格的路徑底下。

   完成後去修改環境變數，把剛剛複製的路徑貼上。步驟如下:

   1. 打開設定->系統->關於->右手邊的進階系統設定
   2. 打開後會出現一個視窗，按下那個環境變數

   

   3. 找到上面那格的path按下編輯

   

   4. 按下新增，貼上路徑，儲存確定離開

   

   5. 到終端機打

      1	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh

   [註]本人環境為windows，mac我不會XD

   
   

我之前就是少做了新增環境變數所以一直沒辦法執行nvm，我也不知道為什麼其他說明都沒寫到要修改，可能是我上面那兩個他自己幫我加的nvm路徑沒作用吧，具體原因我也不知道為什麼。

再來就是下載node v14，我一開始以為我用的方法是對的，結果今天要來hexo寫文發現v14不支援hexo，想改回v16卻發現沒用。恩? 這當初不就是要來切換版本的嗎怎麼沒有用??

那是因為我一開始不管怎麼用六角給的node.exe他就是沒辦法切換(可能我放錯路徑，但我現在還是不知道該放哪)，所以我就跑去載了msi檔，因為當初裝v16也是載這個，欸，等等，其實這樣會把原本的v16蓋掉，說好的用nvm不要硬A呢? 但是我真的沒注意到這件事，看到nvm列出版本有v14，正在使用的也是v14，GGG也用好了就以為萬事ok了(而且那時候我打錯nvm install指令所以一直載不好才用msi檔。)

所以該怎麼辦?

nvm 切換版本步驟

1. 把電腦中的node環境全部remove掉

2. 對cmd按右鍵，以系統管理員身分執行cmd

3. nvm install [版本名稱]

   1	nvm install 16.14.0

   • 想看有沒有裝成功可以使用nvm list觀看，他會列出所有已安裝的版本。

4. nvm use [版本名稱]

   1	nvm use 16.14.0

   • 如此一來就可以自由切換node版本了

真的沒想到建個環境會遇到這麼多問題，而且我本來以為我解決了，沒想到又跑出一堆問題，今天執行hexo發現不能用真的嚇了我一跳，然後要切版本又切不回去QQ，搞了半天根本是昨天就搞錯了，用nvm就直接用nvm裝node就好，不要另外裝node.exe還是什麼的，不過剛好可以當作一篇文章記錄起來XD 希望我沒有漏掉什麼，如果有哪裡看不懂歡迎再跟我說。

可以比較兩者的關係(子集與宇集的概念)

語法

in

1

a in b

如果a在b裡面，回傳true，否則回傳false。

ex:

1
2
3
4

let arr = ['a', 'b', 'c'];

console.log(a in arr);//執行結果: true
console.log('length' in arr);//執行結果: true

可以比較的不只是元素與陣列，還有函式與物件，屬性與物件都可以比較，所以’length’ in arr才會回傳true，因為arr的屬性有length。

instanceof

1

物件名稱 instanceof 物件類型

跟in比較不一樣，instanceof只是用來比較這個物件是不是某個物件類型，是的話一樣回傳true。用英文來看就是這個object是不是這個class的instance，這裡如果對物件導向有了解應該就看得懂，不了解也沒關係，可以看看以下例子:

1
2

var theDay = new Date(1995, 12, 17);
console.log(theDay instanceof Date);//執行結果: true

這樣應該就比較清楚了，關係運算式我自己比較少用到，但可能是我做的專案還不夠多不夠大，不過我自己覺得他用起來很方便，那這篇就差不多到這邊。

上一篇有提到一元運算子以及二元運算子，這篇會來介紹三元運算子。
三元運算子，又稱作條件運算子，顧名思義就是針對三個運算元做運算。

語法

condition ? 值a : 值b;

1
2
3

let a = 3;
let msg = a >= 0 ? "a is positive" : "a is negtive" ;
console.log(msg); //執行結果: "a is positive"

簡單來說問號前面是判斷式，根據你給的式子，成立的話會回傳值a，不成立就值b，所以才會又稱為條件運算子。

一開始看到這個的時候會覺得是什麼XD 可能是因為這個東西其實不常使用，多數時候我們還是會使用if-else，主要是閱讀上比較直觀，但偶爾會不想寫那麼長的程式碼就會用這個代替。