前端知識之JavaScript

一. JavaScript概述

1. ECMAScript和JavaScript的關系

1996年11月，JavaScript的創造者–Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準，次年，ECMA發布262號標準檔案（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為ECMAScript，這個版本就是1.0版，

該標準一開始就是針對JavaScript語言制定的，但是沒有稱其為JavaScript，有兩個方面的原因，一是商標，JavaScript本身已被Netscape注冊為商標，而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利于保證這門語言的開發性和中立性，

因此ECMAScript和JavaScript的關系是，前者是后者的規格，后者是前者的一種實作，

2. ECMAScript的歷史

**注意：**ES6就是指ECMAScript 6，

盡管 ECMAScript 是一個重要的標準，但它并不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分，實際上，一個完整的 JavaScript 實作是由以下 3 個不同部分組成的：

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

簡單地說，ECMAScript 描述了JavaScript語言本身的相關內容，

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

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

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

JavaScript 很容易學習，

二. JavaScript2種引入方式

1. Script標簽內寫代碼

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

2. 引入額外的JS檔案

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

三. JavaScript語言規范

1. 注釋（注釋是代碼之母）

// 這是單行注釋

/*
多行注釋1
多行注釋2
多行注釋3
*/

2. 結束符

JavaScript中的陳述句要以分號（;）為結束符，

四. JavaScript語言基礎

1. 變數宣告

宣告變數的關鍵字: var

• 變數的初始化: var x = 2;
• 變數的宣告: var y;
• 變數的賦值: y = 2

2. 變數的命令規范

• 1.必須使用字母, 下劃線, $開始
• 2.多個英文字母, 駝峰的表示: myName
• 3.不能使用JS中關鍵字或保留字來進行命令
• 4.嚴格區分大小寫

3. 變數的5種基本資料型別

5種基本資料型別: number, string, boolean, undefined, null

列印資料型別: alert(宣告的變數名);

查看屬性型別: alert(typeof 宣告的變數名);

• Number 數值型別
  • 整數, 負數, 浮點數
• String 字串型別
  • 單引號或雙引號表示方式
• Boolean 布爾資料型別
  • 成立回傳: true
  • 不成立回傳: false
• undefined 未定義的變數
  • alert列印回傳值: undefined
  • alert+typeof列印資料型別回傳值: undefined
• null 空物件
  • alert列印回傳值: null
  • alert+typeof列印資料型別回傳值: object

4. ES6新增關鍵字let & const

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

5. 使用var變數的宣告被提前到作用域頂部，賦值則保留在原地(重點)

JS變數的宣告被提前到作用域頂部，賦值保留在原地；(不要小看這句總結)請看下面這個例子：

var color = "blue";  
function getColor()  
{  
    console.log(color);   // undefined  
    var color = "red";  
    return color;  
}  
console.log(getColor());  // red  

可能你已經掌握了區域作用域會覆寫上一級作用域的同名變數，然后Line4的color先使用上一級作用域的color，所以誤認為值是blue，其實不是，原因就在于，JS變數的宣告（var修飾）會被提前到函式作用域的開始處，即相當于Line5的var color=“red”;被分解成var color; color=“red”;而var color先被JS引擎決議，覆寫了上一級的color，接著執行Line4的輸出，此時color沒有被賦值，賦值color=“red”;依然保留在Line5處，以上代碼理解如下:

Copyvar color;  
color = "blue"
function getColor()  
{  
    var color;
    console.log(color);   // undefined  
    color = "red";  
    return color;  
}  
console.log(getColor());  // red  

這個細節，告訴我們，不能只知其一不知其二，特別是函式：

console.log(window.sum);
// 執行結果
/*
? sum(a,b){
    return a+b;
}
*/

alert(sum(1,1));  // 2
function sum(a,b){
    return a+b;
}
Copyconsole.log(window.sum);  // undefined
alert(sum(1,1));  // 報錯
var sum = function (a,b){
    return a+b;
}

// 如下
var sum;
alert(sum(1,1));  // 報錯
sum = function (a,b){
    return a+b;
}

總結: 在執行JS代碼之前，所有的全域變數（包括函式和變數），都會系結到window物件上，只是函式會包含函式體，變數僅僅是一個undefined，

6. let和var定義變數的區別(重點)

1. 作用域不一樣，var是函式作用域，而let是塊作用域，也就是說，在函式內宣告了var，整個函式內都是有效的，比如說在for回圈內定義了一個var變數，實際上其在for回圈以外也是可以訪問的，而let由于是塊作用域，所以如果在塊作用域內（比如說for回圈內）定義的變數，在其外面是不可被訪問的，所以let用在for (let i; i < n; i++)是一種很推薦的寫法

