.so 覆蓋 gets 自動 bubuko 指定 保留 getdate regexp 對象

一、JavaScript概述

1、JavaScript的歷史

• 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言（最初綁定在CEnv軟件中），後將其改名ScriptEase（客戶端執行的語言）。
• Netscape（網景）接收Nombase的理念。(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言。Sun和Netscape共同完成，後改名叫JavaScript。
• 微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript。
• 為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。

• ECMA-262 是 JavaScript 標準的官方名稱。

2、ECMAScript

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達式 添加try/catch
	ECMAScript 4	沒有發布
2009	ECMAScript 5	添加"strict mode"嚴格模式 添加JSON支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增加指數運算符（**） 增加Array.prototype.includes

註：ES6就是指ECMAScript6。

盡管ECMASript是一個重要的標準，但它並不是JavaScript唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的JavaScript實際是由以下3個不同部分組成的：

• 核心（ECMAScript）
• 文檔對象模型（DOM）Document object model (整合js，css，html)
• 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

　　簡單地說，ECMAScript描述了JavaScript語言本身的相關內容。

　　JavaScript 是腳本語言

　　JavaScript 是一種輕量級的編程語言

　　JavaScript 是可插入HTML頁面的編程代碼。

　　JavaScript 插入HTML頁面後，可由所有的現代瀏覽器執行。

3、JavaScript引入方式

3.1 Script 標誌簽內寫代碼

<script>
  // 在這裏寫你的JS代碼
</script>

3.2 引入額外的JS文件

head 部分內寫上

<script src="myscript.js"></script>

4、JavaScript 語言規範

4.1 註釋

// 這是單行註釋

/*
這是
多行註釋
*/

4.2 結束符

JavaScript 中的語句都要以分號（;）為結束符。

5、JavaScript 語言基礎

5.1 變量聲明

1.JavaScript的變量可以使用下劃線、數字、字母和$組成,不能以數字開頭。

2.聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";
var age = 18;

註意：

• 變量名是區分大小寫的；
• 推薦使用駝峰式命名規則；
• 保留字不能用做變量名。

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

保留字列表

6、JavaScript 數據類型

6.1 JavaScript擁有動態類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串

6.2 數字類型

JavaScript 不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）

常用的方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

6.3 字符串

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(delimiter,limit)	分割

拼接字符串一般使用“+”

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點：
如果start等於end，返回空字符串
如果stop參數省略，則取到字符串末
如果某個參數超過string的長度，這個參數會被替換為string的長度

substirng()的特點：
如果 start > stop ，start和stop將被交換
如果參數是負數或者不是數字，將會被0替換

silce()的特點：
如果 start > stop 不會交換兩者
如果start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
如果stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

slice和substring的區別

6.4 布爾類型

區別於Python，true和false都是小寫。

var a = true;
var b = false;

“”（空字符串）、0、null、undefined、NaN都是false。

6.5 數組

類似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

常用方法：

方法	說明
.length	數組的大小
.push(ele)	尾部追加的元素
.pop()	獲取尾部的元素
.Unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start,end)	切片
.reverse()	反轉
.join(seq)	將數組元素連接成字符串
.concat(val,...)	連接數組
.sort()	排序

註意：

/*如果調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。

如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。
*/

// 根據上面的規則自行實現一個排序函數：


function sortNumber(a,b) {
  return a - b
}

// 調用sort方法時將定義好的排序函數傳入即可。
stringObj.sort(sortNumber)

關於sort的問題

可以使用以下方式遍歷數組中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

6.6 null 和 undefined

• null 表示值是空，一般在需要指定或清空一個變量時才會使用，如name=null
• undefined 表示當聲明一個變量但未初始化時，該變量的默認值是 undefined 。還有就是函數無明確的返回值時，返回的也是undefined 。
• null 表示變量的值是空，undefined 則表示只聲明了變量，但還沒有賦值。

6.7 類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof 是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

• undefined 如果變量是Undefined 類型的
• boolean 如果變量是Boolean 類型的
• number 如果變量是 Number類型的
• string 如果變量是 String 類型的
• object 如果變量是一種引用類型或Null 類型的。

7、運算符

7.1 算術運算符

+ - * / % ++ --

7.2 比較運算符

> >= < <= != == === !==

註意：

1 == “1”  // true
1 === "1"  // false

其中：“==” 是只比較兩個數值是否相等

　　　“===”是同時比較兩個數值和數據類型是否相等

7.3 邏輯運算符

&&（與） ||（或） !（非）

7.4 賦值運算符

= += -= *= /=

8、流程控制

8.1 if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

8.2 if - else if - else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

8.3 switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

註意：switch 中的 case 子句通常會加break語句，否則程序會繼續執行後續case中的語句。

8.4 for

for (var i=0;i<10;i++) {
  console.log(i);
}

8.5 while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

8.6 三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b

9、函數

9.1 函數定義

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);

9.2 類數組對象 arguments

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)   
}

add(1,2)

輸出：

3
2

其中：arguments.length為函數實參個數，arguments.callee引用函數自身。

9.3 函數的全局變量和局部變量

局部變量：

　　在JavaScript 函數內部聲明的變量（使用var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

　　在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。

變量生存周期：

　　JavaScript變量的生命期從它們被聲明的時間開始。

　　局部變量會在函數運行以後被刪除。

　　全局變量會在頁面關閉後被刪除。

10、作用域

　　首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

例子：

1、

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //輸出結果是？

ShenZhen

2、

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

BeiJing

3、閉包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

ShangHai

11、詞法分析

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object(AO)，並會分析一下3個方面：

1. 函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作。
2. 函數局部變量，如果AO上有同名的值，則不做任何操作，如果沒有，則將此變量賦值給AO，並且值為undefined。
3. 函數聲明，如果AO上有，則會將AO上的對象覆蓋，如果沒有，則不做任何操作。

例子：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()之後的結果是？

undefined
22

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？

22
22

12、內置對象和方法

　　JavaScript中的所有事物都是對象：字符串、數字、數組、日期等等。在JavaScript中，對象是擁有屬性和方法的數據。

　　

註意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

13、自定義對象

類似於（某方面類似）Python中的字典數據類型

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屬性

擴展

// 父類構造函數
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 () {
  /* ... */
};

JavaScript面向對象之繼承

14、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 ()            獲取完整年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

詳細Date對象方法：點我

15、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);

16、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(‘foo‘); // 返回false
// 所以我們在使用test()方法校驗一個字符串是否完全匹配時，不推薦添加全局匹配模式g。

// 註意事項2(說出來你可能不信系列)：
// 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test("undefined"), 並且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

RegExp

擴展閱讀

17、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)      返回角的正切。

Math

前端之JavaScript內容