引用数据类型--数组类型 Array

Asunny5

已于 2022-12-04 01:04:52 修改

阅读量512

点赞数

文章标签： javascript vue.js 前端

于 2022-11-27 00:44:20 首次发布

本文链接：https://blog.csdn.net/m0_60979337/article/details/128051282

版权

目录

一、创建数组方法

二、读取数组的值

三、修改数组的

四、数组常用的方法

一、创建数组方法

数组基本介绍：

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

1.用[ ]

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

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

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

3.用函数去创建数组 Array

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

输出的结果

二、读取数组的值

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

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

2.数组length属性

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

三、修改数组的值

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

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

输出 --->

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

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

输出 --->

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

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

输出为 --->

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

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

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

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

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

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

四、数组其他

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

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

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

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

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

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

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

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

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

Array.isArray( 判断对象 )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、数组常用的方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

应用：算数组的平均值

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

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

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

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

举例：数组对象数据排序

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

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

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

    <script> 

     var arr4 = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, 
    { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
        //some()  
        //找出num = 5 的数组 找不到则返回false
        var arr6 = arr4.some(function (item) { return item.num === 5 });
        console.log(arr6); //---> false 
        //找出num = 4 的数组 找到则返回true
        var arr7 = arr4.some(function (item) { return item.num === 4 });
        console.log(arr7);  //----> true
    </script>

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

<script>   
var arr9 = [1, 3, 5, 7, 9];
        var arr10 = arr9.every(function (item) { return item % 2 !== 0 });
        console.log(arr10);//true
    </script>

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

<script> 
var arr9 = [1, 3, 5, 7, 9]; 
 console.log(arr9.indexOf(5));//返回该元素第一次出现在数组中的下标
 console.log(arr9.indexOf(10)); //在数组中找不到该元素，则返回 -1
</script>

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

    <script>
     var arr11 = [5, 3, 5, 7, 9, 5];
        console.log(arr11.lastIndexOf(12)); //返回该元素最后一次出现在数组中的下标 5
        console.log(arr11.indexOf(10)); //在数组中找不到该元素，则返回 -1
    </script>

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

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

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

    <script>
  var arra = [{ name: "张三", num: 2 }, { name: "李四", num: 1 }, { name: "老王", num: 4 }, { name: "赵四", num: 3 }];
        var arrNew = arra.map(function (item) {
            item.age = 12; return item
        }).sort(function (a, b) {
            return (a.num - b.num);//从小到大排序
        }).filter(function (item) {
            return item.num !== 3; //去除num = 3 的值
        })
        console.log(arrNew);
    </script>