JavaScript基礎

1- 初識JavaScript

1.1 JavaScript 是什么

JavaScript是一種運行在客戶端的腳本語言，現基于Node.js技術進行服務端編程；

所謂腳本（Script）語言：是運行時不需要編譯，運行程序中由 js 解釋器( js 引擎）逐行來進行解釋并執行，讀到一行，執行一行；
目的是實作邏輯業務與頁面控制，相當于動作；

所謂邏輯性：就是實作這個要求的思路先怎么做后怎么做；

1.2 JavaScript的作用

表單動態校驗（密碼強度檢測）（ JS 產生最初的目的）
網頁特效
服務端開發(Node.js)
桌面程式(Electron)
App(Cordova)
控制硬體-物聯網(Ruff)
游戲開發(cocos2d-js)

1.3 HTML/CSS/JS 的關系

HTML 和 CSS 屬于描述類語言；JS 屬于編程類語言；

1.4 瀏覽器執行 JS 簡介

瀏覽器分成兩部分：渲染引擎和 JS 引擎

渲染引擎：用來決議HTML和CSS，俗稱內核，比如 chrome瀏覽器的 blink，老版webkit等；
JS 引擎：也稱 JS 解釋器，用來讀取網頁中的 JavaScript代碼，處理后運行，如chrome的V8；

瀏覽器本身并不會執行JS代碼，而是通過內置 JavaScript 引擎(解釋器) 來執行 JS 代碼，JS 引擎執行代碼時逐行解釋每一句原始碼（轉換為機器語言），然后由計算機去執行，所以 JavaScript 語言歸為腳本語言，會逐行解釋執行，

1.5 JS 的組成

ECMAScript

ECMAScript：規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準，

更多參看MDN: MDN手冊
DOM——檔案物件模型

檔案物件模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色等）——元素物件；
BOM——瀏覽器物件模型

瀏覽器物件模型(Browser Object Model，簡稱BOM) 是指瀏覽器物件模型，它提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等——瀏覽器視窗；

1.6 JS 書寫位置

JS 有3種書寫位置，分別為行內、內嵌和外部，

1.行內式

<input type="button" value="https://www.cnblogs.com/xinxinzi/archive/2021/02/22/點我" onclick="alert('Hello World')" />

可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），如：onclick
注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
可讀性差，在html中撰寫JS大量代碼時，不方便閱讀；

2.內嵌式

<script>
    alert('Hello  World~!');
</script>

可以將多行JS代碼寫到 script 標簽中
內嵌 JS 是學習時常用的方式

3.外部JS檔案

<script src="https://www.cnblogs.com/xinxinzi/archive/2021/02/22/my.js"></script>

利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便檔案級別的復用
參考外部 JS檔案的 script 標簽中間不可以寫代碼
適合于JS 代碼量比較大的情況

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- 2.內嵌式的js -->
        <script>
            alert('這是我的第一個js');
        </script>
?
        // 3.外部js的寫法，開始和結束標簽間不能寫字
        <script src="https://www.cnblogs.com/xinxinzi/archive/2021/02/22/script.js"> </script>
    </head>
?
    <body>
        <!-- 1.行內式的js 直接寫到元素內部，以on開頭的屬性 外雙內單引號 -->
        <input type="button" value="https://www.cnblogs.com/xinxinzi/archive/2021/02/22/提交" onclick="alert('提交成功')">
    </body>

2 - JavaScript注釋

JS中的注釋主要有兩種，分別是單行注釋和多行注釋，

1. 單行注釋
// 用來注釋單行文字（  快捷鍵   ctrl  +  /   ）
?
2. 多行注釋
/* */  用來注釋多行文字（ 默認快捷鍵  alt +  shift  + a ）

更改快捷鍵：vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認

3 - JavaScript輸入輸出陳述句

為了方便資訊的輸入輸出，JS中提供了一些輸入輸出陳述句，其常用的陳述句如下：

方法	說明	面向物件
alert(msg)	瀏覽器彈出警示框	用戶
console.log(msg)	瀏覽器控制臺列印輸出資訊	程式員
prompt(info)	瀏覽器彈出輸入框，用戶可以輸入	用戶

  <script>
       // 1.彈出輸入框 輸入內容后默認彈出輸入的內容
        prompt('請輸入你的年齡');
       // 2.alert 彈出警示框 輸出的 展示給用戶的
        alert('這是我的第一個js');
      // 3.console 控制臺輸出列印資訊 給程式員測驗用的 瀏覽器f12控制臺左手第二個
        console.log('這是程式員能看到的');
  </script>

程式設計基礎

1 - 變數概述

1.1 什么是變數

為什么需要變數？有些資料需要保存，所以需要變數；
變數是什么？變數相當一個容器，用來存盤資料；
本質？變數的本質是程式在記憶體中的一塊存盤空間；
通過變數名找到變數，訪問記憶體；
變數的命名規范：見名知意-駝峰命名法；

1.2 - 變數的使用

變數的宣告
變數的賦值
變數的初始化

1.宣告變數

var age; // 宣告一個名稱為 age 的變數；本質是 在記憶體中申請一塊存盤空間

var 是一個 JS關鍵字，用來宣告變數( variable 變數的意思 )，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，不需要程式員管；
age 是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間；

2.賦值

age = 10; // 給 age 這個變數賦值為 10

= 表示賦值，用來把右邊的值賦給左邊的變數空間
變數值是程式員保存到變數空間里的值

3.變數的初始化

宣告一個變數的同時并賦值，我們稱之為變數的初始化，

var age  = 18;  // 宣告變數同時賦值為 18

案例：

彈出一個輸入框，提示用戶輸入姓名；
彈出一個對話框，輸入用戶剛才輸入的姓名；

    <script>
        // 1.用戶輸入姓名 存盤到一個myname的變數里 變數是存盤容器
        var myname = prompt('請輸入姓名');
        // 2.輸出這個用戶名
        alert(myname);
        // alert('myname');加了單引號就顯示不出變數名了
    </script>

1.3 變數語法擴展

1.更新變數

變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，

var age = 18;
age = 81;   // 最后的結果就是81 因為18 被覆寫掉了

2.同時宣告多個變數

同時宣告多個變數時，只需要寫一個 var，多個變數名之間使用英文逗號隔開，

var age = 10,  name = 'zs', sex = 2;

3.宣告變數特殊情況

情況	說明	結果
var age ; console.log (age);	只宣告不賦值	undefined
console.log(age)	不宣告不賦值直接使用	報錯
age = 10; console.log (age);	不宣告只賦值	10 可運行

案例：變數的語法擴展

    <script>
        // 1.更新變數 變數被重新賦值后，以最新一次為準
        var myname = '卡卡西';
        console.log(myname);
        myname = '火影';
        console.log(myname);//最新一次顯示 火影 但之前的因為也輸出了，也會有歷史顯示

        // 2.宣告多個變數，可簡寫 只需寫一個var，變數名間逗號隔開，分號表結束
        // var age = 18;
        // var address = '通遼';
        // var sex = 'nv';
        var age = 18,
            address = '通遼',
                sex = 'nv';

        // 3. 宣告變數的特殊情況
        // 3.1 只宣告 不賦值 結果是？undefined
        var sex;
        console.log(sex); // undefined
        // 3.2 不宣告 不賦值 直接使用某個變數會報錯
        console.log('tel');
        // 3.3 不宣告直接賦值 js 可以使用
        qq = 110;
        console.log(qq); // 110
    </script>

案例：交換兩個變數的值

js 是編程語言有很強的邏輯性在里面：實作這個要求的思路先怎么做后怎么做

// 思路：引入一個臨時變數temp
    <script>
        var temp;
        var apple1 = '青蘋果';
        var apple2 = '紅蘋果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>

1.4 變數命名規范

由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
嚴格區分大小寫，var app; 和 var App; 是兩個變數
不能以數字開頭， 18age 是錯誤的
不能是關鍵字、保留字，例如：var、for、while
變數名必須有意義， MMD BBD nl → age
遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，

2 - 資料型別

2.1 資料型別簡介

1.為什么需要資料型別？

在計算機中，不同的資料所需占用的存盤空間是不同的，為了便于把資料分成記憶體所需的大小，充分利用存盤空間，于是定義了不同的資料型別，

2.變數的資料型別？

變數的資料型別決定了以什么樣的型別存盤到計算機的記憶體中，JavaScript 是一種弱型別或者說動態語言，這意味著不用提前宣告變數的型別；在程式運行程序中，變數的資料型別是由 JS引擎根據 = 右邊變數值的資料型別來判斷的，

var age = 10;// 這是一個數字型
var areYouOk = '是的';// 這是一個字串

JavaScript 擁有動態型別，同時也意味著相同的變數可用作不同的型別：

var x = 6;// x 為數字
var x = "Bill";// x 為字串

3.資料型別的分類

簡單資料型別（Number,String,Boolean,Undefined,Null）
復雜資料型別（object)

2.2 簡單資料型別

簡單資料型別（基本資料型別）

簡單資料型別	說明	默認值
Number	數字型，包含整形和浮點型，如21和0.21	0
String	字串型，加了引號的都是字串	“ ”、‘ ’
Boolean	布林值型，回傳值true、false，等價于1和0	false
Undefined	var a；宣告變數確沒給值，此時a = undefined	undefined
Null	var a = null；宣告了變數a為空值	null

1、數字型 Number

  <script>
   
        // 1.存盤整形和浮點型
        var age = 21; // 整數
        var Age = 21.3747; // 小數

          // 2.存盤各進制數值
        var num1 = 010; // 八進制
        var num2 = 0xff; // 十六進制

        // 3.數字型范圍 三個特殊值
        alert(Number.MAX_VALUE); // 最大值
        alert(Number.MIN_VALUE); // 最小值
        alert(Infinity); // 無窮大
        alert(-Infinity); // 無窮小
        alert(NaN); // not a number，代表一個非數值

        console.log('Number.MAX_VALUE * 2'); // Infinity 無窮大
        console.log('-Number.MAX_VALUE * 2'); // -Infinity 無窮小

        console.log('pink老師' - 100);// NaN 非數值

        // 4.isNaN() 判斷 非數字型別 并且回傳一個值 
        // 是數字回傳 false 不是回傳true
        console.log(isNaN(12)); // false
        console.log(isNaN(userName)); // true 
 </script>

2、字串型 String

（1）字串型是引號內的任意文本，內部換行需要用轉義字符如 \ n

    <script>
        // 嵌套原則：外雙內單 或 外單內雙；
        var str = '我是一個"高富帥"的程式員';
        console.log(str);

        // 字串轉義字符  都是用 \ 開頭 但是這些轉義字符寫到引號里面
        var str1 = "我是一個'高富帥'的\n程式員";
        console.log(str1);
    </script>

（2）字串轉義符

轉義符	解釋說明
\n	換行符，n 是 newline 的意思
\ \	斜杠 \
'	' 單引號
"	”雙引號
\t	tab 縮進
\b	空格，b 是 blank 的意思

（3）字串拼接：

多個字串之間可以使用 + 進行拼接，字串 + 任何型別 = 新字串型別
+ 號總結口訣：數值相加，字符相連

    <script>
        // 1. 檢測獲取字串的長度 length 
        var str = 'my name is andy';
        console.log(str.length); // 15

        // 2. 字串的拼接 + 不同型別也可拼接 但最后是字串型 
        // 數字型是結果 即：數值相加、字符相連
        console.log('沙漠' + '駱駝'); // 字串的 沙漠駱駝
        console.log('pink老師' + 18); // 'pink老師18'
        console.log('pink' + true); // pinktrue
        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'
    </script>

（4）字串拼接加強

經常會將字串和變數來拼接，變數可以很方便地修改里面的值
變數是不能添加引號的，因為加引號的變數會變成字串
如果變數兩側都有字串拼接，口訣“引引加加 ”，刪掉數字，變數寫加中間

    <script>
        console.log('pink老師 18 歲');
        //先寫此句，然后洗掉18 引引加加 中間加變數
        
        var age = 18;
        console.log('pink老師' + age + '歲');// 引引加加
    </script>

