-----------javascript 数组--------------------

《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>