函數
函數定義
JavaScript中的函數和Python中的非常類似,只是定義方式有點區別。
// 普通函數定義
function f1() {
console.log("Hello world!");
}
// 帶參數的函數
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;
}
sum(1, 2);
// 立即執行函數
(function(a, b){
return a + b;
})(1, 2);
補充:
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;
}
函數中的arguments參數
function add(a,b){
console.log(a+b);
console.log(arguments.length)
}
add(1,2)
輸出:
3 2
注意:
函數只能返回一個值,如果要返回多個值,只能將其放在數組或對象中返回。
函數的全局變量和局部變量
局部變量:
在JavaScript函數內部聲明的變量(使用 var)是局部變量,所以只能在函數內部訪問它(該變量的作用域是函數內部)。只要函數運行完畢,本地變量就會被刪除。
全局變量:
在函數外聲明的變量是全局變量,網頁上的所有腳本和函數都能訪問它。
變量生存周期:
JavaScript變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
作用域
首先在函數內部查找變量,找不到則到外層函數查找,逐步找到最外層。
幾個例子:
1.
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //輸出結果是?
2.
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印結果是?
3.閉包
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
詞法分析(嘗試理解)
JavaScript中在調用函數的那一瞬間,會先進行詞法分析。
詞法分析的過程:
當函數調用的前一瞬間,會先形成一個激活對象: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()之后的結果是?
第二題:
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo(); // 執行后的結果是?
詞法分析過程:
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值的語句了
內置對象和方法
JavaScript中的所有事物都是對象:字符串、數字、數組、日期,等等。在JavaScript中,對象是擁有屬性和方法的數據。
我們在學習基本數據類型的時候已經帶大家了解了,JavaScript中的Number對象、String對象、Array對象等。
注意var s1 = "abc"和var s2 = new String("abc")的區別:typeof s1 --> string而 typeof s2 --> Object

自定義對象
JavaScript的對象(Object)本質上是鍵值對的集合(Hash結構),但是只能用字符串作為鍵。
var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);
遍歷對象中的內容:
var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
創建對象:
var person=new Object(); // 創建一個person對象 person.name="Alex"; // person對象的name屬性 person.age=18; // person對象的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());
//方法2:參數為日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:參數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4:參數為年月日小時分鍾秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒並不直接顯示
Date對象的方法:
var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月(0-11) //getFullYear () 獲取完整年份 //getHours () 獲取小時 //getMinutes () 獲取分鍾 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜)
練習:
編寫代碼,將當前日期按“2017-12-27 11:11 星期三”格式輸出。
詳細Date對象方法:點我
JSON對象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1);
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);
RegExp對象
//RegExp對象
//創建正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式:常用g(全局匹配;找到所有匹配,而不是在第一個匹配后停止)和i(忽略大小寫)
// 用戶名只能是英文字母、數字和_,並且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。
// 創建RegExp對象方式(逗號后面不要加空格)
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 匹配響應的字符串
var s1 = "bc123";
//RegExp對象的test方法,測試一個字符串是否符合對應的正則規則,返回值是true或false。
reg1.test(s1); // true
// 創建方式2
// /填寫正則表達式/匹配模式(逗號后面不要加空格)
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test(s1); // true
// String對象與正則結合的4個方法
var s2 = "hello world";
s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容
s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置
s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割
s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換
// 關於匹配模式:g和i的簡單示例
var s1 = "name:Alex age:18";
s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配
s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區分大小寫
// 注意事項1:
// 如果regExpObject帶有全局標志g,test()函數不是從字符串的開頭開始查找,而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值默認為0,所以第一次仍然是從字符串的開頭查找。
// 當找到一個匹配時,test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置。
// 當再次執行test()函數時,將會從該索引位置處開始查找,從而找到下一個匹配。
// 因此,當我們使用test()函數執行了一次匹配之后,如果想要重新使用test()函數從頭開始查找,則需要手動將regExpObject.lastIndex的值重置為 0。
// 如果test()函數再也找不到可以匹配的文本時,該函數會自動把regExpObject.lastIndex屬性重置為 0。
var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 還是返回true
// 所以我們在使用test()方法校驗一個字符串是否完全匹配時,一定要加上^和$符號。
// 注意事項2(說出來你可能不信系列):
// 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test("undefined"), 並且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
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) 返回角的正切

