JavaScript中的数组

最新推荐文章于 2022-04-14 22:04:50 发布
最新推荐文章于 2022-04-14 22:04:50 发布
阅读量826 收藏 6
点赞数 3
分类专栏： JavaScript 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/121432139
版权

JavaScript中的数组

1、数组的概念

在这里插入图片描述

2、创建数组

2.1、数组的创建方式

在这里插入图片描述

2.2、利用new关键字创建数组

在这里插入图片描述

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

在这里插入图片描述

2.4、数组里面的元素类型

在这里插入图片描述

2.5、数组知识点提问

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、数组（Array):就是一组数据的集合 存储在单个变量下的优雅方式
        // 2、利用new 创建数组
        var arr = new Array();//创建了一个空的数组
        // var 3、利用数组字面量创建数组[]
        var arr = [];//创建了一个空的数组
        var arr1 =[1,2,'blue',true];
        // 4、我们数组里面的数据一定要用逗号分隔
        // 5、数组里面的数据 比如1，2 我们成为数组元素
    </script>
</head>
<body>
    
</body>
</html>

3、获取数组中的元素

3.1、数组的索引

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取数组元素 格式 数组名[索引号]
        console.log(arr1);
        console.log(arr1[2]);//小星星
        console.log(arr1[3]);//true
    </script>
</head>
<body>
    
</body>
</html>

4、遍历数组

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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]);
        }
    </script>
</head>
<body>
    
</body>
</html>

5、数组的长度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组长度 数组名.length
        var arr = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维','小星星'];
        for(var i = 0;i < 7;i++){
            console.log(arr[i]);
        }
        console.log(arr.length);

        for(var i = 0;i < arr.length;i++){
            console.log(arr[i]);
        }
        // 1、数组的长度是元素的个数 不要跟索引混淆
        // 2、arr.length 动态监测数组的个数
    </script>
</head>
<body>
    
</body>
</html>

6、数组的遍历

6.1、案例1：求数组的平均值、和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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];   //我们添加的是数组元素 arr[i] 不是计数器i
        }
        average = sum/arr.length;
        console.log(sum,average);//想要输出多个变量，用逗号分割即可
    </script>
</head>
<body>
    
</body>
</html>

6.2、案例2：求数组的最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = [999, 5, 277, 888, 3];
        var max = arr[0];
        for(var i = 1;i<arr.length;i++){
            if(arr[i] > max){
                max = arr[i];
            }
        }
        console.log("max:数组的最大值是"+max);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6.3、案例3：数组转换成特定格式字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr =['red','green','yellow','blue'];
        var str = '';
        var sep = '!';
        for(var i = 0;i<arr.length;i++){
            str +=arr[i] + sep;
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

7、数组中新增元素

7.1、通过修改数组的长度新增元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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，里面应该有五个元素
        console.log(arr);
        console.log(arr[3]);
        console.log(arr[4]);
        console.log('------------------');
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

7.2、通过修改数组索引号的方法新增数组元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //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>

在这里插入图片描述

7.3、筛选数组中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、将数组[2,3,55,1,6,66,22,15]中大于10的元素存到新的数组中
        var arr = [2,3,55,1,6,66,22,15];
        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);
        // 方法2
        var arr = [2,3,55,1,6,66,22,15];
        var newArr = [];//新数组的长度为0
        for(var i = 0;i<arr.length;i++){
            if(arr[i] > 10){
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

7.4、翻转数组

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //将数组['red','blue','green','yellow','pink']元素翻转
        var arr = ['red','blue','green','yellow','pink'];
        var newArr = [];
        for(var i = arr.length-1;i>=0;i--){//数组长度比数组最大索引小1
            newArr[newArr.length] = arr[i];
        }
        console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

8、冒泡排序

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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-1-i;j++){//内层循环控制 每一趟交换的次数
                // 内部交换2个变量的值，前一个和后一个数组元素相比较
                if(arr[j]>arr[j+1]){
                    var temp = arr[j+1];
                    arr[j+1] = arr[j];
                    arr[j]= temp;
                }
            }
        }
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