案例：互動編程的三個基本要素

用戶輸入：彈出一個輸入框prompt，讓用戶輸入年齡；
程式內部處理：把用戶輸入的值作為變數保存起來，把剛才輸入的年齡與所要輸出的字串拼接；
輸出結果：使用alert陳述句彈出警示框；

案例：顯示年齡案例

    <script>
        var age = prompt('請輸入你的年齡');
        var str = '你今年已經' + age + '歲了';
        alert(str);
    </script>

3、布爾型Boolean

布爾型別有兩個值：true 和 false ，其中 true 表示真，而 false 表示假；
布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0；

console.log(true + 1);  // 2
console.log(false + 1); // 1

4、Undefined 和 Null

一個宣告后沒有被賦值的變數會有一個默認值undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable);           // 只宣告未賦值 輸出 undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);    // undefined 和數字相加 輸出 NaN 
console.log(true + variable); //  NaN

一個宣告變數給 null 值，里面存的值為空（學習物件時，我們繼續研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

2.3 獲取變數資料型別

1.typeof 獲取檢測變數的資料型別

    <script>
        var num = 18;
        console.log(typeof num); // number
        var str = 'pink';
        console.log(typeof str); // string
        var flag = true;
        console.log(typeof flag); // boolean
        var vari = undefined;
        console.log(typeof vari); // undefined
        var timer = null;
        console.log(typeof timer); // object

        // prompt 取過來的值是 字符型的
        var age = prompt('請輸入您的年齡');
        console.log(age);
        console.log(typeof age); // string
    </script>

也可以通過控制臺的顏色判斷資料型別；黑色是字串；

2.字面量

字面量表示如何表達這個值，一眼看上去知道這個屬于什么型別的值，

    <script>
        console.log(18);// 數字字面量
        console.log('18');// 字串字面量
        console.log(true);// 布爾字面量
        console.log(undefined);
        console.log(null);
    </script>

2.4 資料型別轉換

什么是資料型別轉換？就是把一種資料型別的變數轉換成另一種資料型別，通常會實作3種方式的轉換：

轉換為字串型別
轉換為數字型
轉換為布爾型

1.轉換為字串

方式	說明	案例
加號拼接字串	和字串拼接的結果都是字串	var num = 1;alert(num + '我是字串')；也稱隱式轉換
toString( )	轉成字串	var num = 1;alert(num.toString( ));
String( )強制轉換	轉成字串	var num = 1;alert(String(num));

    <script>
        // 1. 把數字型轉換為字串型變數 .toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        // 2. 我們利用 String(變數)   
        console.log(String(num));
        // 3. 利用 + 拼接字串的方法實作轉換效果 隱式轉換
        console.log(num + '');
    </script>

2.轉換為數字型（重點）

方式	說明	案例
parseInt(string)函式	將string型別轉換成整數數值型	parseInt('78')
parseFloat(string)函式	將string型別轉換成浮點數值型	parseFloat('78.21')
Number()強制轉換函式	將string型別轉換成數值型	Number('12')
js隱式轉換（- * /）	利用算數運算隱式轉換為數值型	'12' - 0

    <script>
        var age = prompt('請輸入你的年齡');
        // 1. parseInt(變數) 可以把字符型的轉換成數字型 得到的是整數
        console.log(parseInt(age));
        console.log(parseInt('3.14')); // 整數 3
        console.log(parseInt('120px')); // 整數 120 單位px被去掉
        console.log(parseInt('rem120px')); // NaN 首字母檢測不是數字

        // 1. parseFloat(變數) 可以把字符型的轉換成浮點型 得到的是浮點數
        console.log(parseFloat('3.14')); // 3.14
        console.log(parseFloat('120px')); // 單位也會去掉

        // 3. Number(變數)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));

        // 4. 利用了算術運算 - * / 隱式轉換(不能 +)
        console.log('12' - 0); // 數字型 12，先把數字轉為數字型在-
        console.log('123' - '120'); // 3

        console.log('123' + '120'); // 123120 + 是字串拼接,
    </script>

案例：輸出年齡

思路：

彈出一個輸入框（prompt），讓用戶輸入出生年份（用戶輸入）
把用戶輸入的值用變數保存起來，用今年年份減去變數值，就是現在的年齡（程式內部處理）
彈出警示框（alert），把計算的結果輸出（輸出結果）

    <script>
        var year = prompt('請輸入你的出生年份');
        var age = 2020 - year;// year是字串 減法隱式轉換 成數字型
        alert('你今年已經 ' + age + ' 歲了');
    </script>

案例：簡單加法器

要求：計算兩個數的值，用戶輸入第一個值后，繼續彈出第二個輸入框并輸入第二個值，最后彈出視窗顯示兩次輸入值相加的結果，

    <script>  
        var num1 = prompt('請輸入第一個值：');
        var num2 = prompt('請輸入第二個值：');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('結果是:' + result);
    </script>

3.轉換為布爾型

代表空、否定的值會被轉換為 false ，如 ''、0、NaN、null、undefined ;
其余值都會被轉換為 true；

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

3 - 識別符號、關鍵字、保留字

3.1 識別符號

標識(zhi)符：就是指開發人員 為變數、屬性、函式、引數取的名字，
識別符號不能是關鍵字或保留字，

3.2 關鍵字

關鍵字：是指 JS本身已經使用了的字，不能再用它們充當變數名、方法名，

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等，

3.3 保留字

保留字：實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成為關鍵字，同樣不能使用它們當變數名或方法名，

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等，

注意：如果將保留字用作變數名或函式名，那么除非將來的瀏覽器實作了該保留字，否則很可能收不到任何錯誤訊息，當瀏覽器將其實作后，該單詞將被看做關鍵字，如此將出現關鍵字錯誤，

3.4 識別符號命名規范

變數、函式的命名必須要有意義
變數的名稱一般用名詞
函式的名稱一般用動詞
運算子（=）、括號、左右各留一個空格；

注釋后面打一個空格；

4 - 運算子（運算子）

4.1 運算子的分類

運算子（operator）也被稱為運算子，是用于實作賦值、比較和執行算數運算等功能的符號，

JavaScript中常用的運算子有：
    - 算數運算子  + - * / %
    - 遞增和遞減運算子  ++ --
    - 比較運算子  > < >= <= != ==
    - 邏輯運算子  && || !
    - 賦值運算子  =

4.2 算數運算子

1.算術運算子概述

概念：算術運算使用的符號，用于執行兩個變數或值的算術運算，

運算子	描述	實體
+	加	10+20=30
-	減	10-20=-10
*	減	10*20=200
/	除	10/20=0.5
%	取余數（取模）	回傳除法的余數 9%2=1

2.浮點數的精度問題

浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數，

    var result = 0.1 + 0.2; // 結果是：0.30000000000000004
    console.log(0.07 * 100); // 結果是：7.000000000000001
    // 所以：不要直接判斷兩個浮點數是否相等 !

3.運算式和回傳值

運算式：是由數字、運算子、變數等組成的式子

運算式最終都會有一個結果，回傳給開發者，稱為回傳值

4.3 遞增和遞減運算子

如果需要反復給數字變數+1或-1可以使用遞增（++）和遞減（--）運算子來完成，
在 JavaScript 中，遞增（++）和遞減（--）既可放在變數前，也可以放變數后面 前置遞增和后置遞增，
注意：前置遞增和后置遞增在單獨使用時，效果是一樣的；在運算式里，有所不同；

遞增運算子

前置遞增運算子 “++變數”：

使用口訣：先自加，后回傳值 ++num——num = num + 1；

    var  num = 10;
    alert(++num + 10);   // num = 11  11+10=21

后置遞增運算子 “變數++”：

使用口訣：先原值運算，后自加 num++ —— num = num + 1 ；

    var  num = 10;
    alert(10 + num++);  // num = 11 10+10=20

案例：遞增運算子：

    <script>
        var a = 10;
        ++a; // ++a  11    a = 11
        var b = ++a + 2; // a = 12
        console.log(b); // 14

        var c = 10;
        c++; // c++ 11 
        var d = c++ + 2; //  c++  = 11+2     c = 12
        console.log(d); // 13

        var e = 10;
        var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
        console.log(f); // 10 + 12 = 22
        // 后置自增  先運算式回傳原值 后面變數再自加1
    </script>

4.4 比較運算子

比較運算子概述

概念：比較運算子（關系運算子）是兩個資料進行比較時所使用的運算子，比較運算后，會回傳一個布林值（true / false）作為比較運算的結果，

運算子名稱	說明	案例	結果
<	小于號	1<2	true
>	大于號	1>2	false
>=	大于等于號	2>=2	true
<=	小于等于號	2<=3	false
==	判斷號（會轉型）	37==37	true
!=	不等號	37!=37	false
=== !==	全等要求值和資料型別都一致	37==='37'	false

等號比較

符號	作用	用法
=	賦值	等號右側的值賦給左側
==	判斷	判斷兩邊的值是否相等（注意隱式轉換）
===	全等	判斷兩邊的值和資料型別是否完全相同

實體：比較運算子

        //1. 我們程式里面的 == 是判斷兩邊值是否相等
        console.log(3 == 5); // false
        console.log('pink老師' == '劉德華'); // flase
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        // 2. 我們程式里面有全等 一模一樣  要求 兩側的值 還有 資料型別完全一致才可以 true
        console.log(18 === 18);
        console.log(18 === '18'); // false

4.5 邏輯運算子

邏輯運算子概述

邏輯運算子是用來進行布林值運算的運算子，其回傳值也是布林值，

邏輯運算子	說明	案例
&&	"邏輯與" ’與‘ and	true && false
\|\|	"邏輯或" ’或‘ or	true \|\| false
！	"邏輯非" ’非‘ not	! true

案例：邏輯運算子

        <script>
        // 1. 邏輯與 &&  and 兩側都為true  結果才是 true  只要有一側為false  結果就為false 
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true
        // 2. 邏輯或 || or  兩側都為false  結果才是假 false  只要有一側為true  結果就是true
        console.log(3 > 5 || 3 > 2); // true 
        console.log(3 > 5 || 3 < 2); // false
        // 3. 邏輯非  not  ！ 
        console.log(!true); // false
    </script>

短路運算（邏輯中斷）

邏輯運算子左邊的運算式值可以確定結果時，就不再繼續運算右邊的運算式的值;

    // 1.邏輯與 短路運算
    //如果第一個運算式為真，則回傳運算式2；如果第一個為假，則回傳運算式1；
    console.log(123 && 456);//456
    console.log(0 && 456 + 1 && 2);// 0
    console.log('' && 1 + 2 && 456 * 56789); // ''
    // 慷訓者否定的為假 其余是真  0 ‘’ null undefined NaN 為假；

    // 2.邏輯或 短路運算
    //如果運算式1 結果為真 則回傳運算式1 如果結果為假，則回傳運算式2
    console.log(123 || 456);//123
    console.log(0 && 456 + 1 && 2);//456 繼續向后運行

4.6 賦值運算子

概念：用來把資料賦值給變數的運算子，

賦值運算子	說明	案例
=	直接賦值	var name = '值'；
+=、-=	加、減一個數后在賦值	var age = 10; age+=5; // 15
*=、/=、%=	乘、除、取模后再賦值	var age = 2; age*=5; // 10

案例：賦值運算子

    var age = 10;
    age += 5;  // 相當于 age = age + 5;
    age -= 5;  // 相當于 age = age - 5;
    age *= 10; // 相當于 age = age * 10;

4.7 運算子優先級

優先級	運算子	順序
1	小括號	（）
2	一元運算子	++ -- ！
3	算術運算子	先 * / % 后 + -
4	關系運算子	> >= < <=
5	相等運算子	== != === !==
6	邏輯運算子	先 && 后 \|\|
7	賦值運算子	=
8	逗號運算子	,

一元運算子里面的邏輯非優先級很高
邏輯與比邏輯或優先級高

5 - 流程控制

5.1 流程控制概念

流程控制就是來控制代碼按照一定結構順序來執行
流程控制主要有三種結構：順序結構、分支結構、回圈結構

5.2 順序流程控制

特點：從上到下，依次執行

