JavaScript学习（第一天）
1 初识JavaScript
Vscode快速格式化代码: shift+alt+f
- 能够说出 JavaScript是什么
- 能够知道JavaScript的发展历史
- 能够说出浏览器执行JavaScript的原理
- 能够说出JavaScript由哪三部分组成
- 能够写出JavaScript三个输入输出语句
1.1 初识JavaScript
1.1.1 JavaScript是什么
- JavaScript 是世界上最流行的语言之一, 是一种运行在客户端的脚本语言( Script是脚本的意思)
- 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
- 现在也可以基于Node.js技术进行服务器端编程
1.1.2 JavaScript的作用
- 表单动态校验 (密码强度检测) ( JS 产生最初的目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.1.3 HTML/CSS/JS的关系
1.1.4 浏览器执行JS简介
浏览器分成两部分：渲染引擎和JS引擎
- 渲染引擎:用来解析HTML与CSS ,俗称内核,比如chrome浏览器的blink ,老版本的webkit
- JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言) , 然后由计算机去执行,所以JavaScript语言归为脚本语言，会逐行解释执行。
1.1.5 JS的组成
1、ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一]编程语言, 这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript ,但实际上后两者是ECMAScript语言的实现和扩展。
ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法I业标准。
2.DOM-----文档对象模型
文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3.BOM—浏览器对象模型
BOM (Browser Object Model ,简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
1.1.6 初体验
JS有有三种书写位置：
行内，内嵌和外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<!-- 2.内嵌式的JS -->
<script>
// alert('沙漠骆驼')
</script>
<!-- 3.外部js script 是双标签 -->
<script src="1.js"></script>
</head>
<body>
<!-- 1.行内式的JS直接写在元素内部 -->
<!-- <input type="button" value="唐伯虎" οnclick="alert('秋香姐')"> -->
</body>
</html>
1.1.6.1 行内式JS
<input type="button" value=”点我试试" onclick ="alert ('Hello World')" />
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性) ,如: onclick
- 注意单双引号的使用:在HTML中我们推荐使用
双引号, JS中我们推荐使用单引号 - 可读性差，在html中编写JS大量代码时,不方便阅读;
- 引号易错，引号多层嵌套匹配时,非常容易弄混;
- 特殊情况下使用
1.1.6.2 内嵌JS
<script>
alert( 'Hello World~!') ;
</script>
- 可以将多行JS代码写到
<script>标签中 - 内嵌JS是学习时常用的方式
1.1.6.3 外部JS文件
<script src= "my. js"></ script>
- 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
- 引用外部JS文件的script标签
中间不可以写代码,只有src=""可以修改 - 适合于JS代码量比较大的情况
1.2 JavaScript注释
1.单行注释 ctrl+/，// （python中#）
2.多行注释，默认的快捷键shift +alt+a /**/ （python中"""或者’’’）
3.多行注释，vscode中修改多行注释的快捷键（enter设置成功）:ctrl + shift + /
1.3 JavaScript输入输出语句
为了方便信息的输入输出，JS提供了一些输入输出语句，常用语句如下：(python 中用户输入input)
<script>
// 这是一个输入框
prompt('请输入您的年龄：')
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是:')
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的')
</script>
2 变量
- 能够说出变量的主要作用
- 能够写出变量的初始化
- 能够说出变量的命名规范
- 能够画出变量是如何在内存中存储的
- 能够写出交换变量案例
2.1 变量概述
1、 什么是变量
白话：变量就是一个装东西的盒子
通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
2 、变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间。
2.2变量的使用
变量在使用过程中分成两步骤：1、声明变量 2、赋值
1、声明变量
//声明变量
var age; //声明一个名称为age的变量
- var是一一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
- age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
2、赋值
age = 10; //给age这个变量赋值为10
=用来把右边的值赋给左边的变量，空间中此处代表赋值的意思- 变量值是程序员保存到变量空间里的值
3、变量的初始化（和python中差不多，不过是直接age=18 没有分号）
var age = 18; //声明变量同时赋值字18
声明一个变量并赋值，我们称之为变量的初始化
<script>
// 1.声明一个age的变量
var age;
// 2.赋值 把值存入这个变量中
age = 18;
// 3.输出结果
console.log(age);
//4.变量的初始化
var myname = '老师';
console.log(myname);
</script>
2.3变量语法扩展
1、更新变量
一个变量被重新赋值之后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
age = 18;
age = 81;//最后的结果就是81 因为18被覆盖掉了
2、同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。(python中是a,b,c=1,2,3)
var age = 10, name = 'zc', sex = 2;
3、声明变量特殊情况
2.4变量命名规范
- 由字母(A-Za-z)、 数字(0-9)、 下划线(_)、美元符号($ )组成,如: usrAge, num01,_name。（python中由数字、字母、下划线组成）
- 严格区分大小写。var app;和var App;是两个变量
- 不能以数字开头。18age 是错误的
- 不能是关键字、保留字。例如: var、 for, while
- 变量名必须有意义。这几个MMD BBD nl→age不行，尽量用英文简写
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstNam
- 尽量不要使用name作为变量名
- 推荐翻译网站:有道，爱词霸
3 数据类型
- 能够说出5种简单数据类型
- 能够使用typeof获取变量的类型
- 能够说出1~2种转换为数值型的方法
- 能够说出1 ~ 2种转换为字符型的方法
- 能够说出什么是隐式转换
3.1数据类型简介
1、为什么需要数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,分利用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如姓名"张三”,年龄18 这些数据的类型是不一样的。
2、变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
var age = 10;//这是一个数字型
var areYouOk = '是的; // 这是一个字符串
在代码运行时,变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。
JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x =6;//x为数字
var x = "Bill";//x为字符串
3.2简单数据类型
JS把数据类型分为两类：
- 简单数据类型（Number、String、Boolean、Undefined、Null）
- 复杂数据类型(object)
（python 中number、str、tuple、list、dict、set）
3.2.1简单数据类型（基本数据类型）
JavaScript中的简单数据类型及其说明如下：
3.2.2 数字型（Number）
JavaScript数字类型既可以用来保存整数值，也可以用来保存小数（浮点数）
var age = 21; //整数
var Age = 21.36; //小数
1、数字型进制
常见的进制有：二进制，八进制，十进制，十六进制
八进制：0~7 在我们的程序里面数字前面加0，表示八进制
010----->表示十进制8var num1 = 010;
十六进制：0~9 a ~f 数字前面加0f----->表示十六进制
var num2 = 0xA;
现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x
2、数字型范围
JavaScript中数值的最大值和最小值
alert(Number.MAX_VALUE); //1.7976931348623157e+308
alert(Number.MIN_VALUE); //5e-324
3、数字型的三个特殊值
alert(Infinity);//Infinity
alert(-Infinity);//-Infinity
alert(NaN);//NaN
- Infinity，表示无穷大，大于任何数值，Number.MAX_VALUE*2也代表无穷大
- -Infinity，表示无穷小，小于任何数值，-Number.MIN_VALUE*2也代表无穷小
- NaN，Not a number ,代表一个非数值
4、isNaN(判断的内容)
用来判断一个变量是否为非数字的类型，
isNaN(x)
x如果是数字，返回false
x如果不是数字，返回true
3.2.3 字符串型（String）
字符串型可以是引号中的任意文本，其语法为双引号""和单引号''
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 =， 我爱吃猪蹄~'; // 使用单引号表示字符串
//常见错误
var strMsg3 =我爱大肘子;//报错,没使用引号,会被认为是js代码,但js没有这些语法
因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。
1、字符串引号嵌套
JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)
var strMsg = '我是"高帅富"程序猿' ;//可以用' '包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用""包含''
//常见错误
var badQuotes = 'What on earth?"; //报错,不能单双引号搭配
2、字符串转义符
类似HTML里面的特殊字符, 字符串中也有特殊字符, 我们称之为转义符。
转义符都是\开头的,常用的转义符及其说明如下:
3、字符串长度
字符串是由若干字符组成的，这些字符的数量是字符串的长度。通过字符串的length 属性可以获取整个字符串的长度。
var strMsg = "我是帅气的金宝宝!";
alert(strMsg.length);//显示9
4、字符串的拼接 +
- 多个字符串之间可以使用 +进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串（python中只能字符串之间拼接，数字之间相加）
- 拼接前会把与字符串相加的任何类型转成字符串 ，再拼接成一个新的字符串
只要字符串和其他类型相拼接，最终结果是字符串类型
//1.1字符串"相加"
alert('hello' + ' ' + 'world'); // hello world//1.2数值字符串"相加"
alert('100' + '100'); // 100100
//1.3数值字符串+数值
alert('11' + 12) ;
// 1112
+号总结口诀:数值相加，字符相连
5、符串拼接加强
console.1og'老师+ 18) ;//只要有字符就会相连
var age = 18;
// console. 1og( '老师age岁啦');//这样不行哦
console.log ('老师' + age) ;// 老师18
console. log('老师' + age + '岁啦'); // 老师1 8岁啦
- 我们经常会将字符串和变量来拼接 ，因为变量可以很方便地修改里面的值
- 变量是不能添加引号的，因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间
3.2.4 布尔型Boolean
布尔类型有两个值: true和false ,其中true表示真(对) , 而false表示假(错)。
布尔型和数字型相加的时候，true 的值为1 , false 的值为0。
console.log(true + 1); // 2
console. log(false + 1); // 1
3.2.5 Undefined（未定义的类型） 和 Null（空的类型）
一个声明后没有被赋值的变量，会有一 个默认值undefined （如果进行相连或者相加时，注意结果）
var variable;
console.log(variable) ;// undefined
console.log('你好' + variable); //你好undefined----字符串加undefined
console. log(11 + variable) ;//NaN------数字加undefined
console. log(true + variable) ;//NaN------true加undefined
一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究null)
var vari = null;
console.log('你好' + vari); //你好null
console. log(11 + vari) ;// 11
console.log(true + vari) ;//1
3.3 获取变量数据类型
3.3.1 获取检测变量数据类型
typeof可用来获取检测变量数据类型
var num = 10;
console.log(typeof num);//number
3.3.2字面量
字面量是在源代码中一个固定值的示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量: 8,9, 10
- 字符串字面量:黑马程序员，“大前端”
- 布尔字面量: true , false .
3.4数据类型转换
3.4.1什么是数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
3.4.2 转换为字符串
- toString()和String()使用方式不一样
- 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称为隐式转换
<script>
//1.把数字型转换为字符串型 变量.toString()
var num=10;
var str = num.toString();
console.log(str)
console.log(typeof str);
// 2.我们利用String(变量)
console.log(String(num));
// 3.利用 + 拼接字符串的方法实现转换效果 ，隐式转换
console.log(num + '');
</script>
3.4.3 转换为数字型（重点）
- 注意：parseInt和parseFloat 单词的大小写，这两个是重点。
- 隐式转换是我们在进行算数运算的时候，JS自动转换的数据类型
console.log(parseInt('3.14')); //3取整
console.log(parseInt('3.94')); //3取整
console.log(parseInt('120px')); // 120会去到这个px单位
console.log(parseInt('rem120px')}; // NaN
// 2. parseFloat(变量) 可以把字符型的转换为数字型得到是小数浮点数console.log(parseFloat('3.14'));
console. log(parseFloat('120px')); // 120会去到这个px单位
console.log(parseFloat('rem120px')); // NaN
//3. 利用Number(变量)
varstr='123';
console. log(Number(str));//数字123
console.log(Number( '12' ));//数字12
//4.利用了算数运算 - * / 隐式转换console.log('12'-0);//数字12（先将字符串12转换成数字12，再减0）
console.log( '123' - '120);//数字3
console.log('123 '* 1);|
3.4.4 转换为布尔型
- 代表
空、否定的值会被转换为false , 如"、0、NaN、null、 undefined - 其余值都会被转换为true
console. log (Boolean('')); // false
console. log (Boolean(0)); // false
console. log (Boolean (NaN));// false
console. log (Boolean (null)) ;//false
console. log (Boolean (undefined)); //false
console .log (Boolean('JB')); // true
console. log (Boolean(12)) ; //true
4 JavaScript运算符
- 能够使用常用运算符
- 能够说出前置递增和后置递增的区别
- 能够说出运算符的优先级
4.1 运算符
运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
- 运算符优先级
4.2 算数运算符
4.2.1算数运算符概述
算数运算使用的符号，用于执行两个变量或值的算数运算。
%取余，余数是0，说明这个数能被整除
算数运算符优先级：先乘除后加减，有括号先算小括号里面的
（1 + 1）,为了美观加号两边加上空格
4.2.2浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2;//结果不是0.3 ,而是: 0.3000000000000004
console.log(0.07*100) ;//结果不是7，而是: 7.00000000000001
所以:不要直接判断两个浮点数是否相等!
4.2.3 表达式和返回值
表达式：由数字、运算符、变量等组成的式子 1+1
1+1表达式最终会有一个结果，返回给我们，2成为返回值
var num = 1 + 1;//把我们的右边表达式计算完，把返回值给左边
4.3 递增和递减运算符
4.3.1递增和递减运算符概述
如果需要反复给数字变量添加或减去1 , 可以使用递增( ++ )和递减( --)运算符来完成。
在JavaScript中**,递增( ++ )和递减( – )既可以放在变量前面**,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符，放在变量后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
4.3.2 递增运算符
一般独占一行使用，递增和递减类似
++num;
num++;（更倾向使用）
1、前置递增运算符
++num; 前置递增，就是自加1，类似于num = num + 1，但是++num写起来更简单
前置递增运算符口诀：先加一，后返回值
age=10; console.log(++age +10);//21
2、后置递增运算符
num++; 前置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单
后置递增运算符口诀：先返回原值，后自加1
age=10; console.log(age++ +10);//20age已经变成11
4.4 比较运算符
4.4.1比较运算符概述
概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算符后，会返回一个布尔值 （true/false）作为比较运算的结果。
==，默认转换数据类型，会把字符串型转换为数字型,只要求值相等
3 == '3'//true
3 == 3//true
3 === 3//false 要求两侧的值 还有数据类型完全一致才可以为true
4.4.2 =小结
4.5 逻辑运算符
4.5.1 逻辑运算符概述
概念：逻辑运算符是用来进行布尔值的运算符，其返回值也是布尔值。后面经常用于多个条件的判断
4.5.2 逻辑与&&
两边都是true，否则返回false
var res = 2>1 && 3>1;//true
4.5.3 逻辑或 ||
两边都是false，否则返回true
4.5.4 逻辑非 ！
逻辑非（!）也叫做取反符，用来取一个布尔值相反的值，如true的相反值是false
4.5.5 短路运算(逻辑中断)
短路运算的原理：当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
1、逻辑与
- 语法：
表达式1 && 表达式2 - 如果第一个表达式的值为真 ,则返回表达式2
- 如果第一个表达式的值为假,则返回表达式1
- 如果有空的为假，其余是真的 0 ‘’ null undefined NaN
2、逻辑非
- 语法：
表达式1 II 表达式2 - 如果第一个表达式的值为真,则返回表达式1
- 如果第一个表达式的值为假,则返回表达式2
console. log( 123 || 456);//123
console.log( 0 ||456);// 456
console. log( 123 || 456 || 789 ) ;// 123
4.6 赋值运算符
概念：用来把数据赋值给变量的运算符。
var age = 10;
age += 5;//相当于age = age + 5;
age -= 5;//相当于age = age - 5;
age *= 10;//相当于age = age + 10;
4.7 运算符优先级
- 一元运算符里面的
逻辑非优先级很高 - 逻辑与比逻辑非优先级高
5 JavaScript 流程控制-分支
- 能够使用if分支
- 能够使用switch
- 能够使用三元表达式
5.1 流程控制
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行，程序中大多数的代码都是这样执行的。分支结构：由上到下执行代码的过程中，执行不同的路径代码（程序代码多选一的过程），从而得到不同的结果。
5.2 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行，程序中大多数的代码都是这样执行的。
5.3 分支流程控制if语句
5.3.1 if语句
JS语言提供了两种分支结构语句
- if语句
- switch语句
1、语法结构
if (条件表达式) {
//执行语句
}
<script>
//1.if 的语法结构 如果if
if (条件表达式) {
//执行语句;
}
//2.执行思路 如果 if 里面的条件表达式结果为真，则执行 大括号里面的 执行语句
//3. 如果if 条件表达式为假，则不执行大括号里面的语句 则执行if 语句后面的代码
</script>
语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下， 会分割成一个一个的语句。
2、执行流程
5.3.2 if else语句（双分支语句）
语法结构
if (条件表达式) {
//执行语句1;
} else {
// 执行语句2;
}
//2.执行思路，如果表达式结果为真，执行语句1，否则执行语句2（只有一条语句执行），else直接跟{}
5.3.3 if else if语句（多分支语句）
//1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选一
//2. if else if 语句是多分支语句
//3. 语法规范
if (条件表达式1) {
//语句1;
} else if (条件表达式2) {
//语句2;
} else if (条件表达式3) {
//语句3;
...
} else {
//最后的语句;
}
//满足条件表达式1，执行语句1；否则判断满足条件表达式2，执行语句2；否则判断满足条件表达式3，执行语句3；都不满足，执行最后的语句，退出整个if分支语句（只执行一条语句）
//else if 里面的条件理论上是任意多个的
//else和if之间有空格
执行流程
5.4 三元表达式
// 1.有三元运算符组成的式子我们称为三元表达式
// 2. ++num 3+5 ?:
// 3.语法结构
//条件表达式? 表达式1 : 表达式2;
// 4.执行思路
//如果条件表达式结果为真 则返回表达式1的值;如果条件表达式结果为假,则返回表达式2的值
// 5.代码体验
varnum=10;
varresult = num > 5 ? '是的' : '不是';//我们知道表达式是有返回值的
console.1og(result);
//if(num>5){
//result = ' 是的';
//}else{
//result = '不是的';
// }
5.5 分支流程控制switch语句
switch 语句是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。
switch 也是多分支的语句，也可以实现多选1 的效果
//2.语法结构switch转换、开关case小例子或者选项的意思
switch(表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
// 3.执行思路 利用我们的表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句；如果 都没有匹配上，那么执行default 里面的语句
switch (8) {
case 1 :
console.log('这是1');
break;
case 2 :
console.log('这是2');
break;
case 8:
console.log('这是3');
break;
default :
console. log( '没有匹配结果');
}
// switch注意事项
var num = 1;
switch (num) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
case 3:
console.log(3);
break;
}
// 1.我们开发里面，表达式我们经常写成变量
// 2.我们num的值和case 里面的值相匹配的时候是 全等，必须是值和数据类型致才可以num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch是继续执行下一个case
5.6 switch语句和if else if语句的区别
- 一般情况下,它们两个语句可以相互替换
- swith…case 语句通常处理case为比较确定值的情况,而i…e…语句更加灵活,常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句, 效率更高。而if… .else语句有几种条件,就得判断多少次。
- 当分支比较少时, if… else语句的执行效率比switch语句高。
- 当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。
6 JavaScript 流程控制-循环
6.1 循环
循环的目的：可以重复执行某些代码（代码）
在JS中，主要有三种类型的循环语句：
- for循环
- while 循环
- do…while 循环
6.2 for 循环
在程序中，一切被重复执行的语句被称为循环体；
能否继续重复执行，取决于循环的终止条件;
由循环体及循环的终止条件组成的语句，被称之为循环语句
6.2.1 语法结构
for 循环结构主要用于把某些代码循环若干次，通常跟计数有关系，其语法结构如下：
for(初始化变量;条件表达式;操作表达式){
//循环体
}
// 3.初始化变量就是用var声明的一个普通变量， 通常用于作为计数器使用
// 4.条件表达式就是用来决定每一次循环是否继续执行就是终止的条件
// 5.操作表达式是每次循环最后执行的代码，经常用于我们计数器变量进行更新(递增或者递减)
// 6.代码体验我们重复打印100局你好
for(var i = 1;i <= 100;i++){
console .1og('你好吗);
}
6.2.2 for 循环执行过程
// for 循环的执行过程
for(var i=1;i<=100;i++){
console.1og('你好吗' );
}
// 1.首先执行里面的计数器变量 var i = 1 .但是这句话在for里面只执行一次index
//2.去i<=100来判断是否满足条件，如果满足条件就去执行循环体不满足条件退出循环
// 3.最后去执行i++，i++是单独写的代码递增 ，第一轮结束
// 4.接着去执行i<=100，如果满足条件就去执行循环体，不满足条件退出，循环第二轮
断点调试:
断点调试是指自己在程序的某一行设置一个断点 ,调试时,程序运行到这一行就会停住 ,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。代码调试这个东西,多练练。
今天学的代码调试悲常的简单,记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。
6.3 双重 for 循环
外层循环 循环一次， 里面的循环执行全部
// 1.双重for循环语法结构
for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {
for (里层的初始化变量;里层的条件表达式;里层的操作表达式) {
//执行语句;
}
}
//2.我们可以把里面的循环看做是外层循环的语句
// 3.外层循环 循环一次， 里面的循环执行全部
//4.代码验证
<script>
for(var i=1;i<=3;i++){
console.log( '这是外层循环第' + i + '次');
for(var j=1;j<=3;j++){
console.log('这是里层的循环第'+j+'次');
}
}
</script>
var str = '';
for (var i = 1; i <= 9; i++) {//外层循环控制行数
for (var j = 1; j <= i; j++) {//里层循环控制每一行的个数j<=i
//1x2=2
str += j+'x'+i+'='+ i*j+'\t';
}
str += '\n';
}
console.log(str);
for循环小结
- for 循环可以重复执行某些相同代码
- for 循环可以重复执行些许不同的代码,因为我们有计数器
- for 循环可以重复执行某些操作,比如算术运算符加法操作
- 随着需求增加,双重for循环可以做更多、 更好看的效果
- 双重for循环,外层循环一次,内层for循环全部执行
- for 循环是循环条件和数字直接相关的循环
- 分析要比写代码更重要
- 一些核心算法想不到,但是要学会,分析它执行过程
- 举一反三，自己经常总结,做一些相似的案例
6.4 while 循环
while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。while语句的语法结构如下:
执行思路:
①先执行条件表达式,如果结果为true ,则执行循环体代码;如果为false ,则退出循环,执行后面代码②执行循环体代码
③循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true ,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束
while (条件表达式) {
循环体
}
执行思路:
- 先执行条件表达式,如果结果为true ,则执行循环体代码;如果为false ,则退出循环,执行后面代码
- 执行循环体代码
- 循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍为true ,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束。
<script>
// 1. while 循环语法结构 while 当...的时候
// while (条件表达式) {
// 循环体
// }
//2.执行思路当条件表达式结果为true则执行循环体否则退出循环//3.代码验证
var num = 1;
while (num <= 100) {
console.log('好啊有');
num++;
}
// 4.里面应该也有计数器初始化变量
// 5.里面应该也有操作表达式 完成计数器的更新防止死循环
</script>
6.5 do while循环
do while语句其实是while语句的一个变体，该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
do… while语句的语法结构如下:
do {
//循环体代码-条件表达式为true时重复执行循环体代码
} while (条件表达式) ;
执行思路:
- 先执行-次循环体代码
- 再执行条件表达式,如果结果为true ,则继续执行循环体代码,如果为false ,则退出循环,继续执行后面代码
注意:先再执行循环体,再判断,我们会发现do...while循环语句至少会执行一次循环体代码
<script>
// 1.do while 循环语法结构
// do {
// //循环体
// }while (条件表达式)
// 2. 执行思路跟while不同的地方在于do while先执行一次循环体在判断条件如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 3.代码验证
var i = 1;
do {
console.log('how are you?');
i++;
} while (i <= 100)
6.6 循环小结
循环小结
- JS中循环有for、while、 do while
- 三个循环很多情况下都可以相互替代使用
- 如果是用来计次数,跟数字相关的,三者使用基本相同,但是我们更喜欢用for
- while和do…while可以做更复杂的判断条件,比for循环灵活一些
- while和do…while执行顺序不一样, while先判断后执行, do…while先执行一 次,再判断执行
- while和do…while执行次数不一样, do…while至少会执行一次循环体，而while可能一次也不执行
6.7 continue break
6.7.1 continue关键字
continue关键字用于立即跳出本循环，直接跳到i++，继续执行剩余次数的循环（本次循环体中continue之后的代码就会少执行一次）
// 1.求1~100 之间， 除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
6.7.2 break关键字
退出整个循环
6.8 JS命名规范和语法格式
1、标识符命名规范
- 变量、 函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
2、操作符规范
操作符左右两侧各保留一个空格
i = 3
单行注释
break; //单行注释前面注意有个空格
1877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
