《1》数组的创建
<script type="text/javascript">
//创建一个数组,并指定它的长度为5【虽然指定了数组长度为5,实际情况下仍然可以将元素存储在规定长度以外的,注意:这时数组长度会随之改变。】
var arrayObj = new Array(5);
var arrayObj = new Array(); // 创建一个数组
var arrayObj = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并赋值
var arrayObj = []; //使用字面量的方式创建一个数组;
var arrayObj = ["周晶", 25, "衡阳"]; //使用字面量的方式创建一个数组,并给它分配了3个元素
</script>
<script type="text/javascript">
//用字面量的方式声明一个数组,并给它分配了8个元素。第一个元素是一个对象,最后一个元素是是一个数组对象
var arrayObj = [
{ name: '周晶', age: 25 },
1,
2,
3,
[7, 8, new Object()],
'计算机编程',
25 + 25,
new Array('X', 'Y', 'Z')]; //使用字面两的方式创建一个数组,并给它分配了3个元素
alert(arrayObj.length); //打印出:8
alert(arrayObj[0].name); //打印出:周晶
alert(arrayObj[4][2]); //打印出[Object Object]
alert(arrayObj[7][1]); //打印出:Y
</script>
《2》数组的元素的访问
<script type="text/javascript">
var arrayObj = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并赋值
alert(arrayObj[1]); //这里是获取arrayObj这个元素的第二元素的值 打印出:2
arrayObj[2] = "这是新的值";
alert(arrayObj); //打印出:1,2,这是新的值,4,5,6
</script>
《3》数组元素的添加与删除
<script type="text/javascript">
var arrayObj = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并给它分配了6个元素
var arr2 = [7, 8, 9]
//-----------------------将元素添加到数组的后面
arrayObj.push(10); // 将10添加到arrayObj这个数组结尾,并返回数组新长度 //alert(arrayObj) 打印出:1, 2, 3, 4, 5, 6, 10
arrayObj.push(arr2); //将arr2这个数组添加到arrayObj这个数组的结尾,并返回数组新长度
//alert(arrayObj) 打印出:1,2,3,4,5,6,10,7,8,9
//注意:此时arrayObj这个数组的长度是8 而不是10,因为7,8,9这是一个数组,所以它们是算一个元素
//-----------------------将元素添加到数组的前面
arrayObj.unshift("A"); //将A添加到数组开始,数组中的元素自动后移,返回数组新长度
//alert(arrayObj) 打印出:A,1,2,3,4,5,6,10,7,8,9
arrayObj.unshift(["B", "C"]); //将B,C这两个元素(数组)添加到数组开始,数组中的元素自动后移,返回数组新长度
//alert(arrayObj)打印出:B,C,A,1,2,3,4,5,6,10,7,8,9
//-----------------------从数组的指定位置添加元素
// splice拼接函数(索引位置, 要删除元素的数量, 元素)
arrayObj.splice(2, 0, "D"); //将D添加到arrayObj这个数组索引位置为2的后面
//alert(arrayObj) 打印出:B,C,A,D,1,2,3,4,5,6,10,7,8,9
arrayObj.splice(3, 9, "E"); //从arrayObj这个数组索引位置为3的后面开始删9个元素,并将E添加到数组索引位置为3的后面
//alert(arrayObj) 打印出:B,C,A,D,E
arrayObj.splice(4, 0, arr2); //从arrayObj这个数组索引位置为4的后面添加一个名字为arr2的数组 //打印出:B,C,A,D,E,7,8,9
//-----------------------删除元素 | 从指定位置删除元素
arrayObj.splice(1, 4); //从arrayObj这个数组索引位置为1的后面开始删4个元素 alert(arrayObj) 打印出:B,C
var val = arr2.pop(); //移除arr2数组的最后一个元素并返回移除元素值 alert(arr2);打印出 7,8 alert(val);打印出:9
var val3 = arr2.shift(); //移除arr2数组的最前一个元素并返回该元素值,数组中元素自动前移。 alert(val3);打印出:8 alert(arr2); 7
var val2 = arrayObj.pop(); //移除arrayObj 数组的最后一个元素并返回移除元素的值 alert(arr2);打印出空 ; alert(val2) 打印出 B,C
//不是只移除最后一个元素吗?为什么这里移除了B,C ?其实我们在测试unshift()的时候就插入了["B", "C"]这个素组,而这个数组在arrayObje里只算一个元素的。所以当移除最后一个元素的时候就移除掉了B,C
</script>
《4》数组的截取与合并
<script type="text/javascript">
var arrayObj = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并赋值
var arr = [7, 8, 9];
//----------------------数组的截取
var arr2 = arrayObj.slice(2); //截取arrayObj这个数组索引位置为2开始的后面所有的元素 alert(arr2) 打印结果:3,4,5,6
//----------------------数组的合并
var arr3 = arrayObj.concat(arr); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
//alert(arr3); 打印出:1, 2, 3, 4, 5, 6, 7, 8, 9 alert(arr3.length);打印出:9
</script>
《5》数组的拷贝
<script type="text/javascript">
var arrayObj = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并赋值
var arr1 = arrayObj.slice(0); //返回arrayObj 这个数组的拷贝数组,注意arr1是一个新的数组,不是指向
var arr2 = arrayObj.concat(); //返回arrayObj 这个数组的拷贝数组,注意arr2是一个新的数组,不是指向
</script>
《6》数组元素的排序
<script type="text/javascript">
var arrayObj = new Array(1, 5, 3, 6, 2, 4); //创建一个数组并赋值
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址。 alert(arrayObj) 打印出:4,2,6,3,5,1
arrayObj.sort(); //对数组元素排序,返回数组地址 alert(arrayObj) 打印出: 1,2,3,4,5,6
</script>
《7》数组元素的字符串化
<script type="text/javascript">
var arrayObj = new Array(1, 5, 3, 6, 2, 4); //创建一个数组并赋值
var a = arrayObj.join("|"); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 | 隔开
alert(a); //打印出:1|5|3|6|2|4 【注意:join()的返回值是一个字符串,而不是数组】
alert(arrayObj.join()); //打印出:1,5,3,6,2,4
</script>
《8》数组对象的3个属性
1、length 属性
Length属性表示数组的长度,即其中元素的个数。因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。和其他大多数语言不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意。当length属性被设置得更大时,整个数组的状态事实上不会发生变化,仅仅是length属性变大;当length属性被设置得比原来小时,则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子:
<script type="text/javascript">
var arr = [12, 23, 5, 3, 25, 98, 76, 54, 56, 76]; //定义了一个包含10个数字的数组
alert(arr.length); //显示数组的长度10
arr.length = 12; //增大数组的长度
alert(arr.length); //显示数组的长度已经变为12
alert(arr[8]); //显示第9个元素的值,为56
arr.length = 5; //将数组的长度减少到5,索引等于或超过5的元素被丢弃
alert(arr[8]); //显示第9个元素已经变为"undefined"
arr.length = 10; //将数组长度恢复为10
alert(arr[8]); //虽然长度被恢复为10,但第9个元素却无法收回,显示"undefined"
</script>
由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置,它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量
同样,也可以使用一个未定义的数组元素(指索引超过或等于length的元素),这时,length属性的值将被设置为所使用元素索引的值加1。例如下面的代码:
<script type="text/javascript">
var arr = [12, 23, 5, 3, 25, 98, 76, 54, 56, 76]; //定义了一个包含10个数字的数组
alert(arr.length);
arr[15] = 34;
alert(arr.length);
</script>
代码中同样是先定义了一个包含10个数字的数组,通过alert语句可以看出其长度为10。随后使用了索引为15的元素,将其赋值为15,即arr[15]=34,这时再用alert语句输出数组的长度,得到的是16。无论如何,对于习惯于强类型编程的开发人员来说,这是一个很令人惊讶的特性。事实上,使用new Array()形式创建的数组,其初始长度就是为0,正是对其中未定义元素的操作,才使数组的长度发生变化。
由上面的介绍可以看到,length属性是如此的神奇,利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解,有助于在开发过程中灵活运用。
2、prototype 属性
返回对象类型原型的引用。prototype属性是 object共有的。
objectName.prototype
objectName参数是object对象的名称。
说明:用 prototype属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
对于数组对象,以以下例子说明prototype属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入Array.prototype, 并使用它。
<script type="text/javascript">
function array_max() {
var i,
max = this[0];
for (i = 1; i < this.length; i++) {
if (max < this[i])
max = this[i];
}
return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max();
</script>
该代码执行后,y 保存数组 x 中的最大值,或说 6。
数组的遍历 some,ForEach
<script>
var list = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并给它分配了6个元素
list.some((item, index) => {
if (item == 2) {
list.splice(index, 1);//删除list中2的项
return true; //在数组some方法中,如果return true就会立即终止这个数组的后续循环
}
})
alert(list); //打印出1,3,4,5,6
</script>
<script>
var list = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, {id:3,name:'王五'}]
list.forEach((item, index) => {
if (item.id == 2) {
list.splice(index, 1);
}
})
console.log(list); //此时list2这个数组中就只剩下2条数据了
</script>
数组项的查找(也是一种遍历)
<script>
var list = new Array(1, 2, 3, 4, 5, 6); //创建一个数组并给它分配了6个元素
//findIndex方法的作用是查询数组的元素
list.findIndex((item, index) => {
if (item == 2) {
list.splice(index, 1);
}
})
alert(list); //打印出1,3,4,5,6
var list2 = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, {id:3,name:'王五'}]
//findIndex方法的作用是查询数组的元素(所以它也是一种遍历)
list2.findIndex((item,index) => {
if (item.id==2) {
list2.splice(index, 1);
return true;
}
})
console.log(list2);//此时list2这个数组中就只剩下2条数据了
</script>