5.3 分支流程控制

特點：根據不同的條件，執行不同的路徑代碼（多選一的程序）得到不同的結果；

JS 語言提供了兩種分支結構陳述句：if 陳述句、switch 陳述句

5.4 if 陳述句

    　　 // 1. if陳述句 
        // 條件運算式成立 則執行代碼，否則什么也不做
        if (條件運算式) {
            // 條件成立執行的代碼陳述句
        }
        // 2. if else 雙分支陳述句
        // 分支陳述句 2選1程序 最終只有一條陳述句執行
        if (條件運算式) {
            陳述句1;//如果條件成立則執行陳述句1
            }
        else { 陳述句2 };//條件不成立執行陳述句2

         // 3. 多分支陳述句 
        // 最后也是只有一個陳述句執行 else if任意多，都不成立執行 else
        if (條件運算式1) {
            陳述句1；
        } else if (條件運算式2) {
             陳述句2；      
        } else {
            最后的陳述句；
        }

        // 4. 三元運算式 條件運算式 ？運算式1 ：運算式2
      　// 如果條件運算式為真，則回傳運算式1，否則回傳運算式2，運算式有回傳值
        var num = 10;
        var result = num > 5 ? '是的' : '不是的'; // 我們知道運算式是有回傳值的
        console.log(result);

        // if (num > 5) {
        //     result = '是的';
        // } else {
        //     result = '不是的';
        // }

案例：判斷是否閏年 (if ...else...)

// 演算法：能被4整除且不能整除100的為閏年，或者能夠被400整除的就是閏年
    <script>
        var year = prompt('請您輸入年份：');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您輸入的年份是閏年');
        } else {
            alert('您輸入的年份是平年');
        }
    </script>

案例：判斷成績級別 (if ...else if ...else...)

// 思路：從大到小的順序，否則 就都輸出了
    <script>
        var score = prompt('請您輸入分數:');
        if (score >= 90) {
        alert('寶貝，你是我的驕傲');
        } else if (score >= 80) {
        alert('寶貝，你已經很出色了');
        } else if (score >= 70) {
        alert('你要繼續加油嘍');
        } else if (score >= 60) {
        alert('孩子，你很危險');
        } else {
        alert('熊孩子，我不想和你說話，我只想用鞭子和你說話');
    </script>

案例：數字補0案例 (條件運算式 ? 運算式1 : 運算式2)

// 思路：用戶輸入一個0-59之間的數字，如果小于10，在這個數字前面補0（加0 拼接） 
    <script>
        var time = prompt('請您輸入一個 0 ~ 59 之間的一個數字');
        // 三元運算式 運算式 ？ 運算式1 ：運算式2 
        var result = time < 10 ? '0' + time : time; 
        alert(result);
    </script>

5.5 switch分支流程控制

switch ：開關轉換， case ：小例子選項
關鍵字 switch 后面括號內可以是運算式或值，通常是一個變數，不用數值；
如果運算式與case后面得值存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 陳述句代碼執行結束
如果所有的 case 的值都和運算式的值不匹配，則執行 default 里的代碼
注意：執行case 里面的陳述句時，如果沒有break，則繼續執行下一個case，不會退出switch

特點：switch后面的運算式是固定值，通常是變數，優點是可以直接跳轉到特定的case陳述句；

// 思路：利用我們的運算式的值 和 case 后面的選項值相匹配 如果匹配上，就執行該case 里面的陳述句  如果都沒有匹配上，那么執行 default里面的陳述句
    switch(運算式) {
        case value1: 執行陳述句1; break;
        case value2: 執行陳述句2; break;
        default: 最后的陳述句;
    }

案例：查詢水果價格 switch（）

        // 彈出 prompt 輸入框，讓用戶輸入水果名稱，把這個值取過來保存到變數中，
        // 將這個變數作為 switch 括號里面的運算式，
        // case 后面的值寫幾個不同的水果名稱，注意一定要加引號 ，因為必須是全等匹配，
        // 彈出不同價格即可，

        var fruit = prompt('請您輸入查詢的水果:');
        switch (fruit) {
        case '蘋果':
        alert('蘋果的價格是 3.5/斤');
        break;
        case '榴蓮':
        alert('榴蓮的價格是 35/斤');
        break;
        default:
        alert('沒有此水果');
    }

5.5 switch 陳述句和 if else if 陳述句的區別

一般情況下，它們兩個陳述句可以相互替換
switch用于處理case比較確定的情況，如固定值的；進行條件判斷后直接執行到程式的條件陳述句，效率更高；
if else更加靈活，常用于范圍判斷（大于小于）；但if else有幾種條件就判斷多少次；分支較少時效率較高；

6 - 回圈

回圈的目的：可以重復執行某些代碼

JS三種回圈結構：

for回圈：常用于計數
while回圈：復雜一點的條件判斷，比for靈活
do...while回圈：比while嚴謹

三個回圈很多情況可以相互轉換；

6.1 for回圈

重復執行某些代碼，通常和計數有關系

    // 1. 語法結構
    for (初始化變數; 條件運算式; 操作運算式) {
        //回圈體
    }

    //1.初始化變數 就是用 var宣告一個普通變數，常用于作為計數器
    //2.條件運算式 用來決定每一次回圈是否繼續執行 終止的條件
    //3.操作運算式 每次回圈最后執行的代碼 常用于計數器變數遞增減

    for (var i = 1; i <= 100; i++) {
        console.log('你好嗎');
    }
    //1.先賦初值 var i = 1 整個回圈只執行一次
    //2.在執行 i <= 100 條件成立執行回圈陳述句 不成立跳出回圈
    //3.條件成立的話 接下來執行console.log('')
    //4.最后執行i++ i++是單獨寫的代碼 遞增  第一輪結束
    //5.接著執行 i <= 100 如果滿足條件 就去執行回圈體 不滿足條件退出回圈 第二輪

for回圈執行方式

    <script>
        // 1.for回圈 重復執行相同代碼
        // 讓用戶 控制 輸入的次數
        var num = prompt('請輸入次數');
        for (var i = 1; i <= num; i++) {
            alert('hello world');
            // console.log('hello world');
        }

        // 2.for回圈 重復執行不同的代碼 因為我們有計數器變數 i 的存在 i每次回圈值都會變化
        // 計數器 輸出一個人 1~100歲
        for (var i = 1; i <= 100; i++) {
            console.log('這個人今年' + i + '歲了');
        }
    </script>

案例：有關for回圈的演算法

    <script>
    // 1. 求 1~100 之間的整數累加和 演算法：sum = sum + i  5050；   
        var sum = 0;// 求和變數 初始值為0
        for (var i = 1; i <= 100; i++) {
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);

    // 2. 求1~100間的所有數的平均值 需要一個 sum 和的變數 還需要一個平均值 average 的變數  50.5
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
            // sum += i;
        }
        average = sum / 100;
        console.log(average);

   // 3. 求1~100間所有偶數和奇數的和 需要一個偶數和even 和一個奇數和odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log('1~100之間的所有偶數和是' + even);
        console.log('1~100之間的所有奇數和是' + odd);
    </script>

案例：求學生成績案例

    <script>
        // 思路：
        // 1. 彈出輸入框輸入總得班級人數（num）
        // 2. 依次輸入學生成績并保存（score）
        // 3. for回圈 彈出的次數與班級總人數之間的關系 i <= num
        // 4. 先求總成績 sum ，之后求平均成績 average 彈出結果
        var num = prompt('請輸入班級的總人數');// num 總的班級人數
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= num; i++) {
            var score = prompt('請輸入第' + i + '個學生成績');
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班級總成績是' + sum);
        alert('班級的平均分是' + average);
    </script>

案例：列印五角星

　　<script>
        //     一行列印五個星星 
        // console.log('★★★★★');
        //     回圈列印5次
        // for (var i = 1; i <= 5; i++) {
        //     console.log('★');
        // }
    
    // 1.一行列印五顆星星 追加字串的方法-是一行列印多少個，不是回圈多少次一行一個
        // var str = '';
         // for (i = 1; i <= 5; i++) {
        //     str = str + '★';
        // }
    
    // 2.取決于用戶輸入
        var num = prompt('請輸入星星的個數');
        var str = '';
        for (i = 1; i <= num; i++) {
            str = str + '★';
        }
        console.log(str);
    </script>

雙重for回圈

雙重for回圈：

    <script>
        // 1.語法結構 
        for (外層的初始化變數; 外層的條件運算式; 外層的操作運算式) {
            for (里層的初始化變數; 里層的條件運算式; 里層的操作運算式) {
                執行陳述句;
            }
        }
        //  內層回圈可以看做外層回圈的回圈體陳述句
        //  外層回圈執行一次，內層回圈 執行全部
        //  總共執行了 i*j 次

        for (var i = 1; i <= 3; i++) {
            console.log('這是外層回圈第' + i + '次');
            for (var j = 1; j <= 3; j++) {
                console.log('這是內層回圈第' + j + '次');
            }
        }
    </script>

案例：列印n行n列五角星

    <script>
        var rows = prompt('請你輸入行數：');
        var cols = prompt('請你輸入列數：');
        var str = '';
        for (var i = 1; i <= rows; i++) { // 外層回圈負責 列印i行

            for (var j = 1; j <= cols; j++) { // 內層回圈負責 一行列印j個
                str = str + '★';
            }
            // 如果一行列印完畢j個星星就要另起一行 加 \n
            str = str + '\n'; // 字串拼接 追加字串
        }
        console.log(str);
    </script>

案例：列印倒三角

    <script>
        var str = '';
        for (var i = 1; i <= 10; i++) { //外層回圈控制行數
            for (var j = i; j <= 10; j++) { 
                //內層回圈列印個數不一樣 j=i=1，從1~10列印10個
                str = str + '★';
            }
            // 如果一行列印完畢j個星星就要另起一行 加 \n
            str = str + '\n';
        }
        console.log(str);
    </script>

案例：列印九九乘法表（正三角）

       // 一共有9行，但是每行的個數不一樣，因此需要用到雙重 for 回圈
       // 外層的 for 回圈控制行數 i ，回圈9次 ，可以列印 9 行  
       // 內層的 for 回圈控制每行公式  j 
 	  // 核心演算法：每一行 公式的個數正好和行數一致， j <= i;
      // 每行列印完畢，都需要重新換一行

    <script>
        str = '';
        for (i = 1; i <= 9; i++) {
            for (j = 1; j <= i; j++) {
                // str = str + '★';
                // str += i + 'x' + j + '=' + i * j;
                str += j + 'x' + i + '=' + i * j + '\t';
                //為了符合列匹配關系
            }
            str = str + '\n';
        }
        console.log(str);
   </script>

for 回圈小結

for 回圈可以重復執行某些相同代碼
for 回圈可以重復執行些許不同的代碼，因為我們有計數器
for 回圈可以重復執行某些操作，比如算術運算子加法操作
雙重 for 回圈，外層回圈一次，內層 for 回圈全部執行
for 回圈是回圈條件和數字直接相關的回圈

斷點除錯：

瀏覽器中f12打開除錯器視窗
單擊某條陳述句設定斷點，并重繪瀏覽器
右上角步進進行一步步除錯，看程式怎樣運行的

6.2 while回圈

while陳述句的語法結構如下：

使用 while 回圈時一定要注意，它必須要有退出條件，否則會成為死回圈

    <script>
        // 1. while 回圈語法結構 while 當...的時候
        // 2.執行思路 當條件運算式為true時 執行回圈體 否則 退出回圈
         while (條件運算式) {
             回圈體
         }
       
        // 3.代碼驗證
        var num = 1;// 初始化變數 計數器
        while (num <= 100) {
            console.log('hello');
            num++; // 操作運算式 完成計數器的更新 防止死回圈 不加限制會變成死回圈 一定要有退出條件
        }

        // 轉換寫法
        for (num = 1; num <= 100; num++) {
            console.log('hello');
        }
    </script>

案例：while回圈輸出人的年齡

    <script>
        // while回圈案例
        // 1.列印人的一生，從1歲到100歲
        var i = 1;
        while (i <= 100) {
            console.log('這個人今年' + i + '歲了');
            i++;
        }

        // 2.計算1~100之間所有的整數和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
            sum = sum + j;
            j++;
        }
        console.log(sum);

        // 3.彈出一個提示框，你喜歡我么？ 如果輸入喜歡，就提示結束，否則 一直詢問
        var message = prompt('你喜歡我么？');
        while (message !== '喜歡') {
            message = prompt('你喜歡我么');
        }
        alert('我也喜歡你啊');
    </script>

