繼上篇：

3、JavaScript運算符

①：比較運算符：

> >= < <= != == === !== 大于 大于等于 小于 小于等于 不等于 弱等于 強等于 強不等于

注意：

1 == “1” // true 弱等于 1 === "1" // false 強等于/*上面這張情況出現的原因在于JS是一門弱類型語言(會自動轉換數據類型)，所以當你用兩個等號進行比較時，JS內部會自動先將數 值類型的1轉換成字符串類型的1再進行比較，所以我們以后寫JS涉及到比較時盡量用三等號來強制限制類型，防止判斷錯誤、 */

②：邏輯運算符：

&& || ！ 與 或 非 and or not

③：賦值運算符：

= += -= *= /=

④：算數運算符：

+ - * / % ++ --

需要注意的：

--------------------------------------------------------------------注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 --------------------------------------------------------------------var x = 10;var res1 = x++;var res2 = ++x;res1;>10res2;>12解析：res1=x++是先將x賦值給res1，然后x++自增長1res2=++x,上面x自增長了1，所以是11，然后++x是先自增長1變成12，再將其賦值給res2，所以res2為12

4、JavaScript流程控制

#1: if>>else
　　
　　#3: switch
　　#4: for
　　#5: while
　　
　　　#6: 三元運算
　　　5、JavaScript函數

JavaScript中的函數定義方式：

• 幾種常見的函數形式：

// 普通函數定義： function f1(){console.log('hw'); }// 帶參數的函數: function f2(a,b){console.log(arguments); // 內置的arguments對象console.log(arguments.length);console.log(a, b); }// 帶返回值的函數： function sum(a,b){return a+b; }sum(1.2); //調用函數// 匿名函數方式： var sum = function(a,b){return a+b; }

• 特殊函數形式：

// ES6中允許使用“箭頭”（=>）定義函數。 var f = v => v; // 等同于 var f = function(v){return v; }// 如果箭頭函數不需要參數或需要多個參數，就是用圓括號代表參數部分： var f = () => 5; // 等同于 var f = function(){return 5};var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){return num1 + num2; //這里的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數組或對象中 }

函數的全局變量和局部變量
局部變量：在JavaScript的函數內部聲明的變量（使用var）是局部變量，所以只能在函數內部訪問它，只要函數運行完畢，本地變量就會被刪除。
全局變量：在函數外面聲明的變量就是全局變量，網頁上的所有腳本和函數都能訪問和使用它。
變量生成的周期：
JavaScript的變量的生命期是從他們被聲明的時候開始的。
局部變量會在函數運行以后刪除。
全局變量會在頁面關閉后刪除。
作用域：在函數內部查找變量，找不到則到外層全局作用域去找，逐步找到最外層。（下面通過幾個例子來了解JavaScript的全局變量和局部變量的含義）

1. var city = 'BJ'; function f(){var city = 'SH';function inner(){var city = 'SZ';console.log(city);}inner(); } f(); //結果為SZ // 分析：f()>inner()>聲明了city=‘sz’,然后打印city，inner函數內就有city，所以無需從其他地方查找，打印結果為SZ。2. var city1 = 'Wuhan'; function Bar(){console.log(city1); } function f(){var city1 = 'Erdos';return Bar; } var ret = f(); ret(); //結果為Wuhan // 分析：ret()>f()()>bar()>bar內沒有city1,只能從bar外找，bar外面有city1=‘WuHan’，所以打印結果為WuHan。3. var city2 = 'BeiJing'; function f(){var city2 = 'ShangHai';function inner(){console.log(city2);}return inner; } var ret = f(); ret(); //結果為：ShangHai // 分析：ret()>f()()>inner()>inner內無city2，從inner開始往外找，inner外是f函數，f函數內部有city='ShangHai'，所以打印結果

6、JavaScript詞法分析（了解知識點）

avaScript中在調用函數的那一瞬間，會先進行詞法分析。詞法分析的過程：當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），并會分析以下3個方面：1:函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作。 2:函數局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，并且值為undefined。 3:函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。函數內部無論是使用參數還是使用局部變量都到AO上找。看兩個例子：第一題： var age = 18; function foo(){console.log(age);var age = 22;console.log(age); } foo(); // 問：執行foo()之后的結果是？（22）第二題： var age = 18; function foo(){console.log(age);var age = 22;console.log(age);function age(){console.log("呵呵");}console.log(age); } foo(); // 執行后的結果是？（22） 詞法分析過程： 1、分析參數，有一個參數，形成一個 AO.age=undefine; 2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，因此不做任何處理 3、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};最終，AO上的屬性只有一個age，并且值為一個函數聲明執行過程： 注意：執行過程中所有的值都是從AO對象上去尋找1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，所以第一個輸出的一個函數 2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 2 3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了

