前端 js 基础(2)

js  For In

  • for in 循环遍历 person 对象
  • 每次迭代返回一个 (x)
  • 键用于访问键的
  • 键的值为 person[x]
  • 如果索引顺序很重要,请不要在数组上使用 for in

    索引顺序依赖于实现,可能不会按照您期望的顺序访问数组值。

    当顺序很重要时,最好使用 for 循环、for of 循环或 Array.forEach()

 

<!DOCTYPE html>
<html>
<body><h2>JavaScript For In</h2><p>for in 语句可以遍历数组值:</p><p id="demo"></p><script>
const numbers = [45, 4, 9, 16, 25];let txt = "";
for (let x in numbers) {txt += numbers[x] + "<br>"; 
}document.getElementById("demo").innerHTML = txt;
</script></body>
</html>

js  array.for Each()

<!DOCTYPE html>
<html>
<body><h2>JavaScript Array.forEach()</h2><p>为每个数组元素调用一次函数。</p><p id="demo"></p><script>
const numbers = [45, 4, 9, 16, 25];let txt = "";
//forEach  循环 myFunction数据
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;function myFunction(value, index, array) {txt += value + "<br>"; 
}
</script></body>
</html>

js  For Of 循环

JavaScript for of 语句循环遍历可迭代对象的值。

它允许您循环遍历可迭代的数据结构,例如数组、字符串、映射、节点列表等:

 遍历数组

<!DOCTYPE html>
<html>
<body><h2>JavaScript For Of 循环</h2><p>for of 语句循环遍历任何可迭代对象的值:</p><p id="demo"></p><script>
const cars = ["BMW", "Volvo", "Mini"];let text = "";
for (let x of cars) {text += x + "<br>";
}document.getElementById("demo").innerHTML = text;
</script></body>
</html>

 遍历字符串

<!DOCTYPE html>
<html>
<body><h2>JavaScript For Of 循环</h2><p>for of 语句循环遍历可迭代对象的值。</p><p id="demo"></p><script>
let language = "JavaScript";let text = "";
for (let x of language) {text += x + "<br>";
}document.getElementById("demo").innerHTML = text;
</script></body>
</html>

js Break 和 Continue

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

在本教程稍早的章节中,您已见到了 break 语句。它被用于“跳出” switch 语句。

break 语句也可用于跳出循环。

break 语句会中断循环,并继续执行循环之后的代码(如果有):

continue 语句(不论有无标签引用)只能用于跳过一个迭代

break 语句,如果没有标签引用,只能用于跳出一个循环或一个 switch

如果有标签引用,则 break 语句可用于跳出任意代码块

Break 语句 

<!DOCTYPE html>
<html>
<body><h2>JavaScript break</h2><p id="demo"></p><script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var text = "";list: {text += cars[0] + "<br>"; text += cars[1] + "<br>"; break list;text += cars[2] + "<br>"; text += cars[3] + "<br>"; 
}document.getElementById("demo").innerHTML = text;
</script></body>
</html>

 continue