小码哥呀
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript中数组方法汇总
10-23
本文给大家详细汇总了一下javascript中的数组方法，十分的全面细致，有需要的小伙伴可以参考下。
javascript中数组的定义及使用实例
10-24
在字典形式的数组中，可以使用字符串作为键，这使得数组可以模拟对象的行为。遍历这种数组时，`for...in`循环会返回键，而不是值。若要访问值，可以使用`dict[key]`。 此外，示例中还展示了如何通过`for...in`循环...
javascript中数组操作
nostrud ipsum6
01-21 292
javascript中Array相关的属性和方法 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ Array 对象属性constructor : 返回对创建此对象的数组函数的引用 1234var test=new Array()if (test.constructor==Array){ docume...
javascript 中的数组
zifeiyu3697的博客
04-14 883
一.数组 数组是可以在内存中连续存储多个元素的结构 数组的下标索引从0开始.通过length可获取数组的总长度。 数组的上下界 [0 , myarr.length-1] 二.创建数组 使用数组之前首先要创建，而且需要把数组本身赋至一个变量 var myarray（保存数组的变量）=new Array（元素1，元素2，.......）//创建一个新的空数组 字面量数组 var myarr=[数值1，数值2]; //直接输入一个数组 三.遍历数组 遍历数组 使用for ...
JavaScript 中的数组
Meskjei的博客
11-22 394
数组（Array）类型应该是我们开发过程中使用最多的类型了。数组在许多语言中都能看到，不过JavaScript中的数组更为强大。主要的特点在于： 数组长度可以动态调整 数组提供了大量操作方法 数组的每一项都可以存放任意类型的数据 首先我们从最基本的数组的创建说起，由于数组实际上是数组(Array)类型的实例对象，那么与Java、C#等语言一样，数组可以用下面的形式创建 var array = ...
JavaScript中数组继承的简单示例
10-23
主要介绍了JavaScript中数组继承的简单示例,数组继承是JavaScript入门学习中的基础知识,需要的朋友可以参考下
JavaScript中数组对象的那些自带方法介绍
12-11
/** * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method。 * 全文没啥营养，不过最后性能测试的部分，倒是抛出了一些疑问。 */ 赋值方法 （Mutator methods） 这些方法直接修改数组自身 pop 和 push Array.pop...
详解JavaScript中数组的相关知识
10-23
主要介绍了JavaScript中中数组的相关知识,是JS入门学习中的基础知识,需要的朋友可以参考下
javascript中数组中求最大值示例代码
10-26
数组如何求最大值，想必很多的朋友都不会吧，本文为大家介绍下javascript中数组是如何求最大值的，感兴趣的朋友不要错过
javascript中数组、对象
04-03
JavaScript数组支持多种操作方法，如`push`（在末尾添加元素）、`pop`（移除并返回末尾元素）、`shift`（移除并返回首位元素）、`unshift`（在首位添加元素）、`slice`（截取子数组）、`splice`（插入、删除或替换...
javascript中数组的冒泡排序使用示例
10-26
在JavaScript中，我们可以用简单的循环结构来实现这个过程。下面将详细解释冒泡排序的工作原理以及在JavaScript中的具体应用。 首先，我们要理解冒泡排序的基本步骤： 1. 比较相邻的元素：从数组的第一个元素开始...
JavaScript中数组的各种操作的总结(必看篇)
10-20
下面小编就为大家带来一篇JavaScript中数组的各种操作的总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript中数组去重的5种方法
10-15
主要介绍了JavaScript中数组去重的5种方法，文中讲解非常详细，实例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
JavaScript中数组indexof
最新发布
05-31
JavaScript中数组方法`indexOf`用于返回一个元素在数组中第一次出现的索引位置，如果元素不存在则返回-1。该方法的语法如下： ``` array.indexOf(searchElement[, fromIndex]) ``` 其中，`searchElement`表示要...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值