前端三劍客-05js_ECMAScript

一丶JavaScript歷史

Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。爲此體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。後來公司倒閉了,你們就繼續用,一點都不顧慮了...

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

二丶JavaScript的構成

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

三丶JavaScript引入方式

Script標籤內寫代碼

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

引入額外的JS文件

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

四丶JavaScript語法規範

4.1註釋

// 這是單行註釋

/*
這是
多行註釋
*/

4.2結束符

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

五丶變量聲明

1. JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。

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

3. 變量名是區分大小寫的。

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

   保留字不能用作變量名。

4. ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

5. ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

六丶JavaScript數據類型

ps:默認剛出來的定義出來的變量的值都是undefined

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

6.1數值(Number)

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("123abh")  // 返回123,會自動截斷
parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

6.2字符串(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(delimiter, limit)	分割

新語法模版字符串 `` 既支持多行文本,也支持字符串的替換

字符串憑藉相對於concat推薦使用加號拼接

切片推薦使用slice, substring不支持負數

split兩個參數,一個爲切分依據,第二個參數表示從切的結果中拿出幾個超出了就拿最多, 不會報錯

ES6中引入了模板字符串。模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠當作普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

注意：

若是模板字符串中須要使用反引號，則在其前面要用反斜槓轉義。

6.3布爾值

var a = true;
var b = false;

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

null和undefined

• null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
• undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

七丶JavaScript對象(Object)

對象只是帶有屬性和方法的特殊數據類型。

7.1數組

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於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()	排序
.forEach()	將數組的每一個元素傳遞給回調函數
.splice()	刪除元素，並向數組添加新元素。
.map()	返回一個數組元素調用函數處理後的值的新數組

splice方法 在把須要傳的參數傳了後續的傳別的不會報錯

concat 至關於python的extend

forEach()

語法：

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

兩個參數時候打印數值元素和序號

splice的用法爲先刪回加

map()

類型查詢

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.2運算符

算數運算符

+ - * / % ++ --
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涉及到比較時儘可能用三等號來強制限制類型，防止判斷錯誤

邏輯運算符

&& || !

對應python 的 and or not

賦值運算符

= += -= *= /=

7.3流程控制

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++;
}

7.4三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算能夠嵌套使用；

7.5函數

函數定義

// 普通函數定義
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;
}

函數中的arguments參數

一般配合 .length 來統計數量判斷

可以獲取到函數接受到的全部的參數,能夠更具該參數實現對函數調用時參數的限制

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments至關於將出傳入的參數所有包含，這裏取得就是第一個元素1
}

add(1,2)

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

局部變量：

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

全局變量:

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

變量生存週期：

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

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

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

做用域

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。與python做用域關係查找如出一轍！

詞法分析（嘗試理解）

當函數調用的前一瞬間，會先造成一個激活對象：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()以後的結果是？

結果: undefined 22

八丶內置對象和方法

8.1內置對象

類型	內置對象	介紹
數據類型	Number	數字對象
	String	字符串對象
	Boolean	布爾值對象
組合對象	Array	數組對象
	Math	數學對象
	Date	日期對象
高級對象	Object	自定義對象
	Error	錯誤對象
	Function	函數對象
	RegExp	正則表達式對象
	Global	全局對象

8.2自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

8.3建立對象：

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

for (var i in a) {
    console.log(i, a[i]);
}

8.4Date對象

//方法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());  //毫秒並不直接顯示

8.5Date對象的方法：

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

注意點,這邊的月是按序號來的 須要+1纔是正確月份

8.6JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

8.7RegExp對象

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