<!DOCTYPE html>
<html>
<body><p>这个循环在 i=3 时跳过这一步:</p><p id="demo"></p><script>
var text = "";
var i;
for (i = 0; i < 10; i++) {if (i === 3) { continue; }text += "数字是 " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script></body>
</html>

js  typeof

在 JavaScript 中有 5 种不同的可以包含值的数据类型:

  • string
  • number
  • boolean
  • object
  • function

有 6 种类型的对象:

  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean

以及 2 种不能包含值的数据类型:

  • null
  • undefined

<!DOCTYPE html>
<html>
<body><h1>JavaScript 运算符</h1><h2>typeof 运算符</h2><p>typeof 操作符返回变量、对象、函数或表达式的类型:</p><p id="demo"></p><script>
document.getElementById("demo").innerHTML = 
"'Bill' 是 " + typeof "Bill" + "<br>" +
"3.14 是 " + typeof 3.14 + "<br>" +
"NaN 是 " + typeof NaN + "<br>" +
"false 是 " + typeof false + "<br>" +
"[1, 2, 3, 4] 是 " + typeof [1, 2, 3, 4] + "<br>" +
"{name:'Bill', age:19} 是 " + typeof {name:'Bill', age:19} + "<br>" +
"new Date() 是 " + typeof new Date() + "<br>" +
"function () {} 是 " + typeof function () {} + "<br>" +
"myCar 是 " + typeof myCar + "<br>" +
"null 是 " + typeof null;
</script></body>
</html>

 

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

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

相关文章

c++哈希表——超实用的数据结构

文章目录 1. 概念引入1.1 整数哈希1.1.1 直接取余法。1.1.2 哈希冲突1.1.2.1 开放寻址法1.1.2.2 拉链法 1.2 字符串哈希 3.结语 1. 概念引入 哈希表是一种高效的数据结构 。 H a s h Hash Hash表又称为散列表&#xff0c;一般由 H a s h Hash Hash函数(散列函数)与链表结构共同…

[电磁学]猴博士不挂科

1 利用表格求场强 2 利用叠加求场强 3 利用积分求场强 电场立库仑力 球的面积公式是4πr&#xff0c;其中r为球的半径。 球的体积公式是(4/3)πr&#xff0c;其中r为球的半径。 带电物体有体积:

数据采集遇到验证码校验的一般破解方式简述

背景 百度自动采集是一种高效的数据采集方法&#xff0c;但是在采集过程中经常会遇到图片验证码的问题&#xff0c;从而导致采集失败。那么有没有什么方法可以绕过图片验证呢&#xff1f;本文将为您详细介绍。 解决方案 一、使用OCR技术识别验证码 OCR技术可以识别图片中的…

【AI生活】“智能家居:要便利,也要隐私保护“

智能家居&#xff1a;要便利&#xff0c;也要隐私保护 在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;已经深入到我们的生活中&#xff0c;为我们带来了极大的便利。从智能家居到自动驾驶&#xff0c;从智能医疗到智能金融&#xff0c;AI正以前所未有的速度和规…

解决RestHighLevelClient报错missing authentication credentials for REST request

使用ElasticSearch Java API时遇到错误 "missing authentication credentials for REST request" 这是代码: RestHighLevelClient esClient new RestHighLevelClient(RestClient.builder(new HttpHost("localhost",9200,"http")));CreateIndexR…

openGauss学习笔记-180 openGauss 数据库运维-升级-升级前必读

文章目录 openGauss学习笔记-180 openGauss 数据库运维-升级-升级前必读180.1 升级方案180.2 升级前的版本要求180.3 升级影响和升级约束 openGauss学习笔记-180 openGauss 数据库运维-升级-升级前必读 180.1 升级方案 本节为指导用户选择升级方式。 用户根据openGauss提供的…

鸿蒙OS应用开发之气泡提示

前面学习了弹窗提示,其实有时候只是想在旁边做一些说明,那么采用弹窗的方式就比较麻烦一些,这时可以采用系统里面的气泡提示方式。 系统也提供了几种方式弹出气泡提示,最简单的一种是采用bindPopup属性。它的定义如下: 在后面的参数设置里,也是比较复杂的形式。我们先来演…

ESP32入门六(读取引脚的模拟信号[3]:信号出现误差的原因[硬件篇])

在之前的文章中&#xff0c;我们介绍了ESP32在读取模拟信号时出现的误差的软件方面原因&#xff0c;在这一篇中&#xff0c;将会介绍并测试由于硬件或其它方面导致数据出现误差的原因。 一、厂商原因 首先&#xff0c;我们需要知道&#xff0c;在每块EPS32中&#xff0c;在出…

网络安全—认证技术

文章目录 加密认证对称密钥体制公钥密码体制公钥的加密公钥身份认证和加密 鉴别码认证MAC鉴别码 报文摘要认证认证 加密只认证数字签名 通过了解以前前辈们使用的消息认证慢慢渐进到现代的完整的认证体系。所以在学习的时候也很蒙圈&#xff0c;因为前期的很多技术都是有很严重…

第七课:计算机网络、互联网及万维网(WWW)

第七课&#xff1a;计算机网络、互联网及万维网&#xff08;WWW&#xff09; 第二十八章&#xff1a;计算机网络1、局域网 Local Area Networks - LAN2、媒体访问控制地址 Media Access Control address - MAC3、载波侦听多路访问 Carrier Sense Multiple Access - CSMA4、指数…

mac中excel条件格式找到每一列的最大值并标红

假设现在excel有A1:R24组数据&#xff0c;最终效果如下 先选择要处理数据的第一列&#xff0c;然后点击【条件格式】-【新建规则】 style选择【classic】以及【Use a formula to determine which cells to format】&#xff0c;输入规则【C3MAX(C$3:C$24)】 注意这里C$3前面没…

结构体:子网掩码

#include<iostream> using namespace std; union IP //创建共用体 {unsigned char a[4];unsigned int ip; }; IP getIP() //获取ip函数 {int a, b, c, d;scanf_s("%d.%d.%d.%d", &a, &b, &c, &d);IP address;address.a[3] a; address.a[2] …

【12月比赛合集】22场可报名的数据挖掘大奖赛,任君挑选!

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 Kaggle&#xff08;5场比赛&#xff09;阿里天池&#xff08;…

人工智能——移动摄影技术

目录 封面 1 .移动计算摄影简介 2.手机相机的硬件限制 2.1 传感器尺寸和镜头孔径 2.2 噪声和动态范围 2.3 景深 2.4 变焦 2.5 色彩欠采样 3 .相机图像处理流水线 3.1 相机传感器 3.2 相机流水线 5.拓展 1 .移动计算摄影简介 现代数字摄影的进度始终伴随着图像传感器…

杰发科技AC7840——EEPROM初探

0.序 7840和7801的模拟EEPROM使用不太一样 1.现象 按照官方Demo&#xff0c;在这样的配置下&#xff0c;我们看到存储是这样的&#xff08;连续三个数字1 2 3&#xff09;。 使用串口工具的多帧发送功能 看不出多少规律 修改代码后 发现如下规律&#xff1a; 前四个字节是…

Vue2 - v-model 简介

目录 1&#xff0c;原理1.1&#xff0c;作用于表单元素1.2&#xff0c;作用于自定义组件 2&#xff0c;编译结果展示2.2&#xff0c;表单元素2.1&#xff0c;自定义组件 1&#xff0c;原理 官网参考 v-model 是一个语法糖&#xff0c;最终会生成一个属性和一个事件。并且即可…

每日一题——LeetCode976

方法一 个人方法 找规律&#xff1a; 要求要围成三角形且周长最大&#xff0c;那么三条边自然是越大且越接近越好。那么我们就从最大的三条边开始看能不能围成三角形。如果不能组成三角形&#xff0c;则丢弃最长的那条&#xff0c;再取剩余边里最长的那条再看能不能组成三角形…

基于SSM的蛋糕甜品店管理系统的设计与开发论文

基于SSM的蛋糕甜品店管理系统的设计与开发 摘要 如今&#xff0c;科学技术的力量越来越强大&#xff0c;通过结合较为成熟的计算机技术&#xff0c;促进了学校、医疗、商城等许多行业领域的发展。为了顺应时代的变化&#xff0c;各行业结合互联网、人工智能等技术&#xff0c…

Getway介绍和使用

Getway 入门简介 网关搭建步骤&#xff1a; 创建项目&#xff0c;引入nacos服务发现和gateway依赖 配置application.yml&#xff0c;包括服务基本信息、nacos地址、路由 路由配置包括&#xff1a; 路由id&#xff1a;路由的唯一标示 路由目标&#xff08;uri&#xff09;…

react-router-dom5升级到6

前言 升级前版本为5.1.2 下载与运行 下载 npm install react-router-dom6运行 运行发现报错: 将node_modules删除&#xff0c;重新执行npm i即可 运行发现如下报错 这是因为之前有引用react-router-dom.min&#xff0c;v6中取消了该文件&#xff0c;所以未找到文件导致报错。…