摘要:系列目錄復習資料資料整理個人整理重溫基礎語法和數據類型重溫基礎流程控制和錯誤處理重溫基礎循環和迭代重溫基礎函數本章節復習的是中的表達式和運算符,用好這些可以大大提高開發效率。
本文是 重溫基礎 系列文章的第五篇。
今日感受:家的意義。
系列目錄:
【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理)
【重溫基礎】1.語法和數據類型
【重溫基礎】2.流程控制和錯誤處理
【重溫基礎】3.循環和迭代
【重溫基礎】4.函數
本章節復習的是JS中的表達式和運算符,用好這些可以大大提高開發效率。
**由于思否的markdown編輯器中,用表格編輯的時候,若含有"||"或者"|"會出錯,所以我這里有幾張用截圖咯。
一些基礎:JavaScript中運算符有一元、二元和三元(條件)運算符,常見寫法:
// 操作數 + 運算符 + 操作數 1 + 2 ; // 運算符 + 操作數 x ++; // 操作數 + 運算符 ++ x;
本文將介紹一下幾類運算符:
賦值運算符(Assignment operators)
比較運算符(Comparison operators)
算數運算符(Arithmetic operators)
位運算符(Bitwise operators)
邏輯運算符(Logical operators)
字符串運算符(String operators)
條件(三元)運算符(Conditional operator)
逗號運算符(Comma operator)
一元運算符(Unary operators)
關系運算符(Relational operator)
1.賦值運算符最簡單的賦值運算符是 = ,它將右邊操作數的值賦值給左邊的操作數,如 a = b。
另外常見的復合賦值運算符有如下:
|名稱|簡寫的操作符|含義|
|---|---|---|
|賦值| x = y| x = y|
|加法賦值| x += y | x = x + y|
|減法賦值| x -= y | x = x - y|
|乘法賦值| x *= y | x = x * y|
|除法賦值| x /= y | x = x / y|
|求余賦值| x %= y | x = x % y|
|求冪賦值| x **= y| x = x ** y|
|左移位賦值| x <<= y| x = x << y|
|右移位賦值| x >>= y| x = x >> y|
|無符號右移位賦值| x >>>= y| x = x >>> y|
|按位與賦值| x &= y| x = x & y|
|按位異或賦值| x ^= y| x = x ^ y|
|按位或賦值| x |= y| x = x | y|
另外在ES6中,新增一類解構賦值:
let a = ["aa", "bb", "cc"]; // 不使用解構賦值 let a1 = a[0]; let a2 = a[1]; // 使用解構賦值 let [a1, a2] = a;2.比較運算符
通過比較兩個比較對象來返回一個是否為真的布爾值,當兩個比較的對象不是相同類型,JavaScript會嘗試將兩個比較對象轉換成相同類型進行比較:
let a = 10; let b = "12"; a > b; // false
常用的比較運算符有:
|名稱|描述|返回true的示例|
|---|---|---|
|等于 == | 操作符兩邊數據相等 | 3 == "3" |
|不等于 !== | 操作符兩邊數據不相等 | 3 != "4" |
|全等 === | 操作符兩邊數據相等且類型相同 | 3 === 3 |
|不全等 !== | 操作符兩邊數據不相等或類型不相同 | 3 !== "3" |
|大于 > | 判斷操作符左邊大于右邊 | 3 > 2 |
|大于等于 >= | 判斷操作符左邊大于或等于右邊 | 3 >= 2 |
|小于 < | 判斷操作符左邊小于右邊 | 3 < 4 |
|小于等于 <= | 判斷操作符左邊小于或等于右邊 | 3 <= 4 |
注意:
=>不是運算符,而是ES6中新增的箭頭函數的標記符號。
除了標準的加減乘除這些基本運算符,JavaScript還提供一些新的算數運算符:
名稱 | 描述 | 示例 |
---|---|---|
求余 % | 返回相除之后的余數 | 11 % 5 返回 1 |
自增 ++ | ++N返回加一以后的值,N++返回原數值然后加一 | ++3返回4,3++返回3 |
自減 -- | --N返回減一以后的值,N--返回原數值然后減一 | --3返回2,3--返回3 |
一元負值符 - | 返回操作數的負數,若不是Number則試圖轉換為Number再取負值 | -"-2" 返回2;-2返回2 |
一元正值符 + | 若操作數不是Number類型則試圖轉換為Number | +"-2" 返回-2;+"2"返回2 |
指數運算符 ** | 計算底數a的指數n次方 | 2 ** 3 返回 8 |
位運算符是在數字底層(即表示數字的 32 個數位)進行操作的。
復習數字32位數的表示
示例解釋:
1的二進制表示為 0 0 0 0 0 0 1
3的二進制表示為 0 0 0 0 0 1 1
1.按位與 &
1 & 3 ; // 1 1 | 3 ; // 3 1 ^ 3 ; // 2 ~1 ; // -2 1>>1 ; // 0使用案例
1.16進制顏色值轉RGB:
function hexToRGB(hex){ let h = hex.replace("#","0x"), r = h >> 16, g = h >> 8 & 0xff, b = h & 0xff; return `rgb(${r},${g},${b})` } hexToRGB("#eeddff"); // "rgb(238,221,255)"
2.RGB轉16進制:
function RGBToHex(rgb){ let r = rgb.split(/[^d]+/), c = r[1]<<16 | r[2]<<8 | r[3]; return `#${c.toString(16)}`; } RGBToHex("rgb(238,221,255)"); // "#eeddff"5.邏輯運算符
常用來處理布爾值,但是當處理非布爾值的時候,往往返回非布爾值:
注意: 能被轉成false的值有null,0,NaN,空字符串""和undefined。
幾個示例:
let a1 = true && true; // true let a2 = true && false; // false let a3 = false && true; // false let a4 = false && false; // false let a5 = false && "leo"; // false let a6 = true && "leo"; // "leo" let a7 = "leo" && "robin";// "robin" let b1 = true || true; // true let b2 = true || false; // true let b3 = false || true; // true let b4 = false || false; // false let b5 = false || "leo"; // "leo" let b6 = true || "leo"; // true let b7 = "leo" || "robin";// "leo" let c1 = !true; // false let c2 = !false; // true let c3 = !"leo"; // false
常常還使用短路求值:
false && anything ; // 被短路求值為false true || anything ; // 被短路求值為true6.字符串運算符
在拼接字符串中,由 + 來連接兩個字符串:
let a = "leo " + "cute~"; // "leo cute~" let b = "ha"; a += b; // "leo cute~ha"7.條件(三元)運算符
可以使用三個操作數的運算符,運算結果為根據給定條件在兩個值中取一個:
// 當條件為真 則取 值1 ,否則取 值2 // 條件 ? 值1 : 值2 let a = 10; let b = a > 5 ? "yes" : "no"; // "yes"8.逗號運算符
對兩個操作數求值并且返回最終操作數的值,通常用于for循環中,在每次循環時對多個變量進行更新:
let a1 = [1,2,3,9,6,6]; for(let i = 0,j = 5; i<=j; i++, j--){ console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`) } // i:0,j:5,i值:1,j值:6 // i:1,j:4,i值:2,j值:6 // i:2,j:3,i值:3,j值:99.一元運算符
一元操作符僅對應一個操作數。
delete刪除一個對象或一個對象的屬性或者一個數組中某一個鍵值,返回一個布爾值,刪除成功返回true,否則返回false:
let a = {name : "leo",age : "15"}; delete a.name; // true a; // {age: "15"} let b = [1,3,5]; delete b[0]; // true b; // [empty, 3, 5] b[0]; // undefinedtypeof
返回一個參數的類型的字符串值,參數可以輸字符串,變量,關鍵詞或者對象:
typeof new Function(); // "function" typeof "leo" ; // "string" typeof 11 ; // "number" typeof undefined ; // "undefined" typeof true ; // "boolean" typeof null ; // "object"
參數也可以是表達式,typeof會根據其返回結果返回所包含的類型:
typeof (1+1) ; // "number" typeof (1+1==2 ? "yes" : "no") ; // "string"void
表示一個運算沒有返回值,常常用在創建一個超鏈接文本,但是點擊的時候沒有任何效果:
點擊 點擊10.關系運算符
比較兩個操作數:
in判斷指定屬性是否在指定對象中,若是則返回true:
// 對象 let a = {name:"leo",age:"15"}; "name" in a; // true // 數組 let b = ["leo", "pingan", "robin"]; 0 in b; // true "length" in b;// trueinstanceof
判斷一個對象是否是指定類型,若是則返回true:
let d = new Date(); d instanceof Date; // true11.運算符優先級
當我們需要調整表達式計算順序,就需要用到運算符的優先級,通過括號來實現排序,常見優先級從高到低:
1.MDN 表達式和運算符
本部分內容到這結束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787... |
JS小冊 | js.pingan8787.com |
歡迎關注微信公眾號【前端自習課】每天早晨,與您一起學習一篇優秀的前端技術博文 .
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100147.html
摘要:本文是重溫基礎系列文章的第十二篇。注意對象的名稱,對大小寫敏感。基礎用法第一個參數是目標對象,后面參數都是源對象。用途遍歷對象屬性。用途將對象轉為真正的結構。使用場景取出參數對象所有可遍歷屬性,拷貝到當前對象中。類似方法合并兩個對象。 本文是 重溫基礎 系列文章的第十二篇。 今日感受:需要總結下2018。 這幾天,重重的感冒發燒,在家休息好幾天,傷···。 系列目錄: 【復習資料...
摘要:迭代器和生成器將迭代的概念直接帶入核心語言,并提供一種機制來自定義循環的行為。本文主要會介紹中新增的迭代器和生成器。屬性本身是函數,是當前數據結構默認的迭代器生成函數。 本文是 重溫基礎 系列文章的第十三篇。今日感受:每次自我年終總結,都會有各種情緒和收獲。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型 【重溫基礎】2.流...
摘要:本文是重溫基礎系列文章的第十篇。返回一個由回調函數的返回值組成的新數組。返回一個數組迭代器對象,該迭代器會包含所有數組元素的鍵值對。回調函數接收三個參數,當前值當前位置和原數組。 本文是 重溫基礎 系列文章的第十篇。 今日感受:平安夜,多棒。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型 【重溫基礎】2.流程控制和錯誤...
摘要:本文是重溫基礎系列文章的第十一篇。返回一個布爾值,表示該值是否為的成員。使用回調函數遍歷每個成員。與數組相同,對每個成員執行操作,且無返回值。 本文是 重溫基礎 系列文章的第十一篇。 今日感受:注意身體,生病花錢又難受。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型 【重溫基礎】2.流程控制和錯誤處理 【重溫基礎】3....
摘要:構造函數通常首字母大寫,用于區分普通函數。這種關系常被稱為原型鏈,它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。中所有的對象,都有一個屬性,指向實例對象的構造函數原型由于是個非標準屬性,因此只有和兩個瀏覽器支持,標準方法是。 從這篇文章開始,復習 MDN 中級教程 的內容了,在初級教程中,我和大家分享了一些比較簡單基礎的知識點,并放在我的 【Cute-JavaScript】系...
閱讀 2744·2021-11-19 09:40
閱讀 5294·2021-09-27 14:10
閱讀 2099·2021-09-04 16:45
閱讀 1462·2021-07-25 21:37
閱讀 2994·2019-08-30 10:57
閱讀 2981·2019-08-28 17:59
閱讀 1055·2019-08-26 13:46
閱讀 1408·2019-08-26 13:27