JavaScript（十二）数组

最新推荐文章于 2022-03-01 23:41:03 发布

李不烦

最新推荐文章于 2022-03-01 23:41:03 发布

阅读量252

点赞数

分类专栏： JavaScript 文章标签： javascript array

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/90056639

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

1. 数组是什么

数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。
JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。
JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指定的元素。

2. 一维数组

2.1 定义数组

数组的最大作用就是用于存储多个值。定义数组分别3种形式:

使用构造函数（对象方式）：
```
var myArr1=new Array("yao",8,false);
```
使用数组关键字方式:
```
var myArr2=Array(2,3,"lalal");
```
使用数组字面量方式:
```
var  myArr3=[1,"hah",true];
```

        // TODO - 以下哪个选项的两个变量类型是相同的
        var num1 = 100;// number
        var num2 = new Number(100);// object

        var str1 = 'string';// string
        var str2 = new String('string');// object

        var boo1 = true;// boolean
        var boo2 = new Boolean(true);// object

        var arr1 = [1,2,3,4,5];// object
        var arr2 = new Array(1,2,3,4,5);// object

值得注意的是: 在一个数组中的不同元素可以是不同数据类型。

数组分类两种：索引数组、

2.2 索引数组

索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码:

var arr = [];
arr[0] = 1;
arr[1] = "a";
arr[2] = true;

值得注意的是: 索引数组的下标是从 0 开始的。

2.3 关联数组

关联数组就是存储元素的位置使用字符串来表示，一般称之为名称（name或key）。具体创建方式如下述代码:

var arr = [];
arr['num'] = 1;
arr['str'] = "a";
arr['bool'] = true;

值得注意的是: 关联数组的名称（name或key）是字符串，必需使用单引号或双引号将其包裹。

2.4 稀疏数组

    TODO 稀疏数组
    TODO * 数组的索引值可能是跳跃的
    TODO * 可能中间的索引对应的没有任何值 - undefined
    TODO * 存储数据的个数可能小于数组的长度

       // 定义数组
       var myArr=new Array(5);// 定义数组的长度为5，而不是存值为5
        myArr[3]="hah";
        console.log(myArr.length);// 5
        console.log(myArr);// (5) [empty × 3, "hah", empty]
        console.log(myArr[1]);//undefined

2.5 数组的长度

每个数组都有一个length属性，表示数组的长度。

如果为非稀疏数组的话，length 属性的值表示当前数组包含元素的个数。

如果为稀疏数组的话，length 属性的值大于当前数组包含元素的个数。

var arr2 = [];
arr2[14] = "a";
console.log( arr2.length );// 输出 15

2.6 数组元素的读取

数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:

     // 定义数组
      var myArr=new Array(1,3,"hah",true,"liuliu");//
        // 取数组的第二个值
        var  value2=myArr[1];
        console.log(value2)//输出： 3

        var myArr2=new Array();
        myArr2['name']="libufan";
        myArr2['age']=18
        console.log(myArr2['name']);//libufan

2.7 数组元素的修改

不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。

     // 定义数组
      var myArr=new Array(5,3,"hah",true,"liuliu");//
        // 取数组的第二个值
        var  value2=myArr[1]=9;
        console.log(value2)//输出：9

        var myArr2=new Array();
        myArr2['name']="libufan";
        myArr2['age']=18;
       var  myName=myArr2['name']='lihaha';
        console.log(myName);//lihaha

2.8 数组元素的删除

不仅可以根据需求修改数组中指定的元素值，也可以删除数组中指定的元素值。数组删除指定元素值使用 delete 关键字。

  // 定义数组
      var myArr=new Array(5,3,"hah",true,"liuliu");//

        // 删除第三个值
        delete myArr[2];
        console.log(myArr);//(5) [5, 9, empty, true, "liuliu"]

值得注意的是: 上述代码使用 delete 关键字执行删除数组元素值的操作时，并不影响数组的长度。

 // 定义数组
      var myArr=new Array(5,3,"hah",true,"liuliu");//
     console.log(myArr.length)// 5
        // 删除第三个值
        delete myArr[2];
        console.log(myArr);//(5) [5, 9, empty, true, "liuliu"]
        console.log(myArr.length)// 5

2.9 遍历数组元素

使用for语句是遍历数组元素最常见的方法:

      // 定义数组
      var myArr=new Array(5,3,"hah",true,"liuliu");//

        for (var i=0;i < myArr.length;i++) {

            console.log(myArr[i])// 输出：5,3,"hah",true,"liuliu"

        }

for in 语句

在 ECMAScript 5 中新增了 for in 语句，同样也可以用于遍历数组:

  // 定义数组
      var myArr=new Array(5,3,"hah",true,"liuliu");//

        for (var i in myArr) {
            console.log(i+" :"+myArr[i]);// 分别输出 0 :5；1 :3；2 :hah；3 :true；4 :liuliu
        }

值得注意的是:

for 关键字后定义的变量 i 表示当前数组的下标。
for in 语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。

for in 语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到:

 // 定义数组
      var myArr=new Array(6);//
        myArr[2]="li";
        myArr[4]="ha";
        for (var i in myArr) {
            console.log(i+" :"+myArr[i]);// 分别输出 2 :li   4 :ha
        }

