前端入門者，請(qǐng)~

本文是結(jié)合《Before Coding》（來(lái)自：Gitbook）讀書總結(jié)和自己的小Demo整合而成。

0. 概述

本文的架構(gòu)是由“D-D-P”三個(gè)部分組成——開發(fā)（Develop），設(shè)計(jì)（Design），產(chǎn)品（Product）。

開發(fā)部分主要從語(yǔ)言、平臺(tái)、工具這三個(gè)層面進(jìn)行講解。

語(yǔ)言：強(qiáng)類型（Java、Swift、Python 類）、弱類型（JavaScript 類）；
平臺(tái)：平臺(tái)會(huì)講解時(shí)下比較火的四大平臺(tái)的開發(fā)流程——Android應(yīng)用、iOS應(yīng)用、Web開發(fā)（HTML5/Web App）、微信開發(fā)。
工具：一些IDE、開發(fā)工具、代碼管理工具等。 （工欲善其事必先利其器）

1. HTML & CSS

工具推薦 （Tools）:

Sublime Text，Atom，Visual Studio Code，EditPlus，Nodepad++，WebStorm，DreamWeaver。其中，前面5款是輕量級(jí)的，只有幾M大小，后面兩款是IDE級(jí)的。

  • **Sublime Text ** 具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。Sublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。
    最最關(guān)鍵的是，它是免費(fèi)的！而且擁有強(qiáng)大的插件庫(kù)。
    下載地址：https://www.sublimetext.com/3
    Sublime Text 有哪些使用技巧？ - 知乎
    Sublime Text

HTML：以下表格列出了 HTML head 元素下的所有標(biāo)簽和功能：

標(biāo)簽 描述
<head> 定義了文檔的信息
<title> 定義了文檔的標(biāo)題
<base> 定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link> 定義了一個(gè)文檔和外部資源之間的關(guān)系
<meta> 定義了HTML文檔中的元數(shù)據(jù)
<script> 定義了客戶端的腳本文件
<style> 定義了HTML文檔的樣式文件

CSS :

CSS 是編寫頁(yè)面樣式的一種語(yǔ)言。用 HTML 寫好后的各個(gè)元素長(zhǎng)什么樣子，都是用 CSS 來(lái)完成的。比如：大小，邊框，背景，顏色，透明度，定位等等。

  • 使用CSS有三種方式
  • 內(nèi)聯(lián)樣式
<div style="width:100px; height:100px; border:1px solid lightblue;">I am a DIV</div>
  • 內(nèi)部引入
<head>
    .divStyle{
       width:100px;
       height:100px;
       border:1px solid lightblue;
}
</head>
<body>
       <div class = "divStyle">I am a DIV</div>
</body>
  • 外部引入
<head>
        <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class = "divStyle">I am a DIV</div>
</body>

/*在style.css中定義樣式*/
.divStyle{
       width:100px;
       height:100px;
       border:1px solid lightblue;
}
  • CSS 的優(yōu)先級(jí)
    css 是存在優(yōu)先級(jí)的，當(dāng)我們給一個(gè)元素定義多個(gè)css樣式時(shí)怎么辦？這時(shí)瀏覽器就會(huì)按照最高優(yōu)先級(jí)的css進(jìn)行渲染。

三種方式中，內(nèi)聯(lián)是最高級(jí)別的，而內(nèi)部引入和外部引入是平級(jí)的，平級(jí)的css樣式，后邊的覆蓋前邊的。當(dāng)然，還可以人為強(qiáng)制給最高優(yōu)先級(jí)，這時(shí)就需要加 !important 來(lái)實(shí)現(xiàn)了。

  • 推薦一個(gè)好玩的網(wǎng)站

禪意花園：一個(gè)很棒的Css參考網(wǎng)站，1個(gè)HTML文件，用幾百個(gè)Css文件渲染，從而展示出不同的風(fēng)格，也證明了Css的強(qiáng)大。

2. 計(jì)算機(jī)網(wǎng)絡(luò)了解