6.3 do-while回圈

比while更簡單一些；

while是先判斷后回圈；do...while是先執行，后判斷，至少執行一次；

    <script>
        // 1.語法結構  先回圈，在判斷，至少執行一次
        do {
            //回圈體
        } while (條件判斷);

        // 2.代碼
        var i = 1;
        do {
            console.log('how are you');
            i++;
        } while (i <= 100)
            
        do {
            var message = prompt('你喜歡我么？');
        } while (message !== '喜歡')
         alert('我也喜歡你啊');
    </script>

6.4 continue、break

1.continue 關鍵字用于立即跳出本次回圈

繼續下一次回圈（本次回圈體中 continue 之后代碼會少執行一次）

案例：吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子，代碼實作如下

     for (var i = 1; i <= 5; i++) {
         if (i == 3) {
             console.log('這個包子有蟲子，扔掉');
             continue; // 跳出本次回圈，跳出的是第3次回圈 
          }
          console.log('我正在吃第' + i + '個包子呢');
     }

    //1. 求 1~100 之間，除了能被7整除之外的 整數和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;// 退出本次回圈 直接跳到 i++
            }
            sum += i;
            console.log(sum);
        }
    </script>

2.break 關鍵字用于立即跳出整個回圈（回圈結束）

案例：吃5個包子，吃到第3個發現里面有半個蟲子，其余的不吃了，其代碼實作如下

  for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整個for 回圈，跳到整個for下面的陳述句
     }
     console.log('我正在吃第' + i + '個包子呢');
   }

7 - 陣列

為什么需要陣列？

普通變數一次只能存一個值；陣列（Array）是一組資料的集合，一次可以存多個值；

7.1 陣列的概念

陣列是指一組資料的集合，其中的每個資料被稱作元素，在陣列中可以存放任意型別的元素，

7.2 創建陣列

JS 中創建陣列有兩種方式：

利用new 關鍵字創建陣列（物件）

var 陣列名 = new Array() ；
var arr = new Array();   // 創建一個新的空陣列

利用陣列字面量創建陣列

var  陣列名 = []；
// 使用陣列字面量方式創建帶初始值的陣列 陣列型別不限
var  陣列名 = [1,'pink',true];// 陣列的初始化

7.3 獲取陣列中的元素

索引 (下標) ：用來訪問陣列元素的序號（陣列下標從 0 開始），

陣列可以通過索引來訪問、設定、修改對應的陣列元素，可以通過“陣列名[索引]”的形式來獲取陣列中的元素，

        // 4. 我們陣列里面的資料一定用逗號分隔
        // 5. 陣列里面的資料 比如1,2， 我們稱為陣列元素
        // 6. 獲取陣列元素  格式 陣列名[索引號]  索引號從 0開始 
        console.log(arr1);
        console.log(arr1[1]); // pink老師
        console.log(arr1[2]); // true

注意：如果訪問時陣列沒有和索引值對應的元素，則得到的值是undefined

7.4 遍歷陣列

把陣列中的每個元素從頭到尾都訪問一次（類似學生的點名）稱為遍歷陣列；

for回圈中的 i 是計數器，當索引號使用，arr[i] 是陣列元素第i個陣列元素，索引號從0開始

    <script>
        // 1.陣列索引 訪問陣列中某個元素
        var arr = ['red', 'green', 'blue'];
        console.log(arr[0]);// red

        // 2.遍歷陣列 通過for回圈訪問陣列所有元素
        //   因為陣列索引號從0開始，所以i必須從0開始 i < 3
        //   輸出的時候 arr[i] i 計數器 當索引號來用
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
        // 陣列名.length 可以直接獲取陣列長度 動態監測陣列元素的個數
        console.log(arr.length);// 此處陣列的長度是陣列元素的個數，并非索引
    </script>

案例：求陣列里面所有元素的和及平均值

    <script>
        // 1.宣告一個求和變數 sum
        // 2.遍歷這個陣列，把里面每個陣列元素 加到sum 里
        // 3.用求和變數 sum 除以陣列的長度得到陣列的平均值
        var arr = [2, 4, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (i = 0; i < arr.length; i++) {
            // sum+=i;// 加的不是計數器，是陣列里的元素
            sum += arr[i];
        }
        average = sum / arr.length;
        console.log('這組數的和是：' + sum);
        console.log('這組數的平均值是：' + average);
        console.log(sum, average); // 想要輸出多個變數，用逗號分隔即可
    </script>

案例：求陣列 [2,6,1,77,52,25,7] 中的最大值

    <script>
        // 1.宣告一個求和變數 max 默認最大值可以取陣列中的第一個元素
        // 2.遍歷這個陣列，把里面每個陣列元素和 max 相比較
        // 3.如果這個陣列元素大于max 就把這個陣列元素存到 max 里面，否則繼續下一輪比較，
        var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];// 將陣列第一個值賦值給max
        for (i = 1; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i];
            }
        }
        console.log('該陣列里最大的是：' + max);
    </script>

案例：將陣列元素轉換為字串，中間用任意字符相連

        // 將陣列 ['red', 'green', 'blue', 'pink'] 轉換為字串，并且用 | 或其他符號分割
        // 1.需要一個新變數用于存放轉換完的字串 str，
        // 2.遍歷原來的陣列，分別把里面資料取出來，加到字串里面，
        // 3.同時在后面多加一個分隔符    
    <script> 
        var arr = ['red', 'green', 'blue', 'pink'];
        var str = '';
        var sep = '|';
        for (i = 1; i < arr.length; i++) {
            str += arr[i] + sep;
        }
        console.log(str);
    </script>

注意：

此處陣列的長度是陣列元素的個數，不是陣列的索引號（下標號），
當我們陣列里面的元素個數發生了變化，這個 length 屬性跟著一起變化；陣列的length屬性可以被修改：
如果設定的length屬性值大于陣列的元素個數，則會在陣列末尾出現空白元素；
如果設定的length屬性值小于陣列的元素個數，則會把超過該值的陣列元素洗掉

7.5 陣列中新增元素

1、通過修改length長度新增陣列元素，通過length長度實作陣列的擴容

2、通過修改陣列索引新增陣列元素，追加陣列元素

    <script>
        // 1.新增陣列元素 修改length長度
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5;// 陣列長度修改為5 里面應該有5個元素
        console.log(arr);// 后面兩個是空的 undefined

        // 2.新增陣列元素 修改索引號 追加陣列元素
        var arr1 = ['red', 'green', 'blue'];
        arr1[3] = 'pink';
        console.log(arr1);
        arr1[4] = 'hotpink';
        console.log(arr1);
        arr1[0] = 'yellow';// 替換原來的數組元素
        console.log(arr1);

        arr1 = '有點意思';// 不要直接給 陣列名賦值 否則里面的陣列元素都沒有了
        console.log(arr1);
    </script>

案例：陣列存放0~10個值，回圈追加的方式輸出

    <script>
        var arr = [];// 定義一個空陣列
        for (var i = 0; i < 10; i++) {// 遍歷陣列
            // arr=i;// 不要直接給陣列名賦值 否則以前的元素都沒了
            arr[i] = i + 1;// i是陣列下標 下標為0的陣列對應著 第一個陣列元素
        }
        console.log(arr);
    </script>

案例：篩選陣列篩選陣列中大于10的數存入新陣列

    <script>
        // 方法一
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 19, 10];
        var newArr = [];// 宣告一個新的陣列存放新資料
        var j = 0;// 方法1 宣告一個新變數
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新陣列索引號應該從0開始 依次遞增
                newArr[j] = arr[i];
                // 在舊陣列里找出大于等于10的元素 依次追加給新陣列
                j++;
            }
        }
        console.log(newArr);

        // 方法二
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var newArr = [];// 宣告一個新的陣列存放新資料
        // 剛開始 newArr.length 就是0
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 新陣列索引號應該從0開始 依次遞增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>

案例：洗掉陣列指定元素，陣列去重洗掉陣列中的0

    // 1、需要一個新陣列用于存放篩選之后的資料，
    // 2、遍歷原來的陣列， 把不是 0 的資料添加到新陣列里面(此時要注意采用陣列名 + 索引的格式接收資料)，
    // 3、新陣列里面的個數， 用 length 不斷累加，
    <script>
        var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var newArray = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArray[newArray.length] = arr[i];
            }
        }
        console.log(newArray);
    </script>

