JavaScript概述
JS引入與注釋
Script標簽內寫代碼
#script可以寫在head也可以寫在body
<script>
// 在這里寫你的JS代碼
</script>
引入額外的JS文件
<script src="myscript.js"></script>
注釋語法
// 這是單行注釋
/*
這是
多行注釋
*/
#JavaScript中的語句要以分號（;）為結束符。
JavaScript基礎語法
變量聲明
- JavaScript的變量名可以使用_，數字，字母，$組成，不能以數字開頭。
- 聲明變量使用 var 變量名; 的格式來進行聲明
var name = "simple";
var age = 18;
JavaScript數據類型
js的數據類型是動態類型
var x; // 此時x是undefined
var x = 1; // 此時x是數字
var x = "simple" // 此時x是字符串
數值(Number)
var a = 12.34;
var b = 20;
#JavaScript不區分整型和浮點型，就只有一種數字類型。
還有一種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
字符串常用方法
| 方法 | 說明 |
|---|---|
| .length | 返回長度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左邊的空白 |
| .trimRight() | 移除右邊的空白 |
| .charAt(n) | 返回第n個字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根據索引獲取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小寫 |
| .toUpperCase() | 大寫 |
| .split(delimiter, limit) | 分割 |
# 拼接字符串一般使用“+”
布爾值(Boolean)
區別於Python，true和false都是小寫。
var a = true;
var b = false;
#""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
一個是曾經擁有,一個是未曾擁有
對象(Object)
數組
數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似於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() | 返回一個數組元素調用函數處理后的值的新數組 |
forEach()
語法：
forEach(function(currentValue, index, arr), thisValue)
splice()
語法：
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" |
類型查詢
# typeof
typeof "abc" // "string"
typeof null // "object"
typeof true // "boolean"
typeof 123 // "number"
#typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句
運算符
算數運算符
# + - * / % ++ --
比較運算符
# >, >=, <, <=, !=, ==, ===, !==
1 == “1” // true 弱等於
1 === "1" // false 強等於
邏輯運算符
#&& ,||, !
賦值運算符
= += -= *= /=
流程控制
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;三元運算可以嵌套使用；
函數
函數定義
// 普通函數定義
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);
函數中的arguments參數
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);
}
#arguments相當於將出傳入的參數全部包含，這里取得就是第一個元素1
add(1,2)
函數的全局變量和局部變量
局部變量：
在JavaScript函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。
全局變量：
在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。
變量生存周期：
JavaScript變量的生命期從它們被聲明的時間開始。
局部變量會在函數運行以后被刪除。
全局變量會在頁面關閉后被刪除。
作用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。
內置對象和方法
自定義對象
創建對象：
var person=new Object(); // 創建一個person對象
person.name="Alex"; // person對象的name屬性
person.age=18; // person對象的age屬性
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();
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) 返回角的正切。