数组 Array (全世界最详细的数组解释）

最新推荐文章于 2024-04-26 16:47:03 发布

Miketutu

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量5.9k

点赞数 11

文章标签： javascript 前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/Miketutu/article/details/128709267

版权

数组 Array，可以用来将多条数据通过 [] 包裹起来组成一个整体。

例如：

\1. var arr = [100, 'hello', true, 200];

说明：

· 元素（数组项）：数组中的每一条数据，都可以叫做数组的“元素”，也可以叫做“数组项”；

· 下标（索引）：数组中的每一条数据在数组中都有一个对应的位置，我们通过数字来表示每一条数据位置。但是要注意，数字从 0 开始取值。这个用来表示位置的数字，我们可以叫做数组的“下标”或者数组的“索引”。

一、数组的特点

· 无类型限制：数组中可以保存任意类型的数据；

· 无数量限制：数组中可以保存任意数量的数据；

· 动态数组：数组创建完成后，后续还可以继续对数组中的元素进行增加、修改、删除等操作；

二、数组的创建

数组的创建分为两种形式：字面量方式和构造函数方式。

1. 字面量方式

var变量名= [ ];

2.构造函数方式

var变量名=newArray( );

三、数组初始化

在创建数组时，就保存数据到数组中：

var变量名= [数据一，数据二....]

四、数组的下标（索引）

我们可以通过数组的下标，找到数组中对应位置的数据，然后对数据进行增加，删除，修改，查看等操作。

1、查看

- 增加

 1.vararr= ['a', 'b', 'c'];
 2.
 3.arr[3] ='d';
 4.arr[5] ='e';
 5.
 6.console.log(arr);

3、修改

 1.vararr= ['a', 'b', 'c'];
 2.
 3.arr[0] ='d';
 4.
 5.console.log(arr);

4、删除

五、数组的长度

每一个数组身上，都有一个length的属性，用来表示数组的长度（数组中元素的个数）

 1.// 获取数组的长度
 2.varlen=arr.length;
 3.console.log(len);
 4.
 5.// 修改数组的长度
 6.arr.length=0;

六、数组的遍历

遍历，依次访问数组中的每一个元素。


 1.for(vari=0; i<数组名.length; i++) {
 2.    console.log(数组名[i]);
 3.}

七、多维（二维）数组

数组中的元素也可以是数组，这样的形式的数组，我们叫做多维数组

有几维就遍历几次

 1.vararr= [
 2.    ['a', 'b'],
 3.    ['c', 'd', 'e']
 4.];

多维数组的遍历，根据数组嵌套的层数，来嵌套for循环实现每一个元素的遍历：

 1.for(vari=0; i<数组名.length; i++) {
 2.    for(varj=0; j<数组名[i].length; j++) {
 3.        console.log(数组名[i][j]);
 4.    }
 5.}

练习：

1、求出给定数组中所有数字的和，以及所有奇数和、偶数和

 <script>
         vararr= [1,2,3,4,5,6,7,7,8]
         varsum=0
         varoddSum=0;
         varevenSum=0;
         for(leti=0;i<arr.length;i++){
                  sum+=arr[i]
                  if(arr[i] %2===0 ){
                     evenSum+=arr[i]
                  }else{
                     oddSum+=arr[i]
                  }
         }
         console.log(sum ,evenSum,oddSum)
     </script>

2、找最大值和最小值

 vararr= [98,6,9,2,65,97,22]
         letmax=arr[0];
         letmin=arr [0]
         for(leti=1;i<arr.length;i++){
             if(max<arr[i]){
                 max=arr[i]
             }
         }

3、找出数组中重复的值（假设只有一组重复的值）

    vararr= [1,2,3,4,5,1,6,7,8,9]
       a:  for(leti=0;i<arr.length;i++){
       b:    for(letj=i+1;j<arr.length; j++){
                 if(arr[i] ==arr[j]){
                     console.log(arr[i])
                     breaka;  //給for循环起名字来停止循环
                     breakb;
                 }
             }
         }

4、多用户登录

注意这个题的关键是第二个if要写在第二个循环外面，否则只能暂停第二个循环，第一个循环仍然没有停止

 varusers= [
             ['1','1'],
             ['2','2'],
             ['3','3'],
         ]
 
         varflag=false//默认登陆失败  开关变量：如果刚开始设置的是true，则满足条件的哪里需要设置fales；如果刚开始设置的是false，则满足条件哪里需要将满足条件的那里设置为true，不满足的哪里设置为false；
 
         for(leti=3; i>0;i--){
             varusername=prompt('请输入用户名');
             varpassword=prompt('请输入密码');
             //依次判断每一个账号是否可以登录成功
             for(varj=0;j<users.length;j++){
                 if(users[j][0] ===username&&users[j][1] ===password){
                     flag=true
                     i=-1;
                     alert('登陆成功')
                     break;
                     
 
                 }
             }
             //等到循环全部结束，将每一个用户都判断后，才能下结论说用户登陆失败
             if(!flag){
                 alert(`登录失败,你还有${i-1}次机会`);
             }
         }

5、数组的排序

不管采用那种排序，核心都是将两个数进行比较，如果顺序不对，就交换位置

1. 选择排序：

      将每一个数依次和它后面的所有数进行比较
   vararr= [1, 2, 3, 5, 6, 7, 8, 4]
         varmax=arr[0]
         for (leti=0; i<arr.length-1; i++) {
             for (letj=i+1; j<arr.length; j++) { j代表的是和i后面的数
                 if (arr[i]>arr[j]) {
                     max=arr[j]
                     arr[j] =arr[i]
                     arr[i] =max
                 }
             }
 
         }

2.冒泡排序

将相邻的两个数进行比较。

外侧循环控制比较的轮数，内侧循环控制每一轮相邻两个数比较的次数。

 vararr= [1, 2, 3, 5, 6, 7, 8, 4]
         varmax ;
         for (leti=1; i<arr.length; i++) {  //控制循环轮数
             for (letj=0; j<arr.length-i; j++) {
                 if (arr[j]>arr[j+1]) {
                     max=arr[j]
                     arr[j] =arr[j+1]
                     arr[j+1] =max
                 }
             }
 
         }

数组的常见方法（API)

