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