JavaScript寒假系统学习之数组(一)

news2024/12/24 9:28:39

JavaScript寒假系统学习之数组(一)

      • 一、数组
        • 1.1 什么是数组
        • 1.2 数组创建的2种方式
          • 1.2.1 利用new创建数组
          • 1.2.2 利用数组字面量创建数组
        • 1.3 访问数组元素
        • 1.4 遍历数组
        • 1.5 数组实战训练
          • 1.5.1 计算数组的和以及平均值
          • 1.5.2 求数组中的最大值
          • 1.5.3 数组转化为字符串
          • 1.5.4 数组新增元素
          • 1.5.5 数组存放1-10个值
          • 1.5.6 筛选数组方法
          • 1.5.7 删除数组指定元素
          • 1.5.8 翻转数组
          • 1.5.9 冒泡排序

一、数组

1.1 什么是数组

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

1.2 数组创建的2种方式

1.2.1 利用new创建数组

格式:
var 数组名 = new Array();
const 数组名 = new Array();
let 数组名 = new Array();

// 例子
var studentArr = new Array(); // 创建一个空数组studentArr
1.2.2 利用数组字面量创建数组

格式:
var 数组名 = [ ];
const 数组名 = [ ];
let 数组名 = [ ];

// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English

// 注意: 数组内部的类型无限制
var demoArr = [1, true, 'Amy']; // 这样创建是被JS允许的

1.3 访问数组元素

格式:
数组名[索引号]

// 例子
// 刚刚创建的数组courseArr, 里面的元素有Chinese、Math、English,其索引号(即下标)分别是0,1,2
var courseArr = ['Chinese', 'Math', 'English']; 
console.log(courseArr[0]); // 访问数组元素Chinese
console.log(courseArr[1]); // 访问数组元素Math
console.log(courseArr[2]); // 访问数组元素English

1.4 遍历数组

格式:
for循环

// 例子
var courseArr = ['Chinese', 'Math', 'English']; // 创建一个数组courseArr, 里面的元素有Chinese、Math、English

for(var i = 0; i < courseArr.length; i++) {
	console.log(courseArr[i]); // 依次打印出Chinese、Math、English
}

1.5 数组实战训练

1.5.1 计算数组的和以及平均值
 var arr = [10, 34, 22, 54, 93];
 var sum = 0; // 总和
 var average = 0; // 平均值
 for(var i = 0; i < arr.length; i++) {
     sum += arr[i];
 }
 console.log('sum = ' + sum); // 213
 average = sum / arr.length;
 console.log('average = ' + average); // 42.6
1.5.2 求数组中的最大值
 var arr = [34, 6, 55, 49, 82];
 var max = arr[0]; // 初步定义一个最大值
 for (var i = 0; i < arr.length ; i++) {
   if(arr[i] > max) { // 在遍历中拿arr中每个元素与max进行比较
     max = arr[i];
   }
 }
 console.log('max = ' + max); // 82
1.5.3 数组转化为字符串
 var arr = ['Nice', 'to', 'meet', 'you'];
 var str = '';
   for(var i = 0; i < arr.length; i++) {
     str += arr[i] + ' ';
   }
 console.log('str = ' + str); // Nice to meet you
1.5.4 数组新增元素
	var arr = ['apple'];
	
	// 方式一:
	arr[arr.length] = 'peach';
	console.log('arr = ' + arr); // apple,peach
	
	// 方式二:数组名.push(新元素) 将新增元素添加到数组尾部
	arr.push('watermelon');
	console.log('arr = ' + arr); // apple,peach,watermelon
	
	// 方式三:数组名.unshift(新元素) 将新增元素添加到数组头部
	arr.unshift('strawberry');
	console.log('arr = ' + arr); // strawberry,apple,peach,watermelon
	
	// 方式三: 数组名.splice(索引号, 数量, 新增元素) 可删除从 索引号 处开始的零个或多个元素(即数量),并且用参数列表中声明的一个或多个值(即新增元素)来替换那些被删除的元素。
	arr.splice(1, 0, 'orange', 'pear'); // 从arr[1]开始,删除原数组0个元素,插入新增元素orange、pear
	console.log('arr = ' + arr); // strawberry,orange,pear,apple,peach,watermelon

详细请参考:JS数组添加元素的三种方法 js数组反转的几种方法

1.5.5 数组存放1-10个值
var arr = [];
for(var i = 0; i < 10; i++) {
    // 法一:
    // arr[i] = i + 1;
    // 法二:
    arr[arr.length] = i + 1; // 每次完成 i + 1之后,arr.length就会自动增加1
}
console.log('arr = ' + arr);
1.5.6 筛选数组方法
 // 筛选数组中大于10的元素
 var arr = [5, 23, 14, 2];
 var newArr = [];
   for(var i = 0; i < arr.length; i++) {
       if(arr[i] > 10) {
           newArr[newArr.length] = arr[i]; // newArr存储arr数组中>10的元素
       }
   }
 console.log('newArr = ' + newArr); // 23,14
 // 如果需要改动的是原数组,那么执行下一步
 arr = newArr; // arr原内容全被newArr的内容覆盖
 console.log('arr = ' + arr); // 23,14
