有關JavaScript的遞增與遞減運算子,想輕鬆入門看過來!

JavaScript必要了解的基礎之一就是遞增與遞減運算子了,一起來看看該如何使用它們~

 

目錄

• 遞增運算子（++）
• 遞減運算子（–）

JavaScript 的兩組運算子「遞增（++）」與「遞減（–）」可以針對指定的數值進行「加1（遞增）」與「減 1（遞減）」的運算。

 

遞增運算子（++）

遞增運算子能對數值進行「加1（遞增）」的運算。當置於運算元前方，就會先執行運算，因此得到的值是遞增過的值；若配置於後方則是先取值後運算，會先得到運算元本身的值後才加 1。如以下例子：

    var x = 10,y = 10;
    var a = ++x,b = y++;

    console.log(a,x);
    console.log(b,y);

前置運算會先完成遞增運算後再設值。因此 x 完成遞增運算結果為 11 後，再設值給變數 a。因此 a 的值為 11、x 的值也為 11；而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10，再完成遞增運算。因此 b 的值為 10、x 的值為 11。

遞減運算子（–）

遞減運算子能對數值進行「減1（遞減）」的運算。當置於運算元前方，就會先執行運算，因此得到的值是遞減過的值；若配置於後方則是先取值後運算，會先得到運算元本身的值後才進行遞減運算。如以下例子：

    var x = 10,y = 10;
    var a = --x,b = y--;

    console.log(a,x);
    console.log(b,y);

前置運算會先完成遞減運算後再設值。因此 x 完成遞減運算結果為 9 後，再設值給變數 a。因此 a 的值為 9、x 的值也為 9；而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10，再完成遞增運算。因此 b 的值為 10、x 的值為 9。

 

 

 

相關文章:

網站核心指標5月將成SEO排名因素!LCP,FID,CLS詳解與優化方式

SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準

SEO快訊-Google 搜尋可能會更少顯示「精選摘要」

SEM快訊-Google Ads將於四月停用展示型購物廣告

科幻迷們!可知電影中的程式語言是Python,Java?(上)

參加Python課程,文科生可能比數理生更優秀(上)

被文系耽誤的工程師?上完Python課程後成功進入大公司

JavaScript教學21.陣列的方法與屬性

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#21陣列的方法和屬性

陣列(Arrays)-length 屬性

