《js高级程序设计》第三版——2.Array类型(检测数组,转换方法,栈方法,队列方法,重排序方法,操作方法,位置方法,迭代方法,归并方法

2. Array 类型

ECMAScript 数组的每一项可以保存任何类型的数据

创建方式:

  1. 使用Array函数
    var colors = new Array();
    var colors = new Array(20); //指定长度
    var colors = new Array(“red”, “blue”, “green”); //指定项

  2. 使用数组字面量表示法

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组
var values = [1,2,]; // 不要这样!这样会创建一个包含 2 或 3 项的数组
var options = [,,,,,]; // 不要这样!这样会创建一个包含 5 或 6 项的数组

在 IE 中,values 会成为一个包含 3 个项且每项的值分别为 1、2 和 undefined 的数组;在其他浏览器中,values 会成为一个包含 2 项且值分别为1 和 2 的数组。
最后一行代码可能会创建包含 5 项的数组(在 IE9+、Firefox、Opera、Safari 和 Chrome 中),也可能会创建包含 6 项的数组(在 IE8 及更早版本中).每一项都将获得 undefined 值.
结果与调用 Array 构造函数时传递项数在逻辑上是相同的.

在使用数组字面量表示法时,也不会调用 Array 构造函数(Firefox 3及更早版本除外)。

数组的 length 属性不是只读的。
因此,通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

检测数组

  1. instanceof:一个网页,或者一个全局作用域
    value instanceof Array

局限:
如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的 Array 构造函数。
如果从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

  1. Array.isArray()
    Array.isArray(value)

最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。

支持的浏览器有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+和 Chrome。

转换方法

所有对象都具有 toLocaleString()、toString()和 valueOf() 方法。

数组的 toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
valueOf():返回的还是数组。
toLocaleString(): 经常也会返回与 toString()和 valueOf()方法相同的值.

var person1 = {
 toLocaleString : function () {
 return "Nikolaos";
 },

 toString : function() {
 return "Nicholas";
 }
};
var person2 = {
 toLocaleString : function () {
 return "Grigorios";
 },

 toString : function() {
 return "Greg";
 }
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios 

alert()要接收字符串参数,所以它会在后台调用toString()方法. 这里调用了数组每一项的 toString()方法
调用数组的 toLocaleString()方法时,调用了数组每一项的toLocaleString()方法。

join()—只接收一个参数,即用作分隔符的字符串

var colors = ["red", "green", "blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue 

如果不给 join()方法传入任何值,或者给它传入 undefined,则使用逗号作为分隔符

如果数组中的某一项的值是 null 或者undefined,那么该值在 join()、toLocaleString()、toString()和 valueOf()方法返回的结果中以空字符串表示。

栈方法

push()pop()
让数组的行为类似于其他数据结构的方法

push(): 可以有多个参数,会逐个推入数组中。 返回数组长度
pop():没有参数。返回最后一位

队列方法

正向队列:
shift() 和 push()
shift(): 移除并返回第一项

反向队列:
unshift() 和 pop()
unshift(): 在对头插入一项,并返回数组长度

IE7 及更早版本对 JavaScript 的实现中存在一个偏差,其 unshift()方法总是返回 undefined 而不是数组的新长度。IE8 在非兼容模式下会返回正确的长度值。

重排序方法

reverse()sort()

reverse() : 将数组逆转
sort():按升序排列数组项.
会**调用每个数组项的 toString()**转型方法,然后比较得到的字符串,以确定如何排序。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5 

因此 sort()方法可以接收一个比较函数作为参
数,以便我们指定哪个值位于哪个值的前面。

比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果,因此减法操作就可以适当地处理所有这些情况

比较函数接收两个参数
看返回值:
1) 为负数,那么前面的数放在前面
2) 为正数,那么后面的数在前
3) 为0,不动

sort(function(a,b){
	return a - b; //升序
	return b - a; //降序
	return Math.radom() - 0.5; //乱序
	})

操作方法

不改变原数组:

  1. concat() 方法可以基于当前数组中的所有项创建一个新数组

先创建当前数组一个副本,然后将接收到的参数 添加到这个副本的末尾,后返回新构建的数组。

  • 没有传递参数,concat()只是 复制当前数组并返回副本。
  • 传递是一或多个数组,则该方法会将这些数组中的 每一项都添加到结果数组中。
  • 传递的值不是数组,这些值就会被简单地添加到结果数组的末尾
  1. slice(), 能够基于当前数组中的一或多个项创建一个新数组。

接受一或两个参数,即要返回项的起始和结束位置

  • 一个参数: 返回从指定位置到数组末尾的所有项
  • 两个参数: 返回起始和结束位置之间的项(不包括结束位置的项)
