06-数组

6/29/2022

# 1 - 数组(Array)

# 1.1 数组的概念

数组和对象都是一种保存多个数据的数据结构,是一种容器,数组是有序的集合,我们可以通过索引来获取到它里面的元素。

  • 官方来说,数组,就是一组数据的集合,其表现形式就是内存中的一段连续的内存地址
  • 简单来说,数组就是数据的集合 里面可以放很多个数据
  • 我们数组中, 虽然叫数组,但是里面可以放的元素类型 是都可以的
   var arr = [1,2,3,4,5,6]
    // 每一个东西叫做 我们数组中的元素
    // 每个元素之间 通过,隔开
    // 像这种 数据的集合  我们叫做数组
1
2
3
4

# 2.2 数组的定义方式

  • var arr = [值1,值2,值3] 声明赋值
  • var arr = new Array(值1,值2,值3) 直接实例化
  • var arr = new Array(8) 创建数组并且指定长度
    // 方法1
    var arr = [1,2,3,4,5];
    console.log(arr);

    // 方法2
    var arr2 = new Array(1,2,3,4,5);
    console.log(arr2);

    // 方法3
    var arr3 = new Array(5);
    console.log(arr3);
1
2
3
4
5
6
7
8
9
10
11

# 2.3 数组的遍历

  • 什么是遍历?
  • 遍历就是每一个都去访问一次 通通过一遍的意思

普通for循环遍历:

for(var i=0; i<arr.length; i++){
  console.log(arr[i])
}
1
2
3

for..in 遍历,获取到索引值:

for(var index in arr){
  console.log(arr[index])
}
1
2
3

for..of 遍历,获取到每一个元素:

for(var item of arr){
  console.log(item)
}
1
2
3
    // 现在有成绩数组 score = [98,97,99,96,98]
    // 需要我们依次打印出来这些成绩
    var score = [98,97,99,96,98]
    console.log(score[0]);
    console.log(score[1]);
    console.log(score[2]);
    console.log(score[3]);
    console.log(score[4]);

    // 这就是遍历数组
    for(var i=0;i<5;i++){
        // 这里的i和数组有什么联系?
        // 0 1 2 3 4
        // 而我们数组的索引对应的刚好也是 0 1 2 3 4
        // 所以我们可以直接用i当做数组的索引值
        console.log(score[i]);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.4 数组遍历之求最大值和最小值

<script>
    // 现在有成绩数组 score = [98,97,99,96,98]
    // 需要打印出成绩的最大值
    var score = [98,97,99,96,98];
    var max=score[0];
    for(var i=0;i<5;i++){
        if(max<score[i]){
            max = score[i]
        }
    }
    console.log(max);
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 2.5数组的长度属性length

    // 现在有成绩数组 score = [98,97,99,96,98]
    // 需要打印出成绩的最大值
    var score = [98,97,99,96,98];
    // 我们之前的for循环 都是 i<5 这里的5 是我们自己查的
    // 现在我觉得查太累了 如果以后有很多 我查不过来
    // 此时我们就需要用到我们的一个属性 叫length

    // var str='123'
    // console.log(str.length);
    console.log(score.length);

    for(var i=0;i<score.length;i++){
        console.log(score[i]);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.5数组练习之求平均数

    // 现在有成绩数组 score = [98,97,99,96,98]
    // 需要打印出成绩的平均分
    var score = [98,97,99,96,98];
    var sum = 0;
    for(var i = 0;i<score.length;i++){
        // 每一次都相加 然后求和
        sum+=score[i]
    }
    // 通过和 / 长度得到平均分
    console.log(sum/score.length);

1
2
3
4
5
6
7
8
9
10
11

# 2.6字符串和数组之间的转换

  • join函数 数组.join(‘拼接符’)
  • split函数 字符串.split('分隔符')
    // 数组和字符串有很多相通的地方
    // 1.访问方式
    var arr = ['hello', 'js']
    console.log(arr[0]);//hello
    var str = 'hello js'
    console.log(str[0]);//h

    // 数组转成字符串
    // 需要使用使用join() 
    console.log('数组转字符串');
    var str1 = arr.join();
    console.log(arr);
    console.log(str1);
    // 我虽然变过来了 但是我不想要那么逗号
    var str2 = arr.join('');//当我在join的括号里面加上了一个空串的时候
    console.log(str2);
    var str3 = arr.join('-');
    console.log(str3);
    // 我们join的括号里面写的东西 会当我数组元素拼接到一起的时候 作为拼接符号出现
    // 如果什么都不写 那就是逗号 如果写一个空串 那就是什么都没有


    // 字符串转成数组
    console.log('字符串转数组');
    var strs = 'abbbcbdbebfbgb';
    var strb = 'a--b-c-d-e'
    // 字符串想转成数组的方式 我们通过split去转
    // 字符串.split();
    var arr1 = strs.split();
    console.log(arr1);
    // 如果我什么都不写 那就是把整个字符串放到一个数组里面
    var arr2 = strs.split('b');
    console.log(arr2);
    // 这里 我i们的b就变成了分隔符
    var arr3 = strb.split('');
    console.log(arr3);
    // 就是把分隔符变成了我数组中的 逗号
    // 直接写一个空串 那就是一个字符一个元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 2.7数组的CRUD操作

  • push函数
  • unshift函数
// CRUD操作指的就是  增删改查操作

    var arr = ['hello','js'];
    // 关于数组的查找 实际上我们就是去判定 一个数组中是否有某个元素
    // 最简单的方式 我们使用遍历查找法
    // 比如 现在我要去查找 上面的数组中是否有css这个元素

    // 数组的查找
    var flag=false;
    for(var i=0;i<arr.length;i++){
        if(arr[i]== 'css'){
            // 走到这里面说明有css这个元素
            flag=true;
            break;
        }
    }
    if(flag){
        alert('找到了')
    }else{
        alert('没找到')
    }

    console.log(arr);
    // 数组的修改
    // 数组的修改 实际上是对数组中元素的修改
    // 我们访问数组的方式是直接通过[]进行访问
    // 现在我通过方括号访问后去赋值 就是修改
    // 对于上面那个输出 我们页面打开后 代码执行到那里 输出的是hello js
    // 但是当你在浏览器的控制台点击下拉的时候 相当于重新拿了一次值 此时就是最新的值 就是hello css
    arr[1]='css';//我们通过直接赋值的形式 改变了数组中的值
    console.log(arr);


    // 数组的增
    // 数组.push('要添加的元素')
    // 此时我的数组中是hello css
    var res =  arr.push('js');
    console.log(arr);
    // 整体的值
    console.log(res);//整体的值 或者说push函数的返回值 是新数组的长度
    // push是添加到数组的后面

    // 能否添加到数组的前面
    // unshift 用法和push的用法保持一致
    var res1= arr.unshift('nihao');
    console.log(arr);
    console.log(res1);//长度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 2.8数组的删除

  • pop函数
  • shift函数
  • splice函数
    var arr = [1,2,3,4,5]


    // 三种常见的删除数组中元素的方式
    // 1.删最后一个元素
    // 使用的函数是 pop();
    // arr.pop();
    var res1= arr.pop();
    console.log(arr);//[1, 2, 3, 4]
    console.log(res1);//整体的值是 你删除掉的元素


    // 2.删第一个元素
    var res2= arr.shift();//unshift 把元素加到最前面 shift 把最前面的元素 删掉
    console.log(arr);//[2,3,4]
    console.log(res2);//1


    // 3.删除某一个元素
    // 用到是splice 不要和split弄混了 
    // splice原意是截取 对于splice来说 里面有2个值
    // 第一个值 是你要开始截取的索引 第二个值是你要截取的长度
    // 我要想删除某一个元素 那么是不是只要找到其对应的下标即可
    // arr.splice()
    var res3=arr.splice(0,2);
    console.log(arr);
    console.log(res3);//整体的值是你截下来的东西
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 2.9数组的方法之indexOf函数

 // 数组.indexOf(要查找的元素)
    // 他整体的值就是第一次出现要查找元素的索引
    // 如果你找的元素 没有找到 indexOf就会给你一个-1
    var arr = [96, 97, 98, 98, 99, 100];
    console.log(arr.indexOf(101));//-1

    // var index  = arr.indexOf(98);
    // arr.splice(index,1)
    // console.log(arr);


    // arr.splice(arr.indexOf(98),1)
    // console.log(arr);
    // arr.splice(arr.indexOf(98),1)
    // console.log(arr);


    var arr1=[96, 97, 98, 98, 99, 100,96, 97, 98, 98, 99, 100,96, 97, 98, 98, 99, 100,96, 97, 98, 98, 99, 100]
    while(arr1.indexOf(98)!= -1){
        // 进到这里面的时候 说明我成绩里面还有98
        arr1.splice(arr1.indexOf(98),1)
    }
    console.log(arr1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 3.0 数组的其他高阶方法

arr.forEach:

  • 遍历数组,并且让数组中每一个元素都执行一次对应的方法;

arr.map:

  • map() 方法创建一个新数组;
  • 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成;

arr.filter:

  • filter() 方法创建一个新数组;
  • 新数组中只包含每个元素调用函数返回为true的元素;

arr.reduce:

  • 用于计算数组中所有元素的总和;
  • 对数组中的每个元素按序执行一个由您提供的 reducer 函数;
  • 每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值;
Last Updated: 12/25/2022, 10:02:14 PM