《Ae教學》【搞什麼系列】番外2-Ae運算 (運算子)_AE表達式(expression)

更新於 發佈於 閱讀時間約 9 分鐘
【搞什麼系列】番外2-Ae 運算(運算子)

【搞什麼系列】番外2-Ae 運算(運算子)


叮咚! 村長的補課時間!今天來說明運算的那些事!



1+2 "1+2" 兩個咒語的差別在哪裡?
建立 2 個文字圖層,在 Source Text 分別使用上面兩個咒語,結果如下:

raw-image
運算與字串

運算與字串

1+2 是運算,而用 "" 引號中為字串。
提到運算,就會有運算元、運算子。


什麼是運算元、運算子?

1+2
意思就是:運算元(1) 運算子(+) 運算元(2)



在表達式中做運算需要宣告變數,不僅可以讓做的事情更多,也比較不容易產生錯誤,那如何宣告變數呢?

宣告變數的方法

let 是什麼?

宣告一個只作用在當前區塊的變數,初始值可選擇性的設定。


var 是什麼?

宣告一個全域性變數,同時可以非強制性地賦予一初始值。


var、let 差異?

let 可以宣告只能在目前區塊、階段或表達式中作用的變數。而 var 則是定義了一個全域變數,或是在整個 function 而不管該區塊範圍。


運算子常用類型

賦值運算子(如:=)

一個賦值運算子將基於其右方的運算元的值賦予其左方的運算元。
最簡單的賦值運算子是等於(=),它將賦予左方運算元與右方運算元相同之值。 也就是,x = y 會把 y 的值賦予給 x。

基礎類型

類型 簡化表達式 意義

  • 賦值  x = y x = y
  • 加法賦值 x += y x = x + y
  • 減法賦值 x -= y x = x - y
  • 乘法賦值 x *= y x = x * y
  • 除法賦值 x /= y x = x / y
//賦值
var a = 10;
a
//加法賦值,意思為 a = a + 15
var a = 10;
a += 15
//減法賦值,意思為 a = a - 15
var a = 10;
a -= 15
//乘法賦值,意思為 a = a * 15
var a = 10;
a *= 15
//除法賦值,意思為 a = a / 10
var a = 10;
a /= 10
賦值運算子

賦值運算子



比較運算子 (==、>=……)

比較運算元並基於比較的結果回傳邏輯值。
運算元可以是數字,字串,邏輯,或物件的值。

  • 等於 (==)
    假如運算元等價就回傳 True。不管比較運算元的兩邊是否為同型態。
//等於 (==),比較運算元的兩邊為相同型態
var a = 10;

if ( 10 == a ){
true
}else{
false
}
//等於 (==),比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;

if ( "10" == a ){
true
}else{
false
}

不等於 (!=)
假如運算元不等價就回傳 True。不管比較運算元的兩邊是否為同型態。

//不等於 (!=),比較運算元的兩邊為相同型態
var a = 10;
var b = a-5;

if ( a != b ){
true
}else{
false
}
//不等於 (!=),比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;
var b = a-5;

if ( "a" != b ){
true
}else{
false
}
等於 (==)、不等於 (!=)

等於 (==)、不等於 (!=)


  • 嚴格等於 (===)
    假如運算元具有相同型態且等價則回傳 True。
== 與 === 的差別
===(嚴格相等) 比較兩個值,而被比較的兩個值都不會轉換成其他型別。如果值是不同型別,就會被視為不相等
//嚴格等於 (===)
var a = 10;

if ( 10 === a ){
true
}else{
false
}
//嚴格等於 (===),因比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;

if ( "10" === a ){
true;
}else{
false
}
  • 嚴格不等於 (!==)
    假如運算元具有相同型態但不等價,或是具有不同型態,回傳 True。
嚴格等於 (===)

嚴格等於 (===)

  • 大於 (>)
    假如左方運算元大於右方運算元,回傳 True。
  • 大於或等於 (>=)
    假如左方運算元大於或等於右方運算元,回傳 True。
  • 小於 (<)
    假如左方運算元小於右方運算元,回傳 True。
  • 小於或等於 (<=)
    假如左方運算元小於或等於右方運算元,回傳 True。