var colors = ["red", "green", "blue", "yellow", "purple"]; 
var colors2 = colors.slice(1); 
var colors3 = colors.slice(1,4); 
 
alert(colors2);   //green,blue,yellow,purple 
alert(colors3);   //green,blue,yellow

如果 slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位 置。

如果结束位置小于起始位置,则返回空数组

改变原数组:
splice(): 三种使用方式:

  1. 删除: 可以删除任意数量的项. splice(起始,删除个数)
var str = [0,1,2,3,4,5,6,7,8,9];
str.splice(3,4);
console.log(str);
//[0,1,2,7,8,9]
  1. 插入: 向指定位置插入任意数量的项.
    3个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项,可以再传入任意多个项. splice(起始位置,0,value1,value2)
var str = [1,2,3];
str.splice(1,0,'hello','splice');
console.log(str);
//[1,'hello','splice',2,3]
  1. 替换: 向指定位置插入任意数量的项,且同时删除任意数量的项
    3 个参数:起 始位置、要删除的项数和要插入的任意数量的项.splice(起始,项数,value1,value2)

str=[0,1,2,3,4,5,6,7,8,9];
str.splice(1,4,'hello');
console.log(str);
//[0,'hello',5,6,7,8,9]

splice()方法始终都会返回一个数组,包含从原始数组中删除的项

位置方法

indexOf(). lastIndexOf()
两个参数:要查找的项和(可选的)表示查找起点位置的索引。

indexOf() 方法从数组的开头(位 置 0)开始向后查找
lastIndexOf() 方法则从数组的末尾开始向前查找

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1. 比较过程使用 全等操作符

var numbers = [1,2,3,4,5,4,3,2,1]; 
alert(numbers.indexOf(4));        //3 
alert(numbers.lastIndexOf(4));    //5 
alert(numbers.indexOf(4, 4));     //5 
alert(numbers.lastIndexOf(4, 4)); //3 
var person = { name: "Nicholas" }; 
var people = [{ name: "Nicholas" }]; 
var morePeople = [person]; 
alert(people.indexOf(person)); //-1 
alert(morePeople.indexOf(person)); //0 

IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome

迭代方法---- 5个

每个方法都接收两个参数:要在每一项上运行的函数 和 (可选的)运行该函数的作用域对象(影响 this 的值)

传入这些方法中的函数会接收三个参数:数组项的值该项在数组中的位置数组对象本身。

  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true
  • map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
  • filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组
  • forEach():对数组中的每一项运行给定函数。这个方法没有返回值

以上方法都不会修改数组中的包含的值

every()和 some(),它们都用于查询数组中的项是否满足某个条件.

var numbers = [1,2,3,4,5,4,3,2,1]; 
var everyResult = numbers.every(function(item, index, array){     
	return (item > 2); 
}); 
alert(everyResult);    //false 
var someResult = numbers.some(function(item, index, array){     
	return (item > 2); 
}); 
alert(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); 
});  
alert(filterResult);  //[3,4,5,4,3] 

map():
创建包含的项与另一个数组一一对应的数组

var numbers = [1,2,3,5,6,2];
var mapResult = numbers.map(function(item,index,arra){
	return item * 2;
});
console.log(mapResult);
//[2,4,6,10,12,4]

forEach() 本质上与使用for循环一样

var numbers = [1,2,3,4,5,4,3,2,1]; 
numbers.forEach(function(item, index, array){     
	//执行某些操作  
}); 

IE9+、Firefox 2+、Safari 3+、Opera 9.5+和 Chrome

归并方法

reduce()和 reduceRight()。
会迭 代数组的所有项,然后构建一个终返回的值

**reduce()**方法从数组的第一项开始,逐个遍历 到后。
**reduceRight()**则从数组的后一项开始,向前遍历到第一项

接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值

函数接收 4 个参数:前一个值、当前值、项的索引和数组对象
这 个函数返回的任何值都会作为第一个参数自动传给下一项

使用 reduce()方法可以执行求数组中所有值之和的操作

var nums = [1,2,3,4];
var sum = nums.reduce(function(prev,cur,index,arr){
	return prev + cur;
});
console.log(sum); //10

第一次执行回调函数,prev 是 1,cur 是 2。第二次,prev 是 3(1加 2的结果),cur 是 3(数组 的第三项)。

reduceRight()的作用类似,只不过方向相反而已。第一次执行回调函数,prev 是 4,cur 是 3。

IE9+、Firefox 3+、Safari 4+、Opera 10.5和 Chrome

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值