JavaScript(簡稱為JS)是一種廣泛應用于網頁開發的腳本語言,具有以下幾個主要作用:
網頁交互:JavaScript 可以用于創建動態的網頁效果,例如響應用戶的操作,實現頁面內容的動態更新,以及驗證用戶輸入等。
與用戶交互:通過 JavaScript,網頁可以與用戶進行實時的交互,例如表單驗證、響應點擊事件、實現動畫效果等,從而提升用戶體驗。
操作 DOM:JavaScript 可以通過 DOM(Document Object Model 文檔對象模型)來操作網頁的結構、樣式和內容,使開發者能夠動態地修改頁面元素,實現頁面的動態效果。
異步數據請求:JavaScript 可以通過 AJAX 技術(Asynchronous JavaScript and XML 異步 JavaScript 和 XML)向服務器發送異步請求,獲取數據并動態更新頁面內容,實現無需刷新頁面即可加載新數據的功能。
構建 Web 應用:JavaScript 還可以用于構建復雜的 Web 應用,例如單頁應用(SPA,Single Page Application)和動態網站,通過 JavaScript 的框架和庫(如React、Angular、Vue.js等),開發者可以更高效地構建現代化的 Web 應用程序。總的來說,JavaScript 在網頁開發中扮演著至關重要的角色,它使得網頁不再是靜態的展示頁面,而是可以實現豐富的交互和動態效果,從而提升用戶體驗和網站的功能性。
這里寫自定義目錄標題
- 一、JavaScript發展史
- 1.1 JavaScript用途
- 1.2 JavaScript非常好學
- 二、Hello Word!
- 1.1 js代碼的書寫
- 1.1.1 javascript標簽的書寫:
- 1.1.2 放置位置,執行順序
- 1.1.3 console.log() 控制臺
- 1.1.4 alert()
- 1.1.5 prompt()
- 1.2 一個簡單的js過程
- 1.2.1獲取元素
- 1.2.2 綁定事件
- 1.2.3寫js代碼需要注意什么?
- 1.3 不同位置的js代碼
- 1.3.1 當js代碼放在獲取的元素之前的時候
- 1.3.2 將js代碼放在標簽內
- 1.4 事件
- 1.5 在標簽中添加 或者 獲取內容
- 1.5.1 innerHTML
- 1.5.2 innerText
- 三 變量和字面量初步
- 1.1 變量和初步認識this
- 1.1.1 定義變量
- 1.1.2 變量要先申明才能用
- 1.1.4 變量的運用
- 1.1.2 this的簡單認識
- 1.2 數字的字面量
- 1. 八進制舉例:
- 2. 16進制舉例:
- 3. NaN
- 1.3 字符串
- 1.4 變量類型
- 1.4.1 數據類型(5種)
- 1.4.2 引用類型
- 四、數學運算符
- 1.1 數學運算符
- 1.1.1 string → number (顯示類型轉換)
- 1.1.2 number → string
- 1.1.3 toString()
- 1.1.4 隱式轉換
- 1.1.5 取余 %
- 1.2 關系運算符
- 1.2.1關系運算符的正統,number和number進行數學運算,得到的答案boolean
- 1.2.2 不正統的關系運算,為了面試
- 1.3 邏輯運算符
- 1.3.1 && 與運算符
- 1.3.2 || 或運算符
- 1.3.3 ! 非運算符
- 1.4 賦值運算符
- 1.5 Math對象方法
一、JavaScript發展史
1.1 JavaScript用途
前端三層:
- 結構層 HTML 從語義的角度描述頁面的結構
- 樣式層 CSS 從審美的角度裝飾頁面
- 行為層 JavaScript 從交互的角度提升用戶體驗
說白了,JavaScript用來制作web頁面交互效果,提升用戶體驗
1.2 JavaScript非常好學
好學的點是什么:
- JavaScript是有界面效果:不像C語言,黑底白字,很枯燥的。
- JavaScript的語法來源于C和Java:有C和Java的經驗同學好學很多。
- JavaScript是弱變量類型的語言,動態數據類型語言。
- JavaScript運行在宿主環境中,不關心內存,垃圾回收。
不好學的點是什么:
- 兼容性問題: IE8是個怪胎,很多東西都不一樣,所以就要寫兼容寫法,不怕造輪子,多寫幾遍
- 花式寫法很多,抽象:從簡單入手,細細品味代碼
- 太多細節: 為知筆記認真寫自己的筆記,自己做實驗; 老師的課程已經精挑細選了細節,并不盲目堆砌
二、Hello Word!
1.1 js代碼的書寫
1.1.1 javascript標簽的書寫:
三種寫法都是對的
<script></script>
<script type="text/javascript"></script>
<script language="javascript"></script>
JavaSript程序,要寫在HTML頁面中,運行頁面的時候,這個頁面上的JS也就一起運行了。也就是說,js的運行必須有宿主環境,最最常見的宿主環境,就是瀏覽器
1.1.2 放置位置,執行順序
可以放置在頁面中任何位置,但是,我們通常放在body或者head結束之前,且要注意加載順序,從上到下依次加載
就像css一樣,js還可以引入外部js文件,通常放在head結束之前
<script src="index.js"></script>
1.1.3 console.log() 控制臺
console.log("內容");
在控制臺輸出內容,字符串需要加引號(單雙引號不區分,成對出現就好)
1.1.4 alert()
alert("內容");
1.1.5 prompt()
var a = prompt("請輸入用戶名:");
會把用戶輸入的值返回,存到a里面
1.2 一個簡單的js過程
我們想要用js操作元素,和我們的css一樣,需要選擇到這個元素,當然,我們的css是通過選擇器,那么js是通過什么呢?
1.2.1獲取元素
我們來學習第一個獲取元素的方法
document.getElementById("id名");//通過ID選擇器獲取元素
//document代表整個HTML頁面
1.2.2 綁定事件
當我們獲取到元素以后,我們可以操作元素了,我們來給他綁定一個點擊事件,通常也叫做添加監聽。
document.getElementById("box").onclick = function () {alert("Daniel好帥!Daniel好帥!");
};
1.2.3寫js代碼需要注意什么?
通過上面的一段簡單的js代碼,我們可以總結出一些js的代碼規范
- 代碼要縮進,縮進要對齊
- js嚴格區分大小寫
- 語句字符都要半角符號
- 每條完整語句后面要寫分號
- JavaScript對空格和換行不敏感,因此,語句后面的分號就顯得尤為重要,分號代表一個語句執行完畢
1.3 不同位置的js代碼
1.3.1 當js代碼放在獲取的元素之前的時候
這個時候由于代碼是由上到下執行的,因此js找不到box,這個時候就會報錯,這個時候我們可以用
window.onload = function(){}
將我們的代碼包裹起來,這個代碼的意思是:頁面加載完成(標簽、圖片、框架…)后,執行代碼。
但是,一個頁面只能出現一次
<script>
window.onload = function(){document.getElementById("box").onclick = function(){alert( '這是我的第一段JavaScript代碼~' );};
};
</script>
<body>
<div id='box'></div>
</body>
1.3.2 將js代碼放在標簽內
神奇的是,我們還能將js的代碼放在標簽里面,但是,寫法有所不同
<div id='box' onclick='alert("這是我的第一段JavaScript代碼~")'></div>
我們可以發現,少了function方法,好比我們有onclick這一個屬性一樣直接用等號加引號接上他的屬性值
但是,這樣子寫沒辦法維護,代碼一多久雜亂無章,可讀性差因此我們不會這樣寫js
1.4 事件
JS里面有很多的事件,剛剛我們講的onclick就是其中的左鍵點擊事件。
我們可以講這些事件大致分為幾類:鼠標事件、鍵盤事件、表單事件、系統事件。此處做簡單認識,暫時無需全部掌握。
鼠標事件:
onclick 鼠標點擊事件
onmouseover/onmouseout 鼠標被移入/移出(會冒泡,暫時不需要理解)
onmouseenter/onmouseleave 鼠標移入/移出(常用)
ondblclick 鼠標雙擊事件
onmousedown 鼠標按鍵按下事件(按下不彈起)
onmousemove 鼠標移動事件
onmouseup 某個鼠標抬起事件
表單事件:
onblur 元素失去焦點
onfocus 元素獲得焦點
onchange 用戶改變表單的內容 (發生在失去焦點之前)
用戶改變表單內容:當失去焦點的時候表示改變完成,但是又在失去焦點事件之前執行
onreset 重置按鈕被點擊(注意:要給form表單設置該事件)
onsubmit 提交按鈕被點擊
鍵盤事件:
onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵盤的鍵被松開
系統事件:
onload 某個頁面或圖像被完成加載
onresize 窗口或框架被調整尺寸
onselect 文本被選定
onerror 當加載文檔或圖像時發生某個錯誤(xss跨站腳本攻擊時使用)
1.5 在標簽中添加 或者 獲取內容
我們先來做一個小小的案列,當我們鼠標移入box盒子的時候顯示一段文字:
1.5.1 innerHTML
我們又學習到一個新的屬性:innerHTML 獲取元素里面的內容或者添加內容
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel';
};
當然也可以獲取內容
console.log(document.getElementById('box').innerHTML);
這個時候我們可以獲取里面的內容,是獲取到里面所有的內容,包括標簽
1.5.2 innerText
此外,還有一個innerText也可以添加內容
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerText = '<p>大家好,我是Daniel。</p>';
};
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '<p>大家好,我是Daniel。</p>';
};
但是我們可以看出來,innerText不能解析標簽,而innerHTML可以。
注意:這兩個屬性都是可讀可寫的,也就是既可以修改也可以獲取.
三 變量和字面量初步
1.1 變量和初步認識this
變量(Variables),和高中代數學習的x、y、z很像,它們不是字母,而是蘊含值的符號。
它和直接量不同,直接量5,就是數字5;直接量”你好”就是字符串“你好”。現在這個變量不一樣了,你看見一個a,實際上它不是字母a,而是里面蘊含的不同的值。
1.1.1 定義變量
<script type="text/javascript">//定義一個變量var a;//賦值a = 100;//輸出變量aconsole.log(a);
</script>
我們使用var關鍵字來定義變量,所謂的關鍵字就是一些有特殊功能的小詞語,關鍵字后面要有空格。var就是英語variables變量的縮寫,表示定義一個變量。一旦你
var a
你的電腦內存中,就會開辟一個空間,來存儲這個變量a。現在就可以給這個變量賦值,JS中給變量賦值用等號,等號右邊的值賦給左邊
a = 100
現在a變量的值就是100。所以我們輸出
console.log(a) //100
1.1.2 變量要先申明才能用
使用一個變量,必須先進行一個var,才能使用。var這個過程可以叫做聲明declaration,也可以叫做定義definition。
現在我們直接運行語句:
console.log(b); //這個b沒有被var過,所以要報錯
因為b沒有被定義,所以b現在不是一個變量,系統不認識這個b的。拋出引用錯誤。而且
如果一個變量,僅僅被var了,但是沒有被賦初值呢,此時這個變量的值就是undefined 未定義
var a;
console.log(a); //undefined
變量也可以一邊定義一邊賦值
var a = 10;
還可以同時定義多個變量
var a = 10,b = 20;
變量的名稱是標識符(identifiers),任何標識符的命名都需要遵守一定的規則:
- 在JavaScript語言中,一個標識符(identifier)可以由 字母、下劃線(_)、美元($)符號、數字(0-9) 組成,但不能以數字開頭 。也就是說,一個標識符必須由字母、下劃線、美元符號開頭,后續可以有字母、下劃線、美元符號、數字。因為JavaScript語言是區分大小寫的,所以A和a不是同一個變量。并且不能是JavaScript保留字、關鍵字。
1.1.4 變量的運用
之前我們設置了一個js事件,鼠標移入會顯示內容,那么,當移出的時候我們也給他設置事件,讓里面的內容清空
document.getElementById('box').onmouseover = function(){document.getElementById('box').innerHTML = '大家好,我是Daniel。';
};
document.getElementById('box').onmouseout = function(){document.getElementById('box').innerHTML = '' ";
};
這個時候,我們可以看到我們的頁面中有一大串重復的語句document.getElementById(‘box’) ,這時候我們就可以用變量把他給存起來。
var oBox = document.getElementById('box');
oBox .onmouseover = function(){oBox .innerHTML = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){oBox .innerHTML = ''";
};
這個時候,我們可以發現,我們的代碼量少了很多,優化了代碼,也提升了運行速度,但是,我們卻不能這樣子,
var oBox = document.getElementById('box');
var x= oBox .innerHTML
oBox .onmouseover = function(){x = '大家好,我是Daniel。';
};
oBox .onmouseout = function(){x = ''";
};
這個時候是什么情況呢,是我們把oBox的內容復制給了x,再將’大家好,我是Daniel。復制給x,這時候,等價于給x新賦值了內容,把之前的覆蓋了。在js里面 ‘=’是賦值的意思,‘==’才是等于的意思
1.1.2 this的簡單認識
this指向觸發這個事件的對象
oBox1.onmouseenter = function () {this.innerHTML = "我愛Daniel!";//在js里面=是賦值
};
oBox1.onmouseleave = function () {this.innerHTML = "Daniel好帥!";//在js里面=是賦值
};
字面量:英語叫做literals,有些書上叫做直接量。
我們先來學習數字的字面量,和字符串的字面量。剩余的字面量類型,我們日后遇見再介紹
1.2 數字的字面量
數字的字面量,就是這個數字自己,并不需要任何的符號來界定這個數字。
JavaScript中,數字的字面量可以有三種進制:
- 10進制:普通的數字就是十進制
- 8進制:如果以0開頭、或者以0o開頭、或者以0O開頭的都是八進制,八進制只能用0~7來表示
- 16進制:如果以0x 或0X開頭的都是十六進制。
1. 八進制舉例:
以0開頭,所以就是八進制;顯示的時候會以十進制顯示 036 = 3*8+6=30
console.log(036); //30console.log(044); //36console.log(010); //8console.log(0o36); //30console.log(0O36); //30console.log(010); //8
注意,八進制只能出現0~7這8中字符,如果表示不合法,那么JS將自動的認為你輸入錯了,從而用十進制進行顯示:
console.log(088);//88
以0開頭,按理說是八進制,但后面的數字錯了,所以以十進制顯示
但是以0o
開頭、0O
開頭的數字,如果后面寫錯了,控制臺報錯
2. 16進制舉例:
十六進制數:0 1 2 3 4 5 6 7 8 9 a b c d e f
console.log(0xff); //255
console.log(0x2b); //43
console.log(0x11); //17
小數的字面量也很簡單,就是數學上的點。計算機世界中,小數稱為“浮點數”,允許使用e來表示乘以10的幾次冪:
console.log(5.6e5); //560000
console.log(1e-4); //0.0001
console.log(.1e-3); //0.0001
只有十進制有小數的字面量,八進制、十六進制沒有小數的字面量
最后學習兩個特殊的字面量:
Infinity 無窮大
試圖輸出一個非常大的數字:
console.log(3e45645645645645); //infinity
至于多大的數字能生成無窮大,不同瀏覽器不一樣,不要管,當然也可以是負無窮大
3. NaN
英語全名叫做not a number,不是一個數。比較哲學的是,這個“不是一個數”是一個數字字面量
console.log(0/0);
簡單得說就是用不是數字字面量或數字字符串參與運算,或者不符合運算法則的結果就是NaN
總結一下,數字字面量有 整數字面量(十進制、16進制、八進制),浮點數字面量(要記住e),Infinity,NaN
1.3 字符串
字符串是一個術語,就是人類說的語句、詞。字符串的字面量,必須用雙引號、單引號包裹起來。字符串被限定在同種引號之間;也即,必須是成對單引號或成對雙引號。
console.log("今天天氣很好")
或者
console.log('今天天氣很好')
但是絕對不能
console.log('今天天氣很好")
無論什么類型,只要用引號引起來以后就是字符串
如果在字符串里面要使用引號,那么必須用轉義符號""轉義:
console.log("老師說你像\"考拉\"一樣漂亮");
1.4 變量類型
這個變量是什么類型,和賦的值有關系,而和定義的時候是沒有關系的。定義的時候,都是用var關鍵字定義的
檢測數據類型用typeof
var a = 10;
console.log(typeof a);
1.4.1 數據類型(5種)
基本類型5種:
number
數字類型string
字符串類型undefined
undefined類型,變量未定義時的值,這個值自己是一種類型boolean
布爾類型,僅有兩個值true 和 false,講if語句時我們細說null
null類型,空對象 這個值自己是一種類型,遇見時我們細說
(1) number 數字類型
var a = -100;
(2)string 字符串(無論什么類型,用引號引起來就是字符串)
var a = '100';
注意:空字符串,也是字符串。
(3) undefined
var a;
console.log(a); //undefined
(4) boolean 布爾值(true/false)
var a = false;
1.4.2 引用類型
所謂的引用類型就是在進行比較的時候比較的不僅是值,還有內存地址
(1)function 函數類型
var a = function () {console.log("Daniel!");};var b = function () {console.log("Daniel!");};console.log(typeof a); // functionconsole.log(a === b); //false};
我們可以發現 雖然這兩個函數長得一模一樣,但是卻不相等,這就是因為在定義的時候開辟了兩個不同的內存,導致他們的內存地址不相等,所以值不等。
還有json,數組也是引用類型,不過,function是獨立的function類型,json和數組是object類型
(2)object對象(元素節點、數組、JSON、null)
元素節點:
var oBox = document.getElementById('box');
console.log(typeof oBox); //object
數組:
數組(數組里面可以放任意的數據類型,包括數組)
var a = [1,2,3,'Daniel','好帥'];
可以通過下標的方式獲取數組里面的內容,數組的下標從0開始
console.log(a[2]); //3
通過.length獲取數組的長度
console.log(a.length) //5
類型:object
var a = [1,2,3,4];
var b = [1,2,3,4];
console.log(typeof a); //object
console.log(a === b); //false
JSON:
- JSON,里面放置鍵值對,由逗號隔開,最后一個可以不加逗號
- 鍵值對:由引號引起的屬性 冒號 值構成
- 就屬性而言:可以不用引號,但有些后臺語言不認識沒有冒號的JSON,因此我們統一要求加冒號
- 就值而言:可以是任意語句,但是一般傳到后臺的是字符串數據,在js自身去使用的話可以是任意類型
var a = {"name" : 'Daniel',"sex" : '男',"age" : 18,"fn" : function () { console.log("哈哈");}};console.log(a.name); //調用里面的屬性 值console.log(a.fn());
但是,和數組不一樣的是,json里沒有長度這個屬性,除非你定義了
console.log(shuaiGe.length); //undefined
類型:object
var a = {"name" : "Daniel"};var b = {"name" : "Daniel"};
console.log(typeof a); // objectconsole.log(a === b); //false
null:
在一個節點元素沒有添加事件的時候,他的事件就是null
var oBox = document.getElementById('box');
console.log(oBox.onclick); //null
console.log(typeof oBox.onclick); //object
所以我們在綁定一個事件的時候想要解綁,就可以用null
var oBox = document.getElementById('#box');oBox.onclick = function (ev) {console.log("你好!");};oBox.onclick = null;
四、數學運算符
運算符(Operators,也翻譯為操作符),是發起運算的最簡單形式。運算符的分類見仁見智,我們的課程對運算符進行如下分類:
- 數學運算符(Arithmetic operators)
- 比較運算符(Comparison operators)
- 邏輯運算符(Logical operators)
- 賦值運算符(Assignment operators)
- 按位運算符(Bitwise operators)
- 條件 (三元) 運算符(Conditional operator)
1.1 數學運算符
數學運算符的正統,是number和number的數學運算,結果是number。出于面試的考慮,有一些奇奇怪怪的數學運算:
數學運算中,只有純數字字符串、布爾值、null能夠幫你進行隱式轉換
- + - * / % ()
1.1.1 string → number (顯示類型轉換)
(1)parseInt()
parseInt就是將一個string轉為一個整數,不四舍五入,直接截取整數部分。如果這個string有亂七八糟的東西,那么就截取前面數字部分。如果兩個數字之間有字符串,那么只截取第一個數字。
var a = "123.12px123";
var b = parseInt(a);
console.log(typeof b); //number
console.log(b); //123
(2)parseFloat()
會截取小數點
var a = "123.12px123";
var b = parseFloat(a);
console.log(typeof b); //number
console.log(b); //123.12
1.1.2 number → string
將一個數字,與一個空字符串進行連字符運算,那么就是自動轉為字符串了,不僅是數字適用,其他類型要轉換成字符串也適用
var a = 123;
var b = a + "";
console.log(b); //123
console.log(typeof b); //string
1.1.3 toString()
將其他類型轉換為string類型
var str4 = 100;
console.log(typeof str4.toString()); //string
1.1.4 隱式轉換
就是沒有寫parseInt()、parseFloat()
自己幫你轉格式
console.log(3 * "8"); //24
console.log("3" * "8"); //24
console.log("48" / "2"); //24
console.log("24" % 55); //24
console.log(3 * null); //0 隱式轉換的時候null將被轉為0
console.log(3 * false); //0 隱式轉換的時候false將被轉為0
console.log(3 * true); //3 隱式轉換的時候true將被轉為1
// 不純的字符串和undefined是不能幫你進行隱式轉換的,結果都是NaN
console.log(3 * "8天"); //NaN 數學運算中,不純的字符串沒法隱式轉換
console.log(3 * undefined); //NaN 數學運算中,undefined不能進行隱式轉換
加號比較特殊,加號兩邊都是數字類型或者數字類型的字符串的時候,那么就是數學加法;兩邊不都是數字或者數字類型的字符串的時候,那么就是字符串的拼接,結果是字符串。
var sum = 3 + 4; //7
以上是運算
console.log("你" + "好"); //你好
var sum = "3" + "4"; //34
這種就是字符串的拼接,所以,加號沒有隱式類型轉換
總結:
- 無論哪種運算,只要出現了undefined參與運算,結果都是NaN。
- 然后"4"、false、true、null都能進行隱式轉換。
- 加號比較特殊,面對"4"沒有隱式轉換的
1.1.5 取余 %
兩個值相除的余數
var a = 13 % 5;
console.log(a); //3
13除以5 商 2 余3, 所以結果為3
1.2 關系運算符
<img src="img/1.jpg" alt="Daniel的媳婦兒,你們的師娘!" id="box" width="200" >> 大于< 小于>= 大于等于<= 小于等于== 等于!= 不等于=== 全等于!== 不全等
1.2.1關系運算符的正統,number和number進行數學運算,得到的答案boolean
console.log(8 > 5);
console.log(7 < 4);
(1)=
等號 賦值
var a = 10; //將10賦值給a
(2)==
等等 等于
var a = 10;
var b = "10";
console.log( a == b ); //true
(3)===
全等 數據類型判斷值和類型 引用類型判斷內存地址和值
var a = "3",var b = 3;
console.log( a === b ); //false
1.2.2 不正統的關系運算,為了面試
(1)string 和 string 比較的就是字符編碼順序
字符編碼順序 à 數字、大寫字母、小寫字母
"a" < "b" //true
"A" < "B" //true
"A" < "a" // true ,大寫字母在字符集里面是在小寫字母前面
"1" < "A" //true ,數字在字母前端
"blank" < "blue" //true 因為一位一位比,直到比出大小
"25678" < "111111111" //false 因為是string和string比,比的是字符編碼順序 所以一位一位的比
(2)與數字進行關系運算時,純數字字符串被轉為數字,null轉換為0,true轉換轉為1, false轉換為0 (隱式類型轉換)
注意的是:null不能進行和0的相等判定
null < 0.00001 //true
null > -0.0001 //true
null == 0 //false
false == 0 //true
true == 1 //true
NaN不等于自己,不全等于自己
NaN == NaN //false
NaN === NaN //false
NaN != NaN //true
NaN !== NaN //true
string 和 number比,string會被隱式轉換為number
console.log( "234" < 235 ); //true
要注意的是,不要出洋相,不能連續使用關系運算符!!
2 > 2 > 1
的值是多少?
解:原式=(3>2) >1 = true > 1 = false (因為true會被當做1來與1進行比較)
也就是說,不能連續使用關系運算符!!因為一旦連續使用了,實際上還是從左至右計算,所以就有上一步的boolean參與了下一步的運算。
如果想要使用連續關系運算:
1<2 && 2<3
1.3 邏輯運算符
邏輯運算符就三個:
- && 邏輯與運算
- || 邏輯或運算
- ! 邏輯非運算
正統來說,參與邏輯運算的是boolean和boolean,得到的結果也是boolean
1.3.1 && 與運算符
都真才真 有假就假 “短路語法”:a&&b a真拋出b a假拋出a
console.log(1 && 2); //2
console.log(false && 2); //false
1.3.2 || 或運算符
有真就真,都假才假 “短路語法”: a || b a真拋出a a假拋出b
console.log(1 || 2); //1
console.log(false || 2); //2
1.3.3 ! 非運算符
取反
console.log( !1 ); //false
console.log( !false ); //true
1.4 賦值運算符
=
賦值+=
加等于-=
減等于*=
乘等于/=
除等于%=
模等于++
加加--
減減
賦值運算的參與者,一定是變量
(1)+=
var a = 1;
a += 2; //這行語句等價于a = a + 2;
console.log(a); //3
(2)/=
var b = 6;
b /= 3; //等價于b = b / 3
console.log(b); //2
(3)%=
var c = 100;
c %= 10; //等價于c = c % 10;
console.log(c); //0var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13
(4)++
var e = 10;
e++; //等價于e=e+1
console.log(e); //11
++
可以與輸出語句寫在一起,++寫在變量前和寫在變量后不是一個意思
var a = 10;
var x = a++ ; // 先賦值 再加1
var y = ++a : // 先加1 再賦值
++
有花式玩兒法,僅面試有用:
var a = 8;
console.log(4 + a++); //12 , 先使用原來的a的值,就是4+8,輸出12.然后a加1 a為9
console.log(a); //9
(5)運算符的計算順序:
++ -- !貼身的 →→→ 比較 →→→ 邏輯 →→→ 賦值
var a = 3 < 6 && 7 < 14; //true
原式 = true && true= true
var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7;
原式 = 3 < 6 && 7 < 14= 上一題= true
var a = false + true && 13;
原式 = 0 + 1 && 13= 1 && 13= 13
var a = 15;
false + a++ + true > 8 && 13 || 6
原式 = false + 15 + true > 8 && 13 || 6= 16 > 8 && 13 || 6= true && 13 || 6= 13 || 6= 13
1.5 Math對象方法
- Math.pow(x,y) x的y次冪
Math.pow(3,4) //81
- Math.sqrt(x); x的根號
Math.sqrt(81); //9
- Math.floor() 向下取整
Math.floor(3.14) //3
- Math.ceil() 向上取整
Math.ceil(3.14) //4
- Math.max() 取最大值 參數沒有個數限制
Math.max(3,4) // 4
- Math.max() 取最小值 參數沒有個數限制
Math.min(3,4); //3
- Math.random() 隨機數 [0,1) 之間,取得到0,取不到1
要取到[a,b]之間的隨機整數,公式:Math.floor(Math.random()*(b-a+1) + a),比如要取[2,4]之間的整數
Math.floor(Math.random()*(4-2+1) + 2);
- Math.abs() 取絕對值
Math.abs(-2) // 2
- Math.round() 四舍五入
Math.round(3.14) //3