概念
●瀏覽器腳本語言
●可以編寫運行在瀏覽器上的代碼程序
●屬於解釋性、弱語言類型編程語言
組成
●ES語法：ECMAScript.主要版本ES5和ES6
●DOM：文檔對象模型（Document Object Model），是W3C組織推薦的處理可擴展標志語言的標准編程接口。
●BOM：瀏覽器對象模型（Browser Object Model），提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構；且由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
基本概念
引用方式
1、行間式：存在於行間事件中
<body id="body"onload="body.style.backgroundColor='#Off'">
</body>
2.內聯式：存在於頁面script標簽中
<script>
function add ():
</script>
3.外聯式
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
注釋
// 這是單行注釋
/*
這是
多行注釋
*/
語法
變量聲明
變量名的定義
-
JavaScript的變量名可以使用_，數字，字母，$組成，不能以數字開頭。
-
聲明變量使用 var 變量名; 的格式來進行聲明
注意：
變量名是區分大小寫的。
推薦使用駝峰式命名規則。
保留字不能用做變量名。
補充：
ES6新增const用來聲明常量。一旦聲明，其值就不能改變。
ECMA6 中添加了新的關鍵字，可以命令局部作用域
數據類型
數值型
JavaScript不區分整型和浮點型，就只有一種數字類型。
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.001
還有一種NaN，表示不是一個數字（Not a Number），NaN表示當前轉換的對象不是一個數字，但是他是數值類型。
parseInt("123") // 返回123
parseInt(12.12); //12
parseInt("ABC") // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456") // 返回123.456
布爾值類型
字符串類型
定義
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) | 分割 |
slice和substring的特點
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)個字符結束(不包含該位置字符)
補充：
ES6中引入了模板字符串。模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`
布爾值
var is_true = true;
var is_false = false; //關鍵字必須是大寫才可以。
""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;
- undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
null表示變量的值是空(null可以手動清空一個變量的值，使得該變量變為object類型，值為null)，undefined則表示只聲明了變量，但還沒有賦值
運算符
算數運算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
這里由於的x++和++x在出現賦值運算式，x++會先賦值再進行自增1運算，而++x會先進行自增運算再賦值！
res1;
10
res2;
12
比較運算符
> >= < <= != == === !==
1 == “1” // true 弱等於
1 === "1" // false 強等於
//上面這張情況出現的原因在於JS是一門弱類型語言(會自動轉換數據類型)，所以當你用兩個等號進行比較時，JS內部會自動先將
//數值類型的1轉換成字符串類型的1再進行比較，所以我們以后寫JS涉及到比較時盡量用三等號來強制限制類型，防止判斷錯誤
邏輯運算符
&& || !
&& //與
|| //或
！ //非
賦值運算符
= += -= *= /=
數組
數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似於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() | 返回一個數組元素調用函數處理后的值的新數組 |
和python的幾個不同的點需要注意：
var l = [1,2,3,4]
l.join('|')
>>>"1|2|3|4" 在數組類型中可以使用這個方法，
5+'1';
>>>"51" 不同數字類型可以拼接
for each
語法：
splice(index,howmany,item1,.....,itemX)
參數：
| 參數 | 描述 |
|---|---|
| index | 必需。規定從何處添加/刪除元素。 該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。 |
| howmany | 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。 如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。 |
| item1, ..., itemX | 可選。要添加到數組的新元素 |
map()
語法：
map(function(currentValue,index,arr), thisValue)
參數：
| 參數 | 描述 |
|---|---|
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數: 參數描述： currentValue必須。當前元素的值 index可選。當期元素的索引值 arr可選。當期元素屬於的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值為 "undefined" |
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 類型的
流程控制
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
函數的定義
// 普通函數定義
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);
函數的全局變量和局部變量
局部變量：
在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(); // 打印結果是？
閉包函數
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
內置對象和方法
JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），但是只能用字符串作為鍵。
var a = {"name": "MLXG", "age": 18};
console.log(a.name);
console.log(a["age"]);
>>>‘MLXG’
>>>18
var a = {"name": "UZI", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
>>>name uzi
>>>age 18
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午夜)
正則表達式
// 定義正則表達式兩種方式
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屬性*/
// 校驗時不傳參數,默認匹配undefined
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
RegExp
JSON 對象
var str1 = '{"name": "Faker", "age": 18}';
var obj1 = {"name": "Faker", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); //loads
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1); //dumps