1.5.7 删除数组指定元素
 var arr = ['apple', 'pear', 'apple', 'watermelon'];
 var newArr = [];
  for(var i = 0; i < arr.length; i++) {
      if(arr[i] !== 'apple') {
          newArr[newArr.length] = arr[i]; //  newArr存储arr数组中非apple的元素
      }
  }
  arr = newArr; // arr原内容全被newArr的内容覆盖
  console.log('arr = ' + arr); // pear,watermelon
1.5.8 翻转数组
  // 翻转数组
   var arr = [1, 2, 3, 4, 5];
   var newArr = [];

   // 法一: arr.reverse()方法直接翻转
   arr = arr.reverse();
   console.log('arr = ' + arr); // 5,4,3,2,1

   // 法二:遍历 + unshift()
   arr.forEach((element) => {
       newArr.unshift(element); // 具体的.unshift()可参考上面的【1.5.4 数组新增元素】
   })
   console.log('newArr = ' + newArr); // 5,4,3,2,1

   // 法三:遍历 + 翻转
   for(var i = 0; i < arr.length; i++) {
       var j = arr.length - i - 1;
       if(i < j) {
           var temp = arr[i];
           arr[i] = arr[j];
           arr[j] = temp;
       }
   }
   console.log('arr = ' + arr); // 5,4,3,2,1

参考资料:js数组反转的几种方法

1.5.9 冒泡排序

在这里插入图片描述

 var arr = [23, 14, 33, 52, 6];
  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 = ' + arr); // 52,33,23,14,6

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/126780.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Qemu在Windows上模拟arm平台并安装debian10 arm系统(cd镜像) 安装记录

参考&#xff1a;使用Qemu在Windows上模拟arm平台并安装国产化操作系统_viyon_blog的博客-CSDN博客_qemu windows 镜像&#xff1a;debian-10.12.0-arm64-xfce-CD-1.iso 环境&#xff1a;qemu虚拟机&#xff0c;宿主机win10,amd64 QEMU_EFI.fd: (298条消息) qemu虚拟机的bi…

N皇后问题-leetcode51-java回溯解+详细优化过程

说明&#xff1a;问题描述来源leetcode 一、问题描述&#xff1a; 51. N 皇后 难度困难1592 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之…

实验八、直接耦合多级放大电路的调试

一、题目 两级直接耦合放大电路的调试。 二、仿真电路 图1(a)所示电路为两级直接耦合放大电路&#xff0c;第一级为双端输入、单端输出差分放大电路&#xff0c;第二级为共射放大电路。 由于在分立元件中很难找到在任何温度下均具有完全相同特性的两只晶体管&#xff0c;因而…

Active Directory 基础 —— 如何理解group的类型

因为创建一个跨域的组,重新温习了一下最基本的AD知识,所谓温故而知新,把温习的结果整理了一下。AD里面的group类型从范围来说分为global, universal 和 local domain, 从类型来分分为security和distribution。后面的类型理解很容易,security就是纯粹用来权限访问的,而dist…

Java实现FIFO、LRU、LFU、OPT四页面置换算法

题目要求 采用多道程序思想设计一个程序&#xff0c;模拟页存储管理地址变换的过程&#xff0c;可采用FIFO、LRU、LFU、OPT四页面置换算法。基本要求如下&#xff1a; 需要建立访问页表线程、访问快表线程、缺页中断处理线程、访问内存线程等&#xff0c;协同这些线程模拟完成…

JDK17升级之路:JCE cannot authenticate the provider BC问题

问题的产生 报错代码运行环境 JDK&#xff1a;Oracle JDK17 CentOS7.8 这个问题刚拿到比较棘手。原因是本地windows是OK的&#xff0c;centos上是不成功的&#xff0c;报了下面的错误&#xff1a; Caused by: java.lang.SecurityException: JCE cannot authenticate the provi…

论文阅读 DeepGCNs: Can GCNs Go as Deep as CNNs?

DeepGCNs: Can GCNs Go as Deep as CNNs?绪论1、介绍2、相关工作3、方法3.1、图神经网络的表针学习3.2、图神经网络的残差结构3.3、图神经网络的密集连接3.4、图神经网络的扩张性聚集绪论 CNN很强&#xff0c;但不能正确解决非欧几里得数据的问题&#xff0c;图卷积网络&…

YOLO-V5 系列算法和代码解析(五)—— 损失函数

文章目录基本简介调试准备损失函数基本简介 损失函数是神经网络的重要组成部分&#xff0c;用于评估网络的预测值和真实值的差异度。根据偏差的大小&#xff0c;反向调整网络的训练参数&#xff0c;迭代优化使得损失尽量小&#xff0c;也就得到最优的网络参数。 调试准备 debu…

