前端-JS数组

数组

概念：javascript中的数组(Array) 与其他语言中的数组是有很大区别的，js中的数组 可以存放任意的数据类型，数组的大小也是随着元

素的增加动态增加的。

1.创建数组的几种方式

*采用Array构造函数

//基本用法
let colors = new Array();

//也可以直接指定数组的长度
let colors  = new Array(20);  //指定了一个长度为20的数组 

//也可以直接写数组的元素
let colors  = new Array("red","yellow","white");

*采用数组字面量的方式创建数组

let arr  = ['red','yellow','green'];

//调用方式
let result1 = arr[0];
let result2 = arr[1];

//多种类型元素的数组

let arr = ['鲁班',18,false];

//访问数组
console.log(arr[0]);

//数组长度
let arr = [1,2,3,4,5,7,8];

console.log(arr.length);
//手动设置数组长度，会删除超出长度的元素
arr.length = 4;



//手动插入一条数据
  arr[7] = 9;


//替换数组元素 
  arr[0] = "hahha";

//特殊案例
 arr[15]  = "hahh";   //数组会自动扩容  //插入一条超出长度的索引的值
console.log(arr[9]);   //改索引值对应的只不存在 就会返回undefined;

2.遍历数组

let colors  = ['red','green','yellow','white'];
//利用for循环遍历数组
for(let i = 0;i<colors.length;i++){
    console.log("我最喜欢的颜色是:"+colors[i]);
}

案例1：求数组元素中的最大值?

 let arr = [1,5,3,8,10,12];
 let maxitem = arr[0];   //假设第一个是最大值;

  for(let i = 0; i<arr.length; i++){
        if(arr[i]>maxitem){
            maxitem = arr[i];
        }
  }

  console.log(maxitem);

案列2:数组筛选

//数组筛选
//错误的写法
let arr  = [1,3,15,17,21,7,8,29,40];
let newArr = [];

//要求 筛选出>10的值 并且放到一个新数组里面;

for(let i = 0;i<arr.length;i++){
     if(arr[i]>10){
         newArr[i] = arr[i];
         
     }
}

console.log(newArr);




//正确的写法
let arr  = [1,3,15,17,21,7,8,29,40];
let newArr = [];
let j = 0;
//要求 筛选出>10的值 并且放到一个新数组里面;

for(let i = 0;i<arr.length;i++){
     if(arr[i]>10){
         newArr[j] = arr[i];
         j++;
     }
}

console.log(newArr);


//优雅的写法
//数组筛选
let arr  = [1,3,15,17,21,7,8,29,40];
let newArr = [];

//要求 筛选出>10的值 并且放到一个新数组里面;

for(let i = 0;i<arr.length;i++){
     if(arr[i]>10){
         newArr[newArr.length] = arr[i];
       
     }
}

console.log(newArr);

案例3：翻转数组

 //数组反转
let arr = [1,2,3,4,5,6,7];
let newArr = [];

for(let i = arr.length-1;i>=0;i--){
    newArr[newArr.length] = arr[i];
}

console.log(newArr);

难度升级: 冒泡排序

//冒泡排序

let arr  = [5,4,3,2,1];

for(let i = 0;i<arr.length-1;i++){
    for(let j = 0;j<arr.length-i-1;j++){
          if(arr[j]>arr[j+1]){
              let temp = arr[j];
              arr[j] = arr[j+1];
              arr[j+1] = temp;
          }
    }
}

console.log(arr);

3.二维数组

//基本使用
let arr = [
         [0,1,2],
         ['鲁班','鲁班七号'],
         [0,1,2,3,4,5],
      ];

console.log(arr[1][1]);


//循环遍历二维数组
    let arr = [
         [0,1,2],
         ['鲁班','鲁班七号'],
         [0,1,2,4,5,6]
      ];

    for(let i = 0;i<arr.length;i++){
        for(let j = 0;j<arr[i].length;j++){
            console.log(arr[i][j]);
        }
    }

4.拓展知识点

//遍历数组

let arr = ["鲁班",20,"coder"];

for(let value of arr){
    console.log(value);
}

作业：

把所有的demo演示一遍