當(dāng)你在瀏覽器里請(qǐng)求一個(gè)網(wǎng)址時(shí)會(huì)發(fā)生什么？（以去商店購(gòu)物為例）

  1. 瀏覽器在域名系統(tǒng)服務(wù)器上找出存放網(wǎng)頁(yè)的服務(wù)器的實(shí)際地址（找出商店的位置）。
  2. 瀏覽器發(fā)送 HTTP 請(qǐng)求信息到服務(wù)器來(lái)請(qǐng)拷貝一份網(wǎng)頁(yè)到客戶端（你走到商店并下訂單）。這條消息，包括其他所有在客戶端和服務(wù)器之間傳遞的數(shù)據(jù)都是通過(guò)互聯(lián)網(wǎng)使用 TCP/IP 協(xié)議傳輸?shù)摹?/li>
  3. 服務(wù)器同意客戶端的請(qǐng)求后，會(huì)返回一個(gè)“200 OK”信息，意味著“你可以查看這個(gè)網(wǎng)頁(yè)，給你～”，然后開始將網(wǎng)頁(yè)的文件以數(shù)據(jù)包的形式傳輸?shù)綖g覽器（商店給你商品，你將商品帶回家）。
  4. 瀏覽器將數(shù)據(jù)包聚集成完整的網(wǎng)頁(yè)然后將網(wǎng)頁(yè)呈現(xiàn)給你（商品到了你的門口 —— 新東西，好棒！）。

URI、URL與URN

  • URI：Uniform Resource Identifier，統(tǒng)一資源標(biāo)識(shí)符；
  • *** URL：Uniform Resource Locator，統(tǒng)一資源定位符***；
  • URN：Uniform Resource Name，統(tǒng)一資源名稱。

URL 與 URN 是 URI 的子集，它們之間的關(guān)系如下圖。


URI、URL與URN
  • 協(xié)議（Protocol）： http: 是協(xié)議部分，表示瀏覽器使用 HTTP 協(xié)議對(duì) URL 進(jìn)行處理。
    當(dāng)然還有其他的協(xié)議，如mailto:// 代表的是使用郵件客戶端打開，ftp:// 則是使用 FTP 協(xié)議。
  • 域名（Domain Name）： www.example.com 是一個(gè)域名，也可以使用 IP 地址。
    瀏覽器直接指向域名所在的 Web 服務(wù)器。
  • 端口（Port）： :80 是端口。它表示用于訪問(wèn) Web 服務(wù)器上的“gate”。
    通常如果 Web 服務(wù)器使用 HTTP 協(xié)議，端口可以省略（HTTP 默認(rèn) 80 端口，HTTPS 默認(rèn) 443 端口）。
  • 文件路徑（Path to the file）： /path/to/myfile.html 是 Web 服務(wù)器上的資源路徑。
    在 Web 的早期，一個(gè)像這樣的路徑表示 Web 服務(wù)器上的物理文件位置。如今，它主要是一個(gè)抽象的Web服務(wù)器處理，沒有任何物理現(xiàn)實(shí)。
  • 參數(shù)（Parameters）： ?key1=value1&key2=value2 提供 Web 服務(wù)器的額外參數(shù)。
    這些參數(shù)是 & 分隔的** 鍵/值對(duì) **的列表。在返回資源之前，Web 服務(wù)器可以使用這些參數(shù)做額外的工作。每個(gè) Web 服務(wù)器都有自己的有關(guān)參數(shù)的規(guī)則，而唯一可靠的方法來(lái)知道一個(gè)特定的 Web 服務(wù)器是否處理參數(shù)是通過(guò)詢問(wèn) Web 服務(wù)器所有者。
  • 錨點(diǎn)（Anchor）： #SomewhereInTheDocument 叫做錨。
    它可以標(biāo)記出以獲取資源中的子資源，也就是該文檔的某一個(gè)位置。

3. JavaScript 簡(jiǎn)介

JavaScript 簡(jiǎn)介

