第五周预习内容

最新推荐文章于 2024-07-31 16:33:32 发布
最新推荐文章于 2024-07-31 16:33:32 发布
阅读量112 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darling627/article/details/116658252
版权

js基础语法

js

简介

JavaScript 是 web 开发者必学的三种语言之一：

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

JS脚本语言–编程类语言 ：一种运行在客户端的脚本语言（Script是脚本的意思）
实现业务逻辑和页面控制（决定功能）

浏览器怎么执行JS：
浏览器一般由七个模块组成，User Interface（用户界面）、Browser
engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript
Interpreter（js解释器）、UI Backend（UI后端）、Date Persistence（数据持久化存储）

  • 渲染引擎：用来解析html与css，俗称内核，比如chrome浏览器的blink，老版本的webkit
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
  • 浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转为机器语言），然后由计算机去执行

注释

1.单行注释

单行注释以 // 开头。 任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

实例

var x = 5;      // 声明 x，为其赋值 5
var y = x + 2;  // 声明 y，为其赋值 x + 2

2.多行注释

多行注释以 /* 开头，以 */ 结尾。 任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

实例

/*
 下面的代码会改变
 网页中
 id = "myH" 的标题
 以及 id = "myP" 的段落：
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";

注释：使用单行注释最为常见。

提示：注释块常用于官方声明。

使用注释来防止代码执行很适合代码测试。

3种引用方式

原文引用链接：link.

<!DOCTYPE html>
<html>
<head>
	<title>js</title>
	<!-- 内嵌式，script标签可以放在HTML内的任何位置 -->
	<script type="text/javascript">
		alert('内嵌式')
	</script>
	<!-- 外链式，引入外部的一个js文件 -->
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<!-- 行内式 -->
	<button onclick="alert('点击了按钮')">按钮</button>
</body>
</html>

1.<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

实例

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

注释：

  • 旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。
  • type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

2.外部 JavaScript 的优势

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

实例

<script src="myScript.js"></script>

注释：外部脚本不能包含 <script> 标签。

2种输入

1.prompt()

弹出一个允许输入值的对话框，提供了确定和取消两个按钮，还能提供预期输入值。

实例

 <script>
       function inBtn(){
           var msg = prompt("请输入值","预期输入");
           alert("你输入的值：" + msg);
       }
    </script>
    <button οnclick="inBtn()">打开输入框</button>

2.comfirm()
弹出一个确认消息对话框，有确定和取消两个按钮，点击确定就返回true，点击取消就返回false。该方法的显示内容是预期指定好的，这个方法常用来作简单判断，非常方便，但每次总是要弹框，所以还是挺麻烦的。

实例

<body>
    <script>
       function inBtn(){
           var msg = confirm("你学过Javascript吗？");
           if(msg){
               alert("学过了，那还需要努力!");
               var msg2 = confirm("我将提供一个教程给你，需要吗？");
               if(msg2) 
                    alert("w3cschool");
               else 
                    alert("那可真是太遗憾了");
           }else{
               alert("没学过，那就开始学吧！");
           }
       }
    </script>
    <button οnclick="inBtn()">打开输入框</button>
</body>

4种输出

1.alert()

弹出一个对话框，并显示输入的信息，信息都是String形式。该对话框包含一个确定按钮，点击后浏览器才会继续解析执行。

 <script>
        alert("弹出一个alert()"); //输出指定内容
        var msg = "输出一个变量";
        alert(msg); //输出变量中的内容
    </script>

2.document.write()/writeln()

输出内容到HTML文档中，这意味着可以输出标签。writeln()的作用就是输出内容后换行，但显示时是一个空格。

<body>
    <div>============</div>
    <script>
        document.write("AAA");
        document.writeln("BBB");
        document.writeln("CCC");
        document.write("<p>" + "输出标签" + "</p>");
    </script>
</body>

3.console.log()

用法和上面方法一致，只是信息会输出到控制台（浏览器F12打开审查元素页面，下面就是控制台）。所以就不给出实例了。

4.输出内容到HTML元素中

这种方式和上面三种直接使用方法输出内容不同，它需要操作DOM对象

实例：

<script>
        // 拿到输入的值，输出到指定ID的元素中
        function outInfo(){
            var msg = document.getElementById("in").value;
            document.getElementById("p1").innerHTML = msg;
        }
    </script>
    <input type="text" id="in" value=""/><br>
    <button οnclick="outInfo()">把输入框的值输出到下面</button>
    <p id="p1"></p>

这里使用的是innerHTML，还有一个innerText，两者的区别是：innerHTML可以接收元素，例如往一个div元素中输出一个p元素。而innerText则只能接收纯文本。

数据类型与变量

5种数据类型

原文引用链接：link.
1、数值类型

数值类型包括：整数和浮点数。

整数可以是十进制、十六进制和八进制数，十进制数由一串数字序列组成，它的第一个数字不能为0。如果第一个数字为0，则表示它是一个八进制数。如果0x，则表示它为一个十六进制数。

浮点数必须包含一个数字、一个小数点或“e”（或“E”）。浮点数例子如下：3.1415、 -3.1E12、0.1e12和2E-12。

<script type="text/javascript">
	// 显式声明变量a , b
	var a , b;
	// 给a , b使用科学记数法赋值，其值应该为500
	a = 5E2;
	b = 1.23e-3;
	// 使用警告提示框输出变量a的值
	alert(a + "\n" + b);
</script>

在这里插入图片描述
当数值类型超出了其表述范围时，将出现两个特殊值：Infinity（正无穷大） 和 -Infinity（负无穷大。）

<script type="text/javascript">
	// 定义x为最大的数值
	var x = 1.7976931348623157e308; 
	// 再次增加x的值
	x = x + 1e292;
	// 使用警告框输出x的值
	alert(x);
</script>

在这里插入图片描述

2、布尔类型

布尔类型有两种值：true 和 false。

<script type="text/javascript">
	// 如果浏览器支持Cookie
	if (navigator.cookieEnabled) 
	{
		alert("浏览器允许使用Cookie");
	}
	// 如果浏览器不支持Cookie
	else
	{
		alert("浏览器禁用Cookie");
	}
</script>

在这里插入图片描述
3、字符串类型

JavaScript的子串富川必须用引号括起来，此处的引号既可以是单引号，也可以是双引号。

 var a = "12345678912aaa";
 var a = '12345678912aaa';

注意：JavaScript和Java中的字符串主要有两点区别：

  • （1）JavaScript中的字符串可以用单引号括起来；

  • （2）JavaScript中比较两个字符串的字符序列是否相等使用 == 即可，无需使用equals()方法。

JavaScript以String内建类表示字符串，String类里包含了一系列方法操作字符串，String类有如下基本方法和属性操作字符串：

（1）charCodeAt() :返回字符串中特定索引处的字符所对应的Unicode值

（2）Legth():返回字符串的长度

（3）toUpperCase() : 将stringObj中的小写字母全部转成大写字母

（4）toLowerCase() :将stringObj中的大写字母全部转成小写字母

（5）fromCharCode() :直接通过String类调用方法，将一系列Unicode值转换成字符串

（6）indexOf() :返回字符串第一次出现的位置

（7）lastIndexOf() :返回字符串最后一次出现的位置

（8）subString() :截取stringObj从start开始，至end为止之前的所有字符，即包括start处的字符，但不包含end处的字符

（9）slice() :截取stringObj从start开始，到end为止之前的所有字符；即包括start处的字符，但不包括end处的字符。start与end均可为负值，当为负值时，表示从最后一个字符算起的第n个字符，比如-1表示最后一个字符，-2表示倒数第二个字符。

（10）match() :在字符串内检索指定的正则表达式的匹配结果，该结果与regexp是否有指定全局标志g有关

（11）split() :将separtor为为分隔，将stringObj分割成一个字符串数组。separator可以是字符串或者正则表达式，若为字符串，则以separator为分割符；弱separator为正则表达式，则以符合separator指定模式的字符串作为分隔符。

（12）replace() :将字符串中某个子串以特定字符串替代。

<script type="text/javascript">
	// 定义字符串变量a
	var a = "abc中国";
	// 获取a的长度
	var b = a.length;
	// 将系列的Unicode值转换成字符串
	var c = String.fromCharCode(97,98,99);
	// 输出a的长度，以及字符串a在索引4处的字符和
	// 对应的Unicode值，以及c字符串变量的值
	alert(b + "---" + a.charAt(4) + "---"
		+ a.charCodeAt(4) + "---" + c);
</script>

下面是一些常用的转义字符:

序转义字符使用说明
0NUL 字符(\u0000)
1\b后退一格（Backspace）退格符(\u0008)
2\f换页（Form Feed）(\u000C)
3\n换行（New Line）(\u000A)
4\r回车（Carriage Return）( \u000D)
5\t制表（Tab）水平制表符(\u0009)
6’单引号(\u0027)
7"双引号(\u0022)
8\反斜线（Backslash）(\u005C)
9\v垂直制表符(\u000B)
10\xNN由两位十六进制数值NN指定的Latin-1字符
11\uNNNNN由四位十六进制数 NNNN指定的Unicode字符
12\NNN由一位到三位八进制数（1到377）指定的Latin-1字符。ECMAScript v3不支持，不要使用这种转义序列。

4、对象类型

JavaScript 对象用花括号来书写。 对象属性是 name:value 对，由逗号分隔。

用new生成一个新的对象：var currentDay = new Date()。
实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。
5、数组类型

JavaScript 数组用方括号书写。
数组的项目由逗号分隔。

下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）：

var cars = ["Porsche", "Volvo", "BMW"];

变量

原文引用链接：link.

1.变量的使用
变量在使用时分为两步：1.声明变量 2.赋值

2.声明变量

//声明变量
var age; //声明一个名称为age的变量

var 是一个JS关键字，用来声明变量
age是变量名，我们要通过变量名来访问内存中分配的空间

3. 变量的初始化

 var age = 18;
    console.log('age');
    var myname = "张张";
    console.log('myname');

4. 变量使用
promot 浏览器弹出输入框
alert 警示框
console 控制台输出 给程序员测试用

5. 变量语法
1.4.1 同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量之间用逗号隔开。

var name = 'zz',
age = '18',
price = '120000';

6. 声明变量的特殊情况

  • 1.只声明不赋值，结果为undefined。
  • 2.不声明不赋值，结果报错。
  • 3.不声明直接赋值，可以使用。

typeof（变量或值）

原文引用链接：link.
1. typeof的语法
typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。

2. typeof的返回值
typeof运算符的返回类型为字符串，值包括如下几种：

    1. 'undefined'              --未定义的变量或值

    2. 'boolean'                 --布尔类型的变量或值

    3. 'string'                     --字符串类型的变量或值

    4. 'number'                  --数字类型的变量或值

    5. 'object'                    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)

    6. 'function'                 --函数类型的变量或值
  1. 简单的示例
console.log(typeof a);    //'undefined'

console.log(typeof(true));  //'boolean'

console.log(typeof '123');  //'string'

console.log(typeof 123);   //'number'

console.log(typeof NaN);   //'number'

console.log(typeof null);  //'object'    

var obj = new String();

console.log(typeof(obj));    //'object'

var  fn = function(){};

console.log(typeof(fn));  //'function'

console.log(typeof(class c{}));  //'function'

总结：typeof运算符用于判断对象的类型，但是对于一些创建的对象，它们都会返回’object’，有时我们需要判断该实例是否为某个对象的实例，那么这个时候需要用到instanceof运算符，后续记录instanceof运算符的相关用法。

运算符

JavaScript 运算符优先级值

值运算符描述实例
20( )表达式分组(3 + 4)
19.成员person.name
19[]成员person[“name”]
19()函数调用myFunction()
19new创建new Date()
17++后缀递增i++
17–后缀递减i–
16++前缀递增++i
16–前缀递减–i
16!逻辑否!(x==y)
16typeof类型typeof x
15**求幂 (ES7)10 ** 2
14*乘10 * 5
14/除10 / 5
14%模数除法10 % 5
13+加10 + 5
13-减10 - 5
12<<左位移x << 2
12>>右位移x >> 2
12>>>右位移（无符号）x >>> 2
11<小于x < y
11<=小于或等于x <= y
11>大于x > y
11>=大于或等于x >= y
11in对象中的属性“PI” in Math
11instanceof对象的实例instanceof Array
10==相等x == y
10===严格相等x === y
10!=不相等x != y
10!==严格不相等x !== y
9&按位与x & y
8^按位 XORx ^ y
7|按位或x | y
6&&逻辑与x && y
5||逻辑否x ||y
4? :条件? “Yes” : “No”
3=赋值x = y
3+=赋值x += y
3-=赋值x -= y
3*=赋值x *= y
3%=赋值x %= y
3<<=赋值x <<= y
3>>=赋值x >>= y
3>>>=赋值x >>>= y
3&=赋值x &= y
3^=赋值x ^= y
3|=赋值x|= y
2yield暂停函数yield x
1,逗号7 , 8
  提示：括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。

算术运算符

算数运算符用于对数字执行算数运算

运算符描述
+加法
-减法
*乘法
**幂（ES2016）
/除法
%系数
++递增
- -递减

典型的算术运算会操作两个数值。

这两个数可以是字面量：

实例

var x = 7 + 8;

或变量：

实例

var x = a + b;

或表达式：

实例

var x = (7 + 8) * a;

运算符和操作数

在算术运算中，数被称为操作数。（两个操作数之间执行的）运算由运算符定义。

操作数运算符操作数
7+8

比较和逻辑运算符用于测试 true 或 false。

赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
<<=x <<= yx = x << y
>>=x >>= yx = x >> y
>>>=x >>>= yx = x >>> y
&=x &= yx = x & y
^=x ^= yx = x ^ y
|=x|= yx = x | y
**=x **= yx = x ** y

提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。

比较运算符

比较运算符在逻辑语句中使用，以判定变量或值是否相等。

我们给定 x = 5，下表中解释了比较运算符：

运算符描述比较返回
==等于x == 8false
x == 5true
x == “5”true
===值相等并且类型相等x === 5true
x === “5”false
!=不相等x != 8true
!==值不相等或类型不相等x !== 5false
x !== “5”true
x !== 8true
>大于x > 8false
<小于x < 8true
>=大于或等于x >= 8false
<=小于或等于x <= 8true

逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑。

我们给定 x = 6 且 y = 3，下表解释了逻辑运算符：

运算符描述例子
&&与(x < 10 && y > 1) 为 true
||或(x == 5 || y == 5) 为 false
!非!(x == y) 为 true

条件（三元）运算符

JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法

variablename = (condition) ? value1:value2

实例

var voteable = (age < 18) ? "太年轻":"足够成熟";

比较不同的类型

比较不同类型的数据也许会出现不可预料的结果。

如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

案例值
2 < 12true
2 < “12”true
2 < “John”false
2 > “John”false
2 == “John”false
“2” < “12”false
“2” > “12”true
“2” == “12”false

当比较两个字符串时，“2” 大于 “12”，因为（按照字母排序）1 小于 2。

为了确保正确的结果，在比较值前应该把变量转换为合适的类型：

age = Number(age);
if (isNaN(age)) {
    voteable = "输入错误";
} else {
    voteable = (age < 18) ? "太年轻" : "足够成熟";
}

JavaScript 类型转换

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

JavaScript 类型转换表
下表中列出了将不同 JavaScript 值转换为数字、字符串和布尔的结果：

原始值转换为数字转换为字符串转换为逻辑
false0“false”false
true1“true”true
00“0”false
11“1”true
“0”0“0”true
“000”0“000”true
“1”1“1”true
NaNNaN“NaN”false
InfinityInfinity“Infinity”true
-Infinity-Infinity“-Infinity”true
“”0“”false
“20”20“20”true
“twenty”NaN“twenty”true
[ ]0“”true
[20]20“20”true
[10,20]NaN“10,20”true
[“twenty”]NaN“twenty”true
[“ten”,“twenty”]NaN“ten,twenty”true
function(){}NaN“function(){}”true
{ }NaN“[object Object]”true
null0“null”false
undefinedNaN“undefined”false

引号中的值指示字符串值。

请注意：

  • NaN 的数据类型是数值
  • 数组的数据类型是对象
  • 日期的数据类型是对象
  • null 的数据类型是对象
  • 未定义变量的数据类型是 undefined
  • 尚未赋值的变量的数据类型也是 undefined

JavaScript 位运算符

运算符名称描述
&AND如果两位都是1则设置每位为 1
|OR如果两位之一为1则设置每位为 1
^XOR如果两位只有一位为 1 则设置每位为 1
~NOT反转所有位
<<零填充左位移通过从右推入零向左位移，并使最左边的位脱落。
>>有符号右位移通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
>>>零填充右位移通过从左推入零来向右位移，并使最右边的位脱落。

实例

操作结果等同于结果
5 & 110101 & 00010001
5 | 150101 | 00010101
5 ^ 140101 ^ 00010100
~ 510~01011010
5 << 1100101 << 11010
5 >> 120101 >> 10010
5 >>> 120101 >>> 10010

  • JavaScript 使用 32 位按位运算数

  • JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。

  • 在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。

  • 执行按位操作后，结果将转换回 64 位 JavaScript 数。

  • 上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

  • 由于 JavaScript 使用 32 位有符号整数，JavaScript 将返回 -6。

  • 00000000000000000000000000000101 (5)

    11111111111111111111111111111010 (~5 = -6)

    有符号整数使用最左边的位作为减号。

控制语句

在 JavaScript 中，我们可使用如下条件语句：

  • 使用 if 来规定要执行的代码块，如果指定条件为 true
  • 使用 else 来规定要执行的代码块，如果相同的条件为 false
  • 使用 else if 来规定要测试的新条件，如果第一个条件为 false
  • 使用 switch 来规定多个被执行的备选代码块

if

语法

if (条件) {
    如果条件为 true 时执行的代码
}

注释：if 使用小写字母。大写字母（IF 或 If）会产生 JavaScript 错误。

实例
如果时间早于 18:00，则发出 “Good day” 的问候：

if (hour < 18) {
    greeting = "Good day";
}

如果时间早于 18 点，则 greeting 的结果将是：

Good day

if…else

语法

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

实例
如果 hour 小于 18，创建 “Good day” 问候，否则 “Good evening”：

if (hour < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 }

greeting 的结果：

Good day

if…else if

语法

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

实例
如果时间早于 10:00，则创建 “Good morning” 问候，如果不是，但时间早于 18:00，则创建 “Good day” 问候，否则创建 “Good evening”：

if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 }

greeting 的结果：

Good day

switch

switch 语句用于基于不同条件执行不同动作。

JavaScript Switch 语句

请使用 switch 语句来选择多个需被执行的代码块之一。

语法

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

代码解释：
计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配，则执行关联代码

break 关键词

  • 如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

  • 此举将停止代码块中更多代码的执行以及 case 测试。

  • 如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

  • break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

  • 不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

实例
getDay() 方法返回 0 至 6 的数字周名。

如果今日既不是周六（6）也不是周日（0），则输出一段默认消息：

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
}

text 的结果是：

今天是周六

默认的 case 不必是 switch 代码块中最后一个 case：

实例

switch (new Date().getDay()) {
    default: 
        text = "期待周末！";
         break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

常见的代码块 有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

实例

switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
}

Switching 的细节

  • 如果多种 case 匹配一个 case 值，则选择第一个 case。

  • 如果未找到匹配的 case，程序将继续使用默认 label。

  • 如果未找到默认 label，程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较（===）。

  • 值必须与要匹配的类型相同。

  • 只有操作数属于同一类型时，严格比较才能为 true。

在这个例子中，x 将不匹配：

实例

var x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

循环结构

while

while 循环会一直循环代码块，只要指定的条件为 true。

语法

while (条件) {
    要执行的代码块
}

实例
在下面的例子中，循环中的代码将运行，一遍又一遍，只要变量i小于 10：

while (i < 10) {
    text += "数字是 " + i;
    i++;
}

do…while

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

语法

do {
    要执行的代码块
}

while (条件);

实例
下面的例子使用了 do/while 循环。该循环会执行至少一次，即使条件为 false，因为代码块会在条件测试之前执行：

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

for

语法

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

  • 语句 1 在循环（代码块）开始之前执行。

  • 语句 2 定义运行循环（代码块）的条件。

  • 语句 3 会在循环（代码块）每次被执行后执行。

实例

for (i = 0; i < 5; i++) {
     text += "数字是 " + i + "<br>";
}

从上面的代码中，您可以了解到：

  • 语句 1 在循环开始之前设置了一个变量（var i = 0）。

  • 语句 2 定义运行循环的条件（i 必须小于 5）。

  • 语句 3 会在代码块每次执行之后对值进行递增（i++）。

语句 1

  • 通常，您会使用语句 1 来初始化循环中所使用的的变量（i = 0）。

  • 但情况并不总是这样，JavaScript 不会在意。语句 1 是可选的。

  • 您可以在语句 1 中初始化多个值（由逗号分隔）：

实例

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

而且您还可以省略语句 1（比如在循环开始前设置好值）：

实例

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

语句 2

  • 通常语句 2 用于计算初始变量的条件。

  • 但情况并不总是这样，JavaScript 不会在意。语句 2 也是可选的。

  • 如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。

  • 如果省略语句 2，那么必须在循环中提供一个 break。否则循环永远不会结束。请在下一章阅读更多关于 break 的内容。

语句 3

  • 通常语句 3 会递增初始变量的值。

  • 但情况并不总是这样，JavaScript 不会在意。语句 3 也是可选的。

  • 语句 3 可做任何事情，比如负递增（i–），正递增（i = i + 15），或者任何其他事情。

  • 语句 3 也可被省略（比如当您在循环内递增值时）：

实例

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

break 和continue

break 语句“跳出”循环。

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

Break 语句

  • break 语句被用于“跳出” switch 语句。

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

  • break 语句会中断循环，并继续执行循环之后的代码（如果有）：

实例

for (i = 0; i < 10; i++) {
    if (i === 3) { break; }
    text += "数字是 " + i + "<br>";
}

Continue 语句

continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。

本例跳过值 3 ：

实例

for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    text += "数字是 " + i + "<br>";
}

JavaScript 标签

如需标记 JavaScript 语句，请将标签名和冒号置于语句之前：

label:
statements

break 和 continue 语句是仅有的可“跳出”代码块的 JavaScript 语句。

语法：

break labelname;

continue labelname;

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

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

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

实例

var  cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
    text += cars[0] + "<br>"; 
    text += cars[1] + "<br>"; 
    text += cars[2] + "<br>"; 
    break list;
    text += cars[3] + "<br>"; 
    text += cars[4] + "<br>"; 
    text += cars[5] + "<br>"; 
}
不干活就没有饭吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第三周预习资料.rar
10-07
"第三周预习资料.rar"很可能包含了一系列与课程相关的文档、视频、代码示例或者练习题，帮助学生在正式上课前理解和掌握相关概念。 在预习的过程中，通常会涉及以下知识点： 1. **文件压缩格式**：RAR是一种常见的...
第十一周预习作业问答题.pdf
10-14
新生儿分类和生理特征：新生儿按月龄分为早产儿（周）、足月儿（37-41周）和过期产儿（>41周）；按体重分为低出生体重儿（），正常出生体重儿（2500-4000g），高出生体重儿（>4000g）。新生儿的呼吸、循环、消化、...
JS中类型与值
hohocj的博客
10-24 245
现在开始更新《你不知道的JavaScript》中卷的学习内容 这篇文章的内容比较简单，大致过一遍，稍稍记住几个特殊的小知识点即可 类型 首先内置类型应该都知道了 ◦ 空值（null） ◦ 未定义（undefined） ◦ 布尔值（boolean） ◦ 数字（number） ◦ 字符串（string） ◦ 对象（object） ◦ 符号（symbol） console....
JavaScript(2) 类型、值和变量
Jovan的博客
03-29 214
JavaScript的数据类型分为两类： 1.原始类型（primitive type）和对象类型（object type） 原始类型里面包括： 1.字符串 2.数字 3.布尔值 4.null 5.undefined 对象（object）是property的集合，每个属性都由'名/键值对'。其中一个比较特殊的对象是全剧对象--global object. 普通的javascript对象是...
JavaScript中的值类型与引用类型
diligentkong的博客
07-25 772
值类型值类型的数据：存储的是数据本身的变量。值类型（基本数据类型）包括number、boolean、string、undefined、null。 值类型的数据在内存中占有固定大小的空间，它是存储在栈（stack）中的简单数据，也就是说，值类型的值直接存储在变量访问的位置。 值类型的数据在内存中的存储如下： 引用类型引用类型的数据：存储的是数据在内存中的地址，数据在内存中单独存储。引用类型包括：
JS的小数操作：指数形式操作与显示位数的控制（附加整数检测）
奔跑的面条博客
12-02 471
1、让数字以指数的形式展示 var a = 5E10; a //50000000000 a.toExponential(); //5E+10 2、控制小数的显示位数 var a = 42.59; a.toFixed(0); //43 a.toFixed(3); //42.590 a.toFixed(1); //42.6 注意：例如42.toFixed(3)无效，因为 . 被认为是常量的一部分...
js如何用变量值作为对象名
劲枫的博客
04-27 4093
let colum = "abc" let arr = [] arr.push({[colum]:{name:"xxx",id:123}}) 使用[ ] 中括号就可以实现。
小学五年级英语自主学习的内容及要求(第二周).pdf
10-10
在第二周的学习中，学生需要关注Unit Seven: "Shall we go to the concert?"（我们去听音乐会好吗？）这一主题。这个单元旨在让学生能够理解和使用表达建议的疑问句及其回答，同时加强他们的阅读、听力和写作技能。 ...
暑期预习2021六年级数学上册第五单元测试卷新人教版20210705110
09-09
【标题与描述解析】: 这份资源是一个针对2021年六年级数学上册第五单元的测试卷，新人教版，适用于暑期预习。试卷涵盖了圆的相关知识，包括圆的基本概念、圆的周长、面积计算以及与对称轴、扇形等相关题目。 【知识...
暑期预习2021五年级数学上册第七单元测试卷新人教版20210705158
09-09
这篇资料主要针对五年级数学的学习，特别是新人教版2021年暑期预习的第七单元测试内容。这个单元可能涵盖了多位数乘除法、小数的加减运算、简便运算、几何图形的理解以及实际问题的解决。接下来，我们将详细讨论这些...
JavaScript 课后习题答案
余笙.'的博客
05-13 1万+
第一章 第一题： var msg = prompt("请您输入信息"); alert('用户输入的信息是:'+msg); 第二章 第一题： var num1 = prompt("请您输入第一位数字"); var num2 = prompt("请您输入第二位数字"); var max; if(num1 &...
js的json使用变量作为键名
qq_30908729的博客
03-20 6166
例如：var idName = $(this).attr("idName");//假如idName的值为id    idName为变量，如何作为json对象的键名呢？ 解决方法：http://yayihouse.com/yayishuwu/chapter/1109
javaScript里面（等于==与全等的区别）（值类型与引用类型的存储方式）
weixin_42839080的博客
08-24 2043
一、等于（==）是比较的是非严格的，允许类型转换。 二、全等于（===）是严格的比较，不允许类型转换。 先看等于： //1. == != //比较的是 非严格的,允许类型转换. var num1 = 100; var str1 = "100"; console.log(num1 == str1); //true console.log(u...
JavaScript基本数据类型
热门推荐
Fuzz
07-13 1万+
JavaScript是弱类型脚本语言，声明变量时无需指定变量的数据类型。JavaScript变量的数据类型是解释时动态决定的。但是JavaScript的值保存在内存中，也是数据类型的。JavaScript基本数据类型有如下五个（1）数值类型（2）布尔类型（3）字符串类型（4）Undefined类型（5）Null类型1. 数值类型与强类型语言如C、Java不同，JavaScript的数值类型不仅包括...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 858
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 268
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 197
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
RN高级interview
最新发布
流星雨的博客
07-31 408
RN高级interview
Andrew Ng机器学习I：第1周线性回归编程练习
在Andrew Ng的Coursera机器学习课程中，第一周的编程作业主要聚焦于线性回归的基本概念和实践。本练习旨在帮助学员熟悉和掌握线性回归算法，这是监督学习中的基础方法，用于预测一个连续变量（目标变量）与一个或多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值