js物件、Array物件及angularjs的遍歷
一、JavaScript 物件
JavaScript 中的所有事物都是物件：字串、數值、陣列、函式…
此外，JavaScript 允許自定義物件。
所有事物都是物件。
JavaScript 提供多個內建物件，比如 String、Date、Array 等等。 物件只是帶有屬性和方法的特殊資料型別。
● 布林型可以是一個物件。
● 數字型可以是一個物件。
● 字串也可以是一個物件
● 日期是一個物件
● 數學和正則表示式也是物件
● 陣列是一個物件
● 甚至函式也可以是物件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" 結果：
結果：
John is 50 years old.
firstname==John lastname==Doe age==50 eyecolor==blue
12
HELLO WORLD!
0==Saab 1==Volvo 2==BMW二、angularjs的遍歷：
angular有自己的生命週期。迴圈給一個 angular監聽的變數復值時。最好還是用angular自帶的迴圈方法:“angular.foreach”
1.針對物件迴圈(key,value)
var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
this.push(key + ': ' + value);
}, log);
expect(log).toEqual(['name: misko', 'gender: male']);2.針對物件陣列：指定開始遍歷
var objs =[{a:1},{a:2}];
angular.forEach(objs,function(data,index,array){
//data等價於array[index]
console.log(data.a+'='+array[index].a);
});引數如下：
objs：需要遍歷的集合
data:遍歷時當前的資料
index:遍歷時當前開始索引
array:需要遍歷的集合，每次遍歷時都會把objs原樣的傳一次。
3.針對物件陣列:遍歷全部
var objs =[{a:1},{a:2}];
angular.forEach(objs, function(data){
//data等價於array[index]
console.log(data.a);
});4.針對物件陣列:遍歷
var list = [
{id: 1, title: "部落格園", url: "http://www.cnblogs.com"},
{id: 2, title: "知乎", url: "http://www.zhihu.com"},
{id: 3, title: "codeproject", url: "http://www.codeproject.com/"},
{id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/"}
];
var t = 0;
//匹配返回的專案
angular.forEach(list, function (v, i) {
if (v.id == id) t = i;
//i：陣列item的下標，
//v: item，一個物件
});
console.log(list[t]);三、區別物件與陣列的使用：
例子一：
<!doctype html>
<html ng-app="a6_3">
<head>
<title>使用factory方法自定義服務</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
.show {
background-color: #ccc;
padding: 8px;
width: 260px;
margin: 10px 0px;
}
</style>
</head>
<body>
<div ng-controller="c6_3">
<div class="show">{{str('我是服務返回的內容')}}</div>
<div class="show">{{name(1)}}</div>
</div>
<script type="text/javascript">
angular.module('a6_3', [])
.factory('$outfun', function () {
return {
str: function (s) {
return s;
}
};
})
.factory('$outarr', function () {
return ['張三', '李四', '王二']
})
.controller('c6_3', function ($scope, $outfun, $outarr) {
$scope.str = function (n) {
return $outfun.str(n);
//$outfun為物件，$outfun.str為根據鍵獲取物件的值，n為方法引數
}
$scope.name = function (n) {
//$outarr為陣列,n為下標
}
});
</script>
</body>
</html>例子二：
<!doctype html>
<html ng-app="a6_2">
<head>
<title>使用$provide自定義服務</title>
<script src="../Script/angular.min.js"
type="text/javascript"></script>
<style type="text/css">
body {
font-size: 12px;
}
.show {
background-color: #ccc;
padding: 8px;
width: 260px;
margin: 10px 0px;
}
</style>
</head>
<body>
<div ng-controller="c6_2">
<div class="show">
服務返回的值：
<span>{{info('name')}}</span>
<span>{{info('sex')}}</span>
<span>{{info('score')}}</span>
</div>
</div>
<script type="text/javascript">
angular.module('a6_2', [], function ($provide) {/*內建服務$provide*/
$provide.factory('$output', function () {
var stu = {
name: '張三',
sex: '男',
score: '60'
};
return stu;
})
})
.controller('c6_2', function ($scope, $output) {
$scope.info = function (n) {
for (_n in $output) {
/*JavaScript for...in 語句迴圈遍歷物件的屬性。*/
if (_n == n) {/*物件的鍵*/
return ($output[_n]);
/*通過物件的鍵獲取物件的值*/
}
}
}
});
</script>
</body>
</html>四、JavaScript Array 物件
Array 物件
Array 物件用於在單個的變數中儲存多個值。
建立 Array 物件的語法：
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
Array 物件屬性
屬性 描述
constructor 返回對建立此物件的陣列函式的引用。
length 設定或返回陣列中元素的數目。
prototype 使您有能力向物件新增屬性和方法。
語法:
object.prototype.name=value
Array 物件方法
方法 描述
concat() 連線兩個或更多的陣列，並返回結果。
join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。
pop() 刪除並返回陣列的最後一個元素
push() 向陣列的末尾新增一個或更多元素，並【返回新的長度】。
reverse() 顛倒陣列中元素的順序。
shift() 刪除並返回陣列的第一個元素
slice() 從某個已有的陣列【返回選定的元素】
sort() 對陣列的元素進行排序
splice() 刪除元素，並向陣列新增新元素。
arrayObject.splice(index,deleteCount,item1,.....,itemX)
引數 描述
index 必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。
deleteCount必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。
item1, ..., itemX 可選。向陣列刪除的位置 新增的新專案。
toSource() 返回該物件的原始碼。
toString() 把陣列轉換為字串，並返回結果。
toLocaleString() 把陣列轉換為本地陣列，並返回結果。
unshift() 向陣列的開頭新增一個或更多元素，並返回新的長度。
valueOf() 返回陣列物件的原始值JavaScript中陣列slice和splice的對比：
1、slice
slice是指定在一個數組中的元素建立一個新的陣列，即原陣列不會變。
定義和用法
slice() 方法可提取字串的某個部分，並以新的字串返回被提取的部分。
語法
stringObject.slice(start,end);
//提取包括start不包括end的新的資料,
//不改變原有
//返回提取的資料引數 描述
start 要抽取的片斷的起始下標。如果是負數，則該引數規定的是從字串的尾部開始算起的位置。也就是說，-1 指字串的最後一個字元，-2 指倒數第二個字元，以此類推。
end 緊接著要抽取的片段的結尾的下標。若未指定此引數，則要提取的子串包括 start 到原字串結尾的字串。如果該引數是負數，那麼它規定的是從字串的尾部開始算起的位置。
返回值
一個新的字串。包括字串 stringObject 從 start 開始（包括 start）到 end 結束（不包括 end）為止的所有字元。
說明
String 物件的方法 slice()、substring() 和 substr() （不建議使用）都可返回字串的指定部分。slice() 比 substring() 要靈活一些，因為它允許使用負數作為引數。slice() 與 substr() 有所不同，因為它用兩個字元的位置來指定子串，而 substr() 則用字元位置和長度來指定子串。
還要注意的是，String.slice() 與 Array.slice() 相似。
陣列的 slice （ECMAScript 5.1 標準 15.4.4.10 節）非常類似於字串的 slice。根據規範，slice 需要兩個引數，起點和終點。它會返回一個包含了從起點開始，到終點之前之間所有元素的新陣列。(包含起點，不包含終點)
'abc'.slice(1,2) // "b" //擷取
[14, 3, 77].slice(1, 2) // [3]
var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x); // [14, 3, 77] //不改變原有
console.log(y); // [3] //返回擷取的資料
//如果不傳入引數二end，那麼將從引數一的索引位置開始擷取，
//一直到陣列尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3); //[1,2,3]
var c=a.slice(3); //[4,5,6]
//如果兩個引數中的任何一個是負數，array.length會和它們相加，
//試圖讓它們成為非負數，舉例說明：
//當只傳入一個引數，且是負數時，length會與引數相加，然後再擷取
var a=[1,2,3,4,5,6];
var b=a.slice(-1); //[6]
//當只傳入一個引數，是負數時,並且引數的絕對值大於等於陣列length時，會擷取整個陣列
var a=[1,2,3,4,5,6];
var b=a.slice(-6); //[1,2,3,4,5,6]
var c=a.slice(-8); //[1,2,3,4,5,6]
//當傳入兩個引數一正一負時，length也會先於負數相加後，再擷取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3); //[3]
//當傳入一個引數，大於等於length時，將返回一個空陣列
var a=[1,2,3,4,5,6];
var b=a.slice(6); //[]
var a="i am a boy";
var b=a.slice(0,6); //"i am a"
2、splice
定義和用法
splice() 方法用於插入、刪除或替換陣列的元素。
語法
arrayObject.splice(index,howmany,element1,.....,elementX)
//從index開始，刪除howmany個元素，插入element1...等元素。
//改變原有資料。
//返回刪除的資料。引數 描述
index
必需。規定從何處新增/刪除元素。
該引數是開始插入和（或）刪除的陣列元素的下標，必須是數字。
howmany
必需。規定應該刪除多少元素。必須是數字，但可以是 “0”。
如果未規定此引數，則刪除從 index 開始到原陣列結尾的所有元素。
element1 可選。規定要新增到陣列的新元素。從 index 所指的下標處開始插入。
elementX 可選。可向陣列新增若干元素。
返回值
如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的陣列。
說明
splice() 方法可刪除從 index 處開始的零個或多個元素，並且用引數列表中宣告的一個或多個值來替換那些被刪除的元素。
提示和註釋
註釋：請注意，splice() 方法與 slice() 方法的作用是不同的，splice() 方法會直接對陣列進行修改。
splice是JS中陣列功能最強大的方法，它能夠實現對陣列元素的刪除、插入、替換操作，返回值為被操作的值。
splice刪除：color.splice(1,2) （刪除color中的1、2兩項）；
splice插入：color.splice(1,0,’brown’,’pink’) （在color鍵值為1的元素前插入兩個值）；
splice替換：color.splice(1,2,’brown’,’pink’) （在color中替換1、2元素）；
雖然 splice（15.4.4.12 節）也需要（至少）兩個引數，但它的意義則完全不同。splice 還會改變原陣列。
[14, 3, 77].slice(1, 2)
//提取：從index1開始擷取到index2結束，返回擷取的資料： [3]
[14, 3, 77].splice(1, 2)
//替換：從index1開始，刪除2個元素、未新增元素，結果返回新資料： [3, 77]
var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x) // [14]//改變原有
console.log(y) // [3, 77]//返回被刪除
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');
//a=['a','e','f','c'],//改變原有資料
//b=['b']//返回被刪除的資料