JavaScript 是一門跨平臺(tái)、面向?qū)ο蟮妮p量級(jí)腳本語(yǔ)言。 在主機(jī)環(huán)境中， JavaScript 能夠通過(guò)連接環(huán)境對(duì)象而實(shí)現(xiàn)可控制編譯。

JavaScript 內(nèi)置了一個(gè)包含一系列對(duì)象的標(biāo)準(zhǔn)庫(kù)，比如數(shù)組、日期、數(shù)學(xué)和一個(gè)語(yǔ)言元素核心集合包括操作符，流程控制符以及語(yǔ)句等。JavaScript 的核心部分可以通過(guò)組合已有語(yǔ)言核心對(duì)象來(lái)擴(kuò)展語(yǔ)言以適應(yīng)不同用途，例如：

  • 客戶端的 JavaScript 通過(guò)提供控制瀏覽器及其文檔對(duì)象模型（DOM）的對(duì)象來(lái)擴(kuò)展語(yǔ)言核心。例如：客戶端版本直接支持應(yīng)用將元素放在在HTML表單中并且支持響應(yīng)用戶事件比如鼠標(biāo)點(diǎn)擊、表單提交和頁(yè)面導(dǎo)航。
  • 服務(wù)端的 JavaScript 則通過(guò)提供有關(guān)在服務(wù)器上運(yùn)行 JavaScript 的對(duì)象來(lái)可擴(kuò)展語(yǔ)言核心。例如：服務(wù)端版本直接支持應(yīng)用和數(shù)據(jù)庫(kù)通信，提供應(yīng)用不同調(diào)用間的信息連續(xù)性，或者在服務(wù)器上執(zhí)行文件操作。

服務(wù)端的 JavaScript 通常使用 **Node.js **技術(shù)。Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫(kù)生態(tài)系統(tǒng)。

JavaScript 和 Java

就像** “雷峰塔” 和 “雷鋒” 的關(guān)系， “老婆餅” 和 “老婆” **的關(guān)系。

JavaScript 和 Java 有一些共性但是在另一些方面有著根本性區(qū)別。JavaScript 名稱上酷似 Java，但是并沒有Java 的靜態(tài)類型和強(qiáng)類型檢查特性。

與 Java 通過(guò)聲明式構(gòu)建類的編譯時(shí)系統(tǒng)不同，JavaScript 采用基于少量的數(shù)據(jù)類型如數(shù)字、布爾、字符串值的運(yùn)行時(shí)系統(tǒng)。JavaScript 擁有基于原型的對(duì)象模型提供的動(dòng)態(tài)繼承，也就是說(shuō)，獨(dú)立對(duì)象的繼承是可以改變的。 JavaScript 支持匿名函數(shù)，函數(shù)也可以作為對(duì)象的屬性執(zhí)行。

與 Java 相比，Javascript 是一門形式自由的語(yǔ)言。你不必聲明所有的變量，類和方法。你不必關(guān)心方法是否是 共有、私有或者受保護(hù)的，也不需要實(shí)現(xiàn)接口。無(wú)需顯式指定變量、參數(shù)、方法返回值的數(shù)據(jù)類型。

Java 是基于類的編程語(yǔ)言，設(shè)計(jì)的初衷就是為了快速執(zhí)行和類型安全的。類型安全，舉例來(lái)說(shuō)，你不能將一個(gè)Java 整數(shù)變量轉(zhuǎn)化為一個(gè)對(duì)象引用，或者由J ava 字節(jié)碼訪問(wèn)專有存儲(chǔ)器。Java 基于類的模型，意味著程序包含專有的類及其方法。Java 的類繼承和強(qiáng)類型要求緊耦合的對(duì)象層級(jí)結(jié)構(gòu)。這些要求使得 Java 編程比 JavaScript 要復(fù)雜的多。

相比之下，JavaScript 語(yǔ)句精簡(jiǎn)、擁有動(dòng)態(tài)類型，為更多開發(fā)者提供了一種語(yǔ)法簡(jiǎn)單、內(nèi)置功能強(qiáng)大以及用最小需求創(chuàng)建對(duì)象的編程工具。

  • 具體對(duì)比如下表：
