11.4 JavaScript 11.41 變數 1、聲明變數的語法 2、變數名命名規範 3、ES6中let ES6之前js沒有塊級作用域，ES6新增了let命令，用於聲明變數（聲明的變數屬於塊級作用域），流程式控制制語句的{}就是塊級作用域。其用法類似於var，但是所聲明的變數只在let命令所在的代碼 ...
11.4 JavaScript
11.41 變數
1、聲明變數的語法
// 1. 先聲明後定義 var name; // 聲明變數時無需指定類型，變數name可以接受任意類型 name= "egon"; // 2. 聲明立刻定義 var age = 18;
2、變數名命名規範
1、由字母、數字、下劃線、$ 組成,但是不能數字開頭，也不能純數字
2、嚴格區分大小寫
3、不能包含關鍵字和保留字（以後升級版本要用的關鍵字）。
如：
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
4、推薦駝峰命名法：有多個有意義的單片語成名稱的時候，第一個單詞的首字母小寫，其餘的單詞首字母寫
5、匈牙利命名：就是根據數據類型單詞的的首字元作為首碼
3、ES6中let
ES6之前js沒有塊級作用域，ES6新增了let命令，用於聲明變數（聲明的變數屬於塊級作用域），流程式控制制語句的{}就是塊級作用域。其用法類似於var，但是所聲明的變數只在let命令所在的代碼塊內有效。例如：for迴圈的計數器就很適合使用let命令
for(let i=1;i<=5;i++){ console.log(i); } //1 2 3 4 5
4、常量
ES6新增const用來聲明常量。一旦聲明，其值就不能改變。
const PI = 3.1415926; PI=3 //TypeError: "PI" is read-only
11.42 數據類型
11.421 數值(Number)
JavaScript不區分整型和浮點型，就只有一種數字類型，即number
var x = 3; var y = 3.1; var z = 13e5; var m = 13e-5; var n = NaN; // typeof n結果"number" //四捨五入 var num=1.3456 num.toFixed(2) // "1.35" //字元串類型轉成數字 parseInt("123") // 返回123 parseInt("ABC") // 返回NaN NaN屬性是代表非數字值的特殊值,該屬性用於指示某個值不是數字。 console.log(parseInt("18林海峰")); //18 帶有自動凈化的功能；只保留字元串最開頭的數字，後面的中文自動消失 console.log(parseInt("林海峰18")); // NaN 只去末尾的中文，不會去開頭的 parseInt("123.456") // 返回123 parseFloat("123.456") // 返回123.456 字元串中的數字轉浮點 var a = parseInt("1.3") + parseInt("2.6"); //a=3 自動帶有截斷小數的功能：取整，不四捨五入 var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9 //數字類型轉成字元串 var x=10; var y='20'; var z=x+y; // z='1020' typeof z; //String var m=123; var n=String(m)//'123' var a=123; var b=a.toString()//'123'
11.422 字元串(String)
var a = "Hello"; var b = "world"; var c = a + b; console.log(c); // 得到Helloworld
常用方法：
| 方法 | 說明 |
|---|---|
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字元 |
| .concat(value, ...) | 拼接,拼接字元串通常使用“+”號 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(',', 2) | 根據逗號分割，但只顯示前兩個 |
substirng()與silce()的區別：
substirng()的特點： 如果 start > stop ，start和stop將被交換 如果參數是負數或者不是數字，將會被0替換 silce()的特點： 如果 start > stop 不會交換兩者 如果start小於0，則切割從字元串末尾往前數的第abs(start)個的字元開始(包括該位置的字元) 如果stop小於0，則切割在從字元串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)
補充：
ES6中引入了模板字元串：模板字元串（template string）是增強版的字元串，用反引號（`）標識，它的用途為
1、完全可以當做普通字元串使用 var msg = `my name is egon` 2、也可以用來定義多行字元串 var info = ` name:egon age:18 sex:male ` 3、並且可以在字元串中嵌入變數 var name = "egon"; var age = 18; var msg = `my name is ${name}, my age is ${age}`; // "my name is egon, my age is 18"
註意：
如果模板字元串中需要使用反引號，則在其前面要用反斜杠轉義
11.423 布爾值
var a = true; var b = false; //布爾值為false的數據類型 Boolean('') Boolean(0) Boolean(null) Boolean(undefined) Boolean(NaN) //其餘數據類型的布爾值均為true Boolean([]) Boolean(123)
null 和 undefined :
null:表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null; undefined:表示當聲明一個變數但未初始化時，該變數的預設值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。 null表示變數的值是空，undefined則表示只聲明瞭變數，但還沒有賦值。
11.43 內置對象
11.431 數組對象Array
數組對象的作用是：使用單獨的變數名來存儲一系列的值。類似於Python中的列表。
var x = ["egon", "hello"]; console.log(x[1]); // 輸出"hello"
常用方法：
| 方法 | 說明 |
|---|---|
| .length | 數組的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 刪除尾部的元素 |
| .unshift(ele) | 頭部插入元素 |
| .shift() | 頭部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反轉 |
| .join(seq) | 將數組元素連接成字元串 |
| .concat(val, ...) | 連接數組 |
| .sort() | 排序 |
| .forEach() | 將數組的每個元素傳遞給回調函數 |
| .splice(1,2,"新的值") | 刪除元素，並向數組添加新元素。 |
| .map() | 返回一個數組元素調用函數處理後的值的新數組 |
提供比較函數進行排序，該函數應該具有兩個參數 a 和 b，接收傳入的a和b，執行函數體代碼，然後返回一個值用於說明a和b的大小
返回值 < 0 ：代表a小於b
返回值 =0 : 代表a等於b
返回值 > 0 ：代表a大於b
function sortNumber(a,b){ return a - b } var arr = [123,9,1211,11] arr.sort(sortNumber) //[9, 11, 123, 1211]
遍曆數組中的元素：
var arr = [11, 22, 33, 44]; for (var i=0;i<arr.length;i++) { console.log(arr[i]); } //11 22 33 44
forEach() :
語法：forEach( function ( 當前元素, 當前元素索引, 當前元素所屬數組arr), thisValue)
var arr=['aa','bb','cc','dd','ee'] arr.forEach(function(v,i,arr){ console.log(v,i,arr); console.log(this[0]); },"hello") //aa 0 ["aa", "bb", "cc", "dd", "ee"] h //bb 1 ["aa", "bb", "cc", "dd", "ee"] h //cc 2 ["aa", "bb", "cc", "dd", "ee"] h //dd 3 ["aa", "bb", "cc", "dd", "ee"] h //ee 4 ["aa", "bb", "cc", "dd", "ee"] h
splice() :
語法：splice ( 起始元素索引 , 刪除的個數, 添加的新元素)
var arr=['aa','bb','cc','dd','ee'] arr.splice(1,3,'xxxx') //刪除‘bb’，‘cc’，’dd‘這三個值，然後插入’xxxx‘ arr //["aa", "xxxx", "ee"]
map() ：
語法：map(function ( 當前元素, 當前元素索引, 當前元素所屬數組arr), thisValue)
//字元串反轉 var str = '12345'; Array.prototype.map.call(str, function(x) { //同時利用了call()方法 return x; }).reverse().join(''); // "54321"
11.432 Date日期對象
創建日期對象只有構造函數一種方式,使用new關鍵字
//方法1：不指定參數 var d1 = new Date(); console.log(d1.toLocaleString()); // 2020/8/9 下午8:24:06 //方法2：參數為日期字元串 var d2 = new Date("2018/01/27 11:12:13"); console.log(d2.toLocaleString()); // 2018/1/27 上午11:12:13 var d3 = new Date("01/27/18 11:12:13"); // 月/日/年 時分秒 console.log(d3.toLocaleString()); // 2018/1/27 上午11:12:13 //方法3：參數為毫秒數 var d4 = new Date(7000); console.log(d4.toLocaleString()); // 1970/1/1 上午8:00:07 console.log(d4.toUTCString()); // Thu, 01 Jan 1970 00:00:07 GMT //方法4：參數為：年，月，日，時，分，秒，毫秒 var d5 = new Date(2018,1,27,11,12,13,700); console.log(d5.toLocaleString()); //毫秒並不直接顯示 // 2018/2/27 上午11:12:13
常用方法:
| 方法 | 含義 |
|---|---|
| getDate() | 根據本地時間返回指定日期對象的月份中的第幾天（1-31） |
| getMonth() | 根據本地時間返回指定日期對象的月份（0-11） |
| getFullYear() | 根據本地時間返回指定日期對象的年份（四位數年份時返回四位數字） |
| getDay() | 根據本地時間返回指定日期對象的星期中的第幾天（0-6） |
| getHours() | 根據本地時間返回指定日期對象的小時（0-23） |
| getMinutes() | 根據本地時間返回指定日期對象的分鐘（0-59） |
| getSeconds() | 根據本地時間返回指定日期對象的秒數（0-59） |
| getMilliseconds() | 根據本地時間返回指定日期對象的獲取毫秒 |
| getTime() | 返回累計毫秒數(從1970/1/1午夜) |
編寫代碼，將當前日期按“2017-12-27 11:11 星期三”格式輸出:
const WEEKMAP = { 0: "星期日", 1: "星期一", 2: "星期二", 3: "星期三", 4: "星期四", 5: "星期五", 6: "星期六", }; function showTime() { var d1 = new Date(); var year = d1.getFullYear(); var month = d1.getMonth() + 1; var day = d1.getDate(); var hour = d1.getHours(); var minute = d1.getMinutes() < 10 ? "0"+d1.getMinutes() :d1.getMinutes(); var week = WEEKMAP[d1.getDay()]; // 0~6的星期 var dateStr = ` ${year}-${month}-${day} ${hour}:${minute} ${week} `; console.log(dateStr) } showTime(); // 2020-8-9 20:37 星期五View Code
11.433 Math對象
| 方法 | 含義 |
|---|---|
| Math.floor() | 向下取整,如5.1取整為5 |
| Math.ceil() | 向上取整,如5.1取整為6 |
| Math.max(a,b) | 求a和b中的最大值 |
| Math.min(a,b) | 求a和b中的最小值 |
| Math.random() | 隨機數,預設0-1之間的隨機數,若想求min~max之間的數，公式為：min+Math.random()*(max-min) |
11.434 JSON對象
// 對象轉成JSON字元串 var obj2={"name":"egon","age":18}; str2=JSON.stringify(obj2); // "{"name":"egon","age":18}" // JSON格式的字元串轉成對象 var str1='{"name":"egon","age":18}'; var obj1=JSON.parse(str1); console.log(obj1.name); // 'egon' console.log(obj1["name"]); // 'egon'
11.435 RegExp對象
1. 創建正則對象的方式1 參數1 正則表達式 參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配後停止)和i(忽略大小寫) var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用戶名只能是英文字母、數字和_ reg1.test("egon_123") // true //首字母必須是英文字母,長度最短不能少於6位 最長不能超過12位。 註意：正則放到引號內，{}內的逗號後面不要加空格 2. 創建正則對象的方式2 var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引號 reg2.test("egon_123") // true 3. String對象與正則結合的4個方法 var s1="hello world"; s1.match(/l/g) // 符合正則的內容["l", "l", "l"] s1.search(/h/g) // 符合正則的內容的第一個索引0 s1.split(/ /) // ["hello", "world"]，預設全部切割 s1.replace(/l/g,'L') // "heLLo worLd" 4. 匹配模式g與i var s2="name:Egon age:18" s2.replace(/e/,"贏") // "nam贏:Egon age:18" s2.replace(/e/g,"贏") // "nam贏:Egon ag贏:18" s2.replace(/e/gi,"贏") //"nam贏:贏gon ag贏:18"
5.註意1：
1、如果regExpObject帶有全局標誌g，test()函數不是從字元串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 2、該屬性值預設為0，所以第一次仍然是從字元串的開頭查找。 3、當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字元串中本次匹配內容的最後一個字元的下一個索引位置。 4、當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。 5、因此，當我們使用test()函數執行了一次匹配之後，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。 6、如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。 var reg3 = /egon/g; reg3.lastIndex 0 reg3.test("egon") // true，匹配成功 true reg3.lastIndex // 匹配成功reg3.lasIndex=4 4 reg3.test("egon") // 從4的位置開始匹配，本次匹配失敗 false reg3.lastIndex // 匹配失敗，lastIndex歸為0 0 reg3.test("egon") // 再次匹配成功 true
6.註意2：
當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test("undefined"), 且/undefined/.test()預設返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
11.44 運算符
//算數運算符: + - * / % ++ -- //比較運算符: > >= < <= != == === !== //邏輯運算符 && || ! //賦值運算符 = += -= *= /=
11.45 流程式控制制
if...else :
var age=18; if(age > 18){ console.log('too old'); } else if(age == 18){ console.log('花姑娘,吆西'); } else { console.log('too young'); } // 花姑娘,吆西
switch :
switch中的case子句通常都會加break語句，否則程式會繼續執行後續case中的語句
var day = new Date().getDay(); switch (day) { case 0: console.log("星期天，出去浪"); break; case 6: console.log("星期六，也出去浪"); break; default: console.log("工作日，正常上班") } //工作日，正常上班
while:
let i=0; undefined while (i<=3){ console.log(i); i++; }
三元運算:
var x=1; var y=2; var z=x>y?x:y // 2
11.46 函數
1、函數的定義與調用（與python類同）
// 無參函數 function f1() { console.log("Hello world!"); }; f1(); // 有參數函數 function f2(a, b) { console.log(arguments); // 內置的arguments對象 console.log(arguments.length); console.log(arguments[0],arguments[1]); console.log(a, b); }; f2(10,20); // 帶返回值的函數 function sum(a, b){ return a + b; } sum(1, 2); // 匿名函數 var sum = function(a, b){ return a + b; } sum(1, 2); // 立即執行函數 (function(a, b){ return a + b; })(1, 2);
註意：
函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回