2. let不能在定義之前訪問該變數，但是var是可以得，也就是說，let必須是先定義，再使用，而var先使用后宣告也行，只不過直接使用但是沒有卻沒有定義的時候，其值為undefined，這塊要注意，這一塊很容易出問題，這也是個人認為的let比var更好的地方，至于為啥會有這種區別呢，實際上var有一個變數提升的程序，也就是說，當這個函式的作用域被創建的時候，實際上var定義的變數都會被創建，并且如果此時沒有初始化的話，則默認會初始化一個undefined，

3. let不能被重新定義，但是var是可以的，這個呢，我個人認為，從規范化的角度來說，是更推薦的，比如說，你在前面宣告了一個變數，后來寫代碼，因為忘了之前的代碼邏輯，又宣告了一個同名的變數，如果這倆變數邏輯不一樣，并且后面都要用的話，很容易出問題，且不容易維護，

總之呢，let從規范化的角度來說，要比var要進步了很大一步，所以一般情況下的話，推薦用let，const這些，

let 和 const 命令深入: https://es6.ruanyifeng.com/#docs/let

五. JavaScript資料型別

1. JavaScript擁有動態型別

/*
js/python是一門擁有動態型別的語言: 變數名指向一種型別以后可以更改
 但是有一些語言中，變數名之內指向一種后續不能更改.
*/
var xxx;              // 此時x是undefined
var xxx = 'jsaon';    // 此時的xxx是字串
var xxx = 123;        // 此時的xxx是數值
var xxx = [1, 2, 3];  // 此時的xxx是陣列

2. 數值(Number)

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

var a = 11;
var b = 11.11;

// 如何查看當前資料型別?
console.log(typeof a);  // number
console.log(typeof b);  // number

// 特殊的 NaN:數值型別 表示的意思是“不是一個數字” NOT A NUMBER
console.log(typeof NaN); // number


// 型別轉換
// python中int型別只能轉換純數字的字串, float只能轉換帶一個點的純數字的字串
console.log(parseInt('123123'));             // 12312312
console.log(parseFloat('11.11'));            // 11.11
console.log(parseInt('11.11'));              // 11
console.log(parseInt('123sdasdajs2312d'));   // 123
console.log();parseInt('asdasdad123sdad');   // NaN

console.log(parseFloat('11'));           // 11
console.log(parseFloat('11.11'));        // 11.11
console.log(parseFloat('11.111faweff')); // 11.111
console.log(parseFloat('awefe11.11'));   // NaN


// 總結
/*
1. 數值型別: 純數字, 浮點數, NaN
2. 查看型別: typeof
3. 字串轉換成數值型別: parseInt() parseFloat()
*/

3. 字串(String)

基本用法:

var s = 'jason';
var s1 = 'tank';
// var s2 = '''alex'''  // 不支持三引號(拋出例外: VM665:1 Uncaught SyntaxError: Unexpected string)
console.log(typeof s1); // string

// 模版字串(注意: 如果模板字串中需要使用反引號，則在其前面要用反斜杠轉義，)
var s3 = `
\`多行顯示使用模版字串
\`多行顯示使用模版字串
`;
console.log(typeof s3); // string

// 模版字串除了可以定義多行文本之外還可以實作格式化字串操作
var name = 'jason';
var age = 18;
var sss = `
My name is ${name} My age is ${age}`;
console.log(sss);  //  My name is jason My age is 18

// 書寫${} 會自動去前面找大括號里面的變數名對應的值 如果沒有定義直接報錯
// var s4 = `my name is ${xxxxx}`;
// console.log(s4);  // 拋出例外: Uncaught ReferenceError: namemmmmm is not defined

// 字串的拼接
/*
在python中不推薦你使用+做拼接 join
在js中推薦你直接使用+做拼接: python中字串數值不能直接和字串進行拼接, 但是再js中會把數值型別轉換成字串型別再進行拼接
*/
var sss1 = name + age;
console.log(sss1);  // jason18

// 總結
/*
1. python中使用三引號展示多行字串. js中使用模板字串展示多行字串
2. python中使用%s,format,f"{}"等方式實作字串的格式化. js中使用`${}`實作字串的格式化
3. python中使用+,join實作字串的拼接, +號數值不能直接和字串進行拼接, join中串列中元素必須是字串型別(推薦用join). 而js中使用+實作字串的拼接,且當+號進行拼接時遇見數值型別會先換成字串型別再進行拼接
*/

字串型別常用方法:

var name = 'egonDSB';
console.log(name.length); // 7