JavaScript Java
面向?qū)ο蟆２粎^(qū)分對(duì)象類型。通過(guò)原型機(jī)制繼承，任何對(duì)象的屬性和方法均可以被動(dòng)態(tài)添加。 基于類系統(tǒng)。分為類和實(shí)例，通過(guò)類層級(jí)的定義實(shí)現(xiàn)繼承。不能動(dòng)態(tài)增加對(duì)象或類的屬性或方法。
變量類型不需要提前聲明(動(dòng)態(tài)類型)。 變量類型必須提前聲明(靜態(tài)類型)。
所有對(duì)象均為實(shí)例。 類和實(shí)例是不同的事物。
通過(guò)構(gòu)造器函數(shù)來(lái)定義和創(chuàng)建一組對(duì)象。 通過(guò)類定義來(lái)定義類；通過(guò)構(gòu)造器方法來(lái)實(shí)例化類。
通過(guò) new 操作符創(chuàng)建單個(gè)對(duì)象。 相同。
指定一個(gè)對(duì)象作為原型并且與構(gòu)造函數(shù)一起構(gòu)建對(duì)象的層級(jí)結(jié)構(gòu) 通過(guò)類定義來(lái)定義現(xiàn)存類的子類，從而構(gòu)建對(duì)象的層級(jí)結(jié)構(gòu)。
遵循原型鏈繼承屬性。 遵循類鏈繼承屬性。
構(gòu)造器函數(shù)或原型指定初始的屬性集。允許動(dòng)態(tài)地向單個(gè)的對(duì)象或者整個(gè)對(duì)象集中添加或移除屬性。 類定義指定類的所有實(shí)例的所有屬性。無(wú)法在運(yùn)行時(shí)動(dòng)態(tài)添加屬性。

JS 語(yǔ)法規(guī)則：

  • ** 變量（var / let）、常量（const）、變量的作用域；**
  • 數(shù)據(jù)類型
    JavaScript * 語(yǔ)言可以識(shí)別下面 7 種不同類型的值：
    其中六種是    原型*的數(shù)據(jù)類型:
  • Boolean. 布爾值，true 和 false.
  • Null. 一個(gè)表明 null 值的特殊關(guān)鍵字。 JavaScript 是大小寫敏感的，因此 null 與 Null、NULL或其他變量完全不同。
  • Undefined. 變量未定義時(shí)的屬性。
  • Number. 表示數(shù)字，例如： 42 或者 3.14159。
  • String. 表示字符串，例如："Howdy"。
  • Symbol . 一種數(shù)據(jù)類型，它的實(shí)例是唯一且不可改變的。
    以及 Object 對(duì)象。
  • 數(shù)據(jù)類型的轉(zhuǎn)換
    舉例：字符串轉(zhuǎn)換為數(shù)字
    有一些** 有趣的方法 **可以將字符串轉(zhuǎn)換為對(duì)應(yīng)的數(shù)字。
  • parseInt() 和 parseFloat(), parseInt 僅能夠返回整數(shù)，所以使用它會(huì)丟失小數(shù)部分。另外，調(diào)用 parseInt 時(shí)最好總是帶上進(jìn)制參數(shù)，這個(gè)參數(shù)用于指定使用哪一種數(shù)制。
  • 單目加法運(yùn)算符 將字符串轉(zhuǎn)換為數(shù)字的另一種方法是使用單目加法運(yùn)算符。
"1.1" + "1.1" = "1.11.1" 
(+"1.1") + (+"1.1") = 2.2 // 注：加入括號(hào)為清楚起見，不是必需的。
  • 運(yùn)算符
    JavaScript 擁有 一元 和 二元 運(yùn)算符， 和一個(gè)特殊的** 三元 **運(yùn)算符（條件運(yùn)算符）。
  • 復(fù)合賦值運(yùn)算符（表格整理，便于直觀地查詢）