2.10变量与数组（数组的复制）

 <script>
        var str="hah";
        var str2=str;
        str="lala";
        console.log(str);// lala
        console.log(str2);// hah

        var myarr=new Array("li","ha","ha");
        var myarr2=myarr;// 数组是引用类型，myarr是把引用地址赋值给了myarr2对象
        myarr[3]="bang";
        console.log(myarr);//
        console.log(myarr2);//


    </script>

3.1 定义二维数组

定义一个规整的二维数组:

var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ];

定义一个不规整的二维数组:

var arr2 = [];
arr2[0] = [ 101 ];
arr2[1] = [ 201, 202 ];
arr2[2] = [ 301, 302, 303 ];

3.2 使用二维数组

读取二维数组中的具体元素:

      var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ] ;
        var  a=arr1[1][2];// 第一个中括号里面的数字表示最外面数组的索引，
                          // 第二个中括号里面的的数字表示里面数组的索引
        console.log(a);// 23
        arr1[1][2]=230; // 把23 改成230

二维数组的遍历需要使用循环嵌套来实现:

<script>
        var arr1 = [ [11,12,13], [21,22,23], [31,32,33] ] ;

        for ( var i=0;i<arr1.length;i++){
            for ( var b=0;b<arr1[i].length;b++){
                console.log(arr1[i][b]);
            }
        }

    </script>

4. 数组的常见方法

4.1 检测数组

如何确定当前是一个数组，JavaScript 提供如下几种方式:

typeof 无法检测数组对象：typeof [] 返回 object
instanceof ：[] instanceof Array 返回 true/false
Object.prototype.toString.call( [] )：返回 [ object Array ]
Array.prototype.isPrototypeOf( [] )：返回 true/false
ES5 中新方法： Array.isArray( [] ) : 返回 true/false

        var myarr=new Array("li","ha","ha");

        console.log(typeof myarr);//object
        console.log(myarr instanceof Array);//true
        console.log(Object.prototype.toString.call( myarr ));//[object Array]
        console.log(Array.isArray(myarr));//true
        console.log(Array.isArray(1));//false

4.2 转换方法

JavaScript 提供了如下方法，用于数组的转换:

方法	说明
toString()	把数组转换为字符串，并返回结果。
valueOf()	返回数组对象的原始值。

4.3 进出栈方法

JavaScript 提供了如下方法，用于数组的进出栈操作:

方法	说明
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
pop()	删除数组的最后一个元素并返回删除的元素。
shift()	删除并返回数组的第一个元素。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。

        var myarr=new Array("li","ha","ha",916);

        console.log(myarr.push("1993"));//5
        console.log(myarr.pop());//  1993 删除最后一个元素，返回删除的元素
        console.log(myarr);// ["li", "ha", "ha", 916]
        console.log(myarr.shift());// li  删除第一个元素，并返回该元素
        console.log(myarr);// ["ha", "ha", 916]
        console.log(myarr.unshift("plus","huawei"));// 在首位添加元素，并返回长度 5
        console.log(myarr);//(5) ["plus", "huawei", "ha", "ha", 916]

4.4 排序方法

JavaScript 提供了如下方法，用于数组的排序操作:

方法	说明
reverse()	反转数组的元素顺序。
sort()	对数组的元素进行排序。

 var myarr=new Array("aa","li","hd","cc","ha");

        console.log(myarr.reverse());// (5) ["ha", "cc", "hd", "li", "aa"]
        console.log(myarr.sort())// (5) ["aa", "cc", "ha", "hd", "li"]

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

语法

array.sort(sortfunction)

参数 Values

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

返回值

Type	描述
Array	对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
fruits输出结果：

1,5,10,25,40,100

4.5 连接方法

JavaScript 提供了如下方法，用于多个数组之间的连接操作:

方法	说明
concat()	连接两个或更多的数组，并返回结果。

        var myarr=new Array("li","ha","ha");
        var myarr2=new Array(1993,10);
        var myarr3=new Array("yao","yao");

        var arr=myarr.concat(myarr2,myarr3,"string");
        console.log(arr);(8) ["li", "ha", "ha", 1993, 10, "yao", "yao", "string"]

4.6 操作方法

JavaScript 提供了如下方法，用于数组的删除、插入和替换操作:

方法	说明
slice()	选取数组的的一部分，并返回一个新数组。
splice()	从数组中添加或删除元素。

var myarr=new Array("li","ha","ha","yao","qie","nao");
        var newarr=myarr.slice(1,3);// 从下标1开始截取下标3的前一位 ；截左不截右
        console.log(newarr)//(2) ["ha", "ha"]
        var newarr=myarr.slice(1);//从下标1开始截取至最后
        console.log(newarr)//(5) ["ha", "ha", "yao", "qie", "nao"]

var myarr=new Array("li","ha","ha","yao","qie","nao");
        var newarr=myarr.splice(1,2,"bu","fan");
// 第一个参数表示从哪开始删除或添加，第二个表示删除几个元素，第三个及后面的参数表示要添加的元素
        console.log(newarr);//(2) ["ha", "ha"]// 返回删除的元素
        console.log(myarr);//(6) ["li", "bu", "fan", "yao", "qie", "nao"]

4.7 位置方法

JavaScript 提供了如下方法，用于获取数组中指定元素的索引值:

方法	说明
indexOf()	搜索数组中的元素，并返回它所在的位置。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

    var myarr=new Array("li","ha","ha","yao","ha","qie","nao");

        console.log(myarr.indexOf("ha"));// 1
        console.log(myarr.lastIndexOf("ha"));//4

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（十二）数组

1. 数组是什么数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指...
复制链接

扫一扫