var name1 = '   egonDSB  ';
console.log(name1.trim());      // egonDSB
console.log(name1.trimLeft());  // egonDSB
console.log(name1.trimRight()); //    egonDSB
var name2 = '$$jason$$';
console.log(name2.trim('$'));  // $$jason$$(不能加括號指定去除的內容)

console.log(name2.charAt(0));      // $

console.log(name2.indexOf('as'));  // 3

console.log(name2.substring(0,2));   // $$
console.log(name2.substring(0,-1));  // 不識別負數

console.log(name2.slice(0,-1));      // $$jason$

var name3 = 'eGoNDsb123666HahA';
console.log(name3.toUpperCase());  // EGONDSB123666HAHA
console.log(name3.toLowerCase());  // egondsb123666haha

var name4 = 'tank|hecha|liaomei|mengsao|...';
console.log(name4.split('|'));     // ["tank", "hecha", "liaomei", "mengsao", "..."]
console.log(name4.split('|', 2));  //  ["tank", "hecha"](第二個引數不是限制切割字符的個數還是獲取切割之后元素的個數)


console.log(name.concat(name1, name2));  // egonDSB   egonDSB  $$jason$$
console.log(name+name1+name2);  // egonDSB   egonDSB  $$jason$$
var p = 1;
console.log(name.concat(p));  // egonDSB1*(js是弱型別, 內部會自動轉換成相同的資料型別做操作)

// 總結
/*
.length  長度
.trim(), .trimLeft(), .trimRight() 只能移除空格沒有引數
.substring(start, end), .slice(start, end) slice支持負數
.concat(val, ...), +
.indexOf(substring, start), .charAt(substring)
.toUpperCase(), toLowerCase()
.split(delimiter, limit) 第二個引數指定切分的個數, 不是次數
*/

4. 數值和字串轉換

數值轉字串:

2種轉換方式: 隱式轉換, 呼叫.toString()方法

• 隱式轉換#

  • 第一步: var num = 123;
  • 轉換成字串: var str = 123 + "abc";

• 呼叫.toString()方法

  • 第一步: var num = 123;
  • 轉換成字串: var str = num.toString();

字串轉數值:

呼叫函式Number()方法

• 字串中不是全是數值型別的情況下:

  報錯, alert列印出現NaN: Not a number, 型別列印為number

  • 第一步: var str = 'abc';
  • 轉換成數值: var num = Number(str);

• 字串中全是數字型別的情況:

  正確轉換

  • 第一步: var str = '123.123';
  • 轉換成數值: var num = Number(str);

4. 布林值(Boolean)

"""
1.在python中布林值是首字母大寫的
	True
	False
2.但是在js中布林值是全小寫的
	true
	false
# 布林值是false的有哪些
	空字串、0、null、undefined、NaN
"""
Copyconsole.log(Boolean(0));         // false
console.log(Boolean(false));     // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false

null和undefined:

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

null表示變數的值是空(null可以手動清空一個變數的值，使得該變數變為object型別，值為null)，undefined則表示只宣告了變數，但還沒有賦值，

還不明白，上圖吧！

六. 運算子

1. 算術運算子

/*
++表示自增1 類似于python中的 +=1
加號在前先加后賦值 加號在后先賦值后加
*/
var x = 10;
var res = x++;
console.log(res);  // 10
var res1 = ++x;
console.log(res1); // 12

2. 比較運算子

/*
==, != 弱等于  內部自動轉換成相同的資料型別比較了
===, !== 強等于  內部不做型別轉換
*/
console.log(1 == '1');   // true
console.log(1 === '1');  // false
console.log(1 != '1');   // false
console.log(1 !== '1');  // true

3. 邏輯運算子

/*
python中 and or not
js中      && ||  !
注意: 比較運算子回傳的結果是布林值, 邏輯運算回傳的結果是短路運算以后的結果.
短路運算舉例:
    0 && 1   回傳結果是0. 也就是說0的布林值為false, 與運算只要有一個結果是false那么結果就是false, 所以計算到0就不會往后計算了.
*/
console.log(5 && '5');   // '5'
console.log(0 || 1);     // 1
console.log(!5 && '5');  // false

4. 賦值運算子

• 加法賦值運算子: +=
• 減法賦值運算子: -=
• 乘法賦值運算子: *=
• 除法賦值運算子: /=
• 取余賦值運算子: %=

七. 物件(Object): 陣列

1. 陣列物件的常用方法:

// 陣列(類似于python里面的串列)	[]
var array1 = [222, 333, 444, 555];
console.log(typeof array1);  // object