|名字|速記操作|等同于|
| :---: | :---: | :---: |
|賦值|x = y|x = y|
|加法賦值 |x + = y |x = x + y|
|減法賦值 |x - = y |x = x - y|
|乘法賦值 |x * = y |x = x * y|
|除法賦值 |x / = y |x = x / y|
|求余賦值 |x % = y |x = x % y|
|求冪賦值 |x ** = y |x = x ** y|
|左移位賦值|x << = y |x = x << y|
|右移位賦值 |x >> = y |x = x >> y|
|無(wú)符號(hào)右移位賦值| x >>> = y |x = x >>> y|
|按位與賦值 |x & = y |x = x & y|
|按位異或賦值 |x ^ = y |x = x ^ y|
|按位或賦值 |x ｜ y |x = x ｜ y |

    • 比較運(yùn)算符
      等于（==）；
      不等于（！=）；
      全等于（===）；
      不全等于（！==）；
      大于（>）；
      大于等于（>=）;
      小于（<）；
      小于等于（<=）.
  • 位運(yùn)算符
    按位與：a & b
    按位或：a | b
    按位異或：a ^ b
    按位反：~a
    左移：a << b
    右移：a >> b
    無(wú)符號(hào)右移：a >>> b
  • 邏輯運(yùn)算符
    與（&&） ； 或（| |） ； 非（！）。
    與： 全真才真，一假則假。 var result = "Cat" && "Dog"; // returns Dog
    或： 全假才假，一真則真。 var result = "Cat" || "Dog"; // returns Cat
    非： 真變假，假變真。
  • 條件運(yùn)算符（三目運(yùn)算符）
var result = 3 >2 ? console.log("This is True") : console.log("This is False");
  • ** 數(shù)組 (Array) **
  • ***創(chuàng)建數(shù)組 ***
    創(chuàng)建數(shù)組有三種方式，語(yǔ)法如下：
[element0, element1, ..., elementN]    //直接創(chuàng)建 
new Array(element0, element1[, ...[, elementN]])  //通過(guò) new 來(lái)創(chuàng)建 
new Array(arrayLength)   //arrayLength 為數(shù)組長(zhǎng)度
  • 訪問(wèn)數(shù)組
    JavaScript 數(shù)組的索引值（index）從0開始，即數(shù)組第一個(gè)元素的索引值為0。最后一個(gè)元素的索引值等于該數(shù)組的長(zhǎng)度減1（即 Array.length -1）。
var Array = [0,1,2,3,4,...,Array.length-1];
var element1 = Array[0];  //數(shù)組的第一個(gè)元素
var element2 = Array[1];  //數(shù)組的第二個(gè)元素
... ...
var lastElement = Array[Array.length-1];  //以此類推，數(shù)組的最后一個(gè)元素的索引值（下標(biāo)）是Array.length-1.
  • 獲取數(shù)組的長(zhǎng)度
    看過(guò)上邊的示例，應(yīng)該可以猜測(cè)到數(shù)組的長(zhǎng)度就是用 length 來(lái)獲取的。
    JavaScript array 的 length 屬性和其數(shù)字下標(biāo)是有關(guān)系的。幾個(gè)內(nèi)置數(shù)組的方法 (例如, join，slice，indexOf等) 被調(diào)用的時(shí)候會(huì)使用到 length 屬性。 有些別的方法 (例如，push，splice 等) 會(huì)改變 array 的 length 屬性。
var fruits = [];
fruits.push('banana', 'apple', 'peach');
console.log(fruits.length); // 3

當(dāng)你在 array 上使用一個(gè)合法的數(shù)組下標(biāo)，而且該下標(biāo)超出了當(dāng)前數(shù)組的大小的時(shí)候，引擎會(huì)根據(jù)其值自動(dòng)更新 array 的 length 屬性：

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(fruits.length); //名為fruits的數(shù)組的長(zhǎng)度為6

同樣的，減小 array 的 length 屬性會(huì)刪掉超出的元素：

