前端基礎（七）：JavaScript基礎語法

下面是小凰凰的簡介，看下吧！
💗人生態度：珍惜時間，渴望學習，熱愛音樂，把握命運，享受生活
💗學習技能：網絡 -> 雲計算運維 -> python全棧( 當前正在學習中)
💗您的點贊、收藏、關注是對博主創作的最大鼓勵，在此謝過！
有相關技能問題可以寫在下方評論區，我們一起學習，一起進步。
後期會不斷更新python全棧學習筆記，秉着質量博文爲原則，寫好每一篇博文。

一、變量與常量

// ES5定義變量：var是關鍵詞、num是變量名、=爲賦值符、10爲變量值、;爲JS語言語句的結束標識符
var num = 10;

// ES6定義變量
let count = 100;

//常量
const PI = 3.14;

var 在for循環裏面定義也會影響到全局
let 在局部定義就是局部變量，在全局定義就是全局變量。推薦使用！

變量的命名規範：

1. 由字母，數字，_，$ 組成，不能以數字開頭（可以包含中文字符）

2. 區分大小寫

3. 不能出現關鍵字及保留字 

4、駝峯式命名，例如：userName

二、數據類型

JavaScript擁有動態類型

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

1、數值(Number)

JavaScript不區分整型和浮點型，就只有一種數字類型。

// 數字類型：number。沒有小數、整數一說！
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 結果：number  10
// console.log（）相當於python的 print（）
// typeof（）查看數據類型

還有一種NaN，表示不是一個數字（Not a Number）,但它確實屬於數字類型
常用方法：
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

2、字符串(String)

// 字符串類型：string
var a = "Hello"
var b = "world;
var c = a + b;  // python中不推薦這樣做！
console.log(c);  // 得到Helloworld

// 布爾類型：boolean
var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);  // 結果：string  雙引號可以表示字符串

// 未定義類型：undefined
var u1;
var u2 = undefined;
console.log(typeof(u1), u1);  // 結果：undefined  undefined

常用方法：
substring和slice功能一樣，但是substring你就當沒有，用slice就行了！

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

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

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

3、布爾值(Boolean)

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

var a = true;
var b = false;
// ""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

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

4、引用類型—對象(Object)

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數…此外，JavaScript 允許自定義對象。
JavaScript 提供多個內建對象，比如 String、Date、Array 等等。
對象只是帶有屬性和方法的引用類型。

我們今天主要學習數組這個引用類型：
數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似於Python中的列表：

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

常用方法：

（1）forEach()

用途：對數組每個元素進行遍歷，並執行function匿名函數
語法：forEach(function(currentValue, index, arr), thisValue)
參數：
例子：

（2）splice()

用途：前兩個參數先刪除數組元素，最後一個參數指定替代刪除元素的元素
語法：splice(index,howmany,item1,…,itemX)
參數：

（3）map()

語法：map(function(currentValue,index,arr), thisValue)
參數：
例子：

5、類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

• undefined - 如果變量是 Undefined 類型的
• boolean - 如果變量是 Boolean 類型的
• number - 如果變量是 Number 類型的
• string - 如果變量是 String 類型的
• object - 如果變量是一種引用類型或 Null 類型的

三、運算符

1、算數運算符

2、賦值運算符

3、比較運算符 （注意：等於/絕對等於）

4、邏輯運算符

5、三目運算符

// 結果 = 條件表達式 ? 結果1 : 結果2;
// 語法規則：條件表達式成立，將結果1賦值給結果，反正賦值結果2

// 案例：
var weather = prompt("天氣(晴|雨)");  // 文本輸入彈出框
var res = tq == '晴' ? "今天天氣挺好" : "請假回家收衣服";
console.log(res);  // 今天天氣挺好

四、流程控制

1、分支結構

（1）if分支語句

var weather = prompt("天氣(晴|雨)");  // 文本輸入彈出框，類似於input
if (weather == "晴") {
    alert("今天是晴天")
} else if (weather == "雨") {
    alert("今天是雨天")
} else {
    alert("輸入信息有誤")
}

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

2、循環結構

（1）for循環

// 案例：
for (var i = 0; i < 5; i++) {
    console.log(i);
}

（2）while循環

// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

（3）for (… in …) 迭代器

var arr = [1, 2, 3, 4, 5]
for (num in arr) {
    console.log(num);
}

（4）break / continue 關鍵詞

// 1. break：結束本層循環
// 2. continue：結束本次循環進入下一次循環

五、函數

1、函數須知

// python中的定義函數使用def關鍵字
// javascript中定義函數使用function關鍵字

function func2(a,b){
	console.log(a,b)
}
func2(1,2,3,4,5,6) //函數傳參過多也沒關係，只取夠，多了不要
func2(1) //函數傳參少了也沒關係，沒有值的賦值undefined

function func3(a,b){
	return a,b
}
res = func3(1,2) // return只能返回一個值，不能返回多個，res值爲1,只接收第一個
a,b = func3(1,2) //js不支持解壓賦值

2、匿名函數

function(){
	console.log('哈哈哈')
}

3、箭頭函數

var func4 = v => v; //箭頭左邊是形參，右邊是返回值
等價於：
var func4 = function(v){
	return v
}

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;  //這裏的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數組或對象中
}

4、函數中的arguments參數

function add(a,b){
	if(arguments.length != 2){ //arguments相當於將出傳入的參數全部包含
		console.log('傳參數目不正確')
	}else{
		return a+b
	}
}
add(1)

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

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

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

變量生存週期：

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

2. 局部變量會在函數運行以後被刪除。

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

6、作用域

與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中的所有事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

注意var s1 = "abc" 和 var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

1、自定義對象（類似python字典）

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屬性
console.log(person)

// 輸出結果：{name: "Alex", age: 18}

2、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());

Date對象的方法：

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

3、Json對象

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

4、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(); // 結果爲true
等價於： 
reg2.test(undefined); 

var reg3 = /undefined/;
reg3.test(); // 結果爲true

5、Math對象（瞭解即可）

abs(x)      返回數的絕對值。
floor(x)    對數進行下舍入。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sqrt(x)     返回數的平方根。