console.log(array1[1]);   // 333
console.log(array1[-1]);  // undefined(不支持負數索引)

console.log(array1.push(666));  // 5
console.log(array1);  // [222, 333, 444, 555, 666]

console.log(array1.pop());  // 666
console.log(array1);  //  [222, 333, 444, 555]

console.log(array1.unshift(111));  // 5
console.log(array1);  // [111, 222, 333, 444, 555]

console.log(array1.shift(111));  // 111
console.log(array1);  // [222, 333, 444, 555]

console.log(array1.slice(0, -1));  // [222, 333, 444]
console.log(array1.slice(0, array1.length));  // [222, 333, 444, 555] (如果通過切片的方式復制一門陣列物件, 結束位置指定-1是不行的, 這也只能取到陣列的倒數第二個值, 因此我們要用.length屬性)

console.log(array1.reverse());  // [555, 444, 333, 222]

console.log(array1.join('$'));  // 555$444$333$222

console.log(array1.concat(['aaa', 'bbb']));  // [555, 444, 333, 222, "aaa", "bbb"]
console.log(array1);  // [555, 444, 333, 222]

2. forEach, map, seqlice

// forEach: forEach(function(currentValue, index, arr), thisValue)
// 1. 一個引數就是陣列里面每一個元素物件
var array2 = [111, 222, 333, 444, 555];
array2.forEach(function (value) {
    console.log(value);
}, array2);
// 執行結果:
/*
111
222
333
444
555
666
 */

// 2. 兩個引數就是元素 + 元素索引
array2.forEach(function (value, index) {
    console.log(value, index);
}, array2);
// 執行結果:
/*
111 0
222 1
333 2
444 3
555 4
666 5
 */

// 3. 元素 + 元素索引 + 元素的資料來源
array2.forEach(function (value, index, arr, xxx) {
    console.log(value, index, arr, xxx); // 最多三個. 基于js這種弱型別語言, 如果沒有xxx傳入也不會報錯. 會拋出undefined
    // return [value, index, arr, xxx]; // 最多三個. 基于js這種弱型別語言, 如果沒有xxx傳入也不會報錯. 會拋出undefined
}, array2);
// 執行結果:
/*
111 0 (6) [111, 222, 333, 444, 555, 666] undefined
222 1 (6) [111, 222, 333, 444, 555, 666] undefined
333 2 (6) [111, 222, 333, 444, 555, 666] undefined
444 3 (6) [111, 222, 333, 444, 555, 666] undefined
555 4 (6) [111, 222, 333, 444, 555, 666] undefined
666 5 (6) [111, 222, 333, 444, 555, 666] undefined
 */

// map: map(function(currentValue,index,arr), thisValue)
var array4 = [11, 22, 33, 44, 55];
array4.map(function (value) {
    console.log(value);
}, array4);
// 執行結果:
/*
11
22
33
44
55
66
 */

var res1 = array4.map(function (value, index) {
    return [value * 2, index]; // 如果相回傳多個值, 必須被包含, 如果不包含回傳的是逗號前的第一個值. 和python中只要逗號隔開回傳元組不一樣.
}, array4);
console.log(res1);  // [11, 22, 33, 44, 55]
// 執行結果:
/*
 [Array(2), Array(2), Array(2), Array(2), Array(2)]
0: (2) [22, 0]
1: (2) [44, 1]
2: (2) [66, 2]
3: (2) [88, 3]
4: (2) [110, 4]
length: 5
 */

var res2 = array4.map(function (value, index, arr) {
    return [value * 2, index*2, arr];
}, array4);
console.log(res2);  // [22, 44, 66, 88, 110]
// 執行結果:
/*
[Array(3), Array(3), Array(3), Array(3), Array(3)]
0: (3) [22, 0, Array(5)]
1: (3) [44, 2, Array(5)]
2: (3) [66, 4, Array(5)]
3: (3) [88, 6, Array(5)]
4: (3) [110, 8, Array(5)]
length: 5
 */

// splice: splice(index,howmany,item1,.....,itemX)
var array3 = [111, 222, 333, 444, 555];
array3.splice(0, 3);  // 兩個引數 第一個是起始索引位置 第二個是洗掉的個數
console.log(array3);  // [444, 555]

array3.splice(0, 1, 666);  // 第三個引數 要添加到陣列的新元素
console.log(array3);  // [666, 555]
array3.splice(0, 1, ['aaa', 'bbb']);
console.log(array3);
/*
[Array(2), 555]
0: (2) ["aaa", "bbb"]
1: 555
length: 2
*/

3. JS中Map和ForEach的區別