案例：翻轉陣列將陣列中的內容反過來存放

    // 1、宣告一個新陣列 newArr
    // 2、把舊陣列索引號第4個取過來（arr.length - 1)，給新陣列索引號第0個元素 (newArr.length)
    // 3、我們采取 遞減的方式  i--
  // 思路：把 舊陣列 的 最后一個元素 取出來給 新陣列 作為第一個  （遞減）  
    <script>
        var arr = ['red', 'green', 'blue', 'pink', 'purple'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    </script>

案例：陣列排序交換相鄰兩個變數（冒泡排序）

冒泡排序：一種演算法，把一系列資料按照一定的順序排列，依次比較相鄰兩個元素；

    <script>
        var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i <= arr.length - 1; i++) { // 外層交換趟數 5個元素交換4趟
            for (var j = 0; j <= arr.length - i - 1; j++) 
                //里層回圈 負責每一趟的交換次數
            {
                // 內部交換2個變數的值 前一個和后面一個陣列元素相比較
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    </script>

8 - 函式

8.1 函式的概念

函式：就是封裝了一段可被重復呼叫執行的代碼塊，

通過此代碼塊可以實作大量代碼的重復使用，

8.2 函式的使用

函式使用分為兩步：宣告函式和呼叫函式;

     // 1.宣告函式  函式名 命名為動詞
    // (1) function 宣告函式的關鍵字 全部小寫
     // (2) 函式是做某件事情，函式名一般是動詞 sayHi 
     // (3) 函式不呼叫自己不執行
    function 函式名() {
        //函式體代碼
    }

    // 2.呼叫函式
    函式名();  // 通過呼叫函式名來執行函式體代碼 函式不呼叫 自己不執行
           
    function sayHi() {
        console.log('hi~~');
    }
    sayHi();

注意：宣告函式本身并不會執行代碼，只有呼叫函式時才會執行函式體代碼，

案例：利用函式封裝計算1-100累加和

        // 1.宣告函式
        function getSum(num1,num2) {
            var sum = 0;// 準備一個變數，保存數字和
            for (var i = num1; i <= num2; i++) {
                sum += i;// 把每個數值 都累加 到變數中
            }
            alert(sum);
        }
        // 2.呼叫函式
        getSum(1,100);

8.3 函式的引數

形參：形式上的引數宣告函式時定義可看做不用宣告的變數
實參：實際上的引數函式呼叫時傳遞的最終實參傳遞給形參

函式引數的運用：

        // 1.函式宣告 宣告形參
        function 函式名(形參1, 形參2, 形參3...) {
            // 函式體
        }
        // 2.函式呼叫 呼叫實參
        函式名(實參1, 實參2, 實參3...); 

        // 宣告函式
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        // 呼叫函式
        getSum(1, 3); // 4 先將實參傳遞給形參 在執行函式體
        getSum(6, 5); // 11

函式形參和實引數量不匹配時

引數個數	說明
實參個數等于形參個數	輸出正確結果
實參個數多于形參個數	值取到形參個數
實參個數小于形參個數	多的形參定義為undefined，結果NaN

注意：在JavaScript中，形參的默認值是undefined，

案例：函式的執行

// 1.函式可以重復相同的代碼
    function cook() {
        console.log('hello');
    }
    cook();

// 2.也可以利用函式的引數 實作函式重復不同的代碼
    function 函式名(形參1，形參2...) { // 宣告的小括號里是形參 形式上的
        
    }
    函式名(實參1，實參2...);// 函式呼叫的小括號里是實參 實際的

    function cook(aru) { // 形參是接收實參的 aru='hello' 相當于一個不用宣告的變數
        console.log(aru);
    }
    cook('hello');// 形參和實參個數盡量相匹配
// 1.利用函式求任意兩個數之間的和
    function getSum(num1,num2) {
        console.log(num1 + num2);
    }
    getSum(1, 3);
    getSum(2, 6);

// 2.利用函式求任意兩個數之間的累加和
    function getSum(start, end) {
        var sum = 0;
        for (var i = start; i <= end; i++) {
            sum += i;
        }
        console.log(sum);
    }
    getSum(1, 100);

8.4 函式的回傳值return

return 陳述句

函式只是用來做某件事或實作某種功能，最終的結果需要回傳給函式的呼叫者；
只要函式遇到return 就把后面的結果 回傳給函式的呼叫者  函式名（）= return + 后面

   // 宣告函式
    function 函式名（）{
        ...
        return  需要回傳的值；
    }
    // 呼叫函式
    函式名();// 此時呼叫函式就可以得到函式體內return 后面的值

    // 宣告函式
    function sum（）{
     ...
     return 666；
    }
    // 呼叫函式
    sum(); // 此時sum = 666，return 陳述句會把自身后面的值回傳給呼叫者

在使用 return 陳述句時，函式會停止執行，并回傳指定的值
如果函式沒有 return ，回傳的值是 undefined

    // 1.利用函式求任意兩個數之和
        function getResult(num1,num2) {
            return num1 + num2;
        }
        //getResult();// getResult = num1+num2
        console.log(getResult(1,2));

    // 2.利用函式求兩個數中最大值
        function getMax(num1,num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));

    // 3.利用函式求陣列中的最大值
        function getArrMax(arr) { // arr接收一個陣列
            var max = arr[0];
            for (var i = 1; i<=arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        // getArrMax([1,2,3,4,5]);// 實參是一個陣列
        // 實際開發中，常用一個變數 來接收 函式的回傳結果
        var re = getArrMax([1,2,3,4,5]);
        console.log(re);

return函式注意事項：

// 1.return 終止函式
        function getSum(num1, num2) {
            return num1 + num2;
            alert('這條陳述句不被執行');//return結束，后面的代碼不被執行
        }

        // 2.return 只能回傳一個值
        function fn(num1, num2) {
            return num1, num2;// return回傳的結果是最后一個值 num2
        }
        console.log(fn(1, 2));

        // 3.求任意兩個數的 加減乘除結果
        function getResult(num1, num2) { // 想要輸出多個值return 可以回傳陣列
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2);
        console.log(re);

        // 4. 我們的函式如果有return 則回傳的是 return 后面的值，如果函式么有 return 則回傳 undefined
           console.log(fun1()); // 回傳 666
        function fun2() {

        }
        console.log(fun2()); // 函式回傳的結果是 undefined

退出回圈

break ,continue ,return 的區別

break ：結束當前的回圈體（如 for、while）
continue ：跳出本次回圈，繼續執行下次回圈（如 for、while）
return ：不僅可以退出回圈，還能夠回傳 return 陳述句中的值，同時還可以結束當前的函式體內的代碼

8.5 arguments的使用

當不確定有多少個引數傳遞的時候，可以用 arguments 來獲取，

arguments物件中存盤了傳遞的所有實參，是當前函式的一個內置物件,函式獨有的；

  <script>
        // arguments 的使用  只有函式才有 arguments物件  而且是每個函式都內置好了這個arguments
        function fn() {
            // console.log(arguments); // 里面存盤了所有傳遞過來的實參  arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            // 我們可以按照陣列的方式遍歷arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        // 偽陣列 并不是真正意義上的陣列
        // 1. 具有陣列的 length 屬性
        // 2. 按照索引的方式進行存盤的
        // 3. 它沒有真正陣列的一些方法 pop()  push() 等等
    </script>

注意：在函式內部使用該物件，用此物件獲取函式呼叫時傳的實參，

案例：利用函式求任意個數的最大值

 <script>
        // 利用函式求任意個數的最大值
        function getMax() { // arguments = [1,2,3]
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] > max) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));
    </script>

案例：

<script>
        // 1.利用函式封裝方法 翻轉任意陣列 reverse 翻轉
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 2, 3, 4, 5]);
        console.log(arr1);

        // 2.利用函式封裝的方法，對陣列排序--冒泡排序
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - j; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr2 = sort([1, 2, 3, 4, 5]);
        console.log(arr2);

        // 3.判斷閏年
        function isRunYear(year) {
            // 如果是閏年回傳 true 否則回傳false
            var flag = flase;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
        console.log(isRunYear(2000));
        console.log(isRunYear(1999));
    </script>

函式之間可以相互呼叫：

函式內部可以呼叫另一個函式；

    <script>
        // 函式是可以相互呼叫的
        // function fn1() {
        //     console.log(11);
        //     fn2(); // 在fn1 函式里面呼叫了 fn2 函式
        // }
        // fn1();

        // function fn2() {
        //     console.log(22);

        // }
        </script>

在同一作用域代碼中，函式名即代表封裝的操作，使用函式名加括號即可以將封裝的操作執行，

案例：輸出當年年的2月份天數

<script>
        // 用戶輸入年份，輸出當年年的2月份天數
        function backDay() {
            var year = prompt('請您輸入年份');
            if (isRunYear(year)) {
                alert('當前年份是閏年 2月份有29天');
            } else {
                alert('當前年份是平年 2月份有28天');
            }
        }
        backDay();
        // 判斷是否為閏年的函式
        function isRunYear(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>

8.6 函式的兩種宣告方式

1、自定義函式方式(命名函式)

利用函式關鍵字 function 自定義函式方式

    // 宣告定義方式
    function fn() {...}
    // 呼叫 呼叫函式的代碼既可以放到宣告函式的前面，也可以放在宣告函式的后面
    fn();

2、函式運算式方式(匿名函式）

        // var 變數名 = function () { }
        var fun = function () {
            console.log('我是函式運算式');
        }
        fun();

fun是變數名不是函式名
函式運算式宣告方式和宣告變數差不多，只不過變數里存的是值而函式運算式里存的是函式
函式呼叫的代碼必須寫到函式體后面
函式運算式也可以進行傳遞引數

9 - 作用域

9.1 作用域概述

作用域：變數能夠起作用和效果的 某個范圍
目的：為了提高程式的可靠性 更重要的作用是減少命名沖突
全域作用域和區域作用域命名不沖突

9.2 作用域的分類

JavaScript（es6前）中的作用域有兩種：

全域作用域
區域作用域（函式作用域）

1.全域作用域

	作用于所有代碼執行的環境(整個script標簽內部)或獨立的js檔案，或者var宣告的，
	如果在函式內部沒有宣告，直接賦值的變數也屬于全域變數，一般不用console.log()；
	全域變數只有瀏覽器關閉時才會結束，占資源；

2.區域作用域

	作用于函式內的代碼環境，就是區域作用域（函式作用域） 
	在函式內部的作用域，這個代碼名字只在函式內部起作用 
	function fn { 區域作用域 }；
	函式的形參也可以看做區域變數；區域變數在代碼執行完畢后就結束；

3.es6新增塊級作用域

js在es6中新增塊級作用域,塊作用域由 { } 包括 如if{} for{}等
在其他編程語言中（如 java、c#等），在 if 陳述句、回圈陳述句中創建的變數，僅僅只能在當前 if 陳述句、當前回圈陳述句中使用

java有塊級作用域：

if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 報錯

以上java代碼會報錯，是因為代碼中 { } 即一塊作用域，其中宣告的變數 num，在 “{ }” 之外不能使用；

而與之類似的JavaScript代碼，則不會報錯，

js中沒有塊級作用域（在ES6之前）

if(true){
  var num = 123;
  console.log(123); //123
}
console.log(123);   //123

9.3 - 變數的作用域

在JavaScript中，根據作用域的不同，變數可以分為兩種：

全域變數
區域變數

1.全域變數

在全域作用域下宣告的變數叫做全域變數（在函式外部定義的變數），
注意 如果在函式內部 沒有宣告直接賦值的變數也屬于全域變數

全域變數在代碼的任何位置都可以使用
在全域作用域下 var 宣告的變數是全域變數
特殊情況下，在函式內不使用 var 宣告的變數也是全域變數（不建議使用）

2.區域變數

在區域作用域下宣告的變數叫做區域變數（在函式內部定義的變數）
注意： 函式的形參也可以看做是區域變數

區域變數只能在該函式內部使用
在函式內部 var 宣告的變數是區域變數
函式的形參實際上就是區域變數

3.全域變數和區域變數的區別

全域變數：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷毀，因此比較占記憶體;
區域變數：只在函式內部使用，當其所在的代碼塊被執行時，會被初始化；當代碼塊運行結束后，就會被銷毀，因此更節省記憶體空間;

9.4 - 作用域鏈

根據在內部函式可以訪問外部函式變數的這種機制，用鏈式查找決定哪些資料能被內部函式訪問，就稱作作用域鏈，

案例分析1：

function f1() { // 外部函式
    var num = 123;
    function f2() {
        console.log( num );// 站在目標出發，一層一層的往外查找
    }
    f2(); // 內部函式
}
var num = 456;
f1();

案例：

作用域鏈：采取就近原則的方式來查找變數最終的值
var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();
 

        // 作用域鏈
        var num = 10;
        function fn() {
            var num = 20;// 根據作用域鏈機制 先呼叫上一級的
            function fun() {
                console.log(num);// 內部函式可以呼叫外部函式 屬于子集
            }
        }

        function f1() {
            var num = 123;
            function f2() {
                console.log(num);// 站在目標出發一層層往外查找 num=123 近
            }
            f2();
        }
        var num = 456;
        f1();

預決議

1.1 預決議的相關概念

JavaScript 代碼是由瀏覽器中的 JavaScript 決議器來執行的，

JavaScript 決議器在運行 JavaScript 代碼的時候分為兩步：預決議和代碼執行，

預決議：  js引擎會把js里所有的 var 還有 function 提升到當前作用域的最前面，預決議也叫做變數、函式提升，
代碼執行： 按照代碼抒寫的順序從上到下執行

注意：預決議會把變數和函式的宣告在代碼執行之前執行完成，

1.2 預決議分類

預決議分為變數預決議（變數提升） 和 函式預決議（函式提升）

變數提升：變數的宣告會被提升到當前作用域的最上面，變數的 賦值 不會提升，
函式提升：函式的宣告會被提升到當前作用域的最上面，但是不會呼叫函式，

預決議分為變數預決議（變數提升）和函式預決議（函式提升）

 // 1.未宣告 直接呼叫  報錯
        console.log(num);

        // 2.先呼叫 后宣告  undefined 坑1
        // 變數預決議（變數提升）宣告提升，賦值不提
        console.log(num);
        var num = 10;
        // 預決議后相當于：
        var num; // 只宣告 未賦值 undefine
        console.log(num);
        num = 10;

        // 3.利用關鍵字定義函式 函式先呼叫后宣告 或 先宣告后呼叫 無影響
        // 函式預決議（函式提升）
        fn();
        function fn() {
            console.log(11);
        }
        // 預決議后相當于：把函式提升到最前面

        // 4.利用函式運算式定義函式 只能先宣告后呼叫 否則會報錯
        // 解決函式運算式宣告呼叫問題
        var fun = function () {
            console.log(22);
        }
        // 預決議后相當于：
        var fun;
        fun();
        fun = function() {
            console.log(22);
        }

案例：

// 1.
        var num = 10;
        fun();
        function fun() {
            console.log(num);
            var num = 20;
        }
    // 函式提升后 相當于以下代碼   輸出undefined
        var num;
        function fun() {
            var num; // 只宣告 未賦值 undefined
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();

    // 4.
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
    // 相當于以下代碼
        function f1() {
            //var a = b = c = 9;
            // 相當于 var a = 9;b = 9;c = 9;//b c 直接賦值 沒有var宣告 相當于全域變數
            // 集體宣告應該是 var a  =9,b = 9,c = 9;
            var a;
            a = b = c = 9;
            console.log(c);// 9
            console.log(b);// 9
            console.log(a);// 報錯 a當區域變數看 只宣告
        }

物件

1.1 物件的相關概念

1、什么是物件？

物件是指具體的事物，如字串、數值、陣列函式等；萬物皆物件；

物件是由屬性和方法組成的：

屬性：事物的特征，在物件中用屬性來表示（常用名詞）
方法：事物的行為，在物件中用方法來表示（常用動詞）

2、為什么需要物件？

保存一個值用變數；保存多個值，可以使用陣列；保存一個人的完整資訊可以用物件（相當于C語言結構體）；

物件可以讓代碼結構更清晰
物件屬于復雜資料型別object，
本質：物件就是一組無序的相關屬性和方法的集合，
建構式泛指某一大類，比如蘋果，不管是紅色蘋果還是綠色蘋果，都統稱為蘋果，
物件實體特指一個事物，比如這個蘋果、正在給你們講課的pink老師等，
for...in 陳述句用于對物件的屬性進行回圈操作，

變數、屬性、函式、方法的區別

相同點他們都是用來存盤資料的;

變數：單獨宣告賦值，使用的時候直接寫變數名單獨存在
屬性：物件里面的變數稱為屬性，不需要宣告，用來描述物件特征物件.屬性；

屬性是物件的一部分，而變數不是物件的一部分，變數是單獨存盤資料的容器
函式：單獨存在的，通過“函式名()”的方式就可以呼叫
方法：物件里面的函式稱為方法，方法不需要宣告，使用“物件.方法名()”的方式就可以呼叫；

方法是物件的一部分，函式是單獨封裝操作的容器

函式和方法的相同點都是實作某種功能做某件事

// 變數和屬性的相同點 都是用來存盤資料的
        // 1.變數 單獨宣告并賦值 使用的時候直接寫變數名 單獨存在
        var name = 10;
        // 2.屬性 在物件里不需要宣告 呼叫的時候必須是 物件.屬性
        var obj = {
            age: 18
        }
        console.log(obj.age);

        // 函式和方法的相同點 都是實作某種功能 做某件事
        // 3.函式是單獨宣告 并且呼叫的 函式名（） 單獨存在的
        function fn() {

        }
        // 4.方法 在物件里面 呼叫的時候 物件.方法（）
        var obj = {
            age: 18
            fn: function () {

            }
        }

小括號（）優先級；中括號[ ]陣列；花括號{ }物件

1.2 創建物件的三種方式

利用字面量創建物件；
利用new object創建物件；
利用建構式創建物件；

1、利用字面量創建物件

    <script>
        // 1.利用 字面量 創建物件 利用鍵值對形式 屬性名 ：屬性值 ，中間 逗號 隔開
            
        var obj = {};
        var obj = {
            uname: '張三瘋', // 里面的屬性或方法采取鍵值對的形式 鍵 屬性名 ：值 屬性值
            age: '18',       // 多個屬性或者方法中間用逗號隔開
            sex: '男',
            sayHi: function () {    // 方法冒號后面跟的是一個匿名函式 function
                console.log('hi~');
            }
        }

        // 2.呼叫物件
        
        console.log(obj.name); // 呼叫物件的屬性 采用 物件名.屬性名 理解為 的
        console.log(obj['age']); // 呼叫屬性還有一種方法 物件名['屬性名']    
        obj.sayHi(); // 呼叫物件的方法 sayHi  物件名.方法名（）
    </script>

2、利用 new Object 創建物件

        // 利用 new Object 創建物件 利用 等號 = 賦值的方法 添加物件的屬性和方法
        var obj = new Object();// 創建一個空的物件
        obj.uname = '張三瘋'; // 利用 等號 = 賦值的方法 添加物件的屬性和方法
        obj.age = 18;        // 每個屬性和方法之間用分號結束
        obj.sayHi = function () {
            console.log('hi~');
        }
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();

3、利用建構式創建物件

因為前面兩種方式一次只能創建一個物件；

建構式就是把我們物件里一些相同的屬性和方法抽象出來封裝到函式中；
建構式用于創建某一類函式，首字母要大寫；與關鍵字 new 一起使用；
利用建構式創建物件的程序稱為物件的實體化

    <script>
        // 利用建構式創建物件
        // 需要創建四大天王的物件 相同的屬性： 名字 年齡 性別 相同的方法：唱歌
        function 建構式名() {
            this.屬性 = 值;
            this.方法 = function () { }
        }
        new 建構式名();
// 1.建構式 泛指一大類
        function Star(uname, age, sex) { // 建構式首字母大寫
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }
// 2.物件 特指某一個 物件的實體化
        var ldh = new Star('劉德華', 18, '男');
        // 多了個 this 和new 不需要 return 就可以回傳結果
        // console.log(typeof ldf); // object
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
    </script>
        // 1. 建構式名字首字母要大寫
        // 2. 我們建構式不需要return 就可以回傳結果
        // 3. 我們呼叫建構式 必須使用 new
        // 4. 我們只要new Star() 呼叫函式就創建一個物件 ldh  {}
        // 5. 我們的屬性和方法前面必須添加 this

建構式和物件的區別：

建構式如明星泛指一大類類似于java語言中的類
物件特指是一個具體的事物

我們利用建構式創建物件的程序我們也稱為物件的實體化

new關鍵字：

new 建構式可以在記憶體中創建了一個空的新物件；
讓this就會指向剛才的空物件
執行建構式里面的代碼給這個空物件添加屬性和方法
回傳這個新物件（所以不需return）

var ldh = new Star('劉德華', 18, '男');

1.3 遍歷物件

for...in 陳述句用于對陣列或者物件的屬性進行回圈操作，

for (變數 in 物件名字) {
    // 在此執行代碼
}

變數通常用 k 或者 key

         // for (變數 in 物件) { }
        for (var k in obj) {
            console.log(k);// k變數輸出 得到的是 屬性名
            console.log( obj[k] );// 得到的是 屬性值
        }

1.4 內置物件

1.41內置物件的概念

JavaScript 中的物件分為3種：自定義物件、內置物件、瀏覽器物件
前面兩種物件是JS 基礎內容，屬于 ECMAScript；第三個瀏覽器物件屬于我們 JS 獨有的，我們JS API 講解
內置物件就是指 JS 語言自帶的一些物件，這些物件供開發者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）
內置物件最大的優點就是幫助我們快速開發
JavaScript 提供了多個內置物件：Math、 Date 、Array、String等

1.42 MDN檔案查閱！

查找檔案：學習一個內置物件的使用，只要學會其常用成員的使用即可，我們可以通過查檔案學習，可以通過MDN/W3C來查詢， ? Mozilla 開發者網路（MDN）提供了有關開放網路技術（Open Web）的資訊，包括 HTML、CSS 和萬維網及 HTML5 應用的 API， ? MDN:https://developer.mozilla.org/zh-CN/

Math物件

1.Math 概述

Math 物件不是建構式，所以我們不需要new 來呼叫而是直接使用里面的屬性和方法即可，它具有數學常數和函式的屬性和方法，跟數學相關的運算（求絕對值，取整、最大值等）可以使用 Math 中的成員，

屬性、方法名	功能
Math.PI	圓周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 -3.5 結果是 -3
Math.abs()	絕對值
Math.max()/Math.min()	求最大和最小值
Math.random()	獲取范圍在[0,1)內的隨機值

注意：上面的方法使用時必須帶括號

        // Math 三個取整的方式
        // (1) Math.floor() 地板 向下取整 往小了取值
        console.log(Math.floor(1.9));// 1
        // (2) Math.ceil()  天花板 向上取整 往大了取值
        console.log(Math.ceil(1.1));// 2
        // (3) Math.round() 四舍五入 其他數字都是四舍五入 5往大了取
        console.log(Math.round(1.1));// 1
        console.log(Math.round(1.5));// 2
        console.log(Math.round(-1.1));// -1
        console.log(Math.round(-1.5));// -1

        
         // Math 數學物件 不是一個建構式，不需要 new 呼叫 直接使用里面的屬性和方法
        console.log(Math.PI);// 一個屬性 圓周率
        console.log(Math.abs(-1));// 1 絕對值
        console.log(Math.max(1, 33, 99));// 99
        console.log(Math.max('pink'));// NaN
        console.log(Math.max());//

        // 利用物件封裝自己的數學物件 里面有PI最大值和最小值
        var myMath = {
            PI: 3.1415926,
            max: function () {
                var max = arguments[0]; // 不確定傳遞過來多少實參
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function () {
                var min = arguments[0]; 
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));

2. 亂數方法 random()

random() 方法可以隨機回傳一個小數，其取值范圍是 [0，1)，左閉右開 0 <= x < 1 ；

得到一個兩數之間的隨機整數，包括兩個數在內，

獲取指定范圍內的隨機整數演算法：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

案例：Math物件亂數方法

        // 想要得到兩個數之間的隨機整數 并且包括這2個數
        // Math.floor(Math.random() * (max - min +1)) + min
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));
        // 隨機點名
        var arr = ['張三', '張三瘋', '張三瘋子', '李四', '李思思'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);

案例：猜數字游戲

程式隨機生成一個 1~ 10 之間的數字，并讓用戶輸入一個數字，

案例分析

① 隨機生成一個1~10 的整數我們需要用到 Math.random() 方法，

② 需要一直猜到正確為止，所以一直回圈，

③ 用while 回圈合適更簡單，

④ 核心演算法：使用 if else if 多分支陳述句來判斷大于、小于、等于，

    <script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        var random = getRandom(1, 10);
        while (true) { // 死回圈
            var num = prompt('你來猜？輸入1~10之間的一個數字');
            if (num > random) {
                alert('你猜大了');
            } else if (num < random) {
                alert('你猜小了');
            } else {
                alert('你猜對了');
                break;// 退出整個回圈 一定要寫結束回圈條件
            }
        }
    </script>

如果限定猜的次數，可以在條件判斷改為for

日期物件

Date 物件和 Math 物件不一樣，

Date是一個建構式，使用時需要實體化后（new）才能使用其中具體方法和屬性 Date 實體用來處理日期和時間

1.使用Date實體化日期物件

獲取當前時間必須實體化：

var now = new Date();
console.log(now);

獲取指定時間的日期物件

var future = new Date('2019/5/1');
如果Date()不寫引數，就回傳當前時間
如果Date()里面寫引數，就回傳括號里面輸入的時間

注意：如果創建實體時并未傳入引數，則得到的日期物件是當前時間對應的日期物件

        // Date() 日期物件 是一個建構式 必須使用new 來呼叫創建日期物件
        var arr = new Array();// 創建了一個陣列物件
        var obj = new Object();//創建了一個新的物件實體

        // 1.使用Date 如果沒有引數 回傳當前系統的當前時間
        var date = new Date();
        console.log(date);
        // 2.引數常用寫法 數字型 2019,10,01 或者 字串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1);// 回傳的是 11月 不是 10月
        var date1 = new Date('2019-10-1 8:8:8');
        console.log(date2);

2.使用Date實體的方法和屬性日期格式化

方法名	說明	代碼
getFullYear()	獲取當年	getFullYear()
getMonth()	獲取當月（0-11）	getMonth()
getDate()	獲取當前日期	getDate()
getDay()	獲取星期幾（周日為0）	getDay()
getHours()	獲取當前小時	getHours()
getMinutes()	獲取當前分鐘	getMinutes()
getSeconds()	獲取當前秒鐘	getSeconds()

案例：輸出當前日期

請寫出這個格式的日期：2019年5月1日星期三

    <script>
        // 格式化日期 年月日 手動更改顯示
        var date = new Date();
        console.log(date.getFullYear());// 回傳當前日期的年 2019
        console.log(date.getMonth() + 1); // 月份 回傳的月份小1個月 月份寫時加1
        console.log(date.getDate()); // 回傳的是 幾號
        console.log(date.getDay()); // 3 周榷訓傳的是0
        // 寫一個 2019年 5月 1日 星期三
        var year = date.getFullYear();
        var month = date.getMonth();
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日' + arr[day]);
    </script>

案例：輸出當前時間

寫一個函式，格式化日期物件，成為 HH:mm:ss 的形式比如 00:10:45

    <script>
        // 格式化日期 時分秒
        var date = new Date();
        console.log(date.getHours());// 時
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        // 要求封裝一個函式回傳當前的時分秒 格式 08:08:08
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());
    </script>

3.通過Date實體獲取總毫米數

總毫秒數的含義：基于1970年1月1日（世界標準時間）起的毫秒數

毫秒數也叫時間戳，永遠不會重復；

案例：獲取總毫秒數

    <script>
        // 獲得 Date總的毫秒數 不是當前時間的毫秒數 而是距離1970年1月1日
      
        var date = new Date();// 實體化Date物件
        // 1. 通過 valueOf()  getTime() 用于獲取物件的原始值
        console.log(date.valueOf());// 距離 1970 過了多少毫秒
        console.log(date.getTime());

        // 2. 簡單的寫法（常用）
        var date1 = +new Date();// +new Date() 回傳的是總毫秒數
        console.log(date1);

        // 3. HTML5新增的的方法，有兼容性問題
        console.log(Date.now());
    </script>

案例：倒計時效果

案例分析

① 核心演算法：輸入的時間減去現在的時間就是剩余的時間，即倒計時，但是不能拿著時分秒相減，比如 05 分減去25分，結果會是負數的，

② 用時間戳（毫秒）來做，用戶輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩余時間的毫秒數，

③ 把剩余時間總的毫秒數轉換為天、時、分、秒（時間戳轉換為時分秒）

轉換公式如下：

? d = parseInt(總秒數/ 60/60 /24); // 計算天數

? h = parseInt(總秒數/ 60/60 %24) // 計算小時

? m = parseInt(總秒數 /60 %60 ); // 計算分數

? s = parseInt(總秒數%60); // 計算當前秒數

    <script>
        function countDown(time) {
            var nowTime = +new Date();// 回傳的是當前時間的總毫秒數
            var inputTime = +new Date(time);// 回傳的是用戶輸入事件的總毫秒數
            var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 1s=1000ms
            var d = parseInt(times / 60 / 60 / 24);// 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);// 時
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);// 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);// 秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '時' + m + '分' + s + '秒';
        }
        console.log(countDown('2019-5-1 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>

陣列物件

1.創建陣列的兩種方式

字面量方式

   var arr = [1, 2, 3];
        console.log(arr[0]);

new Array() 建構式

 　　 // var arr1 = new Array();  // 創建了一個空的陣列
        // var arr1 = new Array(2);  // 這個2 表示 陣列的長度為 2  里面有2個空的陣列元素 
        var arr1 = new Array(2, 3); // 等價于 [2,3]  這樣寫表示 里面有2個陣列元素 是 2和3
      console.log(arr1);

注意：上面代碼中arr創建出的是一個空陣列，如果需要使用建構式Array創建非空陣列，可以在創建陣列時傳入引數

引數傳遞規則如下：

如果只傳入一個引數，則引數規定了陣列的長度
如果傳入了多個引數，則引數稱為陣列的元素

2.檢測是否為陣列

instanceof 運算子

instanceof 可以判斷一個物件是否是某個建構式的實體

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true arr是陣列
console.log(obj instanceof Array); // false obj是物件

Array.isArray()

Array.isArray()用于判斷一個物件是否為陣列，isArray() 是 HTML5 中新增的方法 ie9以上不支持

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

翻轉陣列：

  // 翻轉陣列
        function reverse(arr) {
            // if (arr instanceof Array) {
            if (Array.isArray(arr)) {
                var newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];

                }
                return newArr;
            } else {
                return 'error 這個引數要求必須是陣列格式 [1,2,3]'
            }
        }
        console.log(reverse([1, 2, 3]));
        console.log(reverse(1, 2, 3));

3.添加洗掉陣列元素的方法

陣列中有進行增加、洗掉元素的方法，部分方法如下表

方法名	說明	回傳值
push(引數1...)	末尾添加一個或多個元素，注意修改原陣列	并回傳新的長度
pop()	洗掉陣列最后一個元素，把陣列長度減1 無引數、修改原陣列	回傳他洗掉的元素的值
unshift(引數1...)	向陣列的開頭添加一個或多個元素，注意修改原陣列	并回傳新的長度
shift()	洗掉陣列的第一個元素，陣列長度減1無引數，修改原陣列	并回傳第一個元素得值

注意：push、unshift為增加元素方法；pop、shift為洗掉元素的方法

案例：添加洗掉陣列元素

   <script>
        // 添加洗掉陣列元素方法
        // 1. push() 在我們陣列的末尾 添加一個或者多個陣列元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, 'pink');
        console.log(arr.push(4, 'pink'));

        console.log(arr);
        // (1) push 是可以給陣列追加新的元素
        // (2) push() 引數直接寫 陣列元素就可以了
        // (3) push完畢之后，回傳的結果是 新陣列的長度 
        // (4) 原陣列也會發生變化
        // 2. unshift 在我們陣列的開頭 添加一個或者多個陣列元素
        console.log(arr.unshift('red', 'purple'));

        console.log(arr);
        // (1) unshift是可以給陣列前面追加新的元素
        // (2) unshift() 引數直接寫 陣列元素就可以了
        // (3) unshift完畢之后，回傳的結果是 新陣列的長度 
        // (4) 原陣列也會發生變化

        // 3. pop() 它可以洗掉陣列的最后一個元素  
        console.log(arr.pop());
        console.log(arr);
        // (1) pop是可以洗掉陣列的最后一個元素 記住一次只能洗掉一個元素
        // (2) pop() 沒有引數
        // (3) pop完畢之后，回傳的結果是 洗掉的那個元素 
        // (4) 原陣列也會發生變化
        // 4. shift() 它可以洗掉陣列的第一個元素  
        console.log(arr.shift());
        console.log(arr);
        // (1) shift是可以洗掉陣列的第一個元素 記住一次只能洗掉一個元素
        // (2) shift() 沒有引數
        // (3) shift完畢之后，回傳的結果是 洗掉的那個元素 
        // (4) 原陣列也會發生變化
    </script>
</head>

案例：篩選陣列

有一個包含工資的陣列[1500, 1200, 2000, 2100, 1800]，要求把陣列中工資超過2000的洗掉，剩余的放到新陣列里面

    var arr = [1500, 1200, 2000, 2100, 1800];
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < 2000) {
        // newArr[newArr.length] = arr[i];
         newArr.push(arr[i]);
         } 
    }
    console.log(newArr);

