今天这节教程不仅仅是阐述ECMAScript3的部分功能,同时也会阐述有关EXMASctip5的很多新的功能。
一、创建
因为它是一个引用类型,自然就需要在使用前先构造它。
我将分成两种方式来讲述
I、构造函数
1.空的Array实例
var colors = new Array();
2.初始化存储数量的Array实例
1 var colors = new Array(20);
其中的参数"20"创建一个length为20个数组。
3.带数据的Array实例
1 var colors = new Array("red","black","white");
其中直接将需要存储的数据放在的构造函数中来初始化。
其实上面的构造函数中都可以省略"new"而是直接使用"var color = Array();" 即可。
II、字面量表示法
1.空的Array实例
var color = [];
2.带数据的Array实例
1 var colors = ["red","white","black"];
二、操作
既然我们已经创造的数组,那么我们就必须要学会如何去使用它。
下面我从访问数据、修改数据、删除数据和添加数据的方面来阐述。
I、访问数据
1.通过索引访问
1 var colors = ["red","black","white"]; 2 alert(colors[0]); //弹出"red" 3 alert(colors[3]); //弹出"undefined"
当我们访问的索引已经超过上限,那么最终返回给我们的值将是"undefined"字符串。
II、修改数据
1.通过索引修改
1 var colors = ["red","white","black"]; 2 colors[1] = "green"; 3 alert(colors[1]) // 返回"green"字符串
III、删除数据
1.从后向前将数组删除至指定大小
1 var colors = ["red","black","white"]; 2 alert(colors.length) //返回"3" 表示有三个数据 3 colors.length = 1; 4 alert(colors[0]); //返回"red"字符串 5 alert(colors[1]); //返回"undefined"字符串
这种方法很适合需要在从后向前删除大量数据的时候使用,仅仅是将"length"属性设置为删除后的数组大小即可。
2.删除指定的数据
1 var colors = ["red","black","white"]; 2 colors.splice(0,1); 3 alert(colors.length); // 弹出"2" 表示已经删除了一条数据 4 alert(colors[0]); // 弹出"black"字符串 因为"red"已经被删除
这里我们使用"splice"删除指定的数据,其实不仅仅只是删除一条数据。"splice"的第二个参数表示需要删除的数量(如果为零,则可以在指定的数据后面添加数据),第一个参数是数据的索引位置(基于0).
3.删除指定的数据并替换为指定的数据
1 var colors = ["red","white","black"]; 2 colors.splice(0,1,["green","blue"]); 3 alert(colors.length); //弹出"4"字符串 4 alert(colors[0]);// 弹出"green" 表示第一个数据已经被删除 5 alert(colors[1]); // 弹出"blue" 表示数据添加成功
这里我们使用了"splice"的第三个参数将我们需要添加的数据放到了第三个参数中。
IIII、添加数据
1.追加数据
1 var colors = ["red","white","black"]; 2 colors[colors.length] = "green"; 3 colors[colors,length] = "blue"; 4 alert(colors.length); //弹出"5"字符串 5 alert(colors[4]); //弹出"blue"字符串 表示数据成功追加
这里估计有人会困惑为什么用"colors,length",其实原理很简单,因为"length"属性永远比当前的最大索引大一,而且javascript又支持这种方式的赋值,自然就可以追加数据了。
1 var colors = ["red","white","black"]; 2 colors.concat(["white","blue"]); 3 alert(colors.length); //弹出"5" 表示追加成功
2.在指定位置添加数据
1 var colors = ["red","black","white"]; 2 colors.splice(1,0,["green","blue"]); 3 alert(colors.length); //弹出"5" 4 alert(colors[2]); //弹出"green"字符串
这里的这种方法前面已经阐述过,再次不在阐述
三、获得指定数据(进阶)
I、获得指定范围内的数据
1 var colors = ["red","black","white"]; 2 alert(colors.slice(1)); //弹出"black,white" 字符串
这里的"slice"用来获得指定位置的数据,这里只传递了一个参数,参数是要获得数据的索引。
1 var colors = ["red","black","white"]; 2 alert(colors.slice(1,2)); //弹出"black"字符春
这里使用的两个参数的"slice",读者可能会发现只有弹出了"black"字符串,却没有弹出"white"字符串。因为最后指定的索引"4"是不会显示的。只会显示开始索引的数据到第二个参数指定的索引(不包括)
II、获得指定分隔符数据
1 var colors = ["red","blue","white"]; 2 alert(colors.join("|")); //弹出"red|blue|white" 字符串
四、数据存储方式
I、栈
1 var colors = ["red","black","white"]; 2 colors.push("black"); //压栈 3 alert(colors.pop()); // 弹出"black" 字符串
II、队列
1 var colors = ["red","black","white"]; 2 colors.push("black"); 3 alert(colors.shift()); //弹出"red"字符串
1 var colors = ["red","white","black"]; 2 colors.unshift("blue"); 3 alert(colors.pop()); //弹出"red"字符串
以上只是部分内容,后面将会继续更新