// 
/*
1. 能用forEach()做到的，map()同樣可以，反過來也是如此，
2. map()會分配記憶體空間存盤新陣列并回傳，forEach()方法不會回傳執行結果，而是undefined. 也就是說，forEach()會修改原來的陣列，而map()方法會得到一個新的陣列并回傳，
*/
var array5 = [11, 22, 33, 44, 55];
var aaa = array5.forEach(function (value) {
    return value;
});
var bbb = array5.map(function (value) {
    return value*2;
});
console.log(aaa);  //  undefined
console.log(bbb);  //  [11, 22, 33, 44, 55]

4. 總結:

Copy// 
/*
.length 長度
array[index] 索引取值(索引不能為負數)
.push(ele), .pop() 尾部追加/洗掉
.unshift(ele), .shift() 頭部追加/洗掉
.slice(start, end) 切片(想實作復制end通過.length獲取陣列的長度, -1只能取到倒數第二個值)
.reverse() 反轉
.join(seq) 拼接
.concat(val, ...) 連接陣列(+號只能連接字串)
.sort() 排序
.foreach(function(value,index,arr){}, thisValue) function是一個回呼函式callback
.map(function(value,index,arr){}, thisValue)
.splice(index, removeCount, item1, ... , itemX)
*/

八. 流程控制

1. if判斷

/*
注意: 在js中代碼是沒有縮進的, js中的`(條件){代碼塊}`替代了縮進, 以一下的縮進只是為了可讀性, 而python是有縮進這么一說的.
*/
var age = 28;
// if
if (age>18){
  console.log('來啊 來啊')
}

// if-else
if (age>18){
  console.log('來啊 來啊')
}else{
  console.log('沒錢 滾蛋')
}

// if-else if-else
if (age > 25){
    console.log('你好我們不合適!');
} else if (age < 18) {
    console.log('培養一下');
} else {
    console.log('我們在一起吧!');
}

2. switch語法: 提前列舉好可能出現的條件和解決方式

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

var num = 2;
switch (num) {
    case 0:  // case 條件: 條件=num成立執行
        console.log('吃');
        break; // 不加break 匹配到一個之后 就一直往下執行(簡稱: 穿透執行)
    case 1:
        console.log('喝');
        break;
    case 2:
        console.log('玩');  // 執行結果: 玩
        break;
    case 3:
        console.log('樂');
        break;
    default:
        console.log('條件都沒有匹配上 默認走的流程');
}

3. for回圈

// 1. for回圈控制執行次數: 列印0-9數字
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 2. for回圈遍歷取值
for (let i in ['aaa', 'bbb', 'ccc']) {
    console.log(i);
}


// 3. for回圈死回圈之break和cointinue陳述句+死回圈
let i = 0;
for (;;) {  // 死回圈
    console.log('哈哈哈');
    if (i === 10000) {
        break;  // break跳出當前回圈
    }
    // i ++;
    i += 1;
}

let sum = 0;   // 計算1~10數值, 并排除5這個數
for (let j = 1; j < 11; j++) {
    if (j === 10) {
        continue;  // continue跳出當前回圈, 下次回圈繼續進行
    }
    sum += j;
    j += 1;
}
console.log(sum);   // 25

4. while回圈: 列印1~100

var i = 1;
while (i < 101) {
    console.log(i);
    i += 1;
}

5. 三元運算式

/*
python中三元運算子 res = 條件成立回傳的結果 if 條件 else 條件不成立回傳的結果
JS中三元運算  res = 條件 ? 條件成立回傳的結果:條件不成立回傳的結果
*/
var res = 1 > 2 ? 2:8;
console.log(res); // 8
var res1 = 1 > 2 ? 2:(3 < !6 ? 1:0); // 三元運算子不要寫的過于復雜
console.log(res1); // 0

6. 總結

/*
if (條件) {子代碼塊}
if (條件) {子代碼塊} else (條件) {子代碼塊}
if (條件) {子代碼塊} else if (條件) {子代碼塊} else (條件) {子代碼塊}

switch (引數) {
    case 條件: // 引數=條件則成立就執行以下代碼塊
        子代碼塊
        break;
    ...
    default:
        以上條件都沒成立則指定這里的子代碼塊
}

for回圈控制執行次數+遍歷取值
    for (陳述句 1; 陳述句 2; 陳述句 3) {  // 回圈控制執行次數
         要執行的代碼塊
    }
    陳述句 1 在回圈（代碼塊）開始之前執行，
    陳述句 2 定義運行回圈（代碼塊）的條件，
    陳述句 3 會在回圈（代碼塊）每次被執行后執行，

    for (let i in 可遍歷物件) {
        要執行的代碼塊
    }

while (條件) {
    子代碼塊
}

res = 條件 ? 條件成立回傳的結果:條件不成立回傳的結果
*/