4.陣列排序

陣列中有對陣列本身排序的方法，部分方法如下表

方法名	說明	是否修改原陣列
reverse()	顛倒陣列中元素的熟悉怒，無引數	改變原來陣列回傳新陣列
sort()	對陣列的元素進行排序	改變原陣列回傳新陣列

注意：sort方法需要傳入引數來設定升序、降序排序

如果傳入“function(a,b){ return a-b;}”，則為升序
如果傳入“function(a,b){ return b-a;}”，則為降序

        // 陣列排序
        // 1. 翻轉陣列
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        console.log(arr);

        // 2. 陣列排序（冒泡排序）
        var arr1 = [17, 4, 71, 6, 9];
        // arr1.sort();// 只能對單位數字排序
        arr1.sort(function (a, b) {
            return a - b;// 按照升序排列
            return b - a;// 按照降序排序
        });
        console.log(arr1);

5.陣列索引方法

陣列中有獲取陣列指定元素索引值的方法，部分方法如下表

方法名	說明	回傳值
indexOf()	陣列中查找給定元素的第一個索引	存在回傳索引，不存在，回傳-1
lastIndexOf()	在陣列中的最后一個索引	存在回傳索引，不存在，回傳-1

獲取陣列指定元素索引值

    <script>
        // 回傳陣列元素索引號方法  indexOf(陣列元素)  作用就是回傳該陣列元素的索引號 從前面開始查找
        // 它只回傳第一個滿足條件的索引號 
        // 它如果在該陣列里面找不到元素，則回傳的是 -1  
        // var arr = ['red', 'green', 'blue', 'pink', 'blue'];
        var arr = ['red', 'green', 'pink'];
        console.log(arr.indexOf('blue'));
        // 回傳陣列元素索引號方法  lastIndexOf(陣列元素)  作用就是回傳該陣列元素的索引號 從后面開始查找
        var arr = ['red', 'green', 'blue', 'pink', 'blue'];

        console.log(arr.lastIndexOf('blue')); // 4
    </script>

