JS之数组

简介: JS之数组

JS之数组

文章目录

JS之数组

为什么要学数组?

什么是数组呢?

如何使用数组?

利用new创建数组

利用数组字面量创建数组

如何获取数组的元素?

数组的长度

接下来就上案例

1.计算数组的和以及平均值

2.数组中的最值

3.数组转换成字符串

4.数组新增元素

筛选数组

翻转数组(逆序输出)

冒泡排序

结束语

为什么要学数组?

我们先来思考一个问题,如果我们想储存班级中47个学生的期末成绩,那么该如何存储呢?以目前为止所学的知识,存储东西只能用变量,那么这意味着我们需要声明47个变量来存储47个学生的成绩,这个操作可行是可行,就是浪费了很多的内存,这个时候聪明的张三就发明了数组,而数组就可以把一组相关的数据一起存放,并提供方便的访问方式。

什么是数组呢?

数组是一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式。

代码示范

      //存放一个值
      var num = 10;
      //存放九个值
      var  arr =[1,2,3,4,5,6,8,9,7];

如何使用数组?

我们能使用手机,电脑正是因为它们存在我们才有机会去使用,数组也是一样,要使用必须自己创建一个数组,在JS中创建数组有一下两种方式

  • 利用new创建数组
  • 利用数组字面量创建数组

利用new创建数组

      //存放一个值
      var num = 10;
      //存放十个值
      var [] arr = {1,2,3,4,5,6,8,9,7,};

利用数组字面量创建数组

      //使用数组字面量方式创建空数组
      var arr=[];
      //使用数组字面量方式创建带有初始化值的数组
      var arr=['大黄','阿狗','阿毛'];
  • 数组的字面量是[]
  • 声明数组并赋值为数组的初始化

在Java中声明一个int的数组,数组的中的元素必须也是int,不然就会报错。在JS当中我们压根就不用关心这个问题,因为js的数组中可以存放任意类型的数据,例如字符串,数字,布尔值。

var arr=['小白',121,true,29.9];
//这就很舒服。

如何获取数组的元素?

我们把数组看做一家酒店,酒店里有若干个房间。假设你的好哥们张三在某一个酒店订了房间,邀请你去打游戏,那么你该如何找到他呢?首先你会询问你哥们在哪个酒店,在几号房。然后你才可能找到他。每个酒店有自己的地址,酒店的房间相应的也有房间号。同理数组也是一样的,数组在内存中占据了一块空间,同时也分配到了自己的地址值(其实就是一串数字),数组中又有若干个元素,每个元素有索引(下标),相当于房间的门号。我们可以利用索引来访问(获取,得到的意思),设置,修改对应的数组元素,我们可以通过数组名[索引]的形式来获取数组中的元素。

看看我的第一张内存图

访问即获取

  //定义一个名为arr的数组
     var arr=[1,2,3];
    //访问数组中的元素
    console.log(arr[1]);

数组的长度

数组的长度就是数组元素的元素个数,使用数组名.length可以访问数组元素的数量

    var arr = ['黄茂荣', '关羽', '张飞', '叶秋涵'];
      for (var i = 0; i < 4; i++) {
        console.log(arr[i]);
      }
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
      //1.数组长度是元素的个数,不要跟索引号混淆
      //2. arr.length动态监测数组元素的元素,只要增加或者删除了数组中的元素,它就会自动监测        //出来新的数组长度

不难发现有一个规律,从数组中取出的每一个元素,代码是重复的,唯一的不同就是 获取数组的索引在递增"。而循环正好就能达到这样的目的。

利用循环对上面的代码优化

      var arr=['小白','12112,','true',2.12];
      for (var i=0;i<arr.length;i++){
        console.log(arr[i]);
      }
接下来就上案例
1.计算数组的和以及平均值
    //预先声明两个变量,一个用来存放数组的和,一个用来存放平均值
    var arr=[1,1,24,457,6,4];
      var sum=0,average=0;
      for (var i=0;i<arr.length;i++){
        sum+=arr[i];  //用发for求和
      }
      average=sum/arr.length; 
      console.log(sum,average);

2.数组中的最值

    //用打擂台的思想求最值
      var arr=[1,1,24,457,6,4];
      var max=arr[0];//先自己假设一个最大值,放上擂台
      for (var i=0;i<arr.length;i++){
        if(arr[i]>max){
          max=arr[i];//陆续上台和在台上的第一值比较
        }
      }
      console.log(max); 

3.数组转换成字符串

    //将数组['red','green','blue','pink'];
      //1.需要一个新变量用于存放转换完的字符串
      //2.遍历原来的数组,分别把数组里面的数据取出来,加到字符串里
      //3.同时在后面多一 个分隔符
      var  arr=['red','green','blue','pink'];;
      var str='';
      var sep='*';
      for (var i=0;i<arr.length;i++){
        str+=arr[i]+sep;
      }
      console.log(str);

4.数组新增元素

法一:修改length长度新增数组元素

  • 可以通过修改length长度来实现数组扩容
  • length属性即可读

法二:通过修改数组索引新增数组元素

  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值,否则会覆盖掉以前的数据
      ///1.新增数组元素,修改length长度
      var arr=[1,3,4];
      console.log(arr.length);//修改前的数组
      arr.length=5; //把数组中的长度修改为了5,里面应该可以放发5个元素
      console.log(arr[3]);//没有给值,默认是undefined
      console.log(arr[4]);//没有给值,默认是undefined
      //2.新增数组元素,修改索引号,追加数组元素
      var arr1=['red','green','blue'];
      arr1[3]='pink';
      console.log(arr1);
      arr1[4]='hotpink';
      console.log(arr1);
      arr[0]='yello';//替换原来数组的第一个元素
      console.log(arr1);
      arr1='有点意思';
      console.log(arr1);//不要直接给数组赋值,否则里面的数组元素都会被替换

结果图

筛选数组

    //法一
    //将数组[2,0,6,11,77,0,52,0,25,7]大于等于10的元素选出来,放入新的数组
    //1.声明一个新的数组用于存放新数据
    //2.遍历原来的数组,找出大于等于10的元素
    //3.依次追加给新的数组
    var arr=[2,0,6,11,77,0,52,0,25,7];
    var newArr=[];
    var j=0;
    for (var i=0;i<arr.length;i++){
      if(arr[i]>=10){
        newArr[j]=arr[i];
        j++;
      }
    }
    console.log(newArr);
    法二
    var arr = [2, 0, 6, 11, 77, 0, 52, 0, 25, 7]; //法二
    var newArr = [];
    for (var i = 0; i < arr. length; i++) {
        if (arr[i] >= 10) {
          newArr[newArr.length] = arr[i];//新数组索引号应该从0开始,依次递增
        }
      }
      console.log(newArr);

翻转数组(逆序输出)

      var arr=['red','green','blue'];
      for (var i=arr.length-1;i>=0;i--){//从数组中的最后一个元素开始输出
        console.log(arr[i]);
      }

冒泡排序

冒泡排序是一种简单的算法,它会重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来,走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成了。这个算法的名字由来是因为越小的元素会经由交换慢慢浮到数列到顶端。

案例使用冒泡排序把这个数组 排好序 var arr = [4545, 15465, 295, 3654, 999];

案例分析图

代码示范

      //冒泡排序
      var arr = [4545, 15465, 295, 3654, 999];
      for (var i = 0; i <= arr.length - 1; i++) { //外层循环管躺数,
      for (var j = 0; j <= arr.length - i - 1; j++) { //内层循环管每一趟的交换次数
          //内部交换2个变量的值,前一个和后一个数组元素相比较
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      console.log(arr);

结束语

我们曾吹过春天慵懒的风,走过夏夜无人的街,踩过深秋路边的叶,念过寒冬纷飞的雪。

相关文章
|
7天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
19 3
|
20天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
20天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
2月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
2天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
2天前
|
JavaScript 前端开发
JavaScript 数组的添加删除和排序
JavaScript 数组的添加删除和排序
|
5天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
15 4
|
12天前
|
JavaScript 前端开发
js数组过滤,从简单到多条!
js数组过滤,从简单到多条!
|
13天前
|
存储 JavaScript
|
13天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查