九. 函式

1. 函式定義

/*
在python定義函式需要用到關鍵字def
在js中定義函式需要用到關鍵字function

語法: function 函式名(形參1,形參2,形參3...){函式體代碼}
*/
// 無參函式
function func1() {
    console.log('hello world');
}
func1();  // hello world

// 有參函式
function func2(a, b) {
    console.log(a, b);
}
func2(1, 2); // 1 2
func2(1, 2, 3, 4, 5, 6, 7, 8, 9);  // 1 2(多了沒關系 只要對應的資料)
func2(1); // 1 undefined(少了也沒關系, 未定義的會用undefined填補)

2. 函式中的arguments引數: 能夠獲取到函式接受到的所有的引數

function func3(a, b, c) {
    console.log(arguments);
}
func3(1, 2, 3);
// 執行結果:
/*
Arguments(3) [1, 2, 3, callee: ?, Symbol(Symbol.iterator): ?]
0: 1
1: 2
2: 3
*/

// 使用arguments判斷傳參的確切性
function func4(a, b) {
    if (arguments.length < 2) {
        console.log('引數傳少了!');
    } else if (arguments.length > 2) {
        console.log('引數傳多了!');
    } else {
        console.log('正常執行');
    }
}
func4(1, 2, 3);  // 引數傳多了!
func4(1);        // 引數傳少了!
func4(1, 2);     // 正常執行

3. 函式的回傳值: 使用的也是等同于python中的關鍵字return

function func5() {      // 回傳一個值
    return 666
}
console.log(func5());  // 666

function func6(a, b) {  // 回傳多個值, 多個值必須被包含不然就會回傳逗號前面的那一個值.
    return a, b
}
console.log(func6(1, 2));  // 2

function func7(a, b) {
    return [a, b]
}
console.log(func7(1, 2));  // [1, 2]

4. 匿名函式: 就是沒有名字

/*function () {
   console.log('哈哈哈');
}*/
let res = function() {  // 函式還可以被賦值, 對于匿名函式這也賦值雖然沒有什么意義, 但是為了然函式能正常執行, 還是賦值一個變數吧~
   console.log('哈哈哈');
};
res();  // 哈哈哈

5. 箭頭函式: 主要用來處理簡單的業務邏輯 類似于python中的匿名函式

ES6中允許使用“箭頭”（=>）定義函式

// 如果箭頭函式不需要引數或需要多個引數，就是用圓括號代表引數部分
var f = () => 5;

// 等同于
var f = function(){return 5};

let func8 = v => v*2;  // 箭頭左邊的是形參 右邊的是回傳值
console.log(func8(2)); // 4

let func9 = function (v) {  // 上面與下面作用等同
    return v * 2;
};
console.log(func9(2)); // 4`

6. 總結#

/*
函式定義: 無參, 有參
函式呼叫: 無參直接呼叫. 有參呼叫傳值多余部分不要, 少的部分用undefined提補.
arguments: 可以接受所有引數, 可以通過arguments.length獲取傳入的引數個數.
函式回傳值: 單個回傳值.  多個回傳值需被包含, 如果不包含只回傳逗號前面一個值.
匿名函式: 匿名函式可被賦值.
箭頭函式: 
    無參: let a = () => 回傳值; 
    有參: let a = 形參 => 回傳值; 
*/

十. 函式的全域變數和區域變數

1. 介紹

區域變數：
    在JavaScript函式內部宣告的變數（使用 var）是區域變數，所以只能在函式內部訪問它（該變數的作用域是函式內部），只要函式運行完畢，本地變數就會被洗掉，

全域變數：
    在函式外宣告的變數是全域變數，網頁上的所有腳本和函式都能訪問它，

變數生存周期：
    JavaScript變數的生命期從它們被宣告的時間開始，
    區域變數會在函式運行以后被洗掉，
    全域變數會在頁面關閉后被洗掉，

作用域
    首先在函式內部查找變數，找不到則到外層函式查找，逐步找到最外層，與python作用域關系查找一模一樣

2. 示例

跟python查找變數的順序一致

• 示例1

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  // 輸出結果是？  ShenZhen

