JS学习611~627（数组）

于 2022-09-21 14:50:13 发布
阅读量124 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/126972767
版权

1 数组的概念

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

// 普通变量一次只能存储一个值
var num = 10;
// 数组一次可以存储多个值
var arr = [1, 2, 3, 4, 5];

2 创建数组

2.1 数组的创建方式

JS中创建数组有两种方式:

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

2.2 利用new创建数组

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

2.3 利用数组字面量创建数组

// 1.使用数组字面量方式创建空的数组
var 数组名 = [];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
  • 数组的字面量是方括号[]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后使用最多的方式

2.4 数组元素的类型

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

3 获取数组元素

3.1 数组的索引

索引(下标):用来访问数组元素的序号(数组下标从0开始)

数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。

这里的访问就是获取得到的意思

<!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>
    <script>
        // 1. 数组(Array):就是一组数据的集合 存储在单个变量下的优雅方式
        // 2. 利用new创建数组
        var arr = new Array();  // 创建了一个空的数组
        // 3. 利用数字字面量创建数组[]
        var arr1 = []; // 创建了一个空的数组
        var arr2 = [1, 2, 'yaya', true];
        // 4. 数组里面的数据一定用逗号分隔
        // 5. 数组里面的数据 比如1,2  我们称为数组元素
        // 6. 获取数组元素 格式 数组名[索引号]  索引号从0开始
        console.log(arr2[2]);
        console.log(arr2[3]);
        var arr3 = ['迪丽热巴', '古力娜扎', '丫丫'];
        console.log(arr3[3]); //因为没有这个数组元素 所以输出的结果是undefined
    </script>
</head>
<body>
    
</body>
</html>
数组练习

定义一个数组,里面存放星期一、星期二…直到星期日(共7天) ,在控制台输出:星期日

<!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>
    <script>
        var day = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        console.log(day[6]);
    </script>
</head>
<body>
    
</body>
</html>

4 遍历数组

遍历:就是把数组中的每个元素从头到尾都访问一次(类似每天早上学生点名)

<!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>
    <script>
        // 遍历数组:就是把数组的元素从头到尾访问一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < 3; i ++ ) {
            console.log(arr[i]);
        }
        // 1. 因为数组索引号从0开始 所以i必须从0开始 i < 3
        // 2. 输出的时候 arr[i] i 计数器当索引号来用
    </script>
</head>
<body>
    
</body>
</html>

4.1 数组的长度

使用"数组名.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>
    <script>
        var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维'];
        for (var i = 0; i < arr.length; i ++ ) {
            console.log(arr[i]);
        }
        // 1. 数组的长度是元素个数  不要跟索引号混淆
        // 2. arr.length 动态检测数组元素的个数
    </script>
</head>
<body>
    
</body>
</html>
案例2:数组求和及平均值

求数组[2, 6, 1, 7, 4]里面所有元素的和以及平均值

  1. 声明一个求和变量sum。
  2. 遍历这个数组,把里面每个数组元素加到sum里面。
  3. 用求和变量sum除以数组的长度就可以得到数组的平均值。
<!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>
    <script>
        var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i ++ ) {
            sum += arr[i];
        }
        average = sum / arr.length;
        console.log(sum, average); //想要输出多个变量 用逗号分隔即可
    </script>
</head>
<body>
    
</body>
</html>
案例3:数组最大值

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

  1. 声明一个保存最大元素的变量max。
  2. 默认最大值可以取数组中的第一个元素。
  3. 遍历这个数组,把里面每个数组元素和max相比较。
  4. 如果这个数组元素大于max就把这个数组元素存到max里面,否则继续下一轮比较。
  5. 最后输出这个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>
    <script>
        var arr = [2, 6, 1, 77, 52, 25, 7];
        var max = arr[0];
        for (var i = 1; i < arr.length; i ++ ) {
            if (arr[i] > max) {
                max = arr[i];
            } 
        }
        console.log(max);
    </script>
</head>
<body>
    
</body>
</html>
案例4:数组转换为分割字符串

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

输出: ‘red|green|blue|pink’

<!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>
    <script>
        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);
    </script>
</head>
<body>
    
</body>
</html>

5 数组中新增元素

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

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

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

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

  • 可以通过修改数组索引|的方式追加数组元素
  • 不能直接给数组名赋值,否则会覆盖掉以前的数据
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

