1、JS流程控制
1、
1.if else
var age = 19;
if (age > 18){
console.log("成年了");
}else {
console.log("小孩子");
}
2.if-else if-else
var age = 19;
if (age > 18){
console.log("成年了");
}else if (age < 18) {
console.log("小孩子");
}else {
console.log("剛剛成年");
}
二、for
1.for循環數組：
var num = [1,2,3,4,5]
for (var i=0;i<5;i++) {
console.log(num[i]);
}
var num = [1,2,3,4,5]
for (var i in num) {
console.log(num[i]); // JS中i in 數組或者字典，i是索引或者key
}
2.for循環自定義數據類型(字典)：
info = {name:'xiaoming',age:18}
for (var i in info){
console.log(i); // i是key，若想輸出values則：info[i]
}
3.、while
var i = 1;
while (i <= 10) {
console.log(i);
i++;
}
四、switch(開關)
var day = 1;
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("other day")
}
5、三元運算
var x = 10;
var y = 20;
var z = x > y ? x : y //中文講解：x大於y嗎？ 是 選擇x，不然 選擇y
2、JS函數
1、函數的注意事項
1. 參數：傳多、傳少、不傳都不會報錯，沒有傳值的至關於傳了undefined
2. 返回值：若是返回多個值，默認只返回最後一個，若是要返回多個值，只能將其放在數組或對象中返回。
2、建立函數
1,普通函數定義
function func() {
console.log("Hello boy!");
}
2,帶參數的函數
function func2(x, y) {
console.log(arguments); // 內置的arguments對象
console.log(arguments.length); //實參的個數
console.log(x, y);
}
3，帶返回值的函數
function sum(x, y){
return x + y;
}
sum(1, 2); // 調用函數
4,匿名函數方式(不寫函數名的函數，不一樣於python的是，它的函數體能夠寫任意多的代碼，用一個變量接收)
var sum = function(a, b){
a += 1;
b += 1;
return a + b;
}
sum(1, 2);
5，當即執行函數：兩個小括號()()，第一個括號內寫函數(匿名函數也能夠)，第二個括號內寫實參，建立完畢當即執行
(function sum(x, y){
return x + y;
})(10, 20);
6，ES6中的箭頭函數
6-1、
ES6中容許使用「箭頭」(=>)定義函數
var f = a => a;
至關於
var f = function( a ) {
return a;
}
6-2、無參數的箭頭函數
var f = () => 10;
至關於
var f = function() {
return 10;
}
6-3、有參數的箭頭函數
var sum = (a, b) => a + b;
至關於
var sum = function(a, b) {
return a +b;
}
3、arguments對象
arguments這個對象不能顯式建立，只有函數開始時纔可用，可直接使用
Javascrip中每一個函數都會有一個Arguments對象實例arguments，它儲存着函數的實參
能夠用數組下標的方式"[]"引用arguments的元素(實參)，arguments[0],arguments[1]...
arguments.length爲函數實參個數，arguments.callee引用函數自身(遞歸)
function f(){
return arguments[0]+arguments[1];
}
f(1,2); // 3
sum = function (n) {
if (1 == n) {
return 1;
} else {
return n + arguments.callee(n - 1);
}
}
sum(6); // 21
4、函數的全局變量和局部變量
1.局部變量
在JavaScript函數內部聲明的變量就是局部變量，局部變量只能在函數內部訪問它，隨着函數運行的結束自動刪除。
2.全局變量
在函數外聲明的變量就是全局變量，由於在JS中是沒有模塊的概念，
那麼兩個JS文件中的全局變量就能夠互相使用，好比a.js文件能夠訪問b.js文件的全局變量，b.js文件也能夠訪問a.js文件的全局變量
要使變量只能在本JS文件中使用，則把變量放在函數中，多經過當即執行函數實現變量的私有化
3.變量生存週期
JavaScript變量的生命期從它們被聲明的時間開始
局部變量會在函數運行結束後被刪除
全局變量會在頁面關閉後被刪除
5、做用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層
1.例1
var city = "廣州";
function f() {
var city = "南京";
function inner(){
var city = "珠海";
console.log(city);
}
inner();
}
f(); // 珠海
2.例2
var city = "廣州";
function f1() {
console.log(city);
}
function f2() {
var city = "珠海";
return f1;
}
var ret = f2();
ret(); // 廣州
3.例3(閉包)：內層函數對外層函數變量的引用
var city = "廣州";
function f(){
var city = "珠海";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); //珠海
3、JS內置對象(至關於python中的內置模塊)及方法
1、介紹
JavaScript中的全部事物都是對象：字符串、數字、數組、日期等。在JavaScript中，對象是擁有屬性和方法的數據。
2、字符串三種定義方式
var name = 'xiaoming';
name; // "xiaoming"
typeof name; / "string"
var name2 = String('xiaoming');
name2; // "xiaoming"
typeof name2; // "string"
var name3 = new String('xiaoming');
name3; //String {"xiaoming"}
typeof name3; //"object"
3、自定義對象
JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。
1.普通建立
var a = {"name": "xiaoming", "age": 18};
console.log(a.name);
console.log(a["age"]);
遍歷對象中的內容：
var a = {"name": "xiaoming", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
2.使用new建立對象
var person=new Object(); // 建立一個person對象
person.name="xiaoming"; // person對象的name屬性
person.age=18; // person對象的age屬性
person; // {name: "xiaoming", age: 18}
4、map對象
ES6中提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以當作鍵。
也就是說，Object結構提供了「字符串--值」的對應，Map結構提供了「值--值」的對應，是一種更完善的Hash結構實現
var myMap=new Map();
myMap.set(1,"a");
myMap.set(2,"b");
myMap.set(3,"c");
console.log("size="+myMap.size); // size=3
console.log(myMap.get(1)); // a
console.log(myMap.get(2)); // b
console.log(myMap.get(3)); // c
console.log(myMap.has(1)); // true
console.log(myMap.delete(1)); // true
console.log(myMap.has(1)); // false
拓展：JavaScript面向對象之繼承
// 父類構造函數
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 () {
/* ... */
};
5、JS中的面向對象
// 面向對象,ES5中沒有類的概念
// 函數首字母大寫表明類
function Person(name) {
this.name = name //屬性
}
// 添加方法用關鍵字prototype
Person.prototype.dream = function () {
console.log(this.name + '夢想是：有大把妞！');
};
// 使用new關鍵字進行實例化
var p1 = new Person('小明');
console.log(p1.name);
p1.dream();
6、Date對象
1.建立對象
//方法1：不指定參數，默認獲取當前時間
var d1 = new Date();
console.log(d1.toLocaleString()); // toLocaleString()格式化輸出時間
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString()); // 2004/3/20 上午11:12:00
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString()); // 2020/4/3 上午11:12:00
//方法3：參數爲毫秒數，時間戳
var d3 = new Date(5000);
console.log(d3.toLocaleString()); // 1970/1/1 上午8:00:05
console.log(d3.toUTCString()); // 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 毫秒並不直接顯示
2.Date對象的方法
var d = new Date();
getFullYear () 獲取完全年份
getMonth () 獲取月（0-11）
getDate() 獲取日(每月的第幾天)
getDay () 獲取星期(星期天是第0天)
getHours () 獲取小時
getMinutes () 獲取分鐘
getSeconds () 獲取秒
getMilliseconds () 獲取毫秒
getTime () 返回累計毫秒數(從1970/1/1午夜)(時間戳)
3.例子
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function mytime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1; //月份是0~11
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var week_day = now.getDay(); //週日是0
var weekMap = {
1: '星期一',
2: '星期二',
3: '星期三',
4: '星期四',
5: '星期五',
6: '星期六',
0: '星期日',
};
// 字符串拼接
var msg = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + weekMap[week_day]
// ES6 模板字符串
var msg1 = `${year}-${month}-${day} ${hour}:${minute} ${weekMap[week_day]}`;
console.log(msg);
console.log(msg1);
}
mytime();
</script>
</head>
<body>
</body>
</html>
把當前的時間輸出成 "xxxx-xx-xx xx:xx 星期x" 的格式
7、JSON對象
var obj1 = {"name": "xiaoming", "age": 18};
var str1 = '{"name": "xiaoming", "age": 18}';
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);
// JSON字符串轉換成對象
var obj = JSON.parse(str1);
8、正則表達式：RegExp對象
1. 兩種建立方法
1. new RegExp(正則表達式)
手機號碼：
var reg = new RegExp("^1[3-9][0-9]{9}$");
使用test測試表達式：
reg.test(13223322560); // true
2. /正則表達式/
var reg1 = /^1[3-9][0-9]{9}$/;
reg1.test(13223322560); //true
2. 三個坑
1. /^[a-zA-Z][a-zA-Z0-9]$/.test() 不傳值，至關於傳了undeined,內部當成字符串'undeinfed'處理
2. JS中正則表達式中間不能出現空格
3. 兩種匹配模式g和i
1. g:全局匹配;找到全部匹配，而不是在第一個匹配後中止
2. i: 忽略大小寫
var s1 = "name:Aming age:18";
s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Aming age:18"
s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Aming 哈哈哈ge:18" 全局匹配
s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈ming 哈哈哈ge:18" 不區分大小寫
關於匹配模式：g和i的簡單示例
9、Math對象
abs(x) 返回數的絕對值。
round(x) 把數四捨五入爲最接近的整數。
floor(x) 對數進行下舍入(取小的值)。
max(x,y) 返回 x 和 y 中的最大值。
min(x,y) 返回 x 和 y 中的最小值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
sqrt(x) 返回數的平方根。
exp(x) 返回 e 的指數。
log(x) 返回數的天然對數（底爲e）。
sin(x) 返回數的正弦。
tan(x) 返回角的正切。
例子：
Math.abs(-1); // 1
Math.round(5.4); // 5
Math.round(5.6); // 6
Math.floor(5.4); // 5
Math.floor(5.6); // 5
Math.max(10,5); // 10
Math.min(10,5); // 5
Math.pow(2,10); // 1024
Math.random(); // 0.656223169871724
Math.sqrt(9); // 3
4、拓展：詞法分析
JavaScript中在調用函數的那一瞬間，會先進行詞法分析
詞法分析的過程：
當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：
1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。
函數內部不管是使用參數仍是使用局部變量都到AO上找。
看兩個例子：
var age = 18;
function foo(){
console.log(age); //undefined
var age = 22;
console.log(age); // 22
}
foo();
第二題：
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo();
答案解析：
詞法分析過程：
1、分析參數，沒有參數，不作任何操做；
二、分析變量聲明，有一個 var age, AO上沒有同名的值，則將此變量賦值給AO，而且值爲undefined。
三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};
最終，AO上的屬性只有一個age，而且值爲一個函數聲明
執行過程：
注意：執行過程當中全部的值都是從AO對象上去尋找
1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2
三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了
拓展