• JS--数组类型 Array 1

     

    目录

    一 、 创建数组方法

    二、读取数组的值       

    三、修改数组的

    四、数组常用的方法

    一 、 创建数组方法

    数组基本介绍 ：

      数组是一种特殊的对象，数组是按照顺序排列的一组值（元素），每个位置都有一个编号，编号从0开始，编号也叫索引或者下标。数组可以存储任意数据类型。

    1.用[  ]

    1.    <script>
    2.         // 数字的长度 = 4  array[0] = a
    3.         var arry = ["a", "b", 110, 120];
    4.         console.log(array);
    5.     script>

    2.二维数组 由于数组的元素是任意的数据类型，当数组的元素是一个数组的时候，就构成了二维数组，如果二维数组的元素又是数组，可以成为多维数组

    1.    <script>
    2.         var arr = [["a","b"],[11,33]];
    3.         // 读取第一个元素中的第二个元素
    4.         console.log(arr[0][1]);
    5.     script>

    3.用函数去创建数组  Array

    1. <script>
    2.         var arr1 = new Array(3); //只有一个值，值是创建数组的长度
    3.         console.log(arr1);
    4.         //值时一个非数组或者大于1个值，则是作为数组元素创建数组
    5.         var arr2 = new Array(3, 4);
    6.         console.log(arr2); 
    7.     script>

    输出的结果

     二、读取数组的值

            1.使用方法：数组名 [下标 ]  下标从0开始编号。

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         console.log(arr[0]); //读取数组的第一位值
    4.     script>

               2.数组length属性 

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         console.log(arr.length); //读取数组的长度
    4.     script>

    三、修改数组的值

    1.通过[下标]给对应位置元素重新赋值

    1. <script>
    2. var arr = ["a", "b", 10, 12];
    3. arr[0] = "李";         //更改数组第一位的值
    4. console.log(arr);   //读取数组的值
    5. script>

    输出 ---> 

    2.通过[下标]可以添加值，如果对应位置有元素则覆盖，没有对应元素，则是添加

    1. <script>
    2. var arr = ["a", "b", 10, 12];
    3. arr[0] = "李"; //更改数组第一位的值
    4. // 可以给任意的值赋值，跳过的位置则自动填充空位。一般按顺序添加
    5. arr[5] = 35;
    6. arr[6] = "ha";
    7. console.log(arr); //读取数组的值
    8. script>

     输出 ---> 

    3.delete 删除数组元素，删除后对应位置会变空  一般不用该方法

    1. <script>
    2. var arr = ["a", "b", 10, 12];
    3. arr[0] = "李"; //更改数组第一位的值
    4. // 可以给任意的值赋值，跳过的位置则自动填充空位。一般按顺序添加
    5. arr[4] = 35;
    6. arr[5] = "ha";
    7. delete arr[3]; //删除数组中的第4位数，所以显示空值
    8. console.log(arr); //读取数组的值
    9. script>

    输出为 ---> ​

    4.splice删除数组元素，删除后后面的元素会补上  
          基本语法 ：数组名.splice(index ,num)      index 为下标 num为元素的个数

    1.     <script>
    2.         var arr = [1, 5, 7, 6, 9, 0];
    3.         var del2 = [];
    4.         //  删除arr中第3个元素后面的3个元素
    5.         del2 = arr.splice(0, 3);
    6.         // 输出删除的数组
    7.         console.log(del2);
    8.         // 输出删除后的数组
    9.         console.log(arr);
    10.     script>

    5.splice其他用法
    ​​​​1）替换元素 ，先删除元素，再从删除下标开始插入新的元素
            基本语法 : 数组名.splice （）

    1.  <script>
    2.         var arr1 = ["a","b","c"];
    3.         //数组的第二个元素开始删除两个元素，并且替换为"b1","c1"
    4.             arr1.splice(1,2,"b1","c1");
    5.         console.log(arr1);
    6.         //输出："a","b1","c1","c"
    7.     script>

    2）插入元素 不删除元素 用0表示
            基本语法：数组名.splice（1,0）  

    1.     <script>
    2.         var arr1 = ["a","b","c"];
    3.         //数组的第1个元素 开始插入"b1","c1"
    4.             arr1.splice(1,0,"b1","c1");
    5.         console.log(arr1); 
    6.     //输出："a","b1","c1","b","c"
    7.     script>

    四、数组其他

          1. [ ] in 数组 判断数组下标是否在数组里面 ，数组中有则显示true ，没有则显示false 

    1.    <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         arr[0] = "李"; //更改数组第一位的值
    4.         // 可以给任意的值赋值，跳过的位置则自动填充空位。一般按顺序添加
    5.         arr[4] = 35;
    6.         arr[5] = "ha";
    7.         delete arr[3]; //删除数组中的第4位数，所以显示空值
    8.         console.log(arr); //读取数组的值
    9.         console.log(2 in arr);  //true
    10.     script>

    2. 遍历数组 
            1）for .... in 可以遍历数组，由于数组是有序号的特殊对象，用for...in 消耗较大，一般不用

            

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         for (var x in arr) {
    4.             // x是数组的下标
    5.             console.log(arr[x]);
    6.         }
    7.     script>

       2)for()循环遍历数组 常用遍历数组的方法

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         //i 为数组的下标值  arr.length为4位 因为用的小于号 所以不需要 -1
    4.         for (var i = 0 ;i < arr.length;i++) {
    5.             console.log(arr[i]);
    6.         }
    7.     script>

    3）判断元素是否在数组里面  方法比较原始 （不推荐）

    1.    <script>
    2.         var has = false;
    3.         var arr = ["a", "b", 10, 12];
    4.         //i 为数组的下标值  arr.length为4位 因为用的小于号 所以不需要 -1
    5.         for (var i = 0; i < arr.length; i++) {
    6.             if ("b2" === arr[i]) {
    7.                 // 如果b2元素在数组中，则为true
    8.                 has = true;
    9.                 break;
    10.             }
    11.         }
    12.         if (has) {
    13.             console.log("该元素在数组中存在");
    14.         }
    15.         else {
    16.             console.log("该元素在数组中不存在");
    17.         }
    18.     script>

    4）Array.isArray( )判断是否是数据类型，是数组返回true，不是数组返回false

    Array.isArray( 判断对象  )

    1.    <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         console.log(Array.isArray(arr));
    4.    script>

    5）.toString( ) 数组转为字符串

    1.    <script>
    2.         var has = false;
    3.         var arr = ["a", "b", 10, 12];
    4.         console.log(arr.toString); //把数组转为字符串
    5. script>

    6）push( )在数组末尾追加一个元素，可以追加多个

          基本语法：  数组名.push( )

    1.    <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         arr.push("我是新增加的", "可以多个添加", "用逗号隔开");
    4.         console.log(arr);
    5.    script>

    7）pop（）删除末尾最后一个元素，并返回删除的元素

      基本语法：  数组名.pop( )

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         arr.push("我是新增加的", "可以多个添加", "用逗号隔开");
    4.         console.log(arr);
    5.         // 把删除的元素赋值给r
    6.         var r = arr.pop();
    7.         console.log(r);
    8.      script>

    8）unshift 在数组的开头插入一个或者多个元素

    基本语法：数组名.unshift（插入元素）

    1.    <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         arr.unshift("我是新增加的", "可以多个添加", "用逗号隔开");
    4.         console.log(arr);
    5.    script>

    9）shift( )删除头部的元素，并返回该元素

    基本语法： var y = 数组名 .shift( )

    1.     <script>
    2.         var arr = ["a", "b", 10, 12];
    3.         arr.unshift("我是新增加的", "可以多个添加", "用逗号隔开");
    4.         console.log(arr);
    5.         // 把删除的元素赋值给r
    6.         var r = arr.shift();
    7.         console.log(r);
    8.     script>

    10）类似数组对象，属性看起来和数组一样，但是本质还是一个狭义的对象，并没有数组的特性。

    1.     <script>
    2.         var arr1 = ["a","b","c"];
    3.         // 在第四个位置添加一个d 元素
    4.         arr1[3] = "d";
    5.         console.log(arr1);
    6.         //创建一个对象 与数组输出的格式类似
    7.         var ob1 = {0 :"a",1 :"b",2 :"c" ,length : 3};
    8.         console.log(Array.isArray(ob1)); // flase 
    9.         //可以在对象后面添加 但是不能自动具备数组的自动计算属性
    10.         ob1[3] = "d";
    11.         console.log(ob1);
    12.     script>

    四、数组常用的方法

            1. join( ) 可以把数组转为指定分隔符号的字符串，并返回该字符串

    1.     <script>
    2.         //join( 分隔符)
    3.         var arr = [1, 2, 3, 4, 5];
    4.         arr = arr.join("--");
    5.         console.log(arr); //1--2--3--4--5
    6.     script>

            2.concat( )可以合并多个数组，返回一个新数组 

    1.     <script>
    2.         //合并数组1.concat(合并数组2，合并数组3 ....)
    3.         var arr1 = [1,2,3,4,5];
    4.         var  arr2 = ["a","b","c"];
    5.         arr3 = arr1.concat(arr2,["6","7","8","9"]);//可以在后面直接添加数组        
    6.         console.log(arr3); //[1, 2, 3, 4, 5, 'a', 'b', 'c'，'6','7','8','9']
    7.     script>

            3.reverse( )倒叙数组，将原来的数组倒叙，并返回倒叙后的数

    1.     <script>
    2.         //reverse( )
    3.         var arr = [1, 2, 3, 4, 5];
    4.         arr = arr.reverse();
    5.         console.log(arr); //5--4--3--2--1
    6.     script>

            4.slice(startIndex ,[endIndex])截取数组中的一部分，返回截取的数组，原数组不变。
                    startIndex      是开始解析的下标 ，endIndex 是结束的下标（如果省略则是截取到末尾）

    1.     <script>
    2.         //slice(startIndex，[endIndex]) 截取数组的一部分 
    3.         var arr = [1, 2, 3, 4, 5];
    4.         // 取第一个元素-第四个元素之间的值
    5.         arr1 = arr.slice(1,4);
    6.         console.log(arr1); //--> 2，3,4
    7.     script>

            5.forEach(function(item,index){ }) //数组遍历元素的方法。
    参数是一个回调函数，回调函数的item参数则是遍历的数组元素，里面不能用break 
                    item是当前元素  index是索引

    1.     <script>
    2.         //forEach(Function(item,index){ })
    3.         var arr = [1, 2, 3, 4, 5];
    4.             arr.forEach(function(item,index ){
    5.                 console.log(item,index); // 1,0   2,1   3,2   4,3   5,4
    6.             });      
    7.     script>

            6.map(function(item,i) {return item} ) 遍历数组元素，和forEach类似，但是会返回一个新的数组，新数组的元素则是回调函数的值。
                      item是当前元素  index是索引

    1.     <script>
    2.         //map(Function(item,i){ })
    3.         var arr = [1, 2, 3, 4, 5];
    4.             var c = arr.map(function(item){
    5.         //console.log(item); // --> 输出元素 1 2 3 4 5
    6.         //把return的元素作为新数组的元素，通过map返回。如果不返回值，默认返回undfiend
    7.                 return item + "a"; 
    8.             }) 
    9.             console.log(c); // ['1a', '2a', '3a', '4a', '5a'] 
    10.     script>

            7.filter(function(item) {return boolean} )过滤数组成员，并返回新的数组。
                    如果返回值为true ，则把该元素作为新数组的成员。

    1.    <script>
    2.         //filter(function(item){return boolean}) 过滤数组
    3.         var arr = [1, 2, 3, 4, 5,6];
    4.             var c = arr.filter(function(item){
    5.                 //输出偶数 item元素会作为新数组
    6.                 return item % 2 === 0; 
    7.             }) 
    8.             console.log(c); //--> 2，4,6
    9.     script>

            8.reduce(function(a,b){ }) 依次处理数组成员，最终累计为一个值 
                    第一次遍历：a 是数组的第一个元素，b是数组的第二个元素
                    第二次以后：a 是上轮返回值，b则是遍历的n次+1个元素
            一般用于求数组所有元素累计的和值

    1.   <script>
    2.         //reduce（function（a,b){})
    3.         var arr = [1,8,3,4,9,2];
    4.         var count = arr .reduce(function(a,b){
    5.             return a + b; // 1+8 , 9+3, 12+4, 16+9, 25+2
    6.         });
    7.        console.log(count); // 27 
    8.     script>

    应用： 算数组的平均值       

    1.     <script>
    2.         //reduce（function（a,b){})
    3.         var arr = [1,8,3,4,9,2];
    4.         var count = arr .reduce(function(a,b){
    5.             return a + b; // 1+8 , 9+3, 12+4, 16+9, 25+2
    6.         })/ arr.length   ;  //求数组的平均值 ，直接除以数组的长度
    7.        console.log(count); // 27 
    8.     script>

      9.sort( ) 数组排序，如果传回调函数，默认则是按照字典排序(默认字符的编码）

            基本语法 ：sort（function (a,b) {return a-b }) 
                    a,b 是相邻的两个元素。
    如果返回值>0,则第一个元素在第二个元素的后面，否则第二个元素在第一个元素的前面
                            1） 从大到小排序
                            2） 从小到大排序

    1.   <script>
    2.         var arr = [2, 1, 12, 4, 5, 7, 6, 24];
    3.         // a 是前面的元素 b 是后面的元素 
    4.         //返回值是 a-b > 0，则是前面的元素大于后面的元素，交换位置 从小到大排列
    5.         var arr2 = arr.sort(function (a, b) { return a - b });
    6.         console.log(arr2); //-----> [1, 2, 4, 5, 6, 7, 12, 24]
    7.         //返回值是 b-a > 0 ,则是后面的元素大于前面的元素，交换位置 从大到小排列
    8.         var arr3 = arr.sort(function(a,b){return b-a});        
    9.     script>

    举例 ：数组对象数据排序

    1. <script>  
    2. //创建数组对象
    3.         var arr4 = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
    4.         var arr5 = arr4.sort(function (a, b) { return a.num - b.num }); //按照num值 从小到大排序 
    5.         console.log(arr5);     
    6.     script>

    10.some( ) 根据条件判断数组元素是否成立 (只要有一个元素成立，整个some方法就成立）

    基本语法 ：some(function(el,index ,arr) {return ( boolean )}) 
            el 遍历的每个元素(必填), index是当前的遍历元素的索引(可选)，arr当前数组(可选) 
            只要有一个元素返回true,整个some方法返回true 

    1.

    11.every( )与some( )类似  （所有成员返回true ，才会返回true，否则是false）
            基本语法 ：every(function(el,index ,arr) {return ( boolean )}) 
            el 遍历的每个元素(必填), index是当前的遍历元素的索引(可选)，arr当前数组(可选) 
          所有成员返回true ，才返回true，否则是false 。

    12. indexOf( element )查看元素在数组中第一次出现的位置。如果没有该元素则返回-1。
            一般用于判断该元素是否在数组中。
    基本语法：数组名.indexOf(eldement)

    13.  lastIndexOf(element) 查看元素在数组中最后一次出现的位置 。 
         与indexOf用法法类似 
            基本语法：数组名.lastIndexOf(element)

    1.

    14.只要返回值是一个新数组的都支持链式操作

    新数组后面可以添加多个数组方法

    举例：var arr = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
    需求：1）在arr 数组中添加 “ age = 12 ”的属性，并创建一个新的数组。
               2）按照 num的属性值 从小到大排序 。
               3）并排除掉num=3的数组 。

    1.

  • 相关阅读:
    SpringBoot框架集成Dubbo
    java计算机毕业设计ssm易物小店交换系统-二手咸鱼交易系统
    vue-cl-service不同环境运行/build配置
    java数据结构之双端队列ArrayDeque
    Mybatis按年月日时分秒查询，MySQL年月日时分秒查询
    步力宝品牌鞋业商业规划如何迭代升级
    转铁蛋白修饰长春新碱-粉防己碱脂质体|转铁蛋白修饰共载紫杉醇和金雀异黄素脂质体（试剂）
    EasyExcel完成excel文件的导入导出
    【C语言】操作符大全万字详解
    射频电路设计的常见问题及五大经验总结
  • 原文地址：https://blog.csdn.net/m0_60979337/article/details/128051282