一、操作方法

方法	参数（小括号中的值）	说明	是否改变原数组	返回值
push()	要添加的数据，可以有多个，每个数据之间用 , 隔开	向数组末尾添加元素	是	数组长度
pop()	无	删除数组中最后一个元素	是	删除的元素
unshift()	要添加的数据，可以有多个，每个数据之间用 , 隔开	向数组开头添加元素	是	数组长度
shift()	无	删除数组中第一个元素	是	删除的元素
splice()	1. 只有一个参数：修改后的长度 2. 两个参数：下标和删除的元素个数 3. 三个及以上：下标、删除元素的个数、新增的元素	1. 修改数组长度 2. 删除任意位置元素 3. 在任意位置新增元素 4. 修改任意位置元素	是	删除的元素

 1.vararr= ['a', 'b', 'c', 'd', 'e'];
 2.console.log('原数组：', arr);
 3.
 4.varresult=arr.push('a', 'b');
 5.varresult=arr.pop();
 6.varresult=arr.unshift('hello', 'world', 'e');
 7.varresult=arr.shift();
 8.varresult=arr.splice(0, 1, 'hello');
 9.
 10.console.log('操作后的数组：', arr);
 11.console.log('返回值：', result);

练习

数组去重

 <script>
         vararr= ['a','b','b']
         for(leti=0;i<arr.length-1;i++){
             for(letj=i+1;j<arr.length;j++){
                 if(arr[i] ===arr[j]){
                     arr.splice(j,i);
                     j--;
                 }
             }
         }
         console.log(arr)
     </script>

二、查找

方法	参数（小括号中的值）	说明	是否改变原数组	返回值
indexOf()	需要查询的元素	查询元素在数组中第一次出现的下标	否	下标没找到则返回 -1
lastIndexOf()	需要查询的元素	查询元素在数组中最后一次出现的下标	否	下标没找到则返回 -1
includes()	需要查询的元素	查询元素在数组中是否存在	否	布尔值
findIndex ()	返回符合条件的元素的索引	查找符合条件的元素的索引		下标

三、排序方法

方法	参数（小括号中的值）	说明	是否改变原数组	返回值
reverse()	无	反转数组元素的顺序	是	倒序后的新数组
sort()	function(a, b) { return a - b } function(a, b) { return b - a }	1. a - b 从小到大排序 2. b - a 从大到小排序	是	排序后的新数组

 1.vararr= [10, 12, 5, 8, 15, 4, 9, 0];
 2.console.log('原数组：', arr);
 3.
 4.varresult=arr.reverse();
 5.varresult=arr.sort(function(a, b) {
 6.    returnb-a;
 7.})
 8.console.log('操作后的数组：', arr);
 9.console.log('结果：', result);

练习：

根据年龄排序：

 <script>
         varstudents= [
             ['张三', 30],
             ['李四', 34],
             ['王五',67],
             ['马冬梅', 89],
         ]
 
 
         students.sort(function (a, b) {
             returna[1] -b[1]  //a,b分别取得是students数组，但里面还有小数组，所以得加下标。
         })
         console.log(students)
     </script>

四、类型（）转换方法

方法	参数（小括号中的值）	说明	是否改变原本的值	返回值
join()	任意字符串	将数组元素按照指定字符串(例如’-‘，’+‘)拼接成一个大字符串	否	拼接后的字符串
split()	任意字符串	将字符串按照指定的字符拆分成一个数组	否	拆分后的新数组

 1.// 数字转字符串
 2.vararr= [1, 2, 3, 4];
 3.console.log('原数组：', arr);
 4.varresult=arr.join('');
 5.console.log('操作后的数组：', arr); 
 6.console.log('结果：', result); //
 7.
 8.// 字符串转数组
 9.varstr='hello';
 10.console.log('原字符串：', str);
 11.varresult=str.split('e');
 12.console.log('操作后的字符串：', str);
 13.console.log('结果：', result); //['h'  'llo']