这种方式也是我们最常用的一种方式。

<!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>
    <script>
        // 1. 新增数组元素 修改length长度
        var arr = ['red', 'green', 'blue'];
        console.log(arr.length);
        arr.length = 5;  // 数组长度修改为了5  里面应该有5个元素
        console.log(arr);
        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);
        arr1[0] = 'yellow';  // 替换原来的数组元素
        console.log(arr1); 
        arr1 = '哈哈哈';
        console.log(arr1); // 不要直接给数组名赋值 否则里面的数组元素都没有了
    </script>
</head>
<body>
    
</body>
</html>
例子:数组新增元素

新建一个元素,里面存放10个整数(1~10)

  1. 使用循环来追加数组。
  2. 声明一个空数组arr.
  3. 循环中的计数器i可以作为数组元素存入。
<!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>
    <script>
        var arr = [];
        for (var i = 0; i < 10; i ++ ) {
            arr[i] = i + 1;
        }
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>
案例:筛选数组

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

  1. 声明一个新的数组用于存放新数据newArr。
  2. 遍历原来的旧数组,找出大于等于10的元素。
  3. 依次追加给新数组newArr.
<!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>
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        // 方法1
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr.length; i ++ ) {
            if (arr[i] >= 10) {
                // 新数组应该从0开始 依次递增
                newArr[j] = arr[i];
                j ++;
            }
        }
        console.log(newArr);
        // 方法2
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr.length; i ++ ) {
            if (arr[i] >= 10) {
                // 新数组应该从0开始 依次递增
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>

6 数组案例

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

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

  1. 需要一个新数组用于存放筛选之后的数据。
  2. 遍历原来的数组,把不是0的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据)。
  3. 新数组里面的个数,用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>
    <script>
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        for (var i = 0; i < arr.length; i ++ ) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>
案例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>
    <script>
        var arr = ['red', 'green', 'blue', 'pink', 'purple'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i -- ) {
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>
案例3:数组排序（冒泡排序）

冒泡排序:是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)。

例如,我们可以将数组[5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序,输出: 1,2,3,4,5

<!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>
    <script>
        // 冒泡排序
        var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i < arr.length - 1; i ++) {  // 外层循环管趟数
            for (var j = 0; j <= arr.length - i - 1; j ++ ) {  // 里面的循环管 每一趟的交换次数
                // 内部交换两个变量的值 前一个和后一个数组元素相比较
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>
前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础必读——数组
weixin_47638652的博客
03-01 171
数组 1.数组的概念 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。 //普通变量一次只能存储一个值 var num = 10; //数组一次可以存储多个值 var arr = [1,2,3,4,5]; 2.创建数组 2.1利用new创建数组 语法：var 数组名 = new Array(); var arr = new Array(); //创建一个空数组 2.2利用数组字面量创建数组 var 数组名 =
【经典】javascript ES5原生实现考试题答案全排列组合数组结果获取
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
11-06 4402
//考试题答案全排列组合 function getAllArrange(arr, index, group) { index || (index = 0), group || (group = []); var temp = arr[index], len = group.length; group.push(temp); ...
JavaScript第五章
Berg_liu的博客
08-04 361
JavaScript第五章 object类型 实现方法 new操作符跟Object函数 ‘var person = new Object();’ 用对象字面量表示 'var person = { name : “Nicholas”, age : 29 }; ’ 对象的访问方法 点表示法 方括号表示法 ’ var propertyName = “nam...
javascript之第五章
张常文的博客
11-12 265
第五章 引用类型 1、object对象创建的方式          a.new                    var a=new object();            b.对象字面量表示法，适合创建大量的属性,不会调用构造函数                    var a={                             name:”aaaa”,     
JavaScript第五章总结
sc13647346287的博客
02-14 275
（1)使用jQuery弹出提示框 （2）$(document).ready()与window.onload类似，但也有区别 （3）addClass( )方法 （4）css( )方法 （5）设置元素的显示和隐藏 （6）添加注释 ...
JavaScript 学习笔记 基础篇５（ＤＯＭ操作补充及案例）
heal_l的博客
06-30 148
全选框 <script> var friuts = document.getElementsByClassName("fruit"); var _all = document.getElementsByClassName("all")[0]; _all.onclick = function(){ for(var i=0 ;i<friuts.length;i++){ friuts[i].checked =this.ch.
JavaScript学习笔记之取数组中最大值和最小值
01-19
推荐阅读：JavaScript学习笔记之数组的增、删、改、查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和...
Pixi.js学习 （六）数组 源码
最新发布
06-12
在本篇“Pixi.js学习（六）数组 源码”中，我们将深入探讨Pixi.js如何利用JavaScript中的数组进行数据管理和性能优化。 首先，我们要明白在JavaScript中，数组是一种动态大小的数据结构，可以存储不同类型的元素，...
JS “运算符”“数组 ”学习笔记
MartinYP的博客
07-06 189
个人用学习笔记，图片来源于网络。
关于小黄对javascript数组中的总结与分析（适合对数组方法的复习和小白对数组的学习）
qq_45941240的博客
04-24 4421
小黄对于学习数组的总结，尽量排的清除一点，以下所有代码都已经通过测试 一丶数组是什么，怎么样构成的 首先数组和对象是一个引用值地址，什么叫做引用值地址呢，通俗一点就是； let hd =[12,45,87]; let cd=hd;//这个时候cd复制了一份hd的地址引用 cd[0]=46; console.log(hd)//[46, 45, 87] 变量cd通过引用值改变了hd引用的数组，导致hd数组也发生了改变 在数组内可以包含多种类型的数据，如对象，字符串 ，number ，Boolean NaN
第5章数组练习题
keenkenen的博客
12-13 603
目录人民币选择排序折半查找快速排序字符串替换 人民币 输入正整数m，他代表一个人民币的金额（元）。求取这样一个方案，使用最少张数的人民币纸币，凑成上述的钱数m，并输出求取结果。 核心算法： int money_units[7]={100,50,20,10,5,2,1}; int num[7]={0}; int amount; cin>>amount; for(i=0;i<7;i++) { num[i]=amount/money_units[i]; amount-=num[i]*mone
JavaScript --- 数组练习题
wanghongpu9305的博客
11-21 564
1. 创建一个记录学生成绩的对象， 提供一个添加成绩的方法， 以及一个显示学生平均成绩的方法。 function Warehouse() { this.formData = []; // 学生成绩库 this.add = add; // 添加方法 this.average = average; // 计算平均值 } function add(arr) { this.formData.push(arr) } function average() { .
js中“-”符号的问题
前端小菜鸟<(￣ˇ￣)/
04-15 629
今天遇到的一个问题，在固定的样式里面，因为要显示出图片的url给用户，url里面包含了“-”符号，遇到这个符号，会自动换行，并且把样式撑开，后面论坛问了人才得以解决，现在记录一下，就会遇到-强制不换行，到达宽度以后再允许换行 style="width:300px;width:300px;word-break:break-all;word-wrap:break-word"
Java基础练习：数组
weixin_42615068的博客
10-03 280
1、 100以内的质数 质数：“除了1和它本身外，没有其他约数” 的数【即，数字 n 只能被 1 和 自身n 整除，此外不能被 2 ~ (n-1) 整除】； 基础版 public class PrimeNumber { public static void main(String[] args) { boolean isFlag = true; for(int i = 2; i <...
javascript数组基础练习题
weixin_52088589的博客
12-24 5100
练习1: 使用for循环 - 求出数组元素的和 [3, 9, 9, 2, 7, 5] //循环实现 /* let arr = [5, 8, 9, 2, 1, 5] let sum = 0 for (let i = 0; i < arr.length; i++) { sum += arr[i] } console.log(sum); */ // 套函数实现 function ayy(
JS中数组解构赋值4
qq_37805832的博客
07-24 834
//什么是数组的解构赋值? //es6新增的 //注意点: /*let arr=[1,3,5]; //let a=arr[0]; //let b=arr[1]; //let c=arr[2]; let [a,b,c]=arr; //意思是:arr的下标从0 1 2开始依次赋值给a,b,c console.log("a= "+a); console.log("b= "+b); console.log("c= "+c); */ ////第二点:在数组的解构赋值
JavaScript面向对象学习：封装、聚集与数组方法详解
在JavaScript学习笔记（三）中，本文重点介绍了面向对象编程（OOP）在JavaScript中的应用，以及其四大核心特性：封装、聚集、继承和多态。这些特性对于理解和设计复杂的软件系统至关重要。 首先，封装是将数据和与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值