// ES6推薦使用let
let city = "BeiJing";
function f() {
  let city = "ShangHai";
  function inner(){
    let city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  // 輸出結果是？  ShenZhen

• 示例2

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 列印結果是？ BeiJing

// ES6推薦使用let
let city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  let city = "ShangHai";
  return Bar;
}
let ret = f();
ret();  // 列印結果是？ BeiJing

• 示例3: 閉包函式

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   // ShangHai

// ES6推薦使用let
let city = "BeiJing";
function f(){
    let city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
let ret = f();
ret();   // ShangHai

十一. 內置物件和方法

JavaScript中的所有事物都是物件：字串、數字、陣列、日期，等等，在JavaScript中，物件是擁有屬性和方法的資料，

我們在學習基本資料型別的時候已經帶大家了解了，JavaScript中的Number物件、String物件、Array物件等，

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

1. 自定義物件

JavaScript的物件（Object）本質上是鍵值對的集合（Hash結構），但是只能用字串作為鍵，

// 你可以看成是我們python中的字典 但是js中的自定義物件要比python里面的字典操作起來更加的方便
// 創建自定義物件 {}
// 1. 第一種創建自定義物件的方式
let d1 = {'name': 'jason', 'age': 18};
console.log(typeof d1);   // object

console.log(d1['name']);  // jason(獲取物件方式一)
console.log(d1.name);     // jason(獲取物件方式二)

for (let i in d1) {
    console.log(i, d1[i]);  // 支持for回圈 暴露給外界可以直接獲取的也是鍵
}

// 2. 第二種創建自定義物件的方式:  需要使用關鍵字 new
let d2 = new Object();   // 創建的是空物件{}
d2.name = 'jason';   // 物件修改(增)方式一
d2['age'] = 18;      // 物件修改(增)方式二
console.log(d2);     // {name: "jason", age: 18}

// 總結:
/*
定義物件的2種方式: {}, new Object()
訪問物件的2種方式: 物件.屬性名, 物件['屬性名']
修改物件的2種方式: 物件.屬性名=屬性值, 物件['屬性名']=屬性值
*/

ES6中提供了Map資料結構，它類似于物件，也是鍵值對的集合，但是“鍵”的范圍不限于字串，各種型別的值（包括物件）都可以當做鍵，*

*也就是說，Object結構提供了“字串–值”的對應，Map結構提供了“值–值”的對應，是一種更完善的Hash結構實作，

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)     // true
m.delete(o)  // true
m.has(o)     // false

2. Date物件

// 自動獲取當前時間
let d1 = new Date();
console.log(d1);  // Sun May 17 2020 00:27:39 GMT+0800 (中國標準時間)
console.log(d1.toLocaleString());  // 2020/5/17 上午12:28:34

// 自己手動輸入時間
let d2 = new Date('2020/11/11 11:11:11');
console.log(d2);  // Wed Nov 11 2020 11:11:11 GMT+0800 (中國標準時間)
console.log(d2.toLocaleString());  // 2020/11/11 上午11:11:11

let d3 = new Date(2020,11,11,11,11,11);
console.log(d3);  // Fri Dec 11 2020 11:11:11 GMT+0800 (中國標準時間)
console.log(d3.toLocaleString());  // 2020/12/11 上午11:11:11(注意: 以上使用逗號隔開方式輸入的時間的月份是從0開始 0-11月)

// 時間物件具體方法
let d4 = new Date('2020/5/17 0:28:34');
console.log(d4.getFullYear());  // 2020 (獲取完整的年份)
console.log(d4.getMonth());     // 4 (獲取月份0~11, 0代表1月, 11代表12月)
console.log(d4.getDate());      // 17 (獲取日)
console.log(d4.getDay());       // 0 (獲取星期0~6. 0代表星期日, 6代表星期六)
console.log(d4.getHours());       // 0 (小時. 如果時間小于10, 則顯示個位數)
console.log(d4.getMinutes());   // 37 (獲取分鐘)
console.log(d4.getSeconds());   // 25 (獲取秒)
console.log(d4.getMilliseconds());  // 588 (獲取毫秒)
console.log(d4.getTime());      // 1589647045588 (時間戳)

// 總結:
/*
時間的2種顯示格式:
    1. 默認: Sun May 17 2020 00:27:39 GMT+0800 (中國標準時間)
    2. 使用.toLocaleString()方法: 2020/5/17 上午12:28:34

時間的3種創建方式:
    1. 自動生成當前時間: new Date()
    2. 手動指定方式一: new Date('2020/5/17 12:28:34')
    3. 手動指定方式二: new Date(2020,5,17,12,28,34) 這種時間的指定當使用.toLocaleString()方法時月份范圍是0~11

時間物件的具體方法:
    獲取年完成年份    .getFullYear()
    獲取月份(0~11)   .getMonth()
    獲取日           .getDate()
    獲取星期(0~6)    .getDay()
    獲取小時         .getHours()
    獲取分鐘         .getMinutes()
    獲取秒鐘         .getSeconds()
    獲取毫秒         .getMilliSeconds()
    獲取時間戳        .getTime()
*/

**練習：**撰寫代碼，將當前日期按“2017-12-27 11:11 星期三”格式輸出，

function myDateFor() {
    let days = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
    let nowTime = new Date();
    let fullYear = nowTime.getFullYear();
    let month = nowTime.getMonth();
    let date = nowTime.getDate();
    let hours = nowTime.getHours();
    let minutes = nowTime.getMinutes();
    minutes = minutes < 10 ? '0'+minutes:minutes;
    let day = nowTime.getDay();
    day = days[day];
    month += 1;


    console.log(`${fullYear}-${month}-${date} ${hours}:${minutes} ${day}`);
}
myDateFor();

詳細Date物件方法：點我

3. JSON物件

let obj = [11, 11.11, NaN, 'aaa', false, true, undefined, {}];
let serialize_obj = JSON.stringify(obj);
console.log(serialize_obj); // "[11,11.11,null,"aaa",false,true,null,{}] "  (序列化)

let deserialize_obj = JSON.parse(serialize_obj);
console.log(deserialize_obj); // [11, 11.11, null, "aaa", false, true, null, {…}]  (反序列化)

// 總結:
/*
在python中序列化反序列化
    dumps 		序列化
    loads		反序列化

在js中也有序列化反序列化
    JSON.stringify()	dumps
    JSON.parse()		loads
*/

4. RegExp物件

/*
在python中如果需要使用正則 需要借助于re模塊
在js中需要你創建正則物件
*/
let sss = 'egondsb egondsb 1dsb dsb 111';
// 第一種開啟正則方式: new RegExp('正則規則')
/*
.test():  接受一個字串引數，在模式與該引數匹配的情況下回傳true，否則回傳false
.match(): 回傳一個陣列，陣列中包含了匹配值，匹配值在源字串首次出現的索引值，以及源字串；
*/
let reg1 = new RegExp('[a-zA-Z][a-zA-Z0-9]{5,11}'); // 匹配字母,  加上5~11個字母或者數字
console.log(reg1.test(sss));   // true (正則校驗資料)
console.log(sss.match(reg1));  // ["egondsb", index: 0, input: "egondsb egondsb 1dsb dsb 111", groups: undefined]

// 第二種開啟正則方式: /正則規則/
let reg2 = /[a-zA-Z][a-zA-Z0-9]{5,11}/g;
console.log(reg2.test(sss));   //  true
console.log(sss.match(reg2));  // ["egondsb", "egondsb"]

// 缺陷一: 全域匹配模式的lastIndex與.test()效驗資料(全域匹配時有一個lastIndex屬性)
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g;
console.log(reg3.test('egondsb'));  // true
console.log(reg3.test('egondsb'));  // false
console.log(reg3.test('egondsb'));  // true
console.log(reg3.test('egondsb'));  // false

console.log(reg3.lastIndex);  // 0
console.log(reg3.test('egondsb'));  // true
console.log(reg3.lastIndex);  // 7
console.log(reg3.test('egondsb'));  // false
console.log(reg3.lastIndex);  // 0

// 缺陷二: .test()效驗時不傳參 默認傳的是undefined. 也能回傳匹配成功true的信號.
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/;
console.log(reg4.test());  // true
console.log(reg4.test());  // true

let reg5 = /undefined/;
console.log(reg5.test('jason'));  // false
console.log(reg5.test());  // true
console.log(reg5.test(undefined));  // true


// 總結
/*
正則的2種開啟方式: new RegExp('正則規則'), /正則規則/[g]
正則的效驗: reg_obj.text(string)
正則的取值: string.match(reg_obj)  如果正則物件不是全域模式只能獲取匹配到的第一個值
正則效驗模式的2大缺陷:
    1. 全域模式下的lastIndex造成效驗結果2極化; 匹配成功指標狀態被保留到下一次, 導致下一次無法重新開始, 進而導致效驗結果一會兒為false, 一會兒為true
    2. 效驗模式不傳參默認會傳undefined, 導致在正常匹配中無undefined匹配規則情況下, 沒有匹配內容, 默認輸出結果為true.
*/

擴展閱讀

5. 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)      回傳角的正切，

6. window物件

<script type="text/javascript">
	// 在ECMAScript中頂層物件就是window物件
		// 定義變數的時候
		var a = 123;
		console.log(a);
		console.log(window.a);
		// 定義函式的時候
		function fun(){
			console.log(a);
			console.log(window.a);
		}
		fun();
		window.fun();
</script>