javaScript学习第4天（数组）

数组

基本概念

基本类型只能存储一个值。如果需要存储一组值怎么办。（用的多。）这个时候就需要使用数组了。

使用数组最大的好处是什么：可以进行批量操作。

• 数组：一组值，可以存储多个值（每个值可以存储任何数据类型的数据，但是一般情况下都是相同类型的数据），他是__有序的集合__

• 下标（索引、键、key），为了能够拿到对应位置的数据，所以需要给这个数组中的内容进行编号。

  索引的值都是从0开始的。

• 元素：下标和值的组合。

• 类和对象的概念：

  数组是对象类型（引用类型的一种）。javaScript中有对象，没有类。

  • 类是什么：具有相同特征的事物的总称。
    • 每个类中都有一些共同的特征，这些特征我们称为属性。
    • 每个类中有一些共有的行为，我们叫方法。
  • 对象：类的具体化。这种具体的我们叫他对象。
  • 类和对象的关系：根据模具（类）创造出来的实体（对象）。当然对象也有属性和方法。

数组创建

1. 使用Array来创建

   var colors = new Array();//创建了一个空数组。
   console.log(typeof colors);
   

   new是操作符表示调用后面的内容，可以__暂时__（实际上javaScript中没有类）将后面的内容看成是刚才所说的类。

   1. 我们可以向里面传递一组值。

      var colors = new Array('red', 'blue', 'green');
      console.log(colors);
      

   2. 在Array()中如果只有一个元素并且这个元素是数值的时候要注意。根据浏览器的不同得到的结果不同（现在咱们浏览器是得到了有100个元素的数组，但是每个元素中都是空undefined。有些浏览器会只创建一个元素这个元素对应的值是100）。

      var colors = new Array(100);
      console.log(colors);
      

   3. 声明数组时省略new操作符，与new Array这种结果相同。

2. 使用字面量方法（使用的最多）

   数组字面量由一对包含数组项的方括号组成，多个元素之间使用逗号隔开。

   这种方式定义的与new Array()这种结果相同。

数组元素的个数

数组中元素的个数保存在数组的length属性中。这个属性的值大于等于0。

var colors = ['red', 'green', 'blue'];
console.log(colors);
console.log(colors.length);//3

数组的最后一项的索引始终是length-1

数组的基本操作

• 查看元素的值

  • 数组[下标]，在这首先要找的就是下标。

  • 读取时超过了最大的下标，那么值为undefiend。

  • 中括号里面可以放置的是任何返回数值或数值型字符串的表达式。

  • 如果要取得数组中的最后一个值arr[arr.length - 1]

• 增加元素

  在不同的位置增加。

  • 在末尾增加。

    设置下标时使用的是超过了数组的最大的下标。这个时候数组的长度变为（设置后的下标+1）

    var colors = ['red', 'blue', 'green', 'pink'];
    colors[4] = 'hotpink';
    console.log(colors.length);
    console.log(colors);
    

    我们更多是使用length属性向数组末尾添加数据。

    var colors = ['red', 'blue', 'green', 'pink'];
    colors[colors.length] = 'white';
    colors[colors.length] = 'black';
    console.log(colors.length);
    console.log(colors); 
    

  • 在数组的开始处添加

 		 //数组开头添加元素。
 		 //从4开始 ，  我原数组中最大的下标是3.
         var colors = ['red', 'blue', 'green', 'pink'];
         for (var i = colors.length; i >= 0; i--) {
            colors[i] = colors[i - 1];
        }
        colors[0] = 'pink';
        console.log(colors); 

* 在数组的指定位置处添加

//方法1
		 //在下标为1的地方插入新数据
		 var colors = ['red', 'blue', 'green', 'pink'];
         for (var i = colors.length; i >= 2; i--) {
                    colors[i] = colors[i - 1];
                }
                colors[1] = 'gray';
                console.log(colors); 

  //方法2
  		var colors = ['red', 'blue', 'green', 'pink'];
        for (var i = colors.length; i >= 0; i--) {
            if (i == 1) {
                break;//跳出本循环。
            }
            colors[i] = colors[i - 1];
        }
        colors[1] = 'gray';
        console.log(colors);

• 修改元素

• 删除元素

  • 删除后面所有的

    如果将length改为比原来的length小那么将会将后面的元素删除。

		var colors = ['red', 'blue', 'green', 'yellow'];
        colors.length = 1;
        console.log(colors); */

* 删除末尾的

        var colors = ['red', 'blue', 'green', 'yellow'];
        // colors.length = colors.length - 1;
        colors.length --;
        console.log(colors);

* 删除开头元素

    var colors = ['red', 'blue'];
        for (var i = 1; i < colors.length; i++) {
            colors[i-1] = colors[i];//当前的前一个等于当前的。
        }
        colors.length --;
        console.log(colors);

* 删除指定位置的元素

 //需求：删除数组中给定下标的元素。
        var colors = ['red', 'blue', 'green', 'yellow'];
        //假如删除下标为1的元素。
        for (var i = 2 ; i < colors.length ; i++) {
            colors[i - 1] = colors[i];
        }
        colors.length--;
        console.log(colors);

多维数组

多维数组：数组的每个元素都可以存储任意类型的数据，那么在元素中再储存数组。

如何区分是几维数组：

var arr = [
    [1,2],
    [3,4]
];

有几层中括号，就是几维数组。现在有2层次中括号那他就是二维数组。

数组一般最多就到三维，一维、二维用的最多。不管多少维都是一层一层的往里面找。

案例

1. 冒泡排序（面试题）

原理：将数组中的值和每一个值进行比较，然后大的值往后放。

2. 数组去重复（在新数组中去重，原数组不动）。

   var arr = [1,2,3,4,3,4,3,2,1,5,6];
   //最后的结果[1,2,3,4,5,6]
   

3. 将下列数据遍历成一个表格：

var performeres = [
//编号,演员姓名,饰演角色,性格
   [1,'孙红雷','何辅堂','为人正直不阿，欺强怜弱，善于机变。'],
   [2,'巍子','魏正先','鹰视狼顾，心狠手黑。'],
   [3,'陈数','程立雪','气质如兰，观之可亲，思想卓荦，才华压众。'],
   [4,'郭珍霓','刘二泉','动不便，但若论手段心机，十个健全人也不是她的对手。'],
   [5,'陈祉希','朱彩灵','刀马旦出身，水般柔美，火样性格。含威不露，顾盼神飞。']
];