fruits.length = 2;
console.log(fruits.length); // 2
  • 一起來(lái)做個(gè)小練習(xí)吧（此刻我在想誅仙，在想碧瑤，所以就拿這個(gè)來(lái)做Demo啦）
    1. 創(chuàng)建一個(gè)誅仙人物名的數(shù)組
  var zhuXian = ['zhangXiaoFan','biYao','linJingYu','luXueQi','daoXuan','tianBuYi','cangSong'];
  1. 獲取一下這個(gè)數(shù)組的長(zhǎng)度
  var length = zhuXian.length; // 7 個(gè)人
  1. 找到數(shù)組的第一個(gè)，最后一個(gè)是誰(shuí)？碧瑤在哪里？
var first = zhuXian[0];  //小凡，你是第一個(gè)
var last = zhuXian[zhuXian.length-1];  //最后一個(gè)竟然是蒼松道人
var Yao = zhuXian.indexOf("biYao");  // 1, 原來(lái)碧瑤在第二個(gè)位置
  1. 遍歷一下數(shù)組，和每個(gè)人見個(gè)面
//forEach用來(lái)遍歷，（）內(nèi)是對(duì)遍歷到的每個(gè)元素執(zhí)行的函數(shù)  
zhuXian.forEach(function (item, index) { 
  console.log(item, index); 
  });
/*  Output:
zhangXiaoFan  0
biYao         1
 linJingYu     2
luXueQi       3
daoXuan       4
tianBuYi      5
cangSong      6
*/
  1. 添加一個(gè)元素到數(shù)組的末尾push
var zhuXian_add = zhuXian.push('tianLingEr');
// zhuXian : ["zhangXiaoFan", "biYao", "linJingYu", "luXueQi", "daoXuan", "tianBuYi", "cangSong", "tianLingEr"]
// zhuXian_add : 8.
  1. 刪除數(shù)組末尾的元素pop
var zhuXian_remove = zhuXian.pop();
// zhuXian : ['zhangXiaoFan','biYao','linJingYu','luXueQi','daoXuan','tianBuYi','cangSong'];
// zhuXian_remove : "tianLingEr".
  1. 刪除數(shù)組前面的元素shift
var zhuXian_DelFirst = zhuXian.shift();
// zhuXian：["biYao", "linJingYu", "luXueQi", "daoXuan", "tianBuYi", "cangSong"]
// zhuXian_DelFirst : "zhangXiaoFan".
  1. 添加到數(shù)組的前面unshift
var zhuXian_unshift = zhuXian.unshift("xiaoFan");
// zhuXian：["xiaoFan", "biYao", "linJingYu", "luXueQi", "daoXuan", "tianBuYi", "cangSong"]
// zhuXian_unshift : 7
  1. 通過(guò)索引刪除或替換某個(gè)元素splice
// Array.splice(index,howMany,substitution)
// 從數(shù)組的索引值為index的那個(gè)元素開始，howMany個(gè)元素都被substitution替換。substitution可以是多個(gè)，用逗號(hào)隔開。
var zhuXian_position = zhuXian.splice(4,1);  //刪掉第四個(gè)元素開始的第一個(gè)元素，即第四個(gè)（"daoXuan"）自己。
// zhuXian：["xiaoFan", "biYao", "linJingYu", "luXueQi", "tianBuYi", "cangSong"] 
// zhuXian_position : ["daoXuan"]
  1. 復(fù)制一個(gè)數(shù)組slice
var zhuXian_copy = zhuXian.slice();
// zhuXian：["xiaoFan", "biYao", "linJingYu", "luXueQi", "tianBuYi", "cangSong"] 
// zhuXian_copy ：["xiaoFan", "biYao", "linJingYu", "luXueQi", "tianBuYi", "cangSong"]
  • 條件判斷語(yǔ)句
  • if...else
if(判斷條件){
          if 為 true 時(shí)執(zhí)行的語(yǔ)句        
}else{
          執(zhí)行情況為 else 的語(yǔ)句
   }

