javascript数组知识总结

待我称王封你为后i 2022-03-17 14:40 235阅读 0赞

##### 数组概念 #####

*  数组：有序的值的集合，都有索引（下标），索引从0开始  
    ![数组的创建方式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70]

##### 数组的常用操作方法 #####

// 数组基本操作
    // 添加删除方法
    var arr = [1,2,3,4];
    
    // arr[0] = 10; // 修改数组里面的值
    // console.log(arr); // [10, 2, 3, 4]
    
    // arr[arr.length] = 5; // 通过索引添加值
    // console.log(arr); // [1, 2, 3, 4, 5]
    
    // push方法，向数组的尾部追加一个或多个元素，原数组会发生改变，返回新数组的长度
    arr.push(); // 不传值，数组不变
    console.log(arr); // [1, 2, 3, 4]
    
    arr.push(5);
    console.log(arr); // [1, 2, 3, 4, 5]
    
    arr.push(5,6);
    console.log(arr); // [1, 2, 3, 4, 5, 6]
    
    var a = arr.push(5, 6, 'abc'); // a 为新数组的长度
    console.log(arr, a); // [1, 2, 3, 4, 5, 6, "abc"] 7
    
    // pop方法，不接受实参(传实参没有意义)，从数组的尾部删除一个元素，原数组发生改变，返回被删除的那个元素
    var arr1 = [1,2,3,10];
    var a = arr1.pop();
    console.log(arr1, a); // [1, 2, 3] 10
    
    // unshift 向数组的头部追加一个或多个元素，原数组会发生改变，返回新数组的长度
    var arr2 = [1, 2, 3];
    var s = arr2.unshift(1, 2, 3);
    console.log(arr2, s); // [1, 2, 3, 1, 2, 3] 6
    
    // shift方法，不接受实参(传实参没有意义)，从数组的头部删除一个元素，原数组发生改变，返回被删除的那个元素
    var arr3 = [1, 2, 3];
    var x = arr3.shift();
    console.log(arr3, x); // [2, 3] 1
    
    // 截取类方法
    // slice方法，如果有一个参数，从该参数所表示的索引位开始截取，直到数组结束，返回截取的数组，原数组不发生改变
    // 如果有两个参数，从第一个参数表示的索引位开始到第二个参数表示的索引位结束，但是不包括第二个参数所指的值
    var arr4 = [1, 2, 3, 4, 5];
    // var m = arr4.slice(3); // 从arr4[3]开始截取，到数组结束，包括arr4[3]
    // console.log(m); // [4, 5]
    
    // var n = arr4.slice(1, 3);
    // console.log(n); // [2, 3]
    var nn = arr4.slice(1, 10);
    console.log(nn); // [2, 3, 4, 5]
    
    // splice方法 ,如果有一个参数，从该参数所表示的索引位开始截取，直到数组结束，返回截取的数组，原数组发生改变
    // 如果有两个参数，从第一个参数表示的索引位开始向后截取，截取第二个参数表示的长度（个数），返回截取的数组，原数组发生改变
    // 如果多余两个参数，则将向数组添加元素。从截取的位置开始添加，添加后续的参数
    var arr5 = [1, 2, 3, 5];
    arr5.splice(3, 0, 4); // 在3,5之间添加4
    console.log(arr5); // [1, 2, 3, 4, 5]
    
    // 排序类
    // reverse 数组翻转
    var arr6 = [1, 3, 9, 5];
    var q = arr6.reverse();
    console.log(q); // [5, 9, 3, 1]
    // sort 数组排序
    var p = arr6.sort();
    console.log(p); // [1, 3, 5, 9];
    // warn: sort按字符串的规则比较大小 不准确
    var arr7 = [1, 23, 8, 6];
    console.log(arr7.sort()); // [1, 23, 6, 8]
    console.log("23" < "6"); // true
    // sort()可以接受一个函数作为参数
    
    arr7.sort(function(a,b){ 
    return a-b; // 从小到大 [1, 6, 8, 23]
    // return b-a; // 从大到小 [23, 8, 6, 1]
    })
    console.log(arr7);
    
    // join 数组转换成字符串方法
    var arr8 = [1, 23, 4, 8];
    var str = arr8.join();
    console.log(str); // 1,23,4,8
    var str1 = arr8.join("");
    console.log(str1); // 12348
    var str2 = arr8.join("+");
    console.log(str2); // 1+23+4+8
    
    // concat 数组合并
    var arr9 = [666, 999];
    var arr10 = [1, 3, 5];
    var y = arr9.concat(arr10);
    console.log(arr9, arr10, y); // (2) [666, 999] ;(3) [1, 3, 5]; (5) [666, 999, 1, 3, 5]
    
    // 数组遍历 枚举
    var arr11 = [1, 3, 5, 7];
    for (var i = 0; i < arr11.length; i++) { 
        arr11[i] += 1;
    }
    console.log(arr11); // [2, 4, 6, 8]
    for (var i in arr11) {  // for in 也可以遍历数组，但一般不用，也不建议用，i为索引
        console.log(i, arr11[i])
    }
    
    // 对象数组
    var arr12 = [{ attr1:[{ a:1}]},{ }];
    console.log(arr12[0].attr1[0].a); // 1
    
    // 二维数组
    var arrScore = [[100,100,22,100],[100,100,100,100],[100,100,100,100]];
    console.log(arrScore[0]); // [100, 100, 22, 100]

###### 数组简易排序 ######

![数组冒泡排序][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70 1]  
![数组选择排序][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70]: /images/20220317/52ea2740515c4898b38ad130c3a696f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70 1]: /images/20220317/73618161ecf9459d9f221c2c201a1cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21mXzlfNV8yXzc_size_16_color_FFFFFF_t_70 2]: /images/20220317/3acb8bfb0418423aa45ac94964a46690.png