JavaScript分享基础-数组

数组的创建：

//一、定义数组的4种方法：

//1.利用new定义一个空数组
    var arr = new Array();
    arr[0] = "1";
    arr[1] = "2";
    arr[2] = "3";
    console.log(arr);
    //注意：定义的数组对象名（arr）不能与已存在的变量名重名

//2.利用数组字面量创建数组
    var arr = []; //空数组
    var arr1 = [1, 2, "kjk", true];
    console.log(arr);
    console.log(arr1);
    //注意：数组内元素用逗号隔开

 //3.简洁方式(定义数组的同时给出数组的值)
    var myCars = new Array("Saab", "Volvo", "BMW");
    console.log(myCars);

//4.定义数组的同时指定数组长度
    var arr = new Array(3);
    for (var index = 0; index < arr.length; index++) {
        alert(arr[index]);
    }

//此时并没有为数组元素赋值，所有数组元素的值都是undefined。
//此时定义的是数组长度为2，里面有两个空的数组元素
   var arr1 = new Array(2,3);
   //这样子相当于[2,3],有两个数组元素，分别是2,3

练习1：定义一个数组，存放星期一-星期日，在控制台输出：星期日：

//(1)
    var arr = new Array();
    arr[0] = "星期一";
    arr[1] = "星期二";
    arr[2] = "星期三";
    arr[3] = "星期四";
    arr[4] = "星期五";
    arr[5] = "星期六";
    arr[6] = "星期日";
    console.log(arr[6]);

//(2)
    var arr1 = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
    console.log(arr1[6]);

//(3)
    var arr2 = new Array("星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
    console.log(arr2[6]);

//(4)
    var arr = new Array(3);
    for (var index = 0; index < arr.length; index++) {
        if (index == 0) {
            arr[0] = "星期一";
        } else if (index == 1) {
            arr[1] = "星期二";
        } else {
            arr[2] = "星期日"
        }
    }
    console.log(arr[2]);

练习2：求数组[2,6,1,7,4]里面所有元素的和及平均值：

//(1)声明一个变量sum
//(2)遍历数组，将数组所有元素加到sum里面
//(3)sum/arr.length就是平均值
    var arr = [2, 6, 1, 7, 4];
    var sum = 0;
    var average = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i]; //数组元素为arr[i]
    }
    average = sum / arr.length;
    console.log(sum, average);
    //想输出多个变量，用逗号分隔就好！

数组的输入输出：

//输入-for语句：
    var n = 7;
    var arr = new Array();
    for (var i = 0; i < n; i++) {
        arr[i] = i;
    }
    console.log(arr);
    

//输出--下标（document.write();）：
    var arr = new Array("a", "b", "c", "d");
    var third = arr[2];
    document.write(third); //c
    //注意：当下标越界时，输出undefined
    
//输出-for语句：
    var str = "";
    var arr = new Array("a", "b", "c", "d");
    for (var i = 0; i < 4; i++) {
        str = str + arr[i];
    }
    document.write(str);//abcd 

数组添加元素：（其余请查看菜鸟或者w3shcool）

注意点：

 var arr = new Array("k", "j");
 arr[1] = "kun";
 document.write(arr); //k,kun
 //增加新的元素时，下标相同就产生替换元素的效果

数组删除元素：

//使用delete运算符可以删除数组元素的值。
//应用delete运算符删除数组元素之前和删除数组元素之后，元素个数并没有改变。
    var arr = new Array("k", "j", "k");
    delete arr[1];
    document.write(arr); //k,,k
//删除元素的位置还在，用空格替代被删除的内容，此时数组长度为3

数组属性--length属性、prototype属性:

//1.length属性

    var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
    document.write(arr.length); //8
    
//注意：如果为数组的length属性设置了一个比当前值小的值，那么数组将会被截断，该长度后的元素都会被删除。因此，可以使用length属性删除数组中后面的几个元素。

    var arr = new Array(1, 2, 3, 4, 5, 6);
    arr.length = 3;
    document.write(arr); //1,2,3
    
//2.prototype属性--该属性可以为数组对象添加自定义的属性或方法。
//语法：Array.prototype.name=value 

    Array.prototype.outLast = function () {
        document.write(this[this.length - 1]);
    }

//添加一个方法，长度减一就是数组最后元素下标，以此得出最后元素的方法

    var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
    arr.outLast();
    //调用：数组名.方法名
    //8

数组方法:

方法	说明
concat()	连接两个或更多的数组，并返回结果
push()	向数组的末尾添加一个或多个元素，并返回新的长度
unshift()	向数组的开头添加一个或多个元素，并返回新的长度
pop()	删除并返回数组的最后一个元素
shift()	删除并返回数组的第一个元素
splice()	删除元素，并向数组添加新元素
reverse()	颠倒数组中元素的顺序
sort()	对数组的元素进行排序
slice()	从某个已有的数组返回选定的元素
toString()	把数组转换为字符串，并返回结果
join()	把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔

    //1.数组之间的添加与删除

//concat()方法--将其他数组连接到当前数组的末尾。
//注意--原数组中的元素和数组长度不变
    var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
    document.write(arr.concat(9, 10) + "<br>");
    var arr1 = new Array('a', 'b', 'c');
    var arr2 = new Array('d', 'e', 'f');
    document.write(arr1.concat(arr2));

   

// push()方法--向数组的末尾添加一个或多个元素，并返回添加后的数组长度。
// var arr = new Array(1, 2, 3, 4);
    document.write('原数组:' + arr + '<br>');
    document.write('添加元素后的数组长度:' + arr.push(5, 6, 7) + '<br>');
    document.write('新数组:' + arr);

    // 原数组: 1, 2, 3, 4
    // 添加元素后的数组长度: 7
    // 新数组: 1, 2, 3, 4, 5, 6, 7

// unshift()方法--向数组的开头添加一个或多个元素。
    var arr = new Array(4, 5, 6, 7);
    document.write('原数组:' + arr + '<br>');
    arr.unshift(1, 2, 3);
    document.write('新数组:' + arr);

    // 原数组: 4, 5, 6, 7
    // 新数组: 1, 2, 3, 4, 5, 6, 7

// pop()方法--用于把数组中的最后一个元素从数组中删除，并返回删除元素的值。
    var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
    var del = arr.pop();
    document.write('删除元素为:' + del + '<br>');
    document.write('删除后的数组为:' + arr);

    // 删除元素为: 8
    // 删除后的数组为: 1, 2, 3, 4, 5, 6, 7

// shift()方法--把数组中的第一个元素从数组中删除，并返回删除元素的值。
    var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
    var del = arr.shift();
    document.write('删除元素为:' + del + '<br>');
    document.write('删除后的数组为:' + arr);

    // 删除元素为: 1
    // 删除后的数组为: 2, 3, 4, 5, 6, 7, 8

    //splice()方法--删除数组中指定位置的元素，还可以向数组中的指定位置添加新元素。 
    //这种方法会改变原始数组
    //语法：array.splice(index,howmany,item1,.....,itemX)
    //index规定从何处添加/删除元素  	必需。
    //howmany规定应该删除多少元素。必须是数字，但可以是 "0"。	可选。
    //如果未规定howmany参数，则删除从 index 开始到原数组结尾的所有元素。
    //item1, ..., itemX  	可选。要添加到数组的新元素
    //返回值：如果仅删除一个元素，则返回被删除元素的数组。 如果未删除任何元素，则返回空数组。
    
    var arr = new Array(1, 2, 3);
    console.log(arr.splice(2, 0)); //[]

    var arr1 = new Array("a", "b", "c", "d");
    arr1.splice(1);
    document.write(arr1 + "<br>");
    //a,从下标为1的位置开始，即第二个数，后面没加参数则全部删除

    var arr2 = new Array("a", "b", "c", "d");
    arr2.splice(1, 2);
    document.write(arr2 + "<br>");
    //a,d  从第二个元素开始，删除两个元素,也就是删除b,c

    var arr3 = new Array("a", "b", "c", "d");
    arr3.splice(1, 2, "e", "f");
    document.write(arr3 + "<br>");
    //a,e,f,d
    //从第二个元素开始，删除两个元素,也就是删除b,c然后在删除的元素处依次加上e,f

    var arr4 = new Array("a", "b", "c", "d");
    arr4.splice(1, 0, "e", "f");
    document.write(arr4 + "<br>");
    //a,e,f,b,c,d 
    //0代表不删除元素，加入元素得放在b前面，因为是从b开始做运算的

 //2.设置数组的排序顺序

    //通过reverse()和sort()方法实现
    //reverse()--用于颠倒数组中元素的顺序, 该方法会改变原来的数组，而不创建新数组。

    var arr = new Array("a", "b", "c", "d", "e", "f");
    document.write(arr.reverse());

    //f,e,d,c,b,a

 拓展：