案例：陣列去重（重點案例）

有一個陣列[‘c’, ‘a’, ‘z’, ‘a’, ‘x’, ‘a’, ‘x’, ‘c’, ‘b’]，要求去除陣列中重復的元素

案例分析

① 目標：把舊陣列里面不重復的元素選取出來放到新陣列中，重復的元素只保留一個，放到新陣列中去重，

② 核心演算法：我們遍歷舊陣列，然后拿著舊陣列元素去查詢新陣列，如果該元素在新陣列里面沒有出現過，我們就添加，否則不添加，

③ 我們怎么知道該元素沒有存在？利用新陣列.indexOf(陣列元素) 如果回傳時 -1 就說明新陣列里面沒有該元素

舊陣列['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']

新陣列 [ ]

    <script>
        // 陣列去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除陣列中重復的元素，
        // 1.目標： 把舊陣列里面不重復的元素選取出來放到新陣列中， 重復的元素只保留一個， 放到新陣列中去重，
        // 2.核心演算法： 我們遍歷舊陣列， 然后拿著舊陣列元素去查詢新陣列， 如果該元素在新陣列里面沒有出現過， 我們就添加， 否則不添加，
        // 3.我們怎么知道該元素沒有存在？ 利用 新陣列.indexOf(陣列元素) 如果回傳時 - 1 就說明 新陣列里面沒有改元素
        // 封裝一個 去重的函式 unique 獨一無二的

        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        // var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
        var demo = unique(['blue', 'green', 'blue'])
        console.log(demo);
    </script>

6.陣列轉換為字串

陣列中有把陣列轉化為字串的方法，部分方法如下表

方法名	說明	回傳值
toString()	把陣列轉換成字串逗號分割每一項	回傳一個字串
join('分隔符')	方法用于把陣列中的所有元素轉換為一個字串	回傳一個字串

注意：join方法如果不傳入引數，則按照 “ , ”拼接元素

        // 陣列轉換成字串
        // 1. toString() 
        var arr = [1, 2, 3];
        console.log(arr.toString());// 1,2,3
        // 2. join（分隔符）
        var arrr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join());// green,blue,pink
        console.log(arr1.join('-'));// green-blue-pink
        console.log(arr1.join('&'));// green&blue&pink

其他方法

陣列中還有其他操作方法，同學們可以在課下自行查閱學習
slice() 和 splice() 目的基本相同，建議同學們重點看下 splice()

方法名	說明	回傳值
concat()	連接兩個或多個陣列不影響原陣列	回傳一個新的陣列
slice()	陣列截取 slice（begin，end）	回傳被截取專案的新陣列
splice()	陣列洗掉splice（第幾個開始，要洗掉個數）	回傳被洗掉專案的新陣列影響原陣列

字串物件

1.基本包裝型別

為了方便操作基本資料型別，JavaScript 還提供了三個特殊的參考型別：String、Number和 Boolean，

基本包裝型別就是把簡單資料型別包裝成為復雜資料型別，這樣基本資料型別就有了屬性和方法，

// 下面代碼有什么問題？
var str = 'andy';
console.log(str.length);

按道理簡單資料型別是沒有屬性和方法的，而物件才有屬性和方法，但上面代碼卻可以執行，這是因為js 會把基本資料型別包裝為復雜資料型別，其執行程序如下：

    // 物件 才有 屬性和方法   復雜資料型別才有 屬性和方法 
    // 簡單資料型別為什么會有length 屬性呢？ 
    // 基本包裝型別：  就是把簡單資料型別 包裝成為了 復雜資料型別 
