一、前端MVC概要
1.1、庫與框架的區別
框架是一個軟件的半成品，在全局范圍內給了大的約束。庫是工具，在單點上給我們提供功能。框架是依賴庫的。AngularJS是框架而jQuery則是庫。
1.2、AMD與CMD
在傳統的非模塊化JavaScript開發中有許多問題：命名沖突、文件依賴、跨環境共享模塊、性能優化、職責單一、模塊的版本管理、jQuery等前端庫層出不窮，前端代碼日益膨脹
AMD規范及其代表：RequireJS
異步模塊定義（Asynchronous Module Definition），它是依賴前置 (因為依賴必須一開始就寫好)會先盡早地執行(依賴)模塊 , 相當於所有的require都被提前了
CMD規范及其代表：SeaJS
（Common Module Definition）模塊定義規范
一個模塊就是一個文件；它推崇依賴就近想什么時候require就什么時候加載，實現了 懶加載， 延遲執行 (as lazy as possible)
1.2、前端MVC概要
MVC的核心理念是：你應該把管理數據的代碼（Model）、業務邏輯的代碼（Controller）、以及向用戶展示數據的代碼（View）清晰的分離開
模型：代表應用當前的狀態
視圖：用於展示數據，用於接口
控制器：用來管理模型和視圖之間的關系
1.3、React
React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了。由於 React 的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。支持虛擬DOM（Virtual DOM）和組件化的開發。
ReactJS官網地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
1.4、Vue.js
Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API，作者是尤雨溪是中國人。
易用
已經會了HTML,CSS,JavaScript？即刻閱讀指南開始構建應用！
靈活
簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
性能
17kb min+gzip 運行大小
超快虛擬 DOM
最省心的優化
1.5、AngularJS簡介
AngularJS是一個前端MVVM框架。
angular的英文字面意思是：有角的; 用角測量的
AngularJS是協助搭建單頁面工程（SPA）的開源前端框架。它通過MVC模式使得開發與測試變得更容易。
AngularJS試圖成為WEB應用中的一種端對端的解決方案。它將指導開發整個應用。
AngularJS於2009年發布第一個版本，由Google進行維護，壓縮版94k。
1.3版后不再支持IE8
1.3版后不支持全局控制器
2.0版 alpha
git倉庫：https://github.com/angular/
http://www.angularjs.cn/中文社區
http://www.apjs.net/ 中文網
a web framework for modern web apps
1.5.1、AngularJS特點
1、功能強大，完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
2、聲明式風格、直觀、易於操作、訪問和實現
3、支持單元測試、本身基於TDD完成
4、致力於減輕開發人員在開發AJAX應用過程中的痛苦
5、angular 是最適合CRUD的SPA 單頁面的應用程序
不適合SEO、交互頻繁的，如游戲之類交互體驗網站
AngularJS的核心組件：
1.6、第一個AngularJS程序
如果要開發基於angularJS的項目，則先要添加對angularJS的引用，有如下幾個方法：
1)、去angular官網或git下載，地址：https://github.com/angular/
2)、使用cdn
3)、安裝node.js，使用npm獲取
示例代碼：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>angular01</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> name：<input type="text" ng-model="message"/> <p> {{"Hello "+message}} </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { //在全局作用域對象上添加屬性message，並指定值 $scope.message = "Angular!"; }); </script> </body> </html>
運行結果：
第一個AngularJS程序要注意的地方：
1、HTML里面沒有Class或者ID來標記在哪里添加事件監聽器
2、當HelloController把message設置成Hello World時，我們沒有必要注冊任何事件監聽或者編寫任何回調函數。
3、HelloController只是一個普通的JavaScript類，不需要繼承Angular所提供的任何東西。
4、HelloController可以獲取它所需要的$scope對象，則沒有必要去創建它，依賴注入
5、當文本框中的值發生變化時$scope對象中的值立即變化，模型與視圖雙向綁定
6、沒有必要自己調用HelloController的構造方法，或者指定何時去調用
1.7、定義AngularJS模塊
AngularJS模塊是一種容器、它把代碼隔離並組織成簡單、整潔、可復用的塊。
angular.module(name,[requires],[configFn]);
name：模塊名稱，必須指定
requires：依賴項，要被添加到注入器服務提供這個模塊使用的模塊名的數組，如果需要另一個模塊的功能，你需要將它添加在列表中，所有依賴的實在數組中指定依賴的模塊。
configFn:模塊配置階段調用的另一個函數。
//1、定義模塊，指定模塊名稱，依賴對象，配置函數 angular.module("mocule1",['$window','$http'],function(){ //服務提供者 $provider.value("PI","3.14"); }); //2、定義模塊，簡化，無依賴，無配置函數 var module2=angular.module("module2",[]); //3、獲得指定模塊 var module3=angular.module("module3"); //4、同時同義模塊與控制器 angular.module("module4",[]).controller("controller4",function(){ });
二、模板與數據綁定
2.1、顯示普通文本
angular中，把HTML文件被稱為模板
顯示文本
方法一：
<span>{{item.title}}</span>
方法二：
<span ng-bind="item.title"></span>
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> name：{{user.name}} </p> <p> hobby：<span ng-bind="user.hobby"></span> </p> <p> info：{{user.info}} </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { //在全局作用域對象上添加對象，並指定值 $scope.user = { "name": "zhangguo", "hobby": "coding", "info": "<hr/>detail" }; }); </script> </body> </html>
結果：
當加載慢時的效果：
方法二與方法一的區別：
使用模塊標簽{{ }}加載慢或渲染慢時用戶將看到標簽，而ng-bind不會，但是使用模塊要方便。
2.2、顯示HTML
為了安全默認的HTML都將被轉義。$sce 是 angularJS 自帶的安全處理模塊，$sce.trustAsHtml(str) 方法便是將數據內容以 html 的形式進行解析並返回。將此過濾器添加到 ng-bind-html 、data-ng-bind-html? 所綁定的數據中，便實現了在數據加載時對於 html 標簽的自動轉義。
示例代碼：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> {{info}} </p> <p> ng-bind：<span ng-bind="info"></span> </p> <p> ng-bind-html：<span ng-bind-html="info"></span> </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope,$sce) { $scope.info=$sce.trustAsHtml("<h2>html info</h2>"); }); </script> </body> </html>
運行結果：
2.3、ng-model
使用ng-model屬性把元素綁定到模型屬性上，如果$scope上不存在，則立即創建，如果存在則綁定，允許同時綁定到多個HTML元素上。
<input type="checkbox" ng-model="isChecked"/>
$scope中有isChecked與沒有isChecked的區別
ngModel 會嘗試使用表達式的計算結果來綁定到當前域上的屬性。如果屬性在當前域上不存在，它會立即創建並添加到當前域
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> 同意： <input type="checkbox" ng-model="isChecked"/> </p> 允許：<input type="text" ng-model="isChecked"/> <p> {{isChecked}} </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { $scope.isChecked=true; }); </script> </body> </html>
結果：
要注意$scope中是否存在該模型，如果有則會初始化數據。
2.4、ng-change
ng-change屬性來指定一個控制器方法，變化時觸發
當用戶改變輸入時計算給出的表達式。表達式會被立即計算，不像 JavaScript的onchange事件只會在最后一次改變時觸發(通常，當用戶離開表單元素或按回車鍵時)。當值的變化來自於模型時，不會對表達式進行計算。
這個指令需要同時給出 ngModel
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> 本金： <input type="text" ng-model="money" ng-change="getInterest()"/> </p> <p> 利息：{{interest}} </p> <p> 總收益：{{interest*1+money*1}} </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { $scope.getInterest=function(){ $scope.interest=$scope.money*Math.random(); } }); </script> </body> </html>
結果：
2.5、$watch
用於監視對象的變化，可以獲得變化前的值與變化后的值。
上面的做法有一個潛在的問題，只有當用戶在文檔框中輸入值的時候我們才會去計算，如還有更多的輸入框，每一個輸入框都要綁定。
$scope.$watch(‘fund.interest’,callback);
示例代碼：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> 本金： <input type="text" ng-model="money"/> </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { $scope.$watch("money",function(newVal,old){ console.log("舊值："+old+" 新值："+newVal); }); }); </script> </body> </html>
運行結果：
2.6、事件
angularjs的內置指令中有許多封裝好的事件指令，如下所示：
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="submitExample"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <form ng-submit="submit()" ng-controller="ExampleController"> Enter text and hit enter: <input Type="text" ng-model="text" name="text" ng-copy="copy()" /> <input Type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre> <p> <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value"> <br/> 是否復制: {{copied}} <br/><br/> <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'> <br/> 是否粘貼: {{paste}} </p> </form> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> angular.module('submitExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.list = []; $scope.text = 'hello'; $scope.submit = function() { if($scope.text) { $scope.list.push(this.text); $scope.text = ''; } }; }]); </script> </body> </html>
結果：
ng-submit它可以防止默認動作(這對表單意味着向服務器發送請求和重新加載當前頁)，但只在表單沒包含action, data-action或x-action屬性時。
2.7、ng-repeat迭代
ngRepeat指令為集合中的每項實例化一個模板。每個模板的實例擁有自己的域，使用循環變量指向當前集合項上，$index指向當前項的索引或鍵值。
特殊屬性應用於每個模板實例的本地域上，包括：
對象集合的修改將會自動更新視圖
為了解決重復元素序列只有一個父元素的情況，ngRepeat (不同於其它ng指令)支持擴展重復范圍，通過使用ng-repeat-start 和 ng-repeat-end分別定義明確的開始和結束點。ng-repeat-start 指令工作方法類似ng-repeat，但是會重復從標簽定義本身位置開始到ng-repeat-end定義位置之間的所有HTML代碼。
<header ng-repeat-start="item in items"> Header {{ item }} </header> <div class="body"> Body {{ item }} </div> <footer ng-repeat-end> Footer {{ item }} </footer>
如果上面例子中的items變量的值為['A','B']，則輸出結果為：
<header> Header A </header> <div class="body"> Body A </div> <footer> Footer A </footer> <header> Header B </header> <div class="body"> Body B </div> <footer> Footer B </footer>
示例代碼：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <h2> 用戶列表 </h2> <ul> <li ng-repeat="user in users | orderBy:'reverse' | filter:'c'"> <p ng-if="$odd" style="background: lightblue;"> {{$index}} {{user}} </p> <p ng-if="$even" style="background: lightgreen;"> {{$index}} {{user}} </p> </li> </ul> <p> <input ng-model="user" /><button ng-click="add()">添加</button> </p> <p> {{users}} </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { $scope.users=["tcom","mark","rosce","jack","lucy"]; $scope.add=function(){ $scope.users.push($scope.user); } }); </script> </body> </html>
運行結果：
練習：
實現對一個學生對象數組進行如下操作
添加、刪除、修改、搜索、排序
參考代碼：
<div ng-init="friends = [ {name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30, gender:'girl'}, {name:'Johanna', age:28, gender:'girl'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Peter', age:95, gender:'boy'}, {name:'Sebastian', age:50, gender:'boy'}, {name:'Erika', age:27, gender:'girl'}, {name:'Patrick', age:40, gender:'boy'}, {name:'Samantha', age:60, gender:'girl'}]"> 我有 {{friends.length}}個朋友 他們是: <input Type="text" ng-model="q" placeholder="filter friends..." /> <ul> <li class="animate-repeat" ng-repeat="friend in friends | filter:q"> [{{$index + 1}}] {{friend.name}}他{{friend.age}}歲了 </li> </ul> </div>
運行結果：
2.8、ng-show與ng-hide
用於顯示與隱藏元素。
ng-show=true 顯示
ng-hide=true 隱藏
ng-if 與 show/hide的原理是不一樣的
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> 同意： <input type="checkbox" ng-model="isChecked" /> </p> 允許：<input type="text" ng-model="isChecked" /> <p> {{isChecked}} </p> <p> <span ng-show="isChecked">顯示</span> </p> <p> <span ng-hide="isChecked">隱藏</span> </p> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { $scope.isChecked = true; }); </script> </body> </html>
結果：
2.9、ng-class與ng-style
指定類樣式與行內樣式。
ngClass指令允許你動態設置HTML元素的CSS類，通過綁定到一個包含要添加的所有類的表達式。
這個指令有三種使用方式，這三種方式取決於表達式計算結果：
如果表達式結果為字符串，則字符串為使用空格分隔的一個或多個類名。
如果表達式結果為一個數組，則數組中每個元素為使用空格分隔的一個或多個類名字符串。
如果表達式結果為一個對象，對象中的每個key-value中如果鍵值為真時則鍵名作為類名。
這個指令不會添加重復的類，如果這個類已經存在的話。
當表達式改變時，以前添加的類會被移除，並且只會添加之后新產生的類。
ngStyle指令允許你在HTML元素上條件化設置CSS樣式。
<li ng-class="{bg1:$odd,bg2:$even}"></li>
當條件為true時類樣式出現
<span ng-style="myStyle">Sample Text</span>
myStyle={color:'red'}
示例：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>模板與數據綁定</title> <style type="text/css"> .border{ border: 10px solid lightblue; } .bg{ background: lightgreen; } .color{ color: orangered; font-size: 20px; font-family: "microsoft yahei"; } div{ min-height: 100px; } </style> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="HelloController"> <p> <input type="checkbox" ng-model="isBorder"/>邊框 <input type="checkbox" ng-model="isBg"/>背景 <input type="checkbox" ng-model="isColor"/>前景 <button type="button" ng-click="cls1={'border-radius':'15px'}">圓角</button> </p> <div ng-class="{border:isBorder,bg:isBg,color:isColor}" ng-style="cls1"> Hello ng-class and ng-style </div> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定義模塊，指定依賴項為空 var app01 = angular.module("app01", []); //定義控制器，指定控制器的名稱，$scope是全局對象 app01.controller("HelloController", function($scope) { }); </script> </body> </html>
結果：
2.10、ng-src與ng-href
用於指定資源路徑。
在src或者href屬性上簡單使用{{}}綁定時無法很好運行，出現404錯誤因為圖片加載時可能模板還未被替換成真實路徑。
由於瀏覽器會優先使用並行的方式來加載圖片和其它內容，所以angular沒有機會攔截到數據綁定請求。
<img src="{{product.picture}}" />
<img ng-src="{{product.picture}}"/>
<a ng-href="{{url}}"></a>
總之在模板中如果需要使用到src屬性與href屬性盡量使用ng-src與ng-href避免400錯誤。
2.11、表達式
在模板中使用表達式是為了以充分的靈活性在模板、業務邏輯和數據之間建立聯系，同時又能避免讓業務邏輯滲透到模板中。
算術：+ - * / %
比較：== != > < >= <=
邏輯：&& || !
位運算：\^ & |
模板解析器中沒有for,while,if,throw，具有容錯性
盡量不要把業務邏輯放到模板中，清晰的區分視圖和控制器之間的職責可以保證含義明確並易於測試。
練習：購物車
1、雙向綁定集合中的數據
2、執行移除事件
3、隔行換色、使用angularJS完成
4、點擊數量與小計時進行排序（選做）
三、區分UI和控制器的職責
控制器的職責：
1、為應用中的模型設置初始狀態
2、通過$scope對象把數據模型和函數暴露給視圖（UI模板）
3、監視模型其余部分的變化，並采取相應的動作，雙向綁定
為了讓控制器保持輕量可管理狀態，建議在視圖的每一塊功能區域創建一個控制器如，MenuController、PathController
可以嵌套控制器，適OO中的繼承特性
示例代碼：
<!DOCTYPE html> <!--指定angular托管的范圍--> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>區分UI和控制器的職責</title> </head> <body> <!--指定控制器的作用范圍--> <div ng-controller="LevelA"> <h3>{{title}}</h3> valueA:{{valueA}} <button type="button" ng-click="inc()">加</button> <div ng-controller="LevelB"> <h3>{{title}}</h3> valueA:{{valueA}}<br/> valueB:{{valueB}} <button type="button" ng-click="inc()">加</button> <div ng-controller="LevelC"> <h3>{{title}}</h3> valueA:{{valueA}}<br/> valueB:{{valueB}}<br/> valueC:{{valueC}} <button type="button" ng-click="inc()">加</button> </div> </div> </div> <!--引入angularjs框架--> <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> angular.module("app",[]).controller("LevelA",function($scope){ $scope.title="LevelA"; $scope.valueA=1; $scope.inc=function(){ $scope.valueA++; } }).controller("LevelB",function($scope){ $scope.title="LevelB"; $scope.valueB=1; $scope.inc=function(){ $scope.valueB++; } }).controller("LevelC",function($scope){ $scope.title="LevelC"; $scope.valueC=1; $scope.inc=function(){ $scope.valueC++; } }) </script> </body> </html>
運行結果：
四、javascript之數組操作
4.1、創建
var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);
示例：
var array11 = new Array(); //空數組 var array12 = new Array(5); //指定長度，可越界 var array13 = new Array("a","b","c",1,2,3,true,false); //定義並賦值 var array14=[]; //空數組，語法糖 var array15=[1,2,3,"x","y"]; //定義並賦值
4.2、訪問與修改
var testGetArrValue=arrayObj[1];
arrayObj[1]= "值";
//4.2、訪問與修改 array12[8]="hello array12"; //賦值或修改 console.log(array12[8]); //取值 //遍歷 for (var i = 0; i < array13.length; i++) { console.log("arrayl3["+i+"]="+array13[i]); } //枚舉 for(var i in array15){ console.log(i+"="+array15[i]); //此處的i是下標 }
結果：
4.3、添加元素
將一個或多個新元素添加到數組未尾，並返回數組新長度
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
將一個或多個新元素添加到數組開始，數組中的元素自動后移，返回數組新長度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);
將一個或多個新元素插入到數組的指定位置，插入位置的元素自動后移，返回被刪除元素數組，deleteCount要刪除的元素個數
arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])
示例代碼：
//4.3、添加元素 var array31=[5,8]; //添加到末尾 array31.push(9); var len=array31.push(10,11); console.log("長度為："+len+"——"+array31); //添加到開始 array31.unshift(4); var len=array31.unshift(1,2,3); console.log("長度為："+len+"——"+array31); //添加到中間 var len=array31.splice(5,1,6,7); //從第5位開始插入，刪除第5位后的1個元素，返回被刪除元素 console.log("被刪除："+len+"——"+array31);
運行結果：
4.4、刪除
移除最后一個元素並返回該元素值
arrayObj.pop();
移除最前一個元素並返回該元素值，數組中元素自動前移
arrayObj.shift();
刪除從指定位置deletePos開始的指定數量deleteCount的元素，數組形式返回所移除的元素
arrayObj.splice(deletePos,deleteCount);
示例：
//4.4、刪除 var array41=[1,2,3,4,5,6,7,8]; console.log("array41："+array41); //刪除最后一個元素，並返回 var e=array41.pop(); console.log("被刪除："+e+"——"+array41); //刪除首部元素，並返回 var e=array41.shift(); console.log("被刪除："+e+"——"+array41); //刪除指定位置與個數 var e=array41.splice(1,4); //從索引1開始刪除4個 console.log("被刪除："+e+"——"+array41);
結果：
4.5、截取和合並
以數組的形式返回數組的一部分，注意不包括 end 對應的元素，如果省略 end 將復制 start 之后的所有元素
arrayObj.slice(start, [end]);
將多個數組（也可以是字符串，或者是數組和字符串的混合）連接為一個數組，返回連接好的新的數組
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);
示例：
//4.5、截取和合並 var array51=[1,2,3,4,5,6]; var array52=[7,8,9,0,"a","b","c"]; //截取，切片 var array53=array51.slice(2); //從第3個元素開始截取到最后 console.log("被截取："+array53+"——"+array51); var array54=array51.slice(1,4); //從第3個元素開始截取到索引號為3的元素 console.log("被截取："+array54+"——"+array51); //合並 var array55=array51.concat(array52,["d","e"],"f","g"); console.log("合並后："+array55);
結果：
4.6、拷貝
返回數組的拷貝數組，注意是一個新的數組，不是指向
arrayObj.slice(0);
返回數組的拷貝數組，注意是一個新的數組，不是指向
arrayObj.concat();
因為數組是引用數據類型，直接賦值並沒有達到真正實現拷貝，地址引用，我們需要的是深拷貝。
4.7、排序
反轉元素（最前的排到最后、最后的排到最前），返回數組地址
arrayObj.reverse();
對數組元素排序，返回數組地址
arrayObj.sort();
arrayObj.sort(function(obj1,obj2){});
示例：
var array71=[4,5,6,1,2,3]; array71.sort(); console.log("排序后："+array71); var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}]; array72.sort(function(user1,user2){ return user1.age<user2.age; }); console.log("排序后："); for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);
結果：
4.8、合並成字符
返回字符串，這個字符串將數組的每一個元素值連接在一起，中間用 separator 隔開。
arrayObj.join(separator);
示例代碼：
//4.8、合並成字符與將字符拆分成數組 var array81=[1,3,5,7,9]; var ids=array81.join(","); console.log(ids); //拆分成數組 var text="hello nodejs and angular"; var array82=text.split(" "); console.log(array82);
運行結果：
所有代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>數組操作</title> </head> <body> <script type="text/javascript"> //4.1、創建 var array11 = new Array(); //空數組 var array12 = new Array(5); //指定長度，可越界 var array13 = new Array("a","b","c",1,2,3,true,false); //定義並賦值 var array14=[]; //空數組，語法糖 var array15=[1,2,3,"x","y"]; //定義並賦值 //4.2、訪問與修改 array12[8]="hello array12"; //賦值或修改 console.log(array12[8]); //取值 //遍歷 for (var i = 0; i < array13.length; i++) { //console.log("arrayl3["+i+"]="+array13[i]); } //枚舉 for(var i in array15){ //console.log(i+"="+array15[i]); //此處的i是下標 } //4.3、添加元素 var array31=[5,8]; //添加到末尾 array31.push(9); var len=array31.push(10,11); console.log("長度為："+len+"——"+array31); //添加到開始 array31.unshift(4); var len=array31.unshift(1,2,3); console.log("長度為："+len+"——"+array31); //添加到中間 var len=array31.splice(5,1,6,7); //從第5位開始插入，刪除第5位后的1個元素，返回被刪除元素 console.log("被刪除："+len+"——"+array31); //4.4、刪除 var array41=[1,2,3,4,5,6,7,8]; console.log("array41："+array41); //刪除最后一個元素，並返回 var e=array41.pop(); console.log("被刪除："+e+"——"+array41); //刪除首部元素，並返回 var e=array41.shift(); console.log("被刪除："+e+"——"+array41); //刪除指定位置與個數 var e=array41.splice(1,4); //從索引1開始刪除4個 console.log("被刪除："+e+"——"+array41); //4.5、截取和合並 var array51=[1,2,3,4,5,6]; var array52=[7,8,9,0,"a","b","c"]; //截取，切片 var array53=array51.slice(2); //從第3個元素開始截取到最后 console.log("被截取："+array53+"——"+array51); var array54=array51.slice(1,4); //從第3個元素開始截取到索引號為3的元素 console.log("被截取："+array54+"——"+array51); //合並 var array55=array51.concat(array52,["d","e"],"f","g"); console.log("合並后："+array55); //4.7、排序 var array71=[4,5,6,1,2,3]; array71.sort(); console.log("排序后："+array71); var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}]; array72.sort(function(user1,user2){ return user1.age<user2.age; }); console.log("排序后："); for(var i in array72) console.log(array72[i].name+"，"+array72[i].age); //4.8、合並成字符與將字符拆分成數組 var array81=[1,3,5,7,9]; var ids=array81.join(","); console.log(ids); //拆分成數組 var text="hello nodejs and angular"; var array82=text.split(" "); console.log(array82); </script> </body> </html>