第五章 引用类型 5.1Object - 5.2Array
[TOC]
第五章 引用类型
- 引用类型的值（对象）是引用类型的一个实例
- 引用类型和类相似，但不具备类和接口等基本结构
5.1 Object类型
创建Object的两种方式
- 1.new + Object构造函数
var person = new Object(); person.name = "Tom"; person.age = 29;- 2.对象字面量(考虑属性名可读性时采用)
var person = { name: "Tom", age: 29 };- 函数传递的参数，必须值：使用命名参数，可选值：使用对象字面量封装
访问对象属性的两种方式
console.log(person.name); //"Tom" 一般使用这种 console.log(person["name"]); //"Tom"- 区别是 方括号可通过变量访问
var propertyName = "name"; console.log(person[propertyName]);
5.2 Array类型
ECMAScript最常用类型
和其他语言区别相当大，ECMAScript数组每一项可保存任何类型，大小可动态调整
创建数组的两种方式
- new + Array构造函数
var colors = new Array(); var colors = new Array(20); var colors = new Array("red","blue","green");- 数组字面量
var colors = ["red","blue","green"]; var names = []; var values = [1,2,]; //不要这样 会创建2或3项 var options = [,,,]; //不要这样 会创建3或4项读取和设置
var colors = ["red","blue","green"]; console.log(colors[0]); //red colors[1] = "yellow";length
var colors = ["red","blue","green"]; console.log(colors.length); //3 colors.length = 2; //["red","blue"] colors[colors.length] = "green"; //["red","blue","green"]
5.2.1 数组检测
- 对于单一网页或一个全局作用域，使用instanceof检测
if(value instanceof Array){
//是数组
}
- 对于不同框架间数组传递，可能存在不同版本Array构造函数，使用Array.isArray()检测
- 兼容性：IE9+
if(Array.isArray(value)){
//是数组
}
5.2.2 转换方法
- 所有对象都具有 toString() toLocaleString() valueOf() 方法
var colors = ["red","blue","green"];
console.log(colors.toString()); //red,blue,green
var person1 = {
toLocaleString: function(){
return "Tom";
},
toString: function(){
return "Mike";
},
};
var person2 = {
toLocaleString: function(){
return "Davi";
},
toString: function(){
return "Sam";
},
};
var people = [person1,person2];
alert(people); //Mike,Sam
alert(people.toString()); //Mike,Sam
alert(people.toLocaleString()); //Tom,Davi
- join
var colors = ["red","blue","green"];
console.log(colors.join(',')) //red,blue,green
5.2.3 栈方法
- push() 末尾推入：返回推入后数组长度
- pop() 末尾删除最后一项：返回最后一项
var colors = new Array();
var counts = colors.push("red","green");
console.log(counts); //2
var item = colors.pop();
console.log(item); //green
console.log(colors.length); //1
5.2.4 队列方法
- shift() 删除第一项：返回第一项
- unshift() 插入第一项之前：返回新长度
var colors = ["red","yellow","green"];
var item = colors.shift();
console.log(item); //red
colors.unshift("blue");
console.log(colors); //["blue","yellow","green"]
5.2.5 重排序方法
- reverse() 反转数组
var values = [1,2,4,3,5];
values.reverse();
console.log(values); //5,3,4,2,1
- sort() 升序排序: 调用每个数组项toString()方法，得到字符串进行比较
var values = [0,1,5,10,15];
values.sort();
console.log(values); //0,1,10,15,5 因为字符编码"5">"10"
- 一般sort()配合比较函数使用
function compare(a, b){
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values); //0,1,5,10,15
- 数值类型或valueOf()方法返回数值类型的对象，可使用相减对比函数
function compare(a,b){
return b - a;
}
- 拓展 5.2.5冒泡排序
5.2.6 操作方法
- concat() 拼接
var colors = ["red","yellow","blue"];
var colors2 = colors.concat("green");
console.log(colors2); //["red","yellow","blue","green"]
colors2 = colors.concat(["white","orange"]);
console.log(colors2); //["red","yellow","blue","white","orange"]
- slice() [起始位置,结束位置) 创建新数组 不影响原数组
var colors = ["red","yellow","blue","orange","pink"];
colors.slice(1); //["yellow","blue","orange","pink"] 从位置1到结束
colors.slice(1,4); //["yellow","blue","orange"] 从1到3
var colors = ["red","yellow","blue","orange","pink"];
colors.slice(-1); //最后一项 ["pink"]
colors.slice(-2,-1); //["orange"]
colors.slice(-2,-3); //[]
- splice() 最强大的数组方法
- splice(起始位置,删除多少项,插入项*N)
- 始终返回一个数组 有删除时返回删除项 无删除返回空数组
var colors = ["red","green","blue"];
var remoted = colors.splice(0,1);
console.log(colors); //["green","blue"]
console.log(remoted); //["red"]
remoted = colors.splice(1,0,"yellow","orange");
console.log(colors); //["green","yellow","orange","blue"]
console.log(remoted); //[]
remoted = colors.splice(1,1,"red","purple");
console.log(colors); //["green","red","purple","orange","blue"]
console.log(remoted); //["yellow"]
5.2.7 位置方法
indexOf() lastIndexOf()
- 都接收两个参数：查找项，起点位置
- 对比时使用全等，找不到返回-1
- 区别是indexOf从数组开头向后查 lastIndexOf相反
indexOf()
var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4)) //3
console.log(numbers.lastIndexOf(4)) //5
console.log(numbers.indexOf(4,4)) //5
console.log(numbers.lastIndexOf(4,4)) //3
5.2.8 迭代方法
- every() some() filter() map() forEach()
- 都接收两个参数：运行函数、（可选）运行该函数的作用域对象--影响this的值
- 运行函数接收三个参数：数组项的值、该项在数组中的位置、数组对象本身
- every() 是否每一项都满足
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
return item > 2;
})
console.log(everyResult); //false
- some() 是否有一项满足
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
return item > 2;
})
console.log(someResult); //true
- filter() 过滤
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
return item > 2;
})
console.log(filterResult); //[3,4,5,4,3]
- map() 执行语句后组成的新数组
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
return item*2;
})
console.log(mapResult); //[2,4,6,8,10,8,6,4,2]
5.2.9 缩小方法
- reduce()、reduceRight() 都会迭代数组所有选项
- 都接收两个参数: 运行函数、（可选）缩小基础的初始值
- 运行函数接收4个参数：前一个值、当前值、项索引、数组对象本身
//数组所有项求和 从前往后加
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
})
console.log(sum); //15
//数组所有项求和 从后往前加
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
})
console.log(sum); //15