Go-学生教务管理系统【无界面 / 离线版】(一)

【Go】学生教务管理系统&#xff08;无界面 / 离线版&#xff09;&#xff08;一&#xff09;Ⅰ. 程序说明一、博客日期二、引言Ⅱ. 版权声明Ⅲ. 开发环境一、开发配置二、开发工具Ⅳ. 效果演示一、工程结构&#xff08;一&#xff09;目录结构&#xff08;二&#xff09;目录说…

【Ctfer训练计划】——(六)

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门 创作初心&#xff1a;舞台再大&#xff0c;你不上台&#xff0c;永远是观众&#xff0c;没人会关心你努不努力&#xff0c;摔的痛不痛&#xff0c;他们只会看你最后站在什么位置&#xff0c;然后羡慕或鄙夷座…

Springboot启动之自定义run方法

前言 之前分析的Springboot启动过程的源码分析中给自己留了一个扩展作业&#xff1a;执行自定义的run方法&#xff0c;此方法在B.7、调用运行器简单分析过&#xff0c;今天咱们就自定义一个Run方法试试。 一、实现自定义的run方法 由于java中的接口可以多实现&#xff0c;所以…

IOS----TangramKit 布局框架

文章目录系统结构CocoaPods安装举例下面一个应用场景:布局线性布局TGLinearLayout相对布局TGRelativeLayout框架布局TGFrameLayout表格布局TGTableLayout流式布局TGFlowLayout浮动布局TGFloatLayout路径布局MyPathLayoutgithub: https://github.com/youngsoft/TangramKit/blob…

day32【代码随想录】回溯之N皇后、N皇后||、解数独、有效的数独

文章目录前言一、N皇后&#xff08;力扣51&#xff09;二、N皇后||&#xff08;力扣52&#xff09;三、解数独&#xff08;力扣37&#xff09;四、有效的数独&#xff08;力扣36&#xff09;前言 1、N皇后、 2、N皇后||、 3、解数独、 4、有效的数独 一、N皇后&#xff08;力扣…

材料表征仪器:慢正电子束谱仪最全知识讲解

1 引言 21世纪科学的发展将是微观与宏观的相互渗透与密切结合。凝聚态物理、材料科学等的研究&#xff0c;将由现在的宏观统计方法&#xff08;包括宏观量子统计&#xff09;深入发展到物质的原子层次物性研究&#xff0c;微观粒子&#xff08;颗粒、孔隙&#xff09;的量子效…

求最大公约数,求阶乘,求n个n相乘的末两位数(Python)

问题 AN: 41.求最大公约数 题目描述 对于求两个正整数m&#xff0c;n的最大公约数可以用do-while实现 输入 输入两个正整数m&#xff0c;n 输出 最大公约数 样例输入 1 2 样例输出 1 a,b map(int,input().split()) if a<b:a,b b,a#python很方便的交换操作 #适应判断不带…

MySQL复制技术方案——异步复制配置

为MySQL服务器配置复制非常简单。但由于场景不同&#xff0c;基本的步骤还是有所差异。最基本的场景是新安装的主库和备库&#xff0c;总的来说分为以下几步∶ 1. 配置复制 为MySQL服务器配置复制非常简单。但由于场景不同&#xff0c;基本的步骤还是有所差异。最基本的场景是…

HTML5 Canvas

文章目录HTML5 Canvas概述Canvas元素使用绘制直线画2条直线用直线画三角形用直线画矩形绘制矩形描边矩形填充矩形混合使用rect()清空矩形区域清空画布绘制多边形画箭头画正三角形绘制圆形HTML5 Canvas 概述 HTML5新增了一个Canvas元素&#xff0c;我们常说的Canvas技术&#…

【LeetCode】填充每个节点的下一个右侧节点指针 [M](二叉树遍历)

116. 填充每个节点的下一个右侧节点指针 - 力扣&#xff08;LeetCode&#xff09; 一、题目 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node { int val; Node *left; Node *…

通过webpack解决浏览器兼容问题

前言 很多面试时都会问到关于浏览器兼容问题&#xff0c;正好最近在看webpack打包&#xff0c;那就在这里记录一下我们如何通过webpack来实现兼容。 需求 要知道我们到底需要兼容那些浏览器&#xff0c;在这里就需要用到browserlist来配置需要兼容的浏览器版本并告诉webpack…

Jenkins自动部署项目

目录 1.安装插件 2.配置 本文只讲解通过插件来自动部署项目&#xff0c;Jenkins的安装可以看博主的另一篇文章&#xff0c;绝对保姆级&#xff0c;简洁丝滑的安装教程&#xff1a; jenkins下载安装__BugMan的博客-CSDN博客 1.安装插件 目前业内常用的解决方法是使用publish…