您的位置：首页 > 编程技术 > 基础知识  >  Javascrip基础之for循环和数组

Javascrip基础之for循环和数组

 更新时间：2021年12月10日 08:31  点击：370 作者：端端1023

循环-for

for循环基本使用

for循环语法：重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

   for (变量起始值;循环条件;变量更新) {
     循环体
   }

for循环和while循环的区别：

  • 当如果明确了循环的次数的时候推荐使用for循环
  • 当不明确循环的次数的时候推荐使用while循环

退出循环

循环结束：

  • continue：结束本次循环，继续下次循环
  • break：跳出所在的循环

循环嵌套

一个循环里再套一个循环，一般用在for循环里

    for (变量起始值;循环条件;变量更新) {
      for (变量起始值;循环条件;变量更新) {
        循环体
      }
    }

数组

数组是什么

数组(Array)是一种可以按顺序保存数据的数据类型

数组的基本使用

声明语法

let 数组名 = [数据1, 数据2, ..., 数据n]

1数组是按顺序保存，所以每个数据都有自己的编号

2.计算机中的编号从0开始，以此类推

3.在数组中，数据的编号也叫索引或下标

4.数组可以存储任意类型的数据

取值语法

数组名[下标]

1.通过下标取数据

2.取出来是什么类型的，就根据这种类型特点来访问

一些术语

  • 元素：数组中保存的每个数据都叫数组元素
  • 下标：数组中数据的编号
  • 长度：数组中数据的个数，通过数组的length属性获得

数组名.length

遍历数组

用循环把数组中每个元素都访问到,一般会用for循环遍历

    for (let i = 0; i < 数组名.length; i++) {
      数组名[i]
    }

操作数组

数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法

1.查: 查询数组数据,或者我们称为访问数组数据 数组[下标]

2.改: 重新赋值 数组[下标] = 新值

3.增: 数组添加新的数据

  • arr.push (新增的内容)
  • arr.unshift (新增的内容)

4.删: 删除数组中数据

  • arr.pop()
  • arr.shift()
  • arr.splice (操作的下标,删除的个数)

数组增加新的数据

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

arr.push(元素1, 元素2, ..., 元素n)

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

arr.unshift(元素1, 元素2, ..., 元素n)

数组删除元素

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

arr.pop()

数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

arr.shift()

数组. splice() 方法 删除指定元素(重点)

arr.splice(start, deleteCount)
arr.splice(起始位置, 删除几个元素)

start 起始位置:

指定修改的开始位置（从0计数） deleteCount:

表示要移除的数组元素的个数

可选的。 如果省略则默认从指定的起始位置删除到最后

删除元素的使用场景：

随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖

点击删除按钮，相关的数据会从商品数据中删除

总结

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

原文出处：https://blog.csdn.net/m0_64526818/article/details/121779207

[!--infotagslink--]

相关文章

  • php中eval()函数操作数组的方法

    在php中eval是一个函数并且不能直接禁用了，但eval函数又相当的危险了经常会出现一些问题了，今天我们就一起来看看eval函数对数组的操作 例子， <?php $data="array...2016-11-25

  • Python 图片转数组,二进制互转操作

    这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31

  • JavaScript中的this关键字使用方法总结

    在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15

  • php数组操作 键名比较 差集 交集赋值

    本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25

  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07

  • C#二维数组基本用法实例

    这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • php curl模拟post请求和提交多维数组的示例代码

    下面一段代码给大家介绍php curl模拟post请求的示例代码，具体代码如下： <&#63;php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24

  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07

  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23

  • C#数组的常用操作方法小结

    Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25

  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24

  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30

  • javascript实现tab切换的四种方法

    tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08

  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30

  • javascript实现数独解法

    生生把写过的java版改成javascript版，第一次写，很不专业，见谅。唉，我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15

  • C# 拷贝数组的几种方法(总结)

    下面小编就为大家带来一篇C# 拷贝数组的几种方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25