web前端学习611-627（JavaScript数组---数组，创建数组，获取数组元素，遍历数组，数组中新增元素，数组案例）

已于 2022-04-07 17:29:16 修改
阅读量2.6k 收藏 15
点赞数 1
分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端
于 2022-04-06 22:06:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51249285/article/details/124001646
版权

文章目录

JavaScript数组

1 数组的概念

之前学的变量：存储一个值。

如果存班级中所有学生姓名：可以使用数组（Array），存放一组数据，提供访问（获取）方式

数组：一组数据的集合，每个数据称为元素，数组中可以存放任意类型元素。一组数据存储在单个变量名下

2 创建数组

2.1 数组的创建方式

JS 中创建数组两种方式：

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

2.2 利用new 创建数组

var 数组名 = new Array();
var arr = new Array(); // 创建了一个空数组
  • 这个方法暂时了解，学完对象再看
  • 注意 Array() , A 要大写

2.3 利用数组字面量创建数组（常用）

// 1 使用数组字面量方式创建空的数组
var 数组名 = [];
// 2 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','小黄'];

var arr = [];  // 创建了一个空数组
var arr1 = [1,2,'my',true];
  • 数组的字面量是方括号[]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式

2.4 数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

var arrStus = ['小白',12, true,28.9];

3 获取数组元素

数组的索引

索引(下标) : 用来访问数组元素的序号(数组下标从0开始) .
var arr = [‘小白’,小黑’, ‘大黄’, ‘瑞奇’];

​ 索引号: 0 1 2 3

数组可以通过索引来访问、设置、修改对应的数组元素。我们可以通过“数组名[索引]"的形式来获取数组中的元素。
这里的访问就是获取得到的意思

//定义数组
var arrStus = [1,2,3];
//获取数组中的第2个元素
alert (arrStus [1]) ;

eg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1 数组（Array）：就是一组数据的集合  存储在单个变量下的优雅方式
    // 2 利用new 创建数组
    var arr = new Array();  // 创建一个空数组
    // 3 利用数组字面量创建数组
    var arr = [];  // 创建了一个空数组
    var arr1 = [1,2,'my',true];
    // 4 我们数组里面的数据一定用逗号分隔
    // 5 数组里面的数据 比如1，2  我们称为数组元素
    // 6 获取数组元素 格式  数组名[索引号]   索引号从0开始
    console.log(arr1);
    console.log(arr1[2]);  // 得到 my
    console.log(arr1[5]);  // 没有这个数组元素  所以输出的结果是  undefined
  </script>
</body>
</html>

4 遍历数组

数组中的每一项怎么取出来？ 可以通过 数组名[索引号]