注意： 下面這些值將被計(jì)算出 false：
false
undefined
null
0
NaN
空字符串 ("") 當(dāng)傳遞給條件語(yǔ)句時(shí)，所有其他值，包括所有對(duì)象會(huì)被計(jì)算為 true 。

  • swith...case
    switch 語(yǔ)句允許一個(gè)程序求一個(gè)表達(dá)式的值并且嘗試去匹配表達(dá)式的值到一個(gè) case label。如果匹配成功，這個(gè)程序執(zhí)行相關(guān)的語(yǔ)句。switch 語(yǔ)句如下所示：
switch (expression) {
       case label_1: statements_1
       break; 
       case label_2: statements_2 
       break;
       ... 
       default: statements_def 
       break;
}

可選的 break 語(yǔ)句與每個(gè) case 語(yǔ)句相關(guān)聯(lián)， 保證在匹配的語(yǔ)句被執(zhí)行后，程序可以跳出 switch 并且繼續(xù)執(zhí)行 switch 后面的語(yǔ)句。
如果不寫 break , 程序?qū)⒗^續(xù)執(zhí)行 switch 中的語(yǔ)句。

  • 循環(huán)語(yǔ)句
    循環(huán)語(yǔ)句是一系列反復(fù)執(zhí)行直到符合特定條件的命令。JavaScript 支持for，do while，while這些循環(huán)語(yǔ)句，還有 Label（label 本身不是一個(gè)循環(huán)語(yǔ)句，但是經(jīng)常和這些語(yǔ)句一起使用）。另外，你可以在循環(huán)語(yǔ)句中使用break和continue語(yǔ)句。
    需要注意的是，還有另一種比較高級(jí)的循環(huán)語(yǔ)句：for each...in，但它是用來(lái)操作對(duì)象的。
  • for 語(yǔ)句
// 說(shuō)明
for (初始化表達(dá)式, 判斷繼續(xù)執(zhí)行的條件, 累計(jì)表達(dá)式) {
           循環(huán)內(nèi)執(zhí)行的語(yǔ)句
}
// Demo:使用了前面的示例數(shù)組（Array ：zhuXian）
for (var i = 0; i < zhuXian.length; i++){
       console.log(zhuXian[i]);
}
  • do...while 語(yǔ)句
    do...while 語(yǔ)句反復(fù)直到一個(gè)特定條件計(jì)算為假。do...while 語(yǔ)句如下所示：
do { 
       i += 1; console.log(i);
} while (i < 5);
// do 循環(huán)至少迭代一次，然后重復(fù)執(zhí)行直到 i 不再小于 5。
  • while 語(yǔ)句
    while 語(yǔ)句只要一個(gè)特定條件計(jì)算為真就執(zhí)行語(yǔ)句。如下所示：
// 下面的 while 循環(huán)只在 n 小于 3 的時(shí)候反復(fù)執(zhí)行：
  n = 0;
  x = 0;
  while (n < 3) {
       n++; 
       x += n;
 }

在每次迭代中，循環(huán)計(jì)數(shù)器 n 會(huì)增加 1 并會(huì)與 x 相加。因此，x 與 n 在每次迭代中的值為：
第一次執(zhí)行后：n=1，x=1；
第二次執(zhí)行后：n=2，x=3；
第三次執(zhí)行后：n=3，x=6。
在第三次執(zhí)行完成后，條件判斷 n<3 不再為 true，循環(huán)終止。

注意：要避免死循環(huán)；所以對(duì) while 的 條件限制 尤為重要。

** JavaScript 用 for...in, for each...in 和 with 語(yǔ)句來(lái)操作對(duì)象。**

  • for...in 循環(huán)可以遍歷對(duì)象中所有可枚舉的對(duì)象屬性(包括對(duì)象自有屬性和繼承的屬性)。不過(guò)需要注意的是，使用for...in 循環(huán)遍歷對(duì)象屬性時(shí)，返回的屬性會(huì)因?yàn)楦鱾€(gè)瀏覽器不同，導(dǎo)致對(duì)象屬性遍歷的順序與當(dāng)初構(gòu)建時(shí)的順序不同。
var obj = { "name":"lukas" , "job":"FE" , "age":24 }
for (item in obj){
      console.log(item);
}
/* Output:
name
 job
 age
*/
  • ***for each...in ***
    它和 for...in 相似，但是讓對(duì)象屬性的值遞回取得，而不是作用于它們的名字。