程式語言JavaScript陣列(Arrays）具有一些實用的內置屬性和方法，比如 length 屬性，用以回傳一個陣列中元素的數量。寫法如下例所示：

See the Pen JavaScript-Array-length-property by Tedutw (@Tedutw) on CodePen.

上述範例左側的原始碼，第一行的「courses」陣列有三個元素：HTML、CSS、JS，因此回傳數值為「3」;第四行的「courses1」陣列有四個元素：HTML、CSS、JS、JQuery，因此回傳數值為「4」

合併陣列（Combining Arrays）-concat () 方法

JavaScript 的 concat () 方法被用來合併兩個或多個陣列。此方法不會改變原本的陣列，而是新增加另一個經過合併過的陣列後回傳。

See the Pen JavaScript-combining-Arrays by Tedutw (@Tedutw) on CodePen.

上述範例左側的原始碼，第一行為「c1」陣列回傳為「HTML,CSS」;第二行的「c2」陣列回傳為「JS,JQuery」;第三行就採用 concat () 方法來合併第一、第二行的 c1、c2 陣列，是為新陣列「c3」，其回傳值有四個元素「HTML,CSS,JS,JQuery」。
JavaScript的陣列 (Arrays）教學在此告一個段落，請各位前端工程師務必將前一章「陣列的介紹」與本章再複習一次。下回的JavaScript教學系列，我們將陸續介紹 Math Object 數學物件與 Date Object 日期物件等 JavaScript 原生物件。

參考連結:

Python不是蟒蛇,Java是咖啡,奇葩的程式語言命名起源

用Python或Java寫程式時，聽什麼音樂能增加效率?

Java、Python...初學者該從哪個程式語言下手？

APCS 是什麼？所有 APCS 檢定的問題這篇都會回答你！

JavaScript學堂19.方法

用Python處理excel的優點多多!

中國獨立開發"木蘭"程式語言竟是抄襲Python

JavaScript教學20.陣列

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#20陣列

陣列(Arrays)

程式語言JavaScript 中的「陣列(Arrays)」可被比喻成「可以一次承裝多個值的變數」。一般的變數一次只能裝一個值，而陣列一次可裝多個變數。例如，現在我們有三個課程名稱「HTML」、「CSS」、「JS」，就需要設立三個變數來承裝。原始碼如下所示：

var course1 ="HTML"; 
var course2 ="CSS"; 
var course3 ="JS"; 

如果是使用「陣列(Arrays)」，原始碼就可以精簡成一行文，如下所示：

var courses = new Array("HTML", "CSS", "JS"); 

語法解析：上述的代碼是宣告名為「courses」的陣列。這個陣列包含三個值（或稱元素）。建立新陣列的寫法為「new Array(元素一,元素二,元素三)」

取出陣列的某一元素

陣列裡含這麼多元素，當我們要找出某個元素時，就需要把索引號碼寫在方括號內。要取出陣列中的第 X 個元素，語法為「陣列名稱[X-1]」(因為陣列元素的編號是從零開始，不是從一開始，所以第一個元素的索引號為「0」、第二個元素的索引編號為「1」，由此類推⋯⋯)
我們承接前一段「名稱為 courses 的陣列」的例子，假如今天我們要從 courses 陣列中取出「JS」，並且把「JS」改成「JQuery」，寫法如下：

var courses = new Array("HTML", "CSS", "JS"); 
var course = courses[2]; // 取出第三個元素「JS」
courses[2] = "JQuery"; //將第三個元素名稱改成「JQuery」 

See the Pen JavaScript-Array1 by Tedutw (@Tedutw) on CodePen.

若當我們輸入的索引數字，已經超過了陣列元素數目減去「1」的數字時（例如上述例子的陣列中只有三個元素，但是你卻輸入了「3」或是比「3」還大的數字，則 JavaScript 會回傳「undefined」）。如以下所示：

var courses = new Array("HTML", "CSS", "JS");
document.write(courses[3])
                        

See the Pen JavaScript-Array2 by Tedutw (@Tedutw) on CodePen.

使用其他方式來建立陣列 Array

除了上述方式，我們還可以藉由先輸入陣列元素個數、之後再告知哪個序號對應到哪個元素的方式來建立陣列。
例如，我們把上述的 courses 陣列使用此方法來寫，則JavaScript原始碼如下：

var courses = new Array(3);
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";

JavaScript 的陣列是動態的，因此我們在上述例子中的第一行「var courses = new Array(3);」，也可以不給元素的數目，即為「var courses = new Array();」。此時，後面的元素就可自由增加如下：

var courses = new Array();
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";
courses[3] = "JQuery"

實務上常用：陣列實字 (Array literal)

以上介紹了JavaScript陣列的寫法。為了提高前端工程師的執行速度，我們可以把以上的寫法簡化成陣列實字 (Array literal)寫法，如下所示：

var courses = ["HTML", "CSS", "JS"]; 

這樣子的寫法，等同於「var courses = new Array("HTML", "CSS", "JS");」，差別是陣列實字的寫法，少了關鍵字「new Array」，並且把元素左右側的括號改成方形括號。此種簡化的寫法最常被前端工程師所使用。
今天就介紹到這裡，在接下來「JavaScript入門教學#21」的文章中，我們將繼續介紹陣列的屬性、合併方法等。建議讀者們先消化一下陣列的寫法，再進入下一章學習陣列的活用，才會學得更輕而易舉。

參考連結:

Python不是蟒蛇,Java是咖啡,奇葩的程式語言命名起源

用Python或Java寫程式時，聽什麼音樂能增加效率?

Java、Python...初學者該從哪個程式語言下手？

APCS 是什麼？所有 APCS 檢定的問題這篇都會回答你！

學會Python,不愁沒工作!

用Python處理excel的優點多多!

中國獨立開發"木蘭"程式語言竟是抄襲Python

前端工程師必知:JavaScript變數命名規範

想當前端工程師的你絕對不能錯過這篇JavaScript文章!

今天小編要跟大家分享的文章是關於前端工程師要知道的 JavaScript 變數命名規範，

正在從事前端工程師工作或是想當前端工程師的朋友們來和小編一起看一看吧!

希望本篇文章能夠對大家有所幫助幫助。

JavaScript 變數命名規範：只能由英語字母，數字，下劃線，美元符號$構成，並且不能以數字開頭，並且不能是JavaScript保留字。

前端工程師工程師要知道的JavaScript變數命名規範

下列都是非常正確的變數命名：

var haha​​ = 250;

var xixi = 300;

var a1 = 400;

var a2 = 400;

var abc_123 = 400;

var $ abc = 999;

var $ o0_0o $ = 888;

var $ = 1000;

var _ = 2000;

var ________ = 3000;

下列都是錯誤的命名：

var a-1 = 1000; //不能有怪異符號

var a @ = 2000; //不能有怪異符號

var 2year = 3000; //不能以數字開頭

var a ￥ = 4000; //不能有怪異符號

var a *＃$＃$ @ = 5000; //不能有怪異符號

var a b = 300; //不能有空格

下列的單詞，叫做保留字，就是說補充當做變數名

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

需要注意大寫字母是可以使用的，並且大小寫敏感。最初A和a是兩個變數。

1 var A = 250;

2 var a = 888;

參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

AI 甩尾技術勝 Ken Block！方程式冠軍車手嘆：要失業了

日推AI手機具「防拍裸照」功能！再拍人工智慧就跟你媽告狀

免費Java開發工具大全,千萬別錯過!!

JavaScript教學17.物件

JavaScript入門#18創造物件

JavaScript教學19.方法

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#19方法

方法 (Method)

程式語言JavaScript 教學中,「方法 (Method)」也是函式（Function）的一種，但跟之前介紹的「函式（Function）」的差別是，「方法 (Method)」被當成物件屬性來存取。 JavaScript 「方法 (Method)」的語法如下：

method名稱 = function() { 此處為要執行的代碼
使用以下語法將「方法 (Method)」叫出來

物件名稱.method名稱
方法 (Method) 是一種函數，屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件，這意味著前端工程師可以使用它來存取物件的屬性和方法

定義方法 (Method) ，需在函式建構式內完成，範例如

See the Pen Javascript19-method by Tedutw (@Tedutw) on CodePe

在上述 JavaScript 範例，我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數，也取用參數名稱「name」，並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其

除了上述方法，前端工程師還可以在函式建構式之外定義函式，並將該函式與其物件相連。範例如

See the Pen Javascript19-method-2 by Tedutw (@Tedutw) on CodePeˊn.下：參數n.下：。()： }中的「方法 (Method)」也是函式（Function）的一種，但跟之前介紹的「函式（Function）」的差別是，「方法 (Method)」被當成物件屬性來存取。 JavaScript 「方法 (Method)」的語法如下：

method名稱 = function() { 此處為要執行的代碼 }

使用以下語法將「方法 (Method)」叫出來：

物件名稱.method名稱()

方法 (Method) 是一種函數，屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件，這意味著前端工程師可以使用它來存取物件的屬性和方法。
定義方法 (Method) ，需在函式建構式內完成，範例如下：

See the Pen Javascript19-method by Tedutw (@Tedutw) on CodePen.

在上述 JavaScript  範例，我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數，也取用參數名稱「name」，並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其參數
除了上述方法，前端工程師還可以在函式建構式之外定義函式，並將該函式與其物件相連。範例如下：

See the Pen Javascript19-method-2 by Tedutw (@Tedutw) on CodePen.

參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

AI 甩尾技術勝 Ken Block！方程式冠軍車手嘆：要失業了

日推AI手機具「防拍裸照」功能！再拍人工智慧就跟你媽告狀

得先掌握JavaScript,才能有效學習網頁前端？

幫你集結各種免費Java開發工具!!

JavaScript入門#18創造物件

JavaScript教學18.創造物件

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#18創造物件

物件建構式（object constructor）

在上一JavaScript課中，我們使用物件（object）初始值（initializer）語法來創建了一些 JavaScript 物件。

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

以上的JavaScript例子只建立了單一的「person」。有時前端工程師也需要設定「物件種類（object type）」來創建單一種類的多個物件
此時前端工程師可以使用「物件建構式（object constructor）」創建「物件種類（object type）」。範例如下：

See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw (@Tedutw) on CodePen.

上述的函式「function person」就是一個物件建構式（object constructor）：接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。
上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性（因為其值不能改變），僅僅是一個關鍵字。

創造物件

一旦有了物件建構式（object constructor）之後，就可以使用關鍵字「new」來創建同一種類型（type）的新物件（new objects）

See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw (@Tedutw) on CodePen.

在上述的例子，變數 b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性，這些屬性被分配給對應的物件值。例如 b1 的 "Valention Rossi" 屬性被分配給物件值 "name"。
上述例子中，b1 的物件名稱與屬性名稱分別列表如下

1. 物件：name；屬性：Valention Rossi
2. 物件：nationality；屬性：Italy
3. 物件：team；屬性：Monster Energy Yamaha MotoGP
4. 物件：BikeNo；屬性：46

b2 的哪個屬性被分配（對應）給哪個物件名稱也如同上述的形式：

1. 物件：name；屬性：Valention Rossi
2. 物件：nationality；屬性：Marc Márquez
3. 物件：team；屬性：Repsol Honda Team
4. 物件：BikeNo；屬性：93

照著以上的語法，多練習幾遍，相信你會很快熟悉如何在JavaScript中快速建立新的物件屬性

參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI 產業革命開始！為何 Python 成人工智慧必備語言？

為什麼學習網頁前端一定要掌握JavaScript？

Javascript學堂1.在網頁中嵌入JavaScript

JavaScript教學2.變數


JavaScript入門#3資料類型

JavaScript教學17.物件

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#17物件

JavaScript的變數（variable）可以比喻成用來盛裝「值（value）」的容器。本篇介紹的「物件（objects）」就是變數（variable）的其中一種，並且可以承裝多個值（value）。
一個物件（objects）可以被比喻成一張列有多個值（value）的清單，清單上每個物件的格式為「屬性:屬性值」。所有的屬性、屬性值均以冒號為區隔，範例與說明(「//」開頭的橫行為說明文字) 如以下所示：

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

結論：JavaScript 的物件 Objects 就像是容器，能裝多個「有名字」的值。

物件屬性（object property）

在JavaScript 中，要存取物件的屬性（object property），有兩種寫法：

1. 物件名.屬性名
2. 物件名['屬性名']

以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示：

See the Pen JavaScript 17-Objects-2 by Tedutw (@Tedutw) on CodePen.

順帶一提，JavaScript 有內建「length」屬性，可以計算屬性名稱的字數。承上例，「length」屬性如下所示

See the Pen JavaScript 17-Objects-3 by Tedutw (@Tedutw) on CodePen.

物件方法（object method）

JavaScript中的物件方法（object method）是一個含有「函式定義（ function definition）」的屬性，存取物件方法（object method）的寫法如以下所示：

• 物件名.方法名

如同大家都知道的，document.write() 會顯示資料的內容，這個 write()函式就是物件「document」的方法。「document.write()」就是一個物件方法（object method） 的例子。


參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI 產業革命開始！為何 Python 成人工智慧必備語言？

為什麼學習網頁前端一定要掌握JavaScript？

Javascript學堂1.在網頁中嵌入JavaScript

JavaScript教學2.變數

JavaScript入門#3資料類型