一篇文章带你详细了解JavaScript数组

目录
  • 一、数组的作用:
  • 二、数组的定义:
    • 1.通过构造函数创建数组
    • 2.通过字面量的方式创建数组
  • 三、数组元素
  • 四、数组长度
  • 五、数组索引(下标)
  • 六、数组注意的问题
    • 1.数组中存储的数据可以是不一样的
    • 2.数组的长度是可以改变的
    • 3.总之
  • 七、遍历数组
    • 1.正序遍历
    • 2.倒序遍历
  • 八、数组中常见的案例
    • 1.求数组中所有元素的和
    • 2.求数组的平均数
    • 3.求数组的最大值和最小值
    • 4.冒泡排序
  • 总结

数组:是一组有序的数据

一、数组的作用:

可以一次性存储多个数据

二、数组的定义:

1.通过构造函数创建数组

语法:

var 数组名=new Array();
var array=new Array();//定义了一个数组

//通过构造函数的方式定义一个数组
var array=new Array();//没有数据的空数组

数组中的数据如果直接输出,那么就可以直接把数组中的数据显示出来;如果没有数据就看不到数据。

var 数组名=new Array(长度);

如果数组中没有数据,但是有长度,数组中的每个值就是undefined。

用构造函数的方式创建数组的时候,如果是Array(一个数字)→指数组的长度(即数组元素的个数);如果是Array(多个值)→指这个数组中就有数据了,数组的长度就是这些数据的个数。

2.通过字面量的方式创建数组

语法:

var 数组名=[ ];//空数组

var arr=[];
console.log(arr);//Array[0]

总结:

无论是构造函数的方式,还是字面量的方式定义的数组,如果有长度,那么默认是undefined

三、数组元素

数组中存储的每个数据,都可以叫数组的元素

比如:数组中存储了3个数组,那么这个数组就有3个元素

四、数组长度

数组长度就是元素的个数

比如:有3个元素,就说这个数组的长度是3

var arr1=new Array();//用构造函数的方式创建了一个空数组
var arrr2=new Array(5);//用构造函数的方式创建了一个长度为5的数组,这个数组有5个值,且都为undefined
var arr3=new Array(10,20,30,40,50);//构造函数的方式创建了一个长度为5,每个值都有意义的数组

五、数组索引(下标)

数组的索引,或者数组的下标。是用来存储或访问我数组中的数据,从0开始到长度-1结束

如何设置数组中某个位置的值:

数组名[下标]=值;

例如:arr[3]=100;

如何获取数组中某个位置的值:

var result=数组名[下标];

console.log(result);

//获取数组中第4个值
var arr =new Array(10,20,30,40,100);
console.log(arr[4]);//100
//将下标为3的值改为1000
arr[3]=1000;
//用字面量的方式获取数组的长度
var arr1=[10,20,30,40,50,12];
console.log(arr.length);//6

数组长度和索引的关系:

长度-1=索引

六、数组注意的问题

1.数组中存储的数据可以是不一样的

arr=[10,"哈哈",true,null,undefined,new Object()];

2.数组的长度是可以改变的

var arr = [];
    // 通过索引来设置数组中的元素的值
    arr[0] = 10;
    arr[1] = 20;
    console.log(arr.length); //2
    // 通过索引的方式获取元素的值
    console.log(arr[2]); //undefined

3.总之

var arr1 = new Array(); //空数组
var arr2 = new Array(5); //长度为5的数组,每个数组的值是undefined
var arr3 = new Array(1, 2, 3, 4, 5); //长度为5的数组,每个值都有意义
var arr4 = []; //空数组
var arr5 = [1, 2, 3]; //长度为3的数组
var arr6 = ["red", "blue", 1, true]; //长度为4,元素数据类型不一样的数组
var arr7 = [];
// 声明一个空数组,给数组中添加值
arr7[0] = 10;
arr7[1] = 30;

七、遍历数组

1.正序遍历

var arr=[10,20,30,40,50,60,70,80,90,100];
// i表示数组的下标
// 最后一个数的下标等于数组的长度减一
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

2.倒序遍历

var arr = [10, 20, 30, 40, 100];
// i最开始输出最后一个数,到0的时候结束循环
for (var i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);
}

八、数组中常见的案例

1.求数组中所有元素的和

var arr = [10, 20, 30, 40, 100];
// 用来存储相加后的总和
 var sum = 0;
 for (var i = 0; i < arr.length; i++) {
     sum += arr[i];
 }
 console.log(sum);//200

2.求数组的平均数

var arr = [10, 20, 30, 40, 100];
// 用来存储相加后的总和
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
}
console.log(sum / arr.length); //40