var sum = 0;
var obj = {num1: 15, num2: 13, num3: 8};
for each (var item in obj) {
      sum += item;
}
console.log(sum); // "36"  = 15+13+8
  • ** 函數(shù) · function **
  • 定義一個(gè)函數(shù)
    定義函數(shù)時(shí)，要先寫明function這個(gè)關(guān)鍵詞，然后注明函數(shù)名字（js里還有匿名函數(shù)，這時(shí)就不用函數(shù)名了），小括號(hào)里放參數(shù)，多個(gè)參數(shù)可以用英文逗號(hào)隔開，而大括號(hào)里就是函數(shù)體，具體的操作和功能都在這里完成。
function add(a,b){
      var result = a + b;
      return result;
}
// 定義完函數(shù)后，拿來(lái)調(diào)用就可以啦
add(3,4);  // 7
  • 函數(shù)的遞歸調(diào)用
    所謂遞歸，就是在函數(shù)內(nèi)自己調(diào)用自己，舉個(gè)栗子，我們用一個(gè)函數(shù)來(lái)實(shí)現(xiàn)階乘的計(jì)算。
function factorial(n) {
      n = parseInt(n); // 為了防止有小數(shù)輸入，這里進(jìn)行了取整，小數(shù)點(diǎn)后的全被截取掉。
      if ((n == 0) || (n == 1))
         return 1;
      else
         return (n * factorial(n - 1));  //我們?cè)谶@里用了遞歸，當(dāng)n > 1時(shí)，就再次調(diào)用自己
}
// 執(zhí)行結(jié)果
factorial(1);  // 1
factorial(3);  // 6
factorial(3.5);  // 6
  • 函數(shù)的作用域
    函數(shù)的作用域針對(duì)函數(shù)內(nèi)定義的變量。

在函數(shù)內(nèi)定義的變量不能從函數(shù)之外的任何地方取得，因?yàn)樽兞績(jī)H僅在該函數(shù)的域的內(nèi)部有定義。
相對(duì)應(yīng)的，一個(gè)函數(shù)可以取得在它的域中定義的任何變量和子函數(shù)。
換言之，定義在全局域中的函數(shù)可以取得所有定義在全局域中的變量。
而定義在一個(gè)函數(shù)內(nèi)部的子函數(shù)可以取得定義在其父函數(shù)內(nèi)的，或其父函數(shù)取得的任何變量。

變量的作用域無(wú)非就是兩種：全局變量 和 局部變量。
Javascript 語(yǔ)言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量。
另一方面，由于JS 的 “鏈?zhǔn)阶饔糜颉?/code>, 在函數(shù)外部自然無(wú)法讀取函數(shù)內(nèi)的局部變量。
當(dāng)我們需要從函數(shù)外部讀取內(nèi)部的變量時(shí)，就需要JS中一個(gè)重要的東西** “閉包” **了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,268評(píng)論 0贊 4
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,393評(píng)論 2贊 36
  • 第1章 認(rèn)識(shí)JS JavaScript能做什么？1.增強(qiáng)頁(yè)面動(dòng)態(tài)效果(如:下拉菜單、圖片輪播、信息滾動(dòng)等)2.實(shí)現(xiàn)...
    mo默22閱讀 1,324評(píng)論 0贊 5
  • 如果在幾年前，別人告訴我說(shuō)，生活需要自律，我不會(huì)相信。甚至我也不覺得自律有什么好的，覺得善良聰明才更重要。 現(xiàn)...
    lucyaphrq閱讀 797評(píng)論 0贊 2
  • 對(duì)于我來(lái)說(shuō)，日本這個(gè)國(guó)家，拋去歷史與政治來(lái)看，可以算是一個(gè)神奇的國(guó)家。它既創(chuàng)造出了保護(hù)世界的英雄，比如奧特曼；也可...
    麻麻說(shuō)人丑就該多讀書閱讀 846評(píng)論 0贊 0