7、JavaScript內置對象

在JavaScript中，所有的事物都是對象：字符串、數字、數字、日期…等等。在JavaScript中對象是擁有屬性和方法的數據。
　　　# 自定義對象：JavaScript中的對象本質上是鍵值對的集合（Hash結構），但是只能用字符串作為key.

var a = {'name':'sgt', 'age':16}; console.log(a.name); console.log(a['age']); //結果： //sgt //16//遍歷對象中的內容： var a = {"name": "sgt", "age": 16}; for (var i in a){console.log(i, a[i]); } //結果： //name sgt //age 16

• 創建對象：

var teacher = new object(); // 創建一個teacher對象 teacher.name = 'sgt'; // 添加teacher對象的name屬性 teacher.age = 18; // 添加teacher對象的age屬性

• 拓展：

注意：ES6中提供了Map數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當做鍵。也就是說，Object結構提供了“字符串--值”的對應，Map結構提供了“值--值”的對應，是一種更完善的Hash結構實現。var m = new Map(); var o = {p: "Hello World"}m.set(o, "content"} m.get(o) // "content"m.has(o) // true m.delete(o) // true m.has(o) // false // 父類構造函數 var Car = function (loc) {this.loc = loc; };// 父類方法 Car.prototype.move = function () {this.loc ++; };// 子類構造函數 var Van = function (loc) {Car.call(this, loc); };// 繼承父類的方法 Van.prototype = Object.create(Car.prototype); // 修復 constructor Van.prototype.constructor = Van; // 擴展方法 Van.prototype.grab = function () {/* ... */ };

• Date對象：

//創建Date對象： //方法1：不指定參數： var d1 = new Date(); console.log(d1.toLocaleString()); //2019/6/1 下午3:11:18//方法2：參數為日期字符串： var d2 = new Date('2004/3/20 11:12'); console.log(d2.toLocaleString()); //2004/3/20 上午11:12:00//方法3：參數為毫秒數： var d3 = new Date(5000); console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //1970/1/1 上午8:00:05 //Thu, 01 Jan 1970 00:00:05 GMT//方法4：參數為年月日小時分鐘秒毫秒： var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //2004/3/20 上午11:12:00 //毫秒并不直接顯示

Date對象的方法：

var d = new Date();d.getDate(); //獲取當前日（今天多少號） d.getDay(); //獲取星期(比如從星期天到星期六依次是0-6) d.getMonth(); //獲取月份數（0-11,0是一月，11是12月，依次類推） d.getFullYear(); //獲取完整的年份2019 d.getYear(); //獲取年119 d.getHours(); //獲取小時15 d.getMinutes(); //獲取分鐘22 d.getSeconds(); //獲取秒53 d.getMilliseconds(); //獲取毫秒513 d.getTime(); //返回累計毫秒數（從1970/1/1午夜）1559373773513

應用：將當前日期按照‘2019-12-27 11:11 星期三’格式輸出

const WEEKMAP = { 0:'星期天', 1:'星期一', 2:'星期二', 3:'星期三', 4:'星期四', 5:'星期五', 6:'星期六'};function showTime() {var y1 = d.getFullYear();var m1 = d.getMonth()+1;var d1 = d.getDate();var h1 = d.getHours();var mm1 = d.getMinutes() < 10 ? '0'+d.getMinutes():d.getMinutes();var w1 = WEEKMAP[d.getDay()];my_time = `${y1}-${m1}-${d1} ${h1}:${mm1} ${w1}`;console.log(my_time) };showTime(); 2019-6-1 15:41 星期六

JSON對象：

RegExp對象(正則對象）:

// 定義正則表達式兩種方式 var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}"); var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;// 正則校驗數據 reg1.test('jason666') reg2.test('jason666')/*第一個注意事項，正則表達式中不能有空格*/ // 全局匹配 var s1 = 'egondsb dsb dsb'; s1.match(/s/) s1.match(/s/g) var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g reg2.test('egondsb'); reg2.test('egondsb'); reg2.lastIndex; /*第二個注意事項，全局匹配時有一個lastIndex屬性*/// 校驗時不傳參數 var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ reg2.test(); reg2.test(undefined);var reg3 = /undefined/; reg3.test();

Math對象（拓展知識）

abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x) 對數進行下舍入。 log(x) 返回數的自然對數（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四舍五入為最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。

總結

以上是生活随笔為你收集整理的前端基础之JavaScript_1（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。