3.求数组的最大值和最小值

var arr = [10, 20, 30, 40, 100];
// 假设数组中第一个数是最大的,并将它赋值给一个变量
var max = arr[0];
// 假设数组中第一个数是最小的,并将它赋值给一个变量
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
    //用数组中的值和max进行比较,如果比max大,则将那个数赋值给max
    if (max < arr[i]) {
        max = arr[i];
    }
    //用数组中的值和min进行比较,如果比min小,则将那个数赋值给min
    if (min > arr[i]) {
        min = arr[i];
    }
}
console.log(max); //100
console.log(min); //10

4.冒泡排序

var arr = [10, 30, 20, 65, 40, 8, 100];
//由小到大排序
for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr.length - i; j++) {
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);
//由大到小排序
for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr.length - i; j++) {
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • JavaScript数组常用的增删改查与其他属性详解

    数组的增删改查 数组的插入 push()尾部插入 var arr2 = [1, 2, 3] arr2.push(4, 5, 6) console.log(arr2) //[1,2,3,4,5,6] unshift()头部插入 var arr3 = [1, 2, 3] arr3.unshift(4, 5, 6) console.log(arr3) //[4, 5, 6, 1, 2, 3] splcie 在任意位置内插入,或删除 arr.splice(n,m,x)从索引n开始删除m个元素,把新增的元

  • JavaScript数组方法-系统性总结详解

    目录 数组常用方法 数组元素增添和删除 操作数组头部 操作数组尾部 任意位置增删 数组拼接 数组转换成字符串 截取数组 数组排序方法 排序 顺序翻转 数组迭代方法 数组遍历查找 返回值为下标 返回值为内容 数组遍历处理 callback(value[,index[,array]]) callback(total,value[,index[,array]]) 数组其他方法 总结 首先总结的意义就是让杂乱无章变得更加井然有序,这样在使用的过程思路会更加清晰. 数组使用方法注意点: 变异方法和非变异方

  • Javascript数组去重的几种方法详解

    目录 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) 2 循环和indexof.循环和includes 3 利用对象属性不能重复去重 4 ES6 Set 5 ES6 Array. prototype.filter() 6 ES6 Array. prototype.reduce() 总结 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ /

  • javascript数组的内置方法详解

    目录 1.Array.at() 2. Array.copyWithin() 3. Array.entries() 4. Array.fill() 5.find() 总结 1.Array.at() 功能:接受一个整数值并返回该索引处的项目,允许正整数和负整数.负整数从数组中的最后一项开始计数. 语法:Array.at(index) 参数:index:要返回的数组元素的索引(位置).当传递一个负索引时,支持从数组末尾开始相对索引:即,如果使用负数,将通过从数组末尾开始倒数来找到返回的元素. 返回值:

  • JavaScript 数组去重详解

    目录 1.数组去重 2.数组去重里面的对象去重 3.根据数组某个字段相同,修改另外字段值 总结 1.数组去重 /********************************************** ╚description: ╚作者: 麒麟社 ╚时间: 2021-09-13 22:26:21 ╚名称: V1.0.5 ***********************************************/ var obj = ['麒麟','社','CC','DD','麒麟','社'

  • Javascript数组及类数组相关原理详解

    数组创建方式有两种 1. var arr = [] 2. var arr = new Array() 如果只有一个参数会指定数组的长度,当一个参数时只能是整形,如下例子 var arr = new Array(10) var arr = new Array(10.2) //会报错 var arr = new Array(1, 2, 3) //arr = [1, 2, 3] 数组常用方法 改变原数组 push pop shift unshift sort reverse splice 不改变原数组

  • 一篇文章带你详细了解JavaScript数组

    目录 一.数组的作用: 二.数组的定义: 1.通过构造函数创建数组 2.通过字面量的方式创建数组 三.数组元素 四.数组长度 五.数组索引(下标) 六.数组注意的问题 1.数组中存储的数据可以是不一样的 2.数组的长度是可以改变的 3.总之 七.遍历数组 1.正序遍历 2.倒序遍历 八.数组中常见的案例 1.求数组中所有元素的和 2.求数组的平均数 3.求数组的最大值和最小值 4.冒泡排序 总结 数组:是一组有序的数据 一.数组的作用: 可以一次性存储多个数据 二.数组的定义: 1.通过构造函数

  • 一篇文章带你搞懂JavaScript的变量与数据类型

    目录 前言: 温馨提示: 变量 1.声明 2.赋值 3.二个语法小细节 变量的命名规范 为什么需要数据类型? 简单数据类型(基本数据类型) 数字型 字符串型 String 什么是数据类型的转换 1.转换为字符串 2.转换为数字型(重点) 转化为布尔型 总结 前言: 我不是搞前端,而是搞后端的.本命编程语言是java.学习js的嘛,因为看到室友能做出动态网页,而我只能做出静态网页,再加上下个学期要学所以提前来学习学习. 温馨提示: java和javsScript没有半毛钱关系,只是javaScri

  • 一篇文章带你入门C语言:数组

    目录 数组 一维数组 初始化 使用 总结: 内存存储 二维数组 创建 初始化 数组越界问题 数组作函数参数 应用实例 总结 数组 一维数组 创建 定义 数组是一组相同类型的元素的集合.那数组的语法形式: type_t arr_name [const_n] //如: int arr[10]; type_t 指的是数组元素的类型. const_n 指的是一个常量表达式,用来指定数组的大小. 此时运行程序的话,系统会报一个警告:未初始化变量.打开调试就会发现系统默认填入一些无意义的数据. 当然全局数组

  • 一篇文章带你详细了解python中一些好用的库

    目录 时间库-arrow 使用背景 安装arrow arrow使用 游标卡尺shift 获取arrow对象 arrow的类型转换和时区修改 总结 时间库-arrow 使用背景 日期时间处理在实际应用场景中无处不在,所以这也成了编程语言中必不可少的模块,Python 也不例外.但是,你知道在Python中有多少个相关的模块吗?datetime.time.calendar. dateutil. pytz 等等. 你知道有多少种数据类型吗?date.time.datetime.tzinfo.timed

  • 一篇文章带你吃透JavaScript中的DOM知识及用法

    目录 一.前言 二.DOM框架 三.认识DOM节点 四.JS访问DOM 1.获取节点 2.改变 HTML 3.改变 CSS 4.检测节点类型 5.操作节点间的父子及兄弟关系 6.操作节点属性 7.创建和操作节点 总结 一.前言 DOM:Document Object Model(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新.它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理. 本文知识导图如下: 二.DO

  • 一篇文章让你搞懂JavaScript 原型和原型链

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网 与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对象联系起来就成了问题.于是就有了本文中我们要讲到的原型和原型链的概念. 原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来.封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍

  • 一篇文章带你了解Java Spring基础与IOC

    目录 About Spring About IOC Hello Spring Hello.java Beans.xml Test.java IOC创建对象的几种方式 Spring import settings Dependency Injection 1.构造器注入 2.set注入 3.拓展注入 P-namespcae&C-namespace Bean scopes singleton prototype Bean的自动装配 byName autowire byType autowire 小结

  • 一篇文章带你彻底搞懂VUE响应式原理

    目录 响应式原理图 编译 创建compile类 操作fragment 获取元素节点上的信息 获取文本节点信息 操作fragment 响应式 数据劫持 收集依赖 响应式代码完善 Dep类 全局watcher用完清空 依赖的update方法 需要注意的一个地方 双剑合璧 总结 首先上图,下面这张图,即为MVVM响应式原理的整个过程图,我们本篇都是围绕着这张图进行分析,所以这张图是重中之重. 响应式原理图 一脸懵逼?没关系,接下来我们将通过创建一个简单的MVVM响应系统来一步步了解这个上图中的全过程.

  • 一篇文章带你吃透Vuex3的状态管理

    目录 一. Vuex是什么 Vue全局事件总线 Vuex状态管理 何时使用Vuex 二. 纯vue组件案例 计算总数案例 添加人员案例 三. Vuex工作原理和流程 第一种工作流程 第二种工作流程 生活化的Vuex工作原理 四. 在项目中引入Vuex 安装Vuex 创建store 在Vue中挂载store 五. Vuex的核心属性用法 单一数据源(state) 状态更新方式(mutations) store中的计算属性(getters) 异步更新状态(actions) 同步增加总数 异步增加总数

  • 一篇文章带你搞懂Java线程池实现原理

    目录 1. 为什么要使用线程池 2. 线程池的使用 3. 线程池核心参数 4. 线程池工作原理 5. 线程池源码剖析 5.1 线程池的属性 5.2 线程池状态 5.3 execute源码 5.4 worker源码 5.5 runWorker源码 1. 为什么要使用线程池 使用线程池通常由以下两个原因: 频繁创建销毁线程需要消耗系统资源,使用线程池可以复用线程. 使用线程池可以更容易管理线程,线程池可以动态管理线程个数.具有阻塞队列.定时周期执行任务.环境隔离等. 2. 线程池的使用 /** *

随机推荐