JavaScript基礎

時間 2021-02-21

標籤 html java c++ 程序員 es6 web 算法 chrome 編程 c# 欄目 JavaScript 简体版

原文原文鏈接

JavaScript基礎

1- 初識JavaScript

1.1 JavaScript 是什麼

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

所謂腳本（Script）語言：是運行時不須要編譯，運行過程當中由 js 解釋器( js 引擎）逐行來進行解釋並執行。讀到一行，執行一行；java
目的是實現邏輯業務與頁面控制，至關於動做；c++

所謂邏輯性：就是實現這個要求的思路先怎麼作後怎麼作；程序員

1.2 JavaScript的做用

表單動態校驗（密碼強度檢測）（ JS 產生最初的目的）es6
網頁特效web
服務端開發(Node.js)算法
桌面程序(Electron)chrome
App(Cordova) 編程
控制硬件-物聯網(Ruff)c#
遊戲開發(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="點我" 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="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="script.js"> </script>
    </head>

    <body>
        <!-- 1.行內式的js 直接寫到元素內部，以on開頭的屬性 外雙內單引號 -->
        <input type="button" value="提交" 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

一、數字型 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>

二、字符串型 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>

三、布爾型Boolean

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

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

四、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 數組中新增元素

一、經過修改length長度新增數組元素，經過length長度實現數組的擴容

二、經過修改數組索引新增數組元素，追加數組元素

    <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

    // 一、須要一個新數組用於存放篩選以後的數據。
    // 二、遍歷原來的數組， 把不是 0 的數據添加到新數組裏面(此時要注意採用數組名 + 索引的格式接收數據)。
    // 三、新數組裏面的個數， 用 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>

案例：翻轉數組將數組中的內容反過來存放

    // 一、聲明一個新數組 newArr
    // 二、把舊數組索引號第4個取過來（arr.length - 1)，給新數組索引號第0個元素 (newArr.length)
    // 三、咱們採起 遞減的方式  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 函數的兩種聲明方式

一、自定義函數方式(命名函數)

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

    // 聲明定義方式
    function fn() {...}
    // 調用 調用函數的代碼既能夠放到聲明函數的前面，也能夠放在聲明函數的後面
    fn();

二、函數表達式方式(匿名函數）

        // 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 對象的相關概念

一、什麼是對象？

對象是指具體的事物，如字符串、數值、數組函數等；萬物皆對象；

對象是由屬性和方法組成的：

屬性：事物的特徵，在對象中用屬性來表示（經常使用名詞）
方法：事物的行爲，在對象中用方法來表示（經常使用動詞）

二、爲何須要對象？

保存一個值用變量；保存多個值，可使用數組；保存一我的的完整信息能夠用對象（至關於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建立對象；
利用構造函數建立對象；

一、利用字面量建立對象

    <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>

二、利用 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();

三、利用構造函數建立對象

由於前面兩種方式一次只能建立一個對象；

構造函數就是把咱們對象裏一些相同的屬性和方法抽象出來封裝到函數中；
構造函數用於建立某一類函數，首字母要大寫；與關鍵字 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 堆棧

堆棧空間分配區別：

　　一、棧（操做系統）：由操做系統自動分配釋放存放函數的參數值、局部變量的值等。其操做方式相似於數據結構中的棧；簡單數據類型存放到棧裏面；

　　二、堆（操做系統）：存儲複雜類型(對象)，通常由程序員分配釋放，若程序員不釋放，由垃圾回收機制回收

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. 這個輸出什麼 ?  張學友