JavaScript数组

1 数组的概念

之前学的变量：存储一个值。

如果存班级中所有学生姓名：可以使用数组（Array），存放一组数据，提供访问（获取）方式

数组：一组数据的集合，每个数据称为元素，数组中可以存放任意类型元素。一组数据存储在单个变量名下

2 创建数组

2.1 数组的创建方式

JS 中创建数组两种方式：

利用 new 创建数组
利用数组字面量创建数组

2.2 利用new 创建数组

var 数组名 = new Array();
var arr = new Array(); // 创建了一个空数组

这个方法暂时了解，学完对象再看
注意 Array() , A 要大写

2.3 利用数组字面量创建数组（常用）

// 1 使用数组字面量方式创建空的数组
var 数组名 = [];
// 2 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','小黄'];

var arr = [];  // 创建了一个空数组
var arr1 = [1,2,'my',true];

数组的字面量是方括号[]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

2.4 数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

var arrStus = ['小白',12, true,28.9];

3 获取数组元素

数组的索引

索引(下标) : 用来访问数组元素的序号(数组下标从0开始) .
var arr = [‘小白’,小黑’, ‘大黄’, ‘瑞奇’];

索引号: 0 1 2 3

数组可以通过索引来访问、设置、修改对应的数组元素。我们可以通过“数组名[索引]"的形式来获取数组中的元素。
这里的访问就是获取得到的意思

//定义数组
var arrStus = [1,2,3];
//获取数组中的第2个元素
alert (arrStus [1]) ;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1 数组（Array）：就是一组数据的集合  存储在单个变量下的优雅方式
    // 2 利用new 创建数组
    var arr = new Array();  // 创建一个空数组
    // 3 利用数组字面量创建数组
    var arr = [];  // 创建了一个空数组
    var arr1 = [1,2,'my',true];
    // 4 我们数组里面的数据一定用逗号分隔
    // 5 数组里面的数据 比如1，2  我们称为数组元素
    // 6 获取数组元素 格式  数组名[索引号]   索引号从0开始
    console.log(arr1);
    console.log(arr1[2]);  // 得到 my
    console.log(arr1[5]);  // 没有这个数组元素  所以输出的结果是  undefined
  </script>
</body>
</html>

4 遍历数组

数组中的每一项怎么取出来？可以通过 数组名[索引号]

var arr = ['red' , 'green', 'blue'];
console.log (arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

把所有的元素取出来？循环

遍历：把数组中每个元素从头到尾都访问一次

// 遍历数组：把所有元素从头到尾访问一次
var arr = ['red','green','blue'];
for(var i = 0; i < 3; i++){  // 索引号从0开始 所以 i 必须从 0 开始 
  console.log(arr[i]);
}

4.1 数组的长度

使用 数组名.length 可以访问数组元素的数量（数组长度）

//数组长度  数组名.length
var arr = ['red','green','blue'];
for(var i = 0; i < 3; i++){  // 索引号从0开始 所以 i 必须从 0 开始 
  console.log(arr[i]);
}
console.log(arr.length);
for(var i = 0; i < arr.length; i++){  
  console.log(arr[i]);
}

数组的长度是元素个数不要跟索引号混淆
arr.length 动态检测数组元素的个数

案例1：求和

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //数组长度  数组名.length
    var sum = 0;
    var arr = [1,2,3];
    for(var i = 0; i < 3; i++){  
      sum = sum + arr[i];
    }
    console.log(sum);
    
  </script>
</body>
</html>

案例2：数组最大值

求数组[2,6,1,77,52,25,7]中的最大值

案例分析

声明一个保存最大元素的变量max.
默认最大值可以取数组中的第一个元素。
遍历这个数组,把里面每个数组元素和max相比较。
如果这个数组元素大于max就把这个数组元素存到max里面,否则继续下一轮比较。
最后输出这个max。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>    
    var arr = [2,6,1,77,52,25,7];
    var max = arr[0];
    for(var i = 1; i < arr.length; i++){  
      if(max < arr[i]){
        max = arr[i];
      }
    }
    console.log(max);
    
  </script>
</body>
</html>

案例3：数组转换为分割字符串

案例分析

需要一个新变量用于存放转换完的字符串str.
遍历原来的数组,分别把里面数据取出来，加到字符串里面。
同时在后面多加一个分隔符。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //数组长度  数组名.length
    var arr = ['red','green','blue','pink'];
    var str = '';
    var sep = '!';   // 此处分隔符可以使用其他的，可修改
    for(var i = 0; i < arr.length; i++){  
      str = str + arr[i] + sep;
    }
    console.log(str);
    
  </script>
</body>
</html>