// 1. 生成臨時變數，把簡單型別包裝為復雜資料型別
var temp = new String('andy');
// 2. 賦值給我們宣告的字符變數
str = temp;
// 3. 銷毀臨時變數
temp = null;

2.字串的不可變

	指的是里面的值不可變，雖然看上去可以改變內容，但只是地址變了，在記憶體中新開辟了一個記憶體空間， 原來的值還是有的；
	當重新給字串變數賦值的時候，變數之前保存的字串不會被修改，依然在記憶體中重新給字串賦值，會重新在記憶體中開辟空間，這個特點就是字串的不可變，

由于字串的不可變，在大量拼接字串的時候會有效率問題

var str = 'abc';
str = 'hello';
// 當重新給 str 賦值的時候，常量'abc'不會被修改，依然在記憶體中
// 重新給字串賦值，會重新在記憶體中開辟空間，這個特點就是字串的不可變
// 由于字串的不可變，在大量拼接字串的時候會有效率問題
var str = '';
for (var i = 0; i < 100000; i++) {
 str += i;
}
console.log(str); // 這個結果需要花費大量時間來顯示，因為需要不斷的開辟新的空間

3.根據字符回傳位置

字串的所有方法，都不會修改字符本身（字串是可變的），操作完成后會發揮成以個新的字串；

字串通過基本包裝型別可以呼叫部分方法來操作字串，以下是回傳指定字符的位置的方法：

方法名	說明
indexOf('要查找的字符',開始的位置)	回傳指定內容在元字串中的位置，如果找不到回傳-1，開始的位置是index索引號
lastIndexOf()	從后往前找，值找第一個匹配的

 // 字串物件 根據字符回傳位置 str.indexOf('要查找的字符'，[起始位置])
        var str = '改革春風吹滿地，春天來了';
        console.log(str.indexOf('春'));// 2
        console.log(str.indexOf('春', 3));// 從索引號是 3的位置開始往后查找 8

案例：回傳字符位置

查找字串"abcoefoxyozzopp"中所有o出現的位置以及次數

① 核心演算法：先查找第一個o出現的位置

② 然后只要indexOf 回傳的結果不是 -1 就繼續往后查找

③ 因為indexOf 只能查找到第一個，所以后面的查找，利用第二個引數，當前索引加1，從而繼續查找

    <script>
        var str = "abcoefoxyozzopp";
        var index = str.indexOf('o'); // 從第一個o開始查找，回傳 索引號 3
        var num = 0;
        // console.log(idnex);
        while (index !== -1) {
            console.log(index);
            num++; // 開始尋找第二個 o
            index = str.indexOf('o', index + 1);
        }
        console.log('o出現的次數是：' + num);
    </script>

4.根據位置回傳字符

字串通過基本包裝型別可以呼叫部分方法來操作字串，以下是根據位置回傳指定位置上的字符：

方法名	說明	使用
charAt(index)	回傳指定位置的字符（index字串的索引號）	str.charAt(0)
charCodeAt(index)	獲取指定位置處字符的ASII碼（index索引號）	str.charCodeAt(0)
str[index]	獲取指定位置處字符	html/ie8+支持

在上述方法中，charCodeAt方法回傳的是指定位置上字符對應的ASCII碼，ASCII碼對照表如下：

        // 根據位置回傳字符
        // 1. charAt(index) 根據位置回傳字符
        var str = 'andy';
        console.log(str.charAt(3));// y
        // 遍歷所有字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        // 2. charCodeAt(index) 反應相應索引號的字符ASII值 目的：判斷用戶按下了哪個鍵
        console.log(str.charCodeAt(0));//97
        // 2. str[index] H5 新增的
        console.log(str[0]); // a

案例：回傳字符位

統計出現最多的字符和次數

判斷一個字串 'abcoefoxyozzopp' 中出現次數最多的字符，并統計其次數

1.核心演算法：利用 charAt(）遍歷這個字串

2.把每個字符都存盤給物件，如果物件沒有該屬性，就為1，如果存在了就 +1

3.遍歷物件，得到最大值和該字符

注意：在遍歷的程序中，把字串中的每個字符作為物件的屬性存盤在物件總，對應的屬性值是該字符出現的次數

    <script>
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);// chars是字串中的每一個字符
            if (o[chars]) { // o[chars]得到的是屬性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2.遍歷物件
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k得到的是 屬性名
            // o[k]得到的是屬性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>
    <script>
        // 有一個物件 來判斷是否有該屬性 物件['屬性名']
        var o = {
            age: 18
        }
        if (o['sex']) {
            console.log('里面有該屬性');

        } else {
            console.log('沒有該屬性');

        }

        //  判斷一個字串 'abcoefoxyozzopp' 中出現次數最多的字符，并統計其次數，
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心演算法：利用 charAt(） 遍歷這個字串
        // 把每個字符都存盤給物件， 如果物件沒有該屬性，就為1，如果存在了就 +1
        // 遍歷物件，得到最大值和該字符
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字串的每一個字符
            if (o[chars]) { // o[chars] 得到的是屬性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍歷物件
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 屬性名
            // o[k] 得到的是屬性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

5.字串操作方法

字串通過基本包裝型別可以呼叫部分方法來操作字串，以下是部分操作方法：

方法名	說明
concat(str1,str2,str3...)	用于連接兩個或多個字串，拼接字串，等效于+（+常用）
substr(start,length)	從start位置開始（索引號），length取個數
slice(start,end)	從start位置開始，截取到end位置，end取不到（都是索引號）
substring(start,end)	從start位置開始，截取到end，end取不到，基本和slice相同，但不接收負值

        // 字串操作方法
        // 1.concat('字串1','字串2'...)
        var str  ='andy';
        console.log(str.concat('red'));// andyred

        // 2. substr('截取的起始位置','截取幾個字符');
        var str1 = '改革春風吹滿地';
        console.log(str1.substr(2,2));// 春風
// 第一個2 是索引號的2 從第幾個開始  第二個2 是取幾個字符

replace()方法

replace() 方法用于在字串中用一些字符替換另一些字符，其使用格式如下：

字串.replace(被替換的字串， 要替換為的字串)；
var str = 'andyandy';
console.log(str.replace('a')); //只替換第一個a

split()方法

split()方法用于切分字串，它可以將字串切分為陣列，在切分完畢之后，回傳的是一個新陣列，

字串.split("分割字符")
var str = 'a,b,c,d';
console.log(str.split(',')); // 回傳的是一個陣列 [a, b, c, d]
    <script>
        // 1. 替換字符 replace('被替換的字符','替換為的字符') 只替換第一個
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));// bndyandy
        // 替換里面所有選中的字串
        var str1 = 'andyandy';
        while (str1.indexOf('a') !== -1) {
            str1 = str1.replace('a', '*');
        }
        console.log(str1);
        // 2. 字串轉換為陣列 split('分隔符') join 把陣列轉為字串
        var str2 = 'red,pink,blue';
        console.log(str2, split(','));// ['red','pink','blue']
        console.log(str2, split('&'));// ['red'&'pink'&'blue']
    </script>

課下查閱

? toUpperCase() //轉換大寫

? toLowerCase() //轉換小寫

資料型別

1.1 簡單資料型別

簡單型別（基本資料型別、值型別）：

在存盤時變數中存盤的是值本身，包括string ，number，boolean，undefined，null

null回傳的是object，如果有個變數，以后打算存盤為物件，可以用；

  <script>
        // 簡單資料型別 null  回傳的是一個空的物件  object 
        var timer = null;
        console.log(typeof timer);
        // 如果有個變數我們以后打算存盤為物件，暫時沒想好放啥， 這個時候就給 null 
        // 1. 簡單資料型別 是存放在堆疊里面 里面直接開辟一個空間存放的是值
        // 2. 復雜資料型別 首先在堆疊里面存放地址 十六進制表示  然后這個地址指向堆里面的資料
    </script>

1.2 復雜資料型別

復雜資料型別（參考型別）：在存盤時變數中存盤的僅僅是地址（參考），通過 new 關鍵字創建的物件（系統物件、自定義物件），如 Object、Array、Date等；

1.3 堆疊

堆疊空間分配區別：

　　1、堆疊（作業系統）：由作業系統自動分配釋放存放函式的引數值、區域變數的值等，其操作方式類似于資料結構中的堆疊；簡單資料型別存放到堆疊里面；

　　2、堆（作業系統）：存盤復雜型別(物件)，一般由程式員分配釋放，若程式員不釋放，由垃圾回識訓制回收

js中沒有堆疊概念

簡單資料型別的存盤方式

值型別變數的資料直接存放在變數（堆疊空間）中，存盤的是值
復雜資料型別的存盤方式

參考型別變數（堆疊空間）里存放的是地址，地址指向堆里面的資料，真正的物件實體存放在堆空間中

1.4 簡單型別傳參

函式的形參也可以看做是一個變數，當我們把一個值型別變數作為引數傳給函式的形參時，其實是把變數在堆疊空間里的值復制了一份給形參，那么在方法內部對形參做任何修改，都不會影響到的外部變數，

    function fn(a) {
        a++;
        console.log(a); 
    }
    var x = 10;
    fn(x);
    console.log(x)；

運行結果如下：

1.5 復雜資料型別傳參

函式的形參也可以看做是一個變數，當我們把參考型別變數傳給形參時，其實是把變數在堆疊空間里保存的堆地址復制給了形參，形參和實參其實保存的是同一個堆地址，所以操作的是同一個物件，

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 這個輸出什么 ?    劉德華
    x.name = "張學友";
    console.log(x.name); // 3. 這個輸出什么 ?    張學友
}
var p = new Person("劉德華");
console.log(p.name);    // 1. 這個輸出什么 ?   劉德華
f1(p);
console.log(p.name);    // 4. 這個輸出什么 ?  張學友

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262430.html

標籤：其他

上一篇：網頁布局準則

下一篇：SAP什么用例可以批量修改物料MG5？

JavaScript基礎

JavaScript基礎

1- 初識JavaScript

1.1 JavaScript 是什么

1.2 JavaScript的作用

1.3 HTML/CSS/JS 的關系

1.4 瀏覽器執行 JS 簡介

1.5 JS 的組成

ECMAScript

DOM——檔案物件模型

BOM——瀏覽器物件模型

1.6 JS 書寫位置

2 - JavaScript注釋

3 - JavaScript輸入輸出陳述句

程式設計基礎

1 - 變數概述

1.1 什么是變數

1.2 - 變數的使用

1.3 變數語法擴展

案例：交換兩個變數的值

1.4 變數命名規范

2 - 資料型別

2.1 資料型別簡介

2.2 簡單資料型別

案例：互動編程的三個基本要素

2.3 獲取變數資料型別

2.4 資料型別轉換

3 - 識別符號、關鍵字、保留字

3.1 識別符號

3.2 關鍵字

3.3 保留字

3.4 識別符號命名規范

4 - 運算子（運算子）

4.1 運算子的分類

4.2 算數運算子

4.3 遞增和遞減運算子

4.4 比較運算子

4.5 邏輯運算子

4.6 賦值運算子

4.7 運算子優先級

5 - 流程控制

5.1 流程控制概念

5.2 順序流程控制

5.3 分支流程控制

5.4 if 陳述句

5.5 switch分支流程控制

5.5 switch 陳述句和 if else if 陳述句的區別

6 - 回圈

6.1 for回圈

雙重for回圈

6.2 while回圈

6.3 do-while回圈

6.4 continue、break

7 - 陣列

7.1 陣列的概念

7.2 創建陣列

7.3 獲取陣列中的元素

7.4 遍歷陣列

7.5 陣列中新增元素

8 - 函式

8.1 函式的概念

8.2 函式的使用

8.3 函式的引數

8.4 函式的回傳值return

退出回圈

8.5 arguments的使用

8.6 函式的兩種宣告方式

9 - 作用域

9.1 作用域概述

9.2 作用域的分類

9.3 - 變數的作用域

9.4 - 作用域鏈

預決議

1.1 預決議的相關概念

1.2 預決議分類

物件

1.1 物件的相關概念

變數、屬性、函式、方法的區別

1.2 創建物件的三種方式

1、利用字面量創建物件