1、不用reverse()方法得到翻转数组

    var arr = [1, 2, 3, 4, 5, 6, 7, "a", "c", "b"]; //arr.length=10
    var newArr = []; //声明一个空数组
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i]
    }
    console.log(newArr);

    //["b", "c", "a", 7, 6, 5, 4, 3, 2, 1]
    //将arr[9]赋值给newArr[0],arr[i]依次递减，newArr[0]依次递增

2、冒泡排序：

案例分析：

【5,4,3,2,1】：

第1趟：4,3,2,1,5

第2趟：3,2,1,4,5

第3趟：2,1,3,4,5

第4趟：1,2,3,4,5

1.一共需要 i 趟，外层for循环：5个数据我们需要4趟，长度就是数组长度-1，i <= arr.length-1

2.每一趟交换次数 j ，用内层for循环：

第1次 交换 4次

第2次 交换 3次

第3次 交换 2次

第4次 交换 1次

长度就是 数组长度减去次数

但是次数 i 是从0开始的，所以arr.length-i-1

3.交换两个变量即可

var arr = [4, 1, 2, 3, 5];
    // var arr = [5, 4, 3, 2, 1];
    for (var i = 0; i <= arr.length - 1; i++) { //外层循环管趟数
        for (var j = 0; j <= arr.length - i - 1; j++) { //内层循环管每一趟交换次数
            //内部交换2个变量的值 前后元素比较
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr); //[1, 2, 3, 4, 5]

// //用函数定义getArrSort冒泡排序
    function getArrSort(arr) { //针对数字数组冒泡排序
        for (var i = 0; i <= arr.length - 1; i++) { //外层循环管趟数
            for (var j = 0; j <= arr.length - i - 1; j++) { //内层循环管每一趟交换次数
                //内部交换2个变量的值 前后元素比较
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
    }
    var arr = [10, 2, 50, 4, 100, 9];
    getArrSort(arr);
    // document.write(arr);
    console.log(arr);

    //sort(sortby)--用于对数组的元素进行排序。参数通常是一个比较函数
    var arr = [13, 4, 77, 1, 7];
    arr.sort();
    console.log(arr.sort());

    //并没有想象的排好序-- [1, 13, 4, 7, 77]
    //如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，也就是按照字符的编码顺序进行排序。
    //如果返回值大于0，则交换两个元素的位置。
    //如果返回值小于等于0，则不进行任何操作。

    var arr = [13, 4, 77, 1, 7];
    arr.sort(function (a, b) {
        return a - b; //升序 [1, 4, 7, 13, 77]
    });
    console.log(arr);

    var arr1 = [13, 4, 77, 1, 7];
    arr1.sort(function (a, b) {
        return b - a; //降序 [77, 13, 7, 4, 1]
    });
    console.log(arr1)

    //注意：function（）{}整个方法都在sort（）中

//3.获取某段数组元素

    //主要用slice()方法实现，slice()方法可从已有的数组中返回选定的元素。
    //arrayObject.slice(start,end) 
    //返回值：返回截取后的数组元素，该方法返回的数据中不包括end索引所对应的数据。
    var arr = new Array("a", "b", "c", "d", "e", "f");
    document.write(arr.slice(2, 5));
    //c,d,e

    //4.数组转换为字符串

方法名	说明	返回值	语法
toString()方法	把数组转换为字符串，并返回结果。	以字符串显示的数组对象。	arrayObject.toString()
toLocaleString()方法	将数组转换成本地字符串，并返回结果。	以本地格式的字符串 显示的数组对象。	arrayObject.toLocaleString()
join ()方法	将数组中的所有元素放入一个字符串中。	返回一个字符串。该字符串是把数组中的每个元素转换为字符串，然后把这些字符串用指定的分隔符连接起来。separator指定要使用的分隔符	arrayObject.join(separator)

    var arr = new Array("a", "b", "c", "d", "e", "f");
    document.write(arr.toString());
    //a,b,c,d,e,f
    // 在转换成字符串后，数组中的各元素以逗号分隔。

    var arr = new Array("a", "b", "c", "d", "e", "f");
    document.write(arr.toLocaleString());
    //a,b,c,d,e,f
    //该方法首先调用每个数组元素的toLocaleString()方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

    var arr = new Array("a", "b", "c", "d", "e", "f");
    document.write(arr.join("#") + "<br>");
    document.write(arr.join("-") + "<br>");
    document.write(arr.join("&") + "<br>");
    // a# b# c# d# e# f
    // a - b - c - d - e - f
    // a & b & c & d & e & f