var arr = ['red' , 'green', 'blue'];
console.log (arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

把所有的元素取出来？ 循环

遍历：把数组中每个元素从头到尾都访问一次

// 遍历数组：把所有元素从头到尾访问一次
var arr = ['red','green','blue'];
for(var i = 0; i < 3; i++){  // 索引号从0开始 所以 i 必须从 0 开始 
  console.log(arr[i]);
}

4.1 数组的长度

使用 数组名.length 可以访问数组元素的数量（数组长度）

//数组长度  数组名.length
var arr = ['red','green','blue'];
for(var i = 0; i < 3; i++){  // 索引号从0开始 所以 i 必须从 0 开始 
  console.log(arr[i]);
}
console.log(arr.length);
for(var i = 0; i < arr.length; i++){  
  console.log(arr[i]);
}
  • 数组的长度 是元素个数 不要跟索引号混淆
  • arr.length 动态检测数组元素的个数

案例1：求和

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //数组长度  数组名.length
    var sum = 0;
    var arr = [1,2,3];
    for(var i = 0; i < 3; i++){  
      sum = sum + arr[i];
    }
    console.log(sum);
    
  </script>
</body>
</html>

案例2：数组最大值

求数组[2,6,1,77,52,25,7]中的最大值

案例分析

  1. 声明一个保存最大元素的变量max.
  2. 默认最大值可以取数组中的第一个元素。
  3. 遍历这个数组,把里面每个数组元素和max相比较。
  4. 如果这个数组元素大于max就把这个数组元素存到max里面,否则继续下一轮比较。
    最后输出这个max。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>    
    var arr = [2,6,1,77,52,25,7];
    var max = arr[0];
    for(var i = 1; i < arr.length; i++){  
      if(max < arr[i]){
        max = arr[i];
      }
    }
    console.log(max);
    
  </script>
</body>
</html>

案例3：数组转换为分割字符串

要求：将数组['red ‘, green’, ‘blue’, ‘pink’]转换为字符串,并且用|或其他符号分割
输出: ‘red|green|blue|pink|’

案例分析

  1. 需要一个新变量用于存放转换完的字符串str.
  2. 遍历原来的数组,分别把里面数据取出来，加到字符串里面。
  3. 同时在后面多加一个分隔符。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //数组长度  数组名.length
    var arr = ['red','green','blue','pink'];
    var str = '';
    var sep = '!';   // 此处分隔符可以使用其他的，可修改
    for(var i = 0; i < arr.length; i++){  
      str = str + arr[i] + sep;
    }
    console.log(str);
    
  </script>
</body>
</html>

5 数组中新增元素

可以通过修改length长度以吸索引号增加数组元素

5.1 通过修改length长度新增数组元素

  • 可以通过修改 length长度来实现数组扩容的目的
  • length 属性是可读写的
var arr = ['red','green','blue'];
console.log(arr.length);
arr.length = 5; // 把数组长度修改为了5  里面应该有5个元素
console.log(arr);
console.log(arr[4]);

索引号4 没有给值 就是声明变量未给值 默认值就是 undefined

5.2 通过修改数组索引新增数组元素

  • 通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值，否则会覆盖掉以前的数据
var arr1 = ['red','green','blue'];
arr1[3] = 'pink';   
console.log(arr1);
arr1[0] = 'yellow';  // 这里是替换原来的数组元素
console.log(arr1);
arr1 = '有点意思';   // 不要直接给 数组名赋值 否则以前的数组元素都没有了
console.log(arr1);

案例1： 数组存放1~10个值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var arr = [];
    for(var i = 0; i < 10; i++) {
      arr[i] = i + 1;
    }
    console.log(arr);
  </script>
</body>
</html>

案例2：筛选数组

要求:将数组[2,0,6, 1, 77,0, 52, 0, 25, 7] 中大于等于10的元素选出来,放入新数组。

案例分析

  1. 声明一个新的数组用于存放新数据newArr .
  2. 遍历原来的旧数组，找出大于等于10的元素。
  3. 依次追加给新数组newArr.

方法一：

利用n++ 计数器 新数组存放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var newarr = [];
    var n = 0;
    var arr = [2,0,6,1,77,0,52,0,25,7];
    for(var i = 0; i < arr.length; i++){
      if(arr[i] >= 10) {
        // 新数组应该从0开始 依次递增
        newarr[n] = arr[i];
        n++;
      }
    }
    console.log(newarr);
  </script>
</body>
</html>

方法二

length 可以自动检测数组长度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var newarr = [];
    var arr = [2,0,6,1,77,0,52,0,25,7];
    // 刚开始newarr.length 就是 0
    for(var i = 0; i < arr.length; i++){
      if(arr[i] >= 10) {
        // 新数组应该从0开始 依次递增
        newarr[newarr.length] = arr[i];
      }
    }
    console.log(newarr);
  </script>
</body>
</html>

6 数组案例

案例1：删除指定数组元素

要求: 将数组[2,0,6, 1, 77,0, 52, 0, 25, 7]中的0去掉后,形成-个不包含0的新数组。

跟上面筛选数组案例类似做法

案例2：翻转数组

要求:将数组[‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’]的内容反过来存放。
输出: [‘purple’, ‘pink’, ‘blue’, ‘green’, 'red’]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var newarr = [];
    var arr = ['red', 'green', 'blue', 'pink', 'purple'];
    for(var i = arr.length-1; i >=0 ; i--) { 
      newarr[newarr.length] = arr[i];
    }
    console.log(newarr);
  </script>
</body>
</html>

案例3：数组排序（冒泡排序）

复习：两个变量交换数据

找一个“中间商” 临时变量作为媒介

案例分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 冒泡排序
    var arr = [5,4,3,2,1];
    for(var i = 0; i < arr.length; i++ ) {  // 外层循环管趟数
      for(var j = 0; j < arr.length - i; j++){  // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值  前一个和后面一个数组元素相比较
        if(arr[j] > arr[j+1]) {
          var temp = arr[j];
          arr[j] = arr[j+1];
          arr[j+1] = temp;
        }
      }
    }
    console.log(arr);
  </script>
</body>
</html>
香甜的甲基橙
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c++ 删除数组元素_第20节 数组的操作及遍历-Web前端开发之Javascript-王唯
weixin_39880337的博客
11-20 700
本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。数组的操作：concat()方法：基于当前数组，将多个元素连接一起成为新的数组并返回；新数组中的元素按连接时的顺序排列。(具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。当需要合并多个数组时，此方法比较方便)；语法：数组名.conc...
js用递归遍历多维数组_js面试题更新之40
weixin_39634132的博客
11-22 1609
1、数组方法pop() push() unshift() shift()push 后面添加元素，个数不限，返回新数组的长度pop 从后面删除一个元素，返回那个元素unshift 从前面添加元素，个数不限，返回新数组的长度shift 从前面删除一个元素，返回那个元素2、javascript的typeof返回哪些数据类型Object number functi...
咸鱼前端—js 数组案例
咸鱼菌
02-26 296
咸鱼前端—js 数组案例数组的常见案例案例1:求元素的和案例2:求元素的平均值案例3:求元素中的最大值案例4:求元素的最小值案例5:倒序遍历数组案例6:数组拼接显示拼接后的字符串案例7:去掉数组中重复的数据，把其他的数据放在一个新的数组中案例8:反转数组---把数组中的数据的位置调换案例9: 冒泡排序 数组的常见案例 案例1:求元素的和 var arr = [1, 2, 3, 4, 5, ...
前端数组方法汇总
weixin_30872157的博客
10-30 348
目录 前端数组方法汇总 创建数组 检测数组 转换方法 栈方法 队列方法 重排序方法 操作方法 位置方法 迭代方法 归并方法 前端...
获取前端数组变成后端数组
shaoyangzhuanyong的博客
04-03 579
$sid = html_entity_decode($_GPC['sid']); $sids = json_decode($sid);
【前端-初阶】JS数组
最新发布
qq_48234463的博客
03-19 568
【前端-初阶】JS数组
前端有关数组方法详解
n34886746的博客
09-28 343
前端主要的职责是在合适的时候，从后台拿到合适的数据，渲染到合适的页面上面，可是在页面进行渲染的时候，我们不可能保证我们的数据完全适合于渲染，这个时候，我们需要对这些数据进行处理，将处理之后的数据渲染到页面上面去。 ...
前端数组常用API
qq_56779411的博客
06-09 516
开发人员必备的那些常用方法
JavaScript_ECMA5数组新特性详解_.docx
10-09
ES5 还新增了几种用于遍历数组的迭代方法，它们分别为 `every`、`filter`、`forEach`、`map` 和 `some`。 - **`every` 方法**：此方法对数组中的每个元素执行一个提供的函数，如果数组中所有元素都使得该函数返回 `...
JS 复习（4） 数组
Puppy_CQ的博客
05-13 255
// 1.数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 // 2. 利用new 创建数组 var arr = new Array(); // 创建了一个空的数组 // 3. 利用数组字面量创建数组 [] var arr = []; // 创建了一个空的数组 var arr1 = [1, 2, 'pink老师', true]; // 4. 我们数组里面的数据一定用逗号分隔 ...
JS数组转字符串
高压锅博客
10-16 462
1. toString() 方法读取数组的值 var a = [1,2,3,4,5,6,7,8,9,0]; //定义数组 var s = a.toString(); //把数组转换为字符串 console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0” console.log(typeof s); //返回字符串string，说明是字符串类型 var a = [1,2,3,4,5,6,7,8,9,0]; //定义数组 var b = [1,2,3,4,5,6,7,8,9
JS学习之数组中新增元素的方式
weixin_44079801的博客
06-26 245
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据中新增元素</title> <script> //1.新增数组元素 （通过修改length长度） // var arr = ['red','blue','green']; // console.log(arr.length); // arr.length = 5;
js查找数组新增或删除的值
weixin_47431743的博客
01-15 1164
js查找数组新增或删除的值
【JavaScript】将数组[2,0,6,1,77,0,52,0,25,7] 中大于等于10的元素选出来，放入新的数组 && 将不等于0的元素选出来，放入新的数组
A Lucky Boy的博客
04-13 3409
// 将数组[2,0,6,1,77,0,52,0,25,7] 中大于等于10的元素选出来，放入新的数组 const arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] let arr1 = [] for (let i = 0; i < arr.length; i++) { if (arr[i] >= 10) { arr1[arr1.length] = arr[i] } ..
js数组常用的方法
赵佳敏的博客
12-19 7186
目录一、数组的声明1. 标准式写法2. 白话式写法二、数组的赋值1. 在建立数组的时候直接赋值2. 根据键值进行赋值三、数组的取值四、数组拼接方法---concat()五、数组转化为字符串-----join()六、数组翻转 一、数组的声明 1. 标准式写法 var arr = new Array(); new关键字：实例化，也就是创建 Array()：数组的类对象 数组为引用类型，唯一属性为length属性（长度属性） 2. 白话式写法 var arr = []; 二、数组的赋值 .
用java详细介绍冒泡排序
lzh_99999的博客
09-10 353
import java.util.Arrays; //冒泡排序 public class BubbleSort { public static void main(String[] args) { int[] arr = new int[] { 10, 12, 13, 0, 1, 8, 9, 65, 87 }; System.out.println(Arrays.toString(arr));...
javascriptES5中 some()查询方法
weixin_44638167的博客
09-28 851
some() array.some``(function(currentValue, index, arr)) some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素 注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false. 如果找到第一个满足条件的元素,则终止循环. 不在继续查找. currentValue: 数组当前项的值 index：数组当前项的索引 arr：数组对象本身 <script>
如何在CStringArray 数组中添加元素，遍历输出元素
jangdong的专栏
09-20 5592
CStringArray  arrStr; //声明字符串数组 int i; CString strTmp; for (i = 0 ; i { strTmp.Format(_T("%d"), i); arrStr.Add(strTmp);//末未添加元素 } for(i = 0;i { AfxMessageBox(arrStr.GetAt(i)); }
js将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组。
weiyindan的博客
12-31 3339
<script> var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]; var newarr = []; var j = 0; for (i = 0; i < arr.length; i++) { if (arr[i] > 10) { newarr[j++] = arr[i]; } ...
JavaScript删除数组元素的多种方式
在JavaScript中，删除数组中指定元素是常见的操作，有多种方法可以实现这一功能。下面将详细解释标题和描述中提到的几种方法。 1. 删除第一个元素 - `shift()` 方法：这个方法从数组的开头移除第一个元素，并返回...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值