JavaScript概述

ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。次年，ECMA釋出262號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，但是沒有稱其為JavaScript，有兩個方面的原因。一是商標，JavaScript本身已被Netscape註冊為商標。而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

因此ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

ECMAScript的歷史

注：ES6就是指ECMAScript 6。

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

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

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

JavaScript 是指令碼語言

JavaScript 是一種輕量級的程式語言。

JavaScript 是可插入 HTML 頁面的程式設計程式碼。

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

JavaScript引入方式

Script標籤內寫程式碼

<script>
  // 在這裡寫你的JS程式碼
</script>

引入額外的JS檔案

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

JavaScript語言規範

註釋（註釋是程式碼之母）

// 這是單行註釋

/*
這是多行註釋
*/

結束符

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

JavaScript語言基礎

變數宣告

1. JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭
2. 宣告變數使用 var 變數名; 的格式來進行宣告

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

注意：

變數名是區分大小寫的。

推薦使用駝峰式命名規則。

保留字不能用做變數名。

補充：

ES6新增了let命令，用於宣告變數。其用法類似於var，但是所宣告的變數只在let命令所在的程式碼塊內有效。例如：for迴圈的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用來宣告常量。一旦宣告，其值就不能改變

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

JavaScript資料型別

JavaScript擁有動態型別

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

數值(Number)

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

字串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

拼接字串一般使用“+”

slice和substring的區別

補充：

ES6中引入了模板字串。模板字串（template string）是增強版的字串，用反引號（`）標識。它可以當做普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。

// 普通字串
`這是普通字串！`
// 多行文字
`這是多行的
文字`
// 字串中嵌入變數
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

注意：

如果模板字串中需要使用反引號，則在其前面要用反斜槓轉義。

JSHint啟用ES6語法支援:/* jshint esversion: 6 */

布林值(Boolean)

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

var a = true;
var b = false;

""(空字串)、0、null、undefined、NaN都是false。

null和undefined

• null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;
• undefined表示當宣告一個變數但未初始化時，該變數的預設值是undefined。還有就是函式無明確的返回值時，返回的也是undefined。

null表示變數的值是空(null可以手動清空一個變數的值，使得該變數變為object型別，值為null)，undefined則表示只聲明瞭變數，但還沒有賦值。

物件(Object)

JavaScript 中的所有事物都是物件：字串、數值、陣列、函式...此外，JavaScript 允許自定義物件。

JavaScript 提供多個內建物件，比如 String、Date、Array 等等。

物件只是帶有屬性和方法的特殊資料型別。

陣列

陣列物件的作用是：使用單獨的變數名來儲存一系列的值。類似於Python中的列表。

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

常用方法：

forEach()

語法：

forEach(function(currentValue, index, arr), thisValue)**
**

引數：

splice()

語法：

splice(index,howmany,item1,.....,itemX)

引數：

map()

語法：

map(function(currentValue,index,arr), thisValue)

引數：

注意：

sort

可以使用以下方式遍歷陣列中的元素：

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

*補充：*

ES6新引入了一種新的原始資料型別（Symbol），表示獨一無二的值。它是JavaScript語言的第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 型別的

運算子

算數運算子

+ - * / % ++ --

var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

這裡由於的x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！

比較運算子

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

注意：

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

邏輯運算子

&& || !
(and or not)

賦值運算子

= += -= *= /=

流程控制

if-else

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

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

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中的語句。

for

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

while

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

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b//這裡的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值為a,條件不成立返回的值為b;三元運算可以巢狀使用；

var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

函式

函式定義

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;  //這裡的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數組或物件中
}

函式中的arguments引數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);　console.log(arguments[0]);//arguments相當於將出傳入的引數全部包含，這裡取得就是第一個元素1
}

add(1,2)

輸出：

3
21

注意：

函式只能返回一個值，如果要返回多個值，只能將其放在陣列或物件中返回。

函式的全域性變數和區域性變數

區域性變數：

在JavaScript函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它（該變數的作用域是函式內部）。只要函式執行完畢，本地變數就會被刪除。

全域性變數：

在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。

變數生存週期：

JavaScript變數的生命期從它們被宣告的時間開始。

區域性變數會在函式執行以後被刪除。

全域性變數會在頁面關閉後被刪除。

作用域

首先在函式內部查詢變數，找不到則到外層函式查詢，逐步找到最外層。與python作用域關係查詢一模一樣！

幾個例子：

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

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

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();  // 執行後的結果是？ 

內建物件和方法

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結構實現。

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午夜)

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物件

// 定義正則表示式兩種方式
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();

RegExp

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

//僅供學習交流//