鍍金池/ 教程/ HTML/ 表達式與運算符
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實踐
數據通信
變量作用域
BOM
JavaScript 程序設計
前端工程師概述
CSS
響應式布局
表達式與運算符
基本語法
JavaScript 介紹
版本控制
布局
調試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數據存儲
選擇器
頁面架構
開發(fā)及調試工具
頁面模塊化
節(jié)點操作
測量及取色
瀏覽器兼容
HTML 簡介
內置對象
實體字符
產品前端架構
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達式
動畫
語句
面向對象
HTML 語法
HTML 標簽
技術選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術
Canvas
接口設計
頁面優(yōu)化
文本

表達式與運算符

表達式與運算符

表達式

表達式為 JavaScript 的短語可執(zhí)行并生成值。

1.7 // 字面量
"1.7"
var a = 1;
var b = '2';
var c = (1.7 + a) * '3' - b

運算符

  • 算數運算符 (+ - * / %
  • 關系運算符 (> < == != >= <= === !==)
  • 邏輯運算符 (! && ||
  • 位運算符 (& | ^ ~ << >>
  • 負值運算符 (=
  • 條件運算符 (?:
  • 逗號運算符 (,
  • 對象運算符 (new delete . [] instanceof

=== 全等符號

全等運算符用于盤對左右兩邊的對象或值是否類型相同且值相等。

偽代碼拆解

function totalEqual(a, b) {
  if (a 和 b 類型相同) {
    if (a 和 b 是引用類型) {
      if (a 和 b 是同一引用)
        return true;
      else
        return false;
    } else { // 值類型
      if (a 和 b 值相等)
        return true;
      else
        return false;
    }
  } else {
    return false;
  }
}

例子

var a = "123";
var b = "123";
var c = "4";
var aObj = new String("123");
var bObj = new String("123");
var cObj = aObj;

a === aObj      // false
aObj === bObj   // false
aObj === cObj   // true
a === b         // true
a === c         // false

==

== 用于判斷操作符兩邊的對象或值是否相等。

偽代碼拆解

function equal(a, b) {
  if (a 和 b 類型相同) {
    return a === b;
  } else { // 類型不同
    return Number(a) === Number(b); // 優(yōu)先轉換數值類型
  }
}

例子

"99" == 99; // true
new String("99") == 99; // true
true == 1; // true
false == 0; // true
'\n\n\n' == // true
例外規(guī)則
  • null == undefined 結果為真 true
  • 在有 null/undefined 參與的 == 運算是不進行隱式轉換。
0 == null; // false
null == false; // false
"undefined" == undefined; // false

! 取反

!x 用于表達 x 表達式的運行結果轉換成布爾值(Boolean)之后取反的結果。!!x 則表示取 x 表達式的運行結果的布爾值。

var obj = {};
var a = !obj // false;
var a = !!obj // true;

&& 邏輯與

x && y 如果 x 表達式的運行交過轉換成 Boolean 值為 false 則不運行表達式 y 而直接返回 x 表達式的運行結果。相反,如果 x 表達式的運行交過轉換成 Boolean 值為 true 則運行表達式 y 并返回 y 表達式的運行結果。

偽代碼拆解

var ret = null;
if (!!(ret = x)) {
  return y;
} else {
  return ret;
}

例子

var a = 0 && (function(){return 1 + 1;})(); // 0
var b = 1 && (function(){return 1 + 1;})(); // 2

|| 邏輯或

x || y 如果 x 表達式的運行結果轉換為 Boolean 值為 true,則不運行 表達式 y 而直接返回表達式 x 的運算結果。(與 && 方式相反)

偽代碼拆解

var ret = null;
if (!!(ret = x)) {
  return ret;
} else {
  return y;
}

例子

var a = 0 || (function(){return 1 + 1;})(); // 2
var b = 1 || (function(){return 1 + 1;})(); // 1

元算符優(yōu)先級(Operator Precedence)

  • + - * / 高于 &&
  • * / 高于 + -
  • && 高于 ?:
  • () 內優(yōu)先級高于之外

NOTE:和數學上的算術優(yōu)先級類似,同級從左到右計算。如有疑問加上 () 既可解決優(yōu)先級問題。

Precedence Operator type Associativity Individual operators
19 Grouping n/a ( … )
18 Member Access left-to-right … . …
Computed Member Access left-to-right … [ … ]
new (with argument list) n/a new … ( … )
17 Function Call left-to-right … (?…?)
new?(without argument list) right-to-left new …
16 Postfix Increment n/a … ++
Postfix Decrement n/a … --
15 Logical NOT right-to-left ! …
Bitwise NOT right-to-left ~ …
Unary Plus right-to-left + …
Unary Negation right-to-left - …
Prefix Increment right-to-left ++ …
Prefix Decrement right-to-left -- …
typeof right-to-left typeof …
void right-to-left void …
delete right-to-left delete …
14 Multiplication left-to-right … *?…
Division left-to-right … /?…
Remainder left-to-right … %?…
13 Addition left-to-right … +?…
Subtraction left-to-right … -?…
12 Bitwise Left Shift left-to-right … <<?…
Bitwise Right Shift left-to-right … >>?…
Bitwise Unsigned Right Shift left-to-right … >>>?…
11 Less Than left-to-right … <?…
Less Than Or Equal left-to-right … <=?…
Greater Than left-to-right … >?…
Greater Than Or Equal left-to-right … >=?…
in left-to-right … in?…
instanceof left-to-right … instanceof?…
10 Equality left-to-right … ==?…
Inequality left-to-right … !=?…
Strict Equality left-to-right … ===?…
Strict Inequality left-to-right … !==?…
9 Bitwise AND left-to-right … &?…
8 Bitwise XOR left-to-right … ^?…
7 Bitwise OR left-to-right … |?…
6 Logical AND left-to-right … &&?…
5 Logical OR left-to-right … ||?…
4 Conditional right-to-left … ? … : …
3 Assignment right-to-left … =?…
… +=?…
… -=?…
… *=?…
… /=?…
… %=?…
… <<=?…
… >>=?…
… >>>=?…
… &=?…
… ^=?…
… |=?…
2 yield right-to-left yield?…
1 Spread n/a ...?…
0 Comma / Sequence left-to-right … ,?…
上一篇:HTML 簡介下一篇:產品前端架構