備註: => 不是運算子,是 箭頭函式。


算術運算子 (如:+ - * /)

以數值(文字或變數也可以)作為其運算元,並回傳單一數值。
最常見的算術運算元是 加法 (+),減法 (-), 乘法 (*),及除法 (/)。

除了標準的算術運算子外 (+, -, * /),下面再舉例幾種

  • 增加 (++)
    一元運算子。 將運算元增加 1。假如使用在運算元之前 (++ a),會運算元回傳增加 1 後的值;假如使用在運算元之後 (a ++), 會回傳運算元加 1 前的值。
//11
var a = 10;
++ a
//10
var a = 10;
a ++
  • 減少 (--)
    一元運算子。 將運算元減少 1。回傳值的情況與增加運算元相同。
//9
var a = 10;
-- a
//10
var a = 10;
a --
增加 (++)、減少 (--)

增加 (++)、減少 (--)

  • 減號 (-)
    一元運算子。回傳運算元的負數 例如 a 是 10,-a 回傳 -10。
//-10
var a = 10;
- a
  • 加號 (+)
    一元運算子。嘗試將運算元轉換成數字,假如它還不是數字的話。例:+"10" 回傳 10。 +true 回傳 1
//10
var a = "10";
+ a
  • 指數運算子 (**)
    計算以 a 為底的 b 次方。例如:a ** 2 回傳 a2 的運算結果。
//100
var a = 10;
a**2
減號 (-)、加號 (+)、指數運算子(**)

減號 (-)、加號 (+)、指數運算子(**)


邏輯運算子 (&&、||、!)

通常被用於布林(邏輯)值; 使用於布林(邏輯)值時,它們會回傳布林型態的值。
然而,&& 和 || 運算子實際上是回傳兩指定運算元之一,因此用於非布林型態值時,它可能會回傳一個非布林型態的值。

  • AND (&&)
    && 在兩個運算元都是 True 時才會回傳 True,否則回傳 false。
// && 兩邊都是true​,回傳 true​
var a = 10;
var b = 30;

if ( a == 10 && b == 30 ){
true;
}else{
false
}
// && 一邊為 true,一邊為 false​,回傳 false
var a = 10;
var b = 30;

if ( a == 10 && b == 20 ){
true;
}else{
false
}
  • OR (||)
    || 在兩個運算元有任一個是 True 時就會回傳 True,否則回傳 false。
// || 一邊為 true,就會回傳 true
var a = 10;
var b = 30;

if ( a == 10 || b == 20 ){
true;
}else{
false
}
  • NOT ( !)
    ! 運算式假如單一個運算元能被轉換成 True 時,回傳false,不然回傳 true。
//只要 true 時,就回傳 false
var a = 10;
var b = 30;

if ( ! ( a == 10 && b == 30) ){
true;
}else{
false
}
邏輯運算子

邏輯運算子



✴️村長的宣傳時間✴️

📌最新動畫作品在這 ➡️ instagram
📌更新會比 IG 晚一天 ➡️ YouTube
📌追蹤✅、點❤️、分享🔗、收藏📂


合作請
私訊 Instagram
或寄信至 x.fei.4044@gmail.com


留言
avatar-img
留言分享你的想法!
avatar-img
🛸 Fei 起來的動態館 🛸
90會員
96內容數
嗨~我是 Fei,動態設計師。 會在這裡放一些跟動態製作(Ae)相關的文章,歡迎來看看喔! - 合作信箱|x.fei.4044@gmail.com
2024/08/05
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
2024/08/05
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
2024/07/01
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
2024/07/01
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
2024/06/03
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
2024/06/03
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第六章 請勇者們前往驅離地鼠。學習 if / else 如何使用! ˙if/else 是什麼 ˙Checkbox 控制 Opacity ˙Null Object 控制 Opacity ˙Position 控制 Opacity
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第六章 請勇者們前往驅離地鼠。學習 if / else 如何使用! ˙if/else 是什麼 ˙Checkbox 控制 Opacity ˙Null Object 控制 Opacity ˙Position 控制 Opacity
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News