您的位置：首页 > Web前端 > AngularJS

js对象、Array对象及angularjs的遍历

2017-02-27 10:32 302 查看

一、JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…

此外，JavaScript 允许自定义对象。

所有事物都是对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

● 布尔型可以是一个对象。

● 数字型可以是一个对象。

● 字符串也可以是一个对象

● 日期是一个对象

● 数学和正则表达式也是对象

● 数组是一个对象

● 甚至函数也可以是对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>

//对象只是一种特殊的数据。对象拥有属性和方法。
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"} //对象(有键值)
document.write(person.firstname + " is " + person.age + " years old.");
document.write("<br>");
//JavaScript for...in 语句循环遍历对象的属性。
for(a in person){//a为对象的键值，person为对象
document.write(a+"=="+person[a]+" ");//person[a]为对象的属性
}
document.write("<br>"); //////////////////////////

var message="Hello World!";
var x=message.length;
document.write(x);//访问对象属性

document.write("<br>"); //////////////////////////

var message="Hello world!";
var y=message.toUpperCase();
document.write(y);//访问对象方法

document.write("<br>"); /////////////////////////

var myCars=["Saab","Volvo","BMW"];      //数组（有下标）
for(b in myCars){//b为数组下标
document.write(b+"=="+myCars+" ");//myCars[b]:数组元素
}

</script>
</body>
</html>

结果：

结果： John is 50 years old. firstname==John lastname==Doe age==50 eyecolor==blue 12 HELLO WORLD! 0==Saab 1==Volvo 2==BMW

[b]二、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']//返回被删除的数据

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航