五、数组的拼接和截取

方法	参数（小括号中的值）	说明	是否改变原本的数组	返回值
concat()	需要合并的数组或值，多个数据之间用 ,隔开	可以将多个数组或值合并成一个新的数组	否	合并后的新数组
slice()	1. 只有一个参数：开始截取的下标（包含） 2. 两个参数：开始截取的下标（包含）、结束截取的下标（不包含）说明：可以为负数	截取数组中的某一个部分	否	截取后的新数组

数组的循环方法

一、for循环

1.vararr= ['a', 'b', 'c', 'd'];

2.for(vari=0; i<arr.length; i++) {

3. console.log(arr[i]);

4.}

优化版的for循环

1.vararr= ['a', 'b', 'c', 'd'];

3.for (vari=0, len=arr.length; i<len; i++) {

4. console.log(arr[i]);

5.}

二、for of

ES6中ES6 中新增了 for of 用来遍历数组。

**其中 item 是任意变量名，arr 是要遍历的数组名。

1.vararr= ['a', 'b', 'c', 'd'];

3.for (varitemofarr) {

4. console.log(item);

5.}

三、数组的循环方法

1. forEach()

其中 item和index可以换其他名字；

1.vararr= ['a', 'b', 'c', 'd'];

2.arr.forEach(function (item, index) {

3. console.log(`当前元素${item}，对应的下标${index}`);

4.})

注意：

forEach() 循环中不能使用 break 和 continue 。

forEach就是一个单纯的遍历没有其他功能，只是能拿到下标和数组里面的元素。

2、map( )

注意：如果不加return则返回的是undefined

vararr= ['a''b''c''d']

arr.map(function(item,index){

console.log(`当前元素${item},对应的下标${index}`);

returnitem*2;

})

8.varresult=arr.map(function (item, index) {

9. console.log(`当前元素${item}，对应的下标${index}`);

10. if (item>20) {

11. returnitem*2;

12. } else {

13. returnitem;

14. }

15.});

console.log(result);

说明

map( )除了可以正常遍历数组，获取到数组的元素和下标外。还有一个功能，在map的方法中，可以通过

return新数据得到一个新数组，

需要把数组渲染成HTML节点，优先考虑map和join(‘ ’)

适合创建一个与原始数组元素一一对应的新数组

特点

新数组的长度和原数组的长度一致；

新数组的数据和原数据的数据可以不一致；

3、filter( )

1.vararr= [10, 20, 30, 40];

3.varresult=arr.filter(function (item, index) {

4.console.log(`当前元素${item}，对应的下标${index}`);

5.returnitem>20;

6.})

7.console.log(result);

说明

filter（）可以正常的遍历数组，获取数组的元素和下标；

通过return筛选条件得到一个满足条件的新数组；

filter返回的是布尔值。

item和index尽量不要改变名字。

一般很少在filter里面写if条件，return本身就是一个判断条件

一般去重用filter( ).

filter的妙用

可以在filter里面return一个true，代表将遍历的结果返回给新数组，若是false则代表不降遍历的结果发回给新数组

特点

新数组和原数组的长度可以不一致；

新数组的数据一定是来源于原数组；

filter和map的区别

filter不会改变原数组的数据

map会改变原数组的数据

练习：

用 filter 方法实现数组的去重；

vararr= ['a','b','c','a','b','c']

varnewArr=arr.filter(function(item,index){

returnarr.indexOf(item) ===index; //当item= 'a'时，'a'的下标为0，当循环到第二次"a"时，因为indexOf返回的是元素第一次出现的下标，而此时index已经为3，所以return返回的是false，所以第二个"a"不会返回到新数组中。

});

console.log(newArr);

给出以下数组（数组中的第一个元素是班级名称，第二个元素是班级中的学生姓名）：

要求：

· 找到所有的班级名称，组成一个新数组 ['Web01', 'Web02', 'Java01', 'Java02']；

· 找到所有班级名称以及班级学生人数，组成新数组 [['Web01', 2], ['Web02', 1], ['Java01', 3], ['Java02', 0]]；

varclassesData= [
['Web01', ['张三', '李四']],
['Web02', ['张三']],
['Java01', ['张三', '李四', '王五']],
['Java02']
]
varclassesData= [
['Web01', ['张三', '李四']],
['Web02', ['张三']],
['Java01', ['张三', '李四', '王五']],
['Java02']
]
varnewArr=classesData.map(function(item,index){ //因为map是改变原数组的数据的，而filter不改变原数组的数据，所以采用map( )
returnitem[0]; //这里需要注意的是item[0]取的是大数组里的第一个元素，item[1]取的是大数组里的第二个元素，看到这种重叠的数组先把他们分解了。
})
console.log(newArr)
//找到所有班级名称以及班级学生人数，组成新数组 [['Web01', 2], ['Web02', 1],
varnewClass=classesData.map(function(item,index){
return [item[0],item[1] ?item[1].length:0]
})
console.log(newArr)
console.log(newClass)