JS簡介

JavaScript（簡稱JS） 是一種具有函數優先的輕量級，解釋型或即時編譯型編程語言雖然它是作為開發Web頁面的腳本語言而出名，但是它也被用到了很多非瀏覽器環境中，JavaScript 基於原型編程、多範式的動態腳本語言，並且支持面向對象、命令式、聲明式、函數式編程範式

JavaScript與Java的關係

JavaScript的基礎語法和對象體系，是模仿Java而設計的

JavaScript語言的函數是一種獨立的數據類型以及基於原型對象的繼承鏈，是與java語法最大的兩點區別

JavaScript不需要編譯，由解釋器直接執行

IT行業鄙視鏈:架構師>後端研發＞前端研發＞產品經理＞運營＞UI設計師

架構師認為：沒有我，哪有他們，架構是一切的根基

後端開發認為：前端只會“畫圖”

前端開發認為：產品經理“嘴上功夫”

產品經理認為：我的產品已經很厲害了，還需要用力運營嗎？

運營師認為：我拼盡全力拉來的用戶，都被測試沒發現的bug搞丟了，而且UI不夠美觀交互不夠人性

ECMAScript的歷史

總結

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

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

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

JavaScript 很容易學習

js基礎

註釋語法

第一種是多行註釋"/**/",一般js文件開頭，介紹作者，函數等信息

/**author:xxx*day:2008-08-10*/

第二種註釋方法是最常見的"//",在程式間隨處可見,只能註釋單行

//這是一行註釋，只能註釋單行
//另一行註釋

第三種註釋不是很常見，會和html內的註釋混淆，不推薦使用

<!-這是一行註釋，只能註釋單行

引入js的多種方式

1. head內script標簽內編寫

2. head內script標簽src屬性引入外部js資源

3. body內最底部通過script標簽src屬性引入外部js資源(最常用)
   註意:頁面的下載是從上往下的 所以操作標簽js代碼一定要等待標簽載入完畢再執行才可以正常運行

結束符號

在 JavaScript 中 ; 代表一段代碼的結束，多數情況下可以省略 ; 使用回車enter替代

變數與常量

什麼是變數

變數表示一些可以變化的數據。當一個數據的值需要經常改變或者不確定時，就應該用變數來表示

例如:超市中的儲物格就相當於一個變數, 裡面可以存儲各種不同的東西, 裡面存儲的東西也可以經常改變

什麼是常量

常量表示一些固定不變的數據

例如:現實生活中人的性別其實就可以看做是常量, 生下來是男孩一輩子都是男孩, 生下來是女孩一輩子都是女孩

變數聲明

JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。
聲明變數使用 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

基本數據類型

• 在JS中查看數據類型的方式 typeof

數值類型(Number)

• 在JS中所有的數值都是Number類型，包括整數和浮點數（小數）

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

• NaN也屬於數值類型 意思是:不是一個數字(Not A Number)
  使用typeof 檢查一個NaN也會返回一個number

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

字元類型(String)

/* 
             -在JS中字元串需要使用引號起來
             -使用雙引號或者單引號都可以，但是不要混用
             -引號不能嵌套，雙引號裡面不能放雙引號，單引號不能放單引號
                單引號裡面可以放雙引號
             */
            var str="hello";
            str ='我說:"今天心情好!"';
            /* 在字元串中我們可以使用\作為轉義符，
                當表示一些特殊符號時可以可以使用\進行轉義
                \"  表示"
                \'  表示'
                \n  表示換行
                \t  製表符
                \\  表示\
                加上雙引號表示字元串，不加雙引號表示變數
            */
            document.write(str)

常見內置方法:

註意:字元串拼接推薦使用加號

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)個字元結束(不包含該位置字元)

布爾類型(Boolean)

/* 
            Boolean布爾值 
             布爾值只有兩個，主要用來邏輯判斷
             true   表示真
             false  表示假
             */
            var bool=false;
            console.log(typeof bool);
            console.log(bool);

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

null與undefined

/* 
            Null類型的值只有一個，就是null 
             null這個值專門表示空的對象
            使用typeof檢查一個null,會返回object
            undefined(未定義)類型只有一個，就undefind
            當聲明一個變數，但是並不給變數賦值時，它的值就是undefind
            使用typeof檢查一個undefind時也會返回undefind
            */
            var a=null;
            console.log(typeof a);//返回object
            var b;
            console.log(b)
            console.log(typeof b)

對象(object)

• JavaScript 中的所有事物都是對象：字元串、數值、數組、函數...此外，JavaScript 允許自定義對象

• JavaScript 提供多個內建對象，比如 String、Date、Array 等等

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

數組

• 數組對象的作用是：使用單獨的變數名來存儲一系列的值。類似於Python中的列表

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

常用方法：

運算符

算數運算符

數學運算符就是常見的加(+)、減(-)、乘(*)、除(/)、等於(=)、求冪(**)、自增(++)、自減(--)、加等於(+=)、減等於(-=)等

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

邏輯運算符

&&(與)	||(或)  !(非)

運算符的優先順序

流程式控制制

順序結構

• 最基本的流程式控制制，按照代碼先後順序依次執行

分支結構

• 根據不同的條件去執行不同的代碼最後得到不同的結果

單if分支

if (條件){
        條件成立執行的代碼
    }

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){				# 條件1
  console.log("a > 5");			# 條件1成立執行的代碼
}else if (a < 5) {			# 條件2
  console.log("a < 5");			# 條件1不成立條件2執行的代碼
}else {					# 條件1和2都不成立執行的代碼
  console.log("a = 5");
}

如果分支結構中else if很多還可以考慮使用switch語法

var day = new Date().getDay();
switch (day) {			# 條件
  case 0:			# 條件1
  console.log("Sunday");	# 條件1成立執行的代碼
  break;			# 如果沒有break會基於某個case一直執行下去
  case 1:			# 條件2
  console.log("Monday");	# 條件2成立執行的代碼
  break;
default:			# 條件都不滿足執行的代碼
  console.log("...")
}

switch中的case子句通常都會加break語句，否則程式會繼續執行後續case中的語句

for迴圈

for (var i=0;i<10;i++) {		# 起始條件;迴圈條件;條件處理
  console.log(i);			# 迴圈體代碼
}
let dd = {'name':'jason','age':18}
for(let k in dd){
     console.log(k)
}

while迴圈

var i = 0;
while (i < 10) {		# 迴圈條件
  console.log(i);		# 迴圈體代碼
  i++;
}

三元運算

語法結構為：條件 ？ 操作1 ： 操作2。 如果條件為真，執行操作1，否則執行操作2

(條件) ? 表達式1 : 表達式2

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 函數語法

JavaScript 函數通過function關鍵詞進行定義，其後是函數名和括弧 ()。
函數名可包含字母、數字、下劃線和美元符號（規則與變數名相同）。
圓括弧可包括由逗號分隔的參數：

function 函數名(形參){
    // 函數註釋
    函數體代碼
    return 返回值
}

匿名函數

var s1 = function(a, b){
  return a + b;
}

箭頭函數

var s1 = function(a, b){
  return a + b;
}

var f = () => 5;
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
  return num1 + num2;  
}

1.JS中函數的形參與實參個數可以不對應
傳少了就是undefined 傳多了不用
2.函數體代碼中有一個關鍵字arguments用來接收所有的實參
3.函數的返回值如果有多個需要自己處理成一個整體

內置對象

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

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


let dd = {name: 'jason', age: 18}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化

定義正則兩種方式

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的規律
	lastIndex
2.test匹配數據不傳預設傳undefined