javaScript:数组的认识与使用以及相关案例

目录

一.前言

二.数组

1.认识

2.数组的声明 

1.let arr = [1,2,3,4]

2.结合构造函数，创建数组

注意：

 3.数组长度的设置和获取

注意 

4.删除数组元素

5.清空数组

三.获取数组元素

获取数组元素的几种方法

1.使用方括号 [] 访问元素：

2.使用循环遍历数组：

3.使用数组迭代方法：

四.遍历数组（详解） 

遍历数组常用的方法

1.for循环

2.for-in循环

3.forEach函数

 案例

1.猜拳比大小（具体游戏名不清楚）

整体思路

代码讲解

2.随机生成20个100-200的整数，输出最大的那个整数及其位置 

整体思路

代码讲解 

完整代码 

---

一.前言

        数组是一种数据结构，用于存储和组织多个相同类型的元素。它是编程语言中常见的基本数据结构之一。数组提供了一个连续的存储空间，其中每个元素都可以通过索引访问，索引通常从0开始。数组是一种常见又强大的数据结构，可以用于多种编程场景，例如存储一组数据、处理集合、排序和过滤等。了解数组的基本概念和使用方法对于进行编程任务非常重要。不同的编程语言可能有略微不同的语法和方法来操作数组。

二.数组

1.认识

数组

    1.数组属于对象类型（复杂数据类型）

    2.string ， boolean ，number ， undefind 属于基础类型（简单数据类型）

   

    数组中可以存放任意数据类型的数据

2.数组的声明 

1.let arr = [1,2,3,4]

let arr1 = [1,2,'封神榜','玉玲珑']
   console.log(arr1)

2.结合构造函数，创建数组

let arr4 = new Array(4);

//使用Array（）构造函数创建数组
   let arr2 = new Array();
   console.log(arr2);

注意：

       使用 构造函数声明数组的时候，如果只有一个number的参数，则表示数组的长度，而数组内容为空，如果参数是两个及其以上的数字，则表示数组元素。

 //如果Array的参数是一个数字类型数据，表示数组长度，该数组中的数据都是空
   let arr4 = new Array(4);
   console.log(arr4);

      如果是两个及其以上的数字，则表示数组中的元素

//如果是两个及其以上的数字，则表示数组中的元素
   let arr5 = new Array(4,5);
   console.log(arr5);

 3.数组长度的设置和获取

         使用 数组的length属性，既可以设置数组长度，也可以获取数组长度

let arr6 = [false,'灰太狼',23,'刘备']
  console.log(arr6.length);//获取数组的长度，也就是数组中有几个元素，称为数组长度

注意 

形如 let arr2 = [,,,]

在计算该数组长度的时候最后一个逗号后面如果为空，则不计算入数组长度

  /*
    形如 let arr2 = [,,,] 
    在计算该数组长度的时候最后一个逗号后面如果为空，则不计算入数组
    长度
    */
    let arr1 = [,,,3,4]
    let arr2 = [,,,]
    console.log(arr1.length , arr2.length);

    let arr3 = ['武松','武大郎','潘金莲','宋江']

4.删除数组元素

//删除数组元素
  arr6.length = 2
  console.log(arr6);

5.清空数组

 //清空数组
  arr6.length = 0
  console.log(arr6);

三.获取数组元素

     数组当中的每一个元素，都对应一个数组下标（索引），下标从0开始计算，获取数组中的数据可以通过arr[下标]的方式获取

 console.log(arr3[2]);
   //随机获取下标，范围是[0，3]
   let num = Math.floor(Math.random()*4)
   console.log(arr3[num]);

获取数组元素的几种方法

1.使用方括号 [] 访问元素：

        使用方括号和索引来直接获取数组中的元素。例如，array[0] 表示获取数组 array 中的第一个元素，array[1] 表示获取第二个元素，依此类推。

let array = [1, 2, 3, 4, 5];
let firstElement = array[0]; // 获取第一个元素，值为 1
let thirdElement = array[2]; // 获取第三个元素，值为 3

2.使用循环遍历数组：

        可以使用循环（如 for、while）来迭代数组，从而逐个获取数组中的元素。通过循环的方式，可以获取数组的全部或部分元素。在 JavaScript 中

let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]); // 逐个输出数组元素
}

3.使用数组迭代方法：

许多编程语言提供了内置的数组迭代方法（如 forEach()、map()、filter() 等），这些方法可以方便地遍历数组并对每个元素执行相应的操作。

let array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
  console.log(element); // 逐个输出数组元素
});

      无论使用哪种方法，都可以根据需要获取数组中的元素。请记住，索引应该大于等于0并且小于数组的长度，否则会导致错误。确保在使用索引访问元素时遵循适当的边界条件和索引范围，以避免出现数组越界的问题。

四.遍历数组（详解） 

遍历数组常用的方法

遍历数组

1.for循环

//for循环
  for (let i= 0; i < arr4.length; i++) {
    console.log(arr4[i]);
    document.write(arr4[i]+'
')
    
  }
  document.write('
')

2.for-in循环

//for-in 循环，还可以循环对象
  /*
  for (const key in arr4) {
      key 是循环的下标，key是变量可以随意命名
      arr4 是要循环的对象
  }
  */
  for (const aa in arr4) {
    document.write(arr4[aa]+'
')
  }
  document.write('
')

3.forEach函数

/*
  Es6 中推荐使用 数组的方法，forEach()
  它里面传入的是一个函数，该函数具有一个形参 item ， item 就是当前循环的数组元素
  */

 arr4.forEach(function(item){
    document.write(item+'
')
 })

 案例

1.猜拳比大小（具体游戏名不清楚）

整体思路

      HTML部分定义了游戏的界面元素，包括标题、输入框和下拉选择框等。

      JavaScript部分实现了游戏的逻辑。代码中定义了两个数组arr1和arr2分别表示玩家A的手指数和所说的数的可能取值。

      在点击按钮时，代码生成两个随机数sj1和sj2，并根据这两个随机数从arr1和arr2中选择对应的数值。然后根据玩家B所选择的手指数和所说的数，以及玩家A的手指数和所说的数，进行判断比较，判断胜负或平局，并通过alert函数弹出结果。

总体思路就是根据随机选择的手指数和所说的数，判断玩家A和玩家B的选择，并判断游戏的胜负关系。

代码讲解

    
    
    


    
A
    
    
    
B
    B的手指数:
     
        0
        5
        10
    
    B说的数:
    
        0
        5
        10
        15
        20
     

    

    Come On!

        这部分是HTML代码，它定义了一个简单的页面结构。包括一个标题（