【资源帖】数组操作及案例

[zptcsoft]

资源

1. 阮一峰 数组数据类型
2. 阮一峰 Array对象详解
3. MDN Array对象
4. 课程讲义

案例

1. 抽奖程序 案例
2. javascript使用Array数组实现省市区三级联动 文章

[zptcsoft]

数组的常规操作

//创建数组
//1. 直接量
var arrayTest=[];
var arrayTest1=[1,2,3,'4'];

//2. 构造函数方式
var arrayTest2=new Array();
var arrayTest3=new Array(10);
var arrayTest4=new Array(10,2,3,4,5,6,null,{},['a','b','c']);

//添加元素
//1. 直接为对应的索引值赋值
arrayTest4[9]='d';

//2. push方法数组末尾添加元素
arrayTest4.push('e');

//3. unshift方法在数组首部添加元素
arrayTest4.unshift(0);

//4. 遍历的方式添加元素
var arrayTest5=[];
for (var i = 0; i < 10; i++) {
    arrayTest5.push(i);
}
//console.log(arrayTest5);

//删除元素
//1. 使用length属性赋短值
arrayTest4.length=10;

//2. pop方法删除数组末尾元素
arrayTest4.pop();

//3. shift方法在删除数组首部元素
arrayTest4.shift();
console.log(arrayTest4);

//遍历数组
//for  稠密数组
for (var i = 0; i < arrayTest5.length; i++) {
    //console.log(arrayTest5[i]);
}
//undefined null等特殊值
arrayTest5[3]= null;
for (var i = 0; i < arrayTest5.length; i++) {
    if (arrayTest5[i]) {
        //console.log(arrayTest5[i]);
    }
    //or
    //if(!arrayTest5[i]) continue;
}
//for in 稀疏数组
var arrayTest6=[];
arrayTest6[0]='a';
arrayTest6[7]='b';
console.log(arrayTest6);
for(i in arrayTest4){
    if (Array.isArray(arrayTest4[i])) {
        for(j in arrayTest4[i]){
            console.log(arrayTest4[i][j])
        }
    }else{
        console.log(arrayTest4[i])
    }
}

[zptcsoft]

数组的属性和方法

//数组方法

//1. join方法，将数组中的所有元素转化为字符串并连接在一起
var str = arrayTest5.join(" ++ ");
//console.log(str);

//2.reverse方法，颠倒数组元素顺序
arrayTest5.reverse();

//3.sort排序
arrayTest5.sort();
//console.log(arrayTest5);

//4. concat 连接数组，返回新数组，原始数组不变
var arr01 = [1,2,3];
var arr02 = [4,5,6];
var arr03 = arr01.concat(arr02);
console.log(arr03);

//5.slice 截取数组，原始数组不变
console.log(arr03.slice(2,4),arr03);

//6.splice 删除 替换 添加
//删除元素
arr03.splice(3,1);
//替换元素
arr03.splice(3,1,9);
//添加元素
arr03.splice(3,0,9);
console.log(arr03);