大家好，给大家分享一下javascript基础入门教程，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
【pink老师yyds】
day 1 ：
1.初步认识JavaScript
1.1 JavaScript历史
JavaScript在1995年由布兰登-艾奇10天完成设计。
1.2JavaScript是什么？
JavaScript是世界最流行的的语言之一，是一种运行在客户端的脚本语言（是脚本的意思）Deepl降重。
脚本语言：不需要编译，运行过程中由JS解释器逐行解释并执行。
现在也可以基于node.js技术进行服务端编程。
1.3 JavaScript的作用
（1）表单动态校验（密码强度检测）（JS最初的目的）
（2）网页特效。
（3）服务端开发。（Node.js）
（4）桌面程序。
（5）APP。
（6）控制硬件-物联网。
（7）游戏开发。
1.4JS与HTML/CSS的关系
（1）html决定网页结构和内容（决定看到什么）， 相当于人的身体。
（2）CSS决定网页呈现给用户的模样，相当于给人穿衣服、化妆。
（3）JS实现业务逻辑和页面控制，相当于人的各种各样动作。
（看来我想做APP还得去学HTML和CSS，555~）
1.5浏览器执行JS简介
浏览器分为渲染引擎和JS引擎）
（1）渲染引擎：用来解析HTML和CSS，俗称内核。
（2）JS引擎：又称JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。
注：浏览器本身不会执行JavaScript代码，而是通过内置的js引擎来执行JS代码。JS引擎执行代码时会逐行解释每一句源码（转化为机器语言），然后由计算机去执行。
1.6 JS的组成
JavaScript 包括 ECMAScript、DOM、BOM
（1）ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
（2）文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
（3）BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.7 JS初体验
JS有三种书写位置：行内式、内嵌式、外部式。
（1）行内式js:直接写到元素内部。
代码：
<input type='button'value='唐伯虎' οnclick="alert('秋香姐')">
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
- 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。
- 缺点：可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读。
- 引号过多，容易混淆。
- 一般特殊情况下使用。
（2）内嵌式
代码:
<>
alert('我一定要学会JS')；
<>
- 可以将多行JS代码写到<>标签中。
- 内嵌 JS 是学习时常用的方式。
（3）外部式
先创建一个.js文件，然后在.html中‘引用’；
< src="my.js"><>
- 利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
- 引用外部JS文件的标签中间不可以写代码
- 适合于JS代码量比较大的情况
2.JavaScript注释
1.单行注释
//单行注释
快捷键：Ctrl + /
2.多行注释
/*
*/多行注释
快捷键 ：shift + alt + a
visual studio code中修改快捷键方式：visual studio code➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认
(注：B站pink老师讲的真的太好了，爱了爱了。把pink老师讲的记录在这里也不知道会不会侵权，如果侵权我会及时删除的)
————————————————
版权声明：本文为CSDN博主「不知名的菜鸟吖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_69144551/article/details/123993975
day 2：
3.JS的输入和输出语句
（1）alert（）：浏览器弹出警示框；
（2）console.log（）：浏览器控制台打印输出信息；（只有程序员可见）
（3）prompt（）：浏览器弹出输入框，用户可输入信息；
4.变量
4.1变量概述
4.1.1什么是变量？
通俗：变量是用来存放数据的容器，我们通过变量名获取数据，甚至可以改变数据；
白话：变量就是一个用来装东西的百变盒子。
4.1.2变量在内存中的储存
本质：变量是在内存中申请的一块用来存放数据的空间；
4.2变量的使用
变量使用分为两步：声明和赋值
4.2.1变量的声明
var age;//声明了一个名为age的变量。
var:是JS的一个关键字，用来声明变量（variable是变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
age是程序员定义的变量名，通过变量名来访问内存中分配的空间及其里面的值；
4.2.2赋值
var age = 10;//把10赋值给了age；
（1）= 是把右边的赴给左边，此处代表赋值；
（2）变量值10是程序员保存到变量空间里的值；
4.2.3变量的初始化
var age = 18;//声明变量并赋值；声明变量同时赋值我们称为变量的初始化；
案例：
var myname = '宇宙无敌暴龙战士'；
var age = 100000；
var address = '四维空间'；
var gz = 0 ；
console。log（myname）；
console。log（age）；
console。log（address）；
console。log（gz）；//输入一个名字并且输出该名字
var myname = prompt（'请输入你的名字：'）；
alert （myname）；4.3变量语法拓展
4.3.1变量语法拓展
（1）更新变量：一个变量被重新赋值后，原有值会被覆盖，变量值以最后一次赴的值为准；
var age = 18;
age = 81;//18被81覆盖了，
console.log（age）;//输出81（2）声明多个变量：同时声明多个变量时，只需要一个var，变量之间用逗号隔开。
var age = 18,
address = '',
name = '';(3)声明变量特殊情况：
| 情况 | 说明 | 结果 |
|---|---|---|
| var age ；console.log（age）； | 只声明，不赋值 | undefined |
| console.log（age）； | 不声明，不赋值，直接使用 | 报错 |
| age= 10；console.log（age）； | 不声明，直接赋值 | 10 |
不声明，直接赋值虽然可以输出结果，但是不建议使用。
4.4变量的命名规范
- 由字母（A-Za-z）、数字、下划线（_）、美元符号（$）组成，如：num1，userAge，name；
- 严格区分大小写，如app和APP是两个变量；
- 不能以数字开头，如18age是错误的；
- 不能是关键字、保留字；如var、for、while；
- 变量名必须有意义，如MMD，BBD无意义；
- 遵守驼峰命名法，首字母小写，后面单词首字母要大写，如myFirstName；
- 推荐翻译网站：有道；
案例：
要求：交换两个变量的值，（实现思路：使用一个临时变量来做中间储存）；
//JS有很强的逻辑性：（即实现这个要求的思路）先怎么做后怎么做。
//思路：（1）先声明一个空变量temp；（2）把num1给空变量temp；（3）把num2给num1；（4）把temp给num1；
var temp;
var num1 = 14;
var num2 = 13;
temp = num1;
num1 = num2;
num2 = temp;
console.log(num1);//输出13
console.log(num2);//输出144.5变量小结
| 为什么需要变量？ | 因为我们需要储存数据，所以需要变量 |
| 变量是什么？ | 变量是一个容器，用来储存数据的，方便以后使用里面的数据， |
| 变量本质是什么？ | 变量是内存里的一块空间，用来储存数据； |
| 变量怎么使用的？ | 使用时一定要声明（本质是去内存里申请空间）和赋值； |
| 什么是变量的初始化？ | 变量声明并赋值 |
| 变量命名规范有哪些？ | 变量名尽量要规范，见名知意——驼峰命名法；区分哪些变量合不合法； |
| 交换两个变量值的思路？ | 学会交换两变量； |
5.数据类型
5.1数据类型简介
5.1.1为啥需要数据类型
- 在计算机中，不同数据类型所占空间不同，为了把数据分成所需内存大小不同的数据，充分利用储存空间，于是定义了不同的数据类型。
- 简单来说，数据类型就是数据的类别型号，如‘张三’，和18，是不同的数据类型；
5.1.2变量的数据类型
变量是储存值的所在处，它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位储存到计算机内存中，JavaScript是一种弱类型或者说是动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定，类型取决于 = 右边的值；
var age = 10;//这是数字型
var areYouOk = '是的';//字符串型JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：
var x = 11;//x为数字型
var x = 'hello!';x为字符串型day 3：
5.1.3数据类型的分类
JS的数据类型分为两类：
- 简单数据类型（number，String，Boolean，Undefined，Null）;
- 复杂数据类型（object）。
5.2简单数据类型
5.2.1五大类
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包括整型值和浮点型值，如13，1.4 | 0 |
| Boolean | 布尔值类型，如true，false，等价于1和0 | false |
| String | 字符串型，如'完美世界'，字符串型都有引号 | "" |
| Undefined | var a；声明变量但是不赋值，此时a=undefined | undefined |
| Null | var a = null；声明变量为空值； | null |
5.2.2数字型Number
数字型即可保存整数也可保存小数；
var age = 18；
var num = 0.520；
1.数值型进制：
常见进制有：二进制，八进制，十进制，十六进制；
（1）八进制：0~7 我们程序里在其前面加0表示八进制；
（2）十六进制：0~9和a~f 数字前加0x表示十六进制，
2.数值型范围
js里数值有最大值和最小值：
alert（Number.MAX_VALUE）;//最大
alert (Number.MIN_VALUE);//最小3.数字型三个特殊值
（1）alert（Infinity）；表示无穷大，大于任何数；
（2）alert（-Infinity）；表示无穷小，小于任何数；
（3）alert（NaN）；Not a Number；代表一个非数值；
4.isNaN（）
用来判断非数字，返回值是数字则输出false，不是数字则输出true；
console.log(isNaN(18));//false
console.log(isNaN('黑暗里的光')；//true5.2.3String 字符串型
- 字符串型是引号里的任意文本，其语法为双引号""和单引号'';
- js里推荐用单引号；
1.字符串嵌套
js里可以用单引号嵌套双引号，亦可以用双引号嵌套单引号；（外双内单，外单内双）
var str1 = "我是一个'高负帅'程序猿"；
var str2 = '我是一个"高富帅"程序员'；2.字符串转义符
转义符都以\开头的,常见转义符如下：
| 转义符 | 说明 |
| \n | 换行符，n是newline的意思 |
| \\ | 斜杠\ |
| \' | 单引号 |
| \'' | 双引号 |
| \t | tab 缩进 |
| \b | 空格，b是blank的意思 |
3.字符串长度
字符串是由许多字符组成，字符的数量就是字符串的长度，通过字符串的length属性可以获取字符串的长度；
var str = 'hello';
console.log(str.length);//输出54.字符串拼接
- 字符串之间可以用 + 拼接，方式为 字符串 + 任何类型 = 拼接后的新字符串；
- 拼接前会把与字符串拼接的数据转化成字符串型，在拼接成一个新的字符串；
console.log(13+14);//输出27
console.log('13'+14);//输出1314
console.log('我今年' + 19 +'岁了'）；输出 我今年19岁了总结：数值相加，字符相连
5.变量与字符相连
var age = 18;
console.log('我今年有' + age + '岁了')；- 这种方式便于修改输出的值；
- 变量名不能加引号，否则会变成字符串；
案例：显示年龄
var age = prompt('请输入您的年龄：')；
var str = '你今年'+age+'岁了'；
alert（str）；
5.2.4布尔型Boolean
- 布尔型有两种类型：true（真）和false（假），
- 布尔型与数值型相加时，true的值为1，false 的值为0；
var bo = true;
var Bo = false;
console.log(true + 13);//输出14
console.log(false + 1);//输出15.2.5undefined和Null
1.undefined
一个变量未赋值，就是undefined；
var a = undefined；
console.log(a+'JS')；//输出undefinedJS；（字符串拼接）
console.log(a + 1);//NaN2.null
一个变量声明给null，里面的值为空值；
5.3获取数据类型
5.3.1获取检测数据变量类型
typeof可以用来获取检测变量的数据类型
5.3.2字面量
字面量是源代码中一个固定值的表达方法，通俗来说就是字面量如何表达这个值；
- 数字字面量：如14,88，
- 字符串字面量：'web前端'
- 布尔字面量：true，false；
5.4数据类型的转换
5.4.1什么是数据类型转换
使用表单、prompt获取过来的数据默认是字符串型的；不能直接简单的进行加法运算，而需要转换数据类型，也就是把一种数据类型的变量转换成另外一种数据类型；
5.4.2转换为字符串型
| 方式 | 说明 | 案例 |
| toString | 转换成字符串 | var num = 1；alert（num.toString（））； |
| Sting（） | 转换成字符串（强制转换） | var num = 1；alert（Sting（num））； |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1；alert（num + ' '）; |
- toString()和String（）使用方式不一样；
- 常用第三种，也称之为 隐式转换；
5.4.3转换成数字型
| 方式 | 说明 | 案例 |
| parseInt（string）函数 | 将string型转换成整数数字型 | parseInt（'100'） |
| parseFloat（string）函数 | 将string转换成浮点数数字型 | parseFloat（'52'） |
| Number（）强制转换函数 | string转换成number型 | Number（‘13’） |
| js隐式转换（- * /） | 利用算数运算隐式转换成数字型 | '14' - 0 |
注意parseInt和parseFolat的大写；
案例：输出年龄
5.4.4转换成布尔型
| 方式 | 说明 | 案例 |
| Boolean（）函数 | 其他类型转换成布尔型 | Boolean（‘true’） |
- 代表 空、否定的值会被转换成false；如' '，0，NaN、Null，undefined；
- 其余的值都会转换成true；
拓展1：解释型语言和编译型语言
1.概述
计算机不能直接理解除了机器语言以外的语言，所以必须要把程序员写下来的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具被称为编译器。
- 编译器翻译的方式有两种：一是编译；另外一个是解释；区别在于翻译的时间点不同；
- 编译器是代码在执行之前进行编译，生成中间代码文件；
- 解释器是运行时进行及时解释，并立即执行；
2.执行过程
拓展2：标识符、保留字、关键字
1.标识符
- 标识符就是开发人员为变量、属性、函数、参数等取的名字；
- 标识符不能是关键字和保留字；
2.关键字
3.保留字
day4：
6.运算符
6.1运算符简介
运算符：也称为操作符，是用于实现赋值、比较和执行算数运算的符号；
JS中常用运算符有：
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
6.2算数运算符
6.2.1算术运算符概念
概念：算术运算的符号，用于执行两个变量或值的算术运算；
| 运算符 | 描述 | 实例 |
| + | 加 | 1+1=2 |
| - | 减 | 14-1=13 |
| * | 乘 | 2*3=6 |
| / | 除 | 6/3=2 |
| % | 取余数（取模） | 9%2=1 |
6.2.2浮点数精度问题
1.浮点数在算数运算里会出现问题
2.不能拿浮点数来直接比较是否相等
console.log(0.1+0.2);//0.30000000000000004
console.log(0.07*100);//7.000000000000001
var num = 0.1+0.2;
console.log(num==0.3);//false
- 注：1.如何判断一个数是否1能被整除？余数为0（用%计算）
2.运算符有优先级，先乘除，后加减，有小括号先算小括号内的
6.2.3表达式和返回值
表达式：由数字、运算符、变量等组成的式子；
表达式最终都会有个结果返回给我们，称为返回值
var num= 1+1；//在程序里，右边的表达式计算完毕后返回值给左边，即2=1+16.3递增递减运算符
6.3.1递增递减运算符概述
- 如果需要给数字反复添加或减去1，可以使用递增（++）或递减（--）运算符来完成；
- 递增（++）或递减（--）可以放在前面也可放在后面，放前面称为前置递增（递减）运算符，放在后面则称为后置递增或递减运算符；（都必须配合变量使用）
num++;
//相当于执行以下代码
var num;
num=num+1;6.3.2递增运算符
1.前置递增运算符
- ++num就是自加1，相当于num=num+1；但是++num写起来更方便；
- 使用口诀：先自加，后返回值；
2.后置递增运算符
- num++也类似于num=num+1；
- 使用口诀：先返回原值，再自加1；
| ++num | 先加后返 |
| num++ | 先返后加 |
6.3.3递增小结
- 前置和后置单独使用时，效果完全相同，
- 前置和后置递增运算符可以简化代码，让+1更简单
- 与其他代码联合使用时，执行效果会不同
- 后置：先原值运算，后自加（先人后己）
- 前置：先自加，后运算（先己后人）
- 大多使用后置递增，且代码独占一行
var a = 13;
++a;//a=14
var b = ++a +14;//++a=15,
console.log(b);//b=29
var c = 13;
c++;//c=14
var d=c++ + 14;//c++还是14
console.log(d);//d=28
var e=10;
var f=e++ + ++e;//两步：1.e++ =10,e=11, 2.e=12，++e=12
console.log(f);//226.4比较运算符
6.4.1比较运算符概述
6.4.2‘=’小结
| 符号 | 作用 | 用法 |
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断值是否相等（有隐式转换） |
| === | 全等 | 判断两边的值和数据类型完全相等 |
6.5逻辑运算符
6.5.1逻辑运算符概述
- 概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，多用于多个条件的判断。
| 运算符 | 说明 | 案例 |
| && | “逻辑与”，简称“与”，and | true&&false |
| || | “逻辑或”，简称“或”，or | true||false |
| ！ | “逻辑非”，简称“非”，not | ！true |
6.5.2逻辑与&&
- 两侧都是true，结果才是true，否则返回false
6.5.3逻辑或||
- 都为假才是false，否则都是true
6.5.4逻辑非！
- 逻辑非也叫取反符，用来取一个与布尔值相反的值，如true的相反的值是false
var num = 7;
var str = '我爱你，中国.';
console.log(num>5 && num>= str.length);//true
console.log(num< 5 && str.length>=num);//false
console.log(!(num<10));//false
console.log(!(num<10 || num == str.length));//false
6.5.5短路运算（逻辑中断）
- 短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再运算右边表达式的值。
- 会影响程序的执行
1.逻辑与&
- 语法：表达式1&&表达式2
- 如果第一个表达式为真，则返回表达式2；
- 如果第一个表达式为假，则返回表达式1；
console.log(12 && 34);//返回34
console.log（0 && 520）；//02.逻辑或||
- 语法：表达式1||表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
console.log(12 && 34);//12
console.log（0 && 520）；//520
var num = 0；
console.log（1314 || num++）；//1314
console.log(num);//0
6.6赋值运算符
概念：用来把数据赋值给变量的运算符；
| 运算符 | 说明 | 案例 |
| = | 直接赋值 | var num = 1； |
| +=、-= | 加、减 一个数后再赋值 | var num = 1；num+=13；//num=14 |
| *=、/=、%= | 程、除、取模 后再赋值 | var num = 5；num*=5;//num=25 |
6.7运算符优先级
7.流程控制
- 简单理解：流程控制就是控制我们的代码按照声明顺序结构来执行。
- 流程控制主要有三种结构：顺序结构，分支结构和循环结构
7.1顺序流程控制
- 最简单、最基本的流程控制，没有特点的语法结构，程序会按照代码的先后顺序依次执行，
7.2分支流程控制
- 代码由上到下执行过程中，根据不同条件执行不同路径。从而得到不同结果。、
7.2.1if语句
1.语法结构
if(条件表达式){
//执行语句
}2.执行思路
条件表达式为真，则执行花括号里的表达式，否则执行后面的语句。
7.2.2 if else双分支语句
1.语法结构
if(条件表达式){
//执行语句1
}else{
//执行语句2
}2.执行思路
如果表达式为真，则执行语句1，否则执行语句2；
案例：
alert('谈不谈恋爱，不谈我打排位去了！');
var result = prompt('请输入你的答案：');
if(result=='谈'){
alert('我们在一起吧！');
}else{
alert('来个瑶妹我带飞');
}案例：判断闰年
var year = prompt('请您输入年份:');
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('你输入的' + year + '是闰年，2月份有29天');
} else {
alert('您输入的' + year + '不是闰年，2月份有28天');
}
}7.2.3 if else if 多分支语句
1.多分支语句就是利用不同的执行1语句得到不同的结果，达到多选一的目的
2.语法规范
if(条件表达式1){
//执行语句1
} else if(条件表达式2){
//执行语句2
}else if (条件表达式3){
//执行语句3
}else{
//执行语句4
}3.执行思路
从上到下，遇到满足条件的表达式，则执行，然后跳出整个语句，都不满足则执行else后的执行语句。
案例：输入分数，输出等级
var score = prompt('请输入分数：');
if(score>= 90){
alert('A');
} else if(score>= 80){
alert('B');
}else if (score>=70){
alert('C');
}else if(score>=60){
alert('D');
}else{
alert('不合格');
}7.2.4 三元表达式
1.定义：有三元运算符组成的式子称为三元表达式；
2.语法结构
条件表达式 ？ 表达式1 ： 表达式2
3.执行思路
如果条件表达式为真，则返回表达式1，否则返回表达式2；
var num = 10;
var result = num > 5 ? '是的' : '不是的';
alert(result)
//数字补0
var time = prompt('请输入0~59之间的一个数：');
var result1 = time < 10 ? '0' + time : time;
console.log(result1);7.2.5 Switch语句
1.语法结构
Switch语句也多分支语句，它用于基于不同的条件执行不同的代码。当要针对变量设置一系列特定值的选项时，就可以用Switch。
switch(表达式){
case value1:
执行语句1；
break;
case value1:
执行语句1；
break;
case value1:
执行语句1；
break;
...
default:
执行最后的语句；
}3.执行思路
利用表达式的值与case之后的表达式的值相互匹配，如果匹配上，则执行其 后面的语句，若都没匹配上，则执行default后的语句
4.注意事项
- 表达式通常写成变量
- 表达式的值和case后的值全等才能匹配上
- 没有break，不会退出Switch；
案例：查询
var role = prompt('请输入你喜欢的英雄：');
switch(role){
case '李白':
alert('飘逸帅气');
break;
case '孙悟空':
alert('暴力输出');
break;
default:
alert('没有这个英雄');
}7.2.6 Switch 和 if else if的区别
7.3循环流程控制
- 循环目的：重复执行某些语句
7.3.1 for循环
- 在程序中，一组被重复执行的语句称为循环体，能否继续执行取决于终止条件。由循环体和终止条件组成的语句便是循环语句。
1.语法结构
for（初始化变量；条件表达式；操作表达式）{
//循环体
}
2.作用：重复执行某些代码，通常跟计数有关。
3.初始化变量就是用var 声明一个普通变量，通常用作计数器使用
条件表达式决定循环继续执行还是终止
操作表达式是每次循环最后执行的代码，用于变量更新。
4.执行过程
案例：
<>
//for循环重复相同代码
for(var i = 1;1 <= 3;i++){
console.log('重要的事情说三遍！');
}
//for重复执行不同代码
var age = prompt('请输入一个数：');
for(var i = 1;1 <= age;i++){
console.log('这个人今年'+i+'岁了');
}
//求1~100之间累加和和平均值
var sum = 0;
var average = 0;
for(var i = 1;i <= 100;i++){
sum=sum + i;//sum+=i;
}
average = sum/100;
alert(sum);
alert(average);
//求1~100之间所有奇数的和和所有偶数的和
var even = 0;
var odd = 0;
for(var i=1;i <=100;i++){
if(i%2==0){
even += i;
}else{
odd += i;
}
}
console.log(even);//2550
console.log(odd);//25005.断点调试
断的提升可以帮助我们观察程序执行过程。
7.3.2 双重for循环
- 循环嵌套是指一个循环语句中再定义一个循环语句的语法结构
- 再for语句中再嵌套一个for语句称为双重for循环
1.语法结构
for（外层的初始化变量，外层的条件表达式，外层的操作表达式）{
for（内层的初始化变量，内层的条件表达式，内层的操作表达式）{
//执行语句
}
}- 可以把内层循环看出外层循环的执行语句
- 外层的循环执行一次，内层循环执行全部
案例：
//打印五行五列的$
var str = '';
for(var i=1;i <= 5;i++){
for(var j = 1;j <= 5;j++){
str = str + '$';
}
str = str + '\n';
}
//输入n行倒三角 $
console.log(str);
var row = prompt('请输入行数：');
var list = prompt('请输入列数：');
var str1 = '';
for(var i = 1;i <= row;i++){
for(var j = list;j >= i;j--){//或者j=i;j<=list,j++
str1 = str1 + '$';
}
str1 = str1 + '\n';
}
console.log(str1); //九九乘法表
var str = '';
for(var i=1;i <=9;i++){
for(var j = 1;j <=i;j++){
str = str + j + '×' + i + '='+ j*i + ' ';
}
str = str + '\n';
}
console.log(str);
7.3.3 for循环小结
7.3.4while 循环语法结构
1.语法结构
while（条件表达式）{
//循环体；
//操作表达式；
}
2.执行思路
当条件表达式为真，则执行循环体，否则跳出循环。
3.内部也应该有操作表达式，更新计数器防止死循环。
4.代码验证
var sum = 10;
while(sum <=20 ){
console.log('键盘敲烂，工资破万');
sum++;
}案例：
var message = prompt('你爱我吗？');
while(message !== '我爱你'){
message = prompt('你爱我吗？');
}
alert('我也爱你呀！');7.3.5 do ... while 结构
1.语法结构
do {
//循环体
//操作表达式
}while（条件表达式）
2.执行思路
- 先执行循环体再判断条件表达式，如果表达式为真，则继续执行循环体，否则跳出循环。（至少执行一次）
3.代码验证
//求1~100的和
var sum = 0;
var i = 1;
do{
sum += i;
i++;
}while(i <=100)
console.log(sum);
do{
var message = prompt('你喜欢我吗？');
}while(message != '我喜欢你')
alert('我也喜欢你呀！');4.循环小结
7.3.6 continue 关键字
-
continue关键字用于立即跳出本次循环，继续下一循环。
//求1~100，除了能被5整除的数的和
var sum = 0;
for(var i = 1;i <= 100;i++){
if(i%5==0){
continue;
}
sum +=i;
}
console.log(sum);7.3.7 break 关键字
- break用于立即跳出整个循环
//求1~100，除了能被5整除的数的和
var sum = 0;
for(var i = 1;i <= 100;i++){
if(i%5==0){
continue;
}
sum +=i;
}
console.log(sum);7.3.8命名规范及语法格式
1.标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数用动词
2.操作符规范
- 操作符左右两侧个保留一个字符
3.注释规范
- 单行注释前面注意有个空格
8.数组
8.1数组的概念
- 数组是一组数据的结合，其中每个数据被称为元素。在数组中可以存放任意类型的元素。简单来说，数组就是一组数据存储在单个变量名下。
8.2创建数组
8.2.1 用new创建数组
var 数组名 = new Array（）；
8.2.2利用字面量创建数组
1.使用数组字面量创建空数组：
var 数组名 = [ ];
2,。创建带初始值的数组
var arr = [1,13,'14','键盘敲烂，收入上万']；
- 数组里的数据用逗号隔开。
8.3获取数组内的元素
8.3.1数组的索引
索引（下标）：用来访问数组元素的序号，序号从0开始
获取数组元素格式：数组名[索引号]
var arr = [1,2,3,4];
console.log(arr[2]);//输出38.4遍历数组
遍历：把数组中元素从头到尾访问一遍；
var arr = [1,2,3,4];
for(var i = 0;i <= 3;i++){
console.log(arr[i]);
}8.5 数组长度
8.5.1数组的长度
使用“数组名.length”可以动态计算数组长度（元素个数）
例题
数字求和及平均值：
var sum = 0;
var average = 0;
var arr = [1,13,14,6,88];
for( var i = 0;i < arr.length;i++){//i必须是<arr.length;
sum += arr[i];
}
average = sum/arr.length;
console.log(sum);
console.log(average);求数组中最大值：
var max = 0;
var arr = [1,13,14,6,66,88,52];
for(var i = 0;i < arr.length;i++){
if(max < arr[i]){
max = arr[i];
}
}
console.log('该数组中最大值为:'+ max);//88将数组转化为分割字符串：
var arr = ['键','盘','敲','烂','月','入','过','万'];
var str = '';
var sep = ';';
for(var i = 0;i < arr.length;i++){
str += arr[i] + sep;
}
console.log(str);//键;盘;敲;烂;月;入;过;万;
8.6数组中新增元素
8.6.1通过修改数组length长度新增数组元素
- 修改length长度可实现数组扩容
- length属性是可读写的
var arr = ['1',2,'3'];
arr.length = 5;
console.log(arr);多余的空间为给值，相当于变量声明未赋值，输出undefined。
8.6.2通过修改数组索引号新增数组元素
var arr = ['1',2,'3'];
arr[3] = 'yueruguowan';
arr[1] = 'love';//原数组中2变为love
console.log(arr);注：不能直接给数组名赋值，否则会覆盖原来的数组中所有数据，
例题：新建一个数组，放入10个整数
var arr = [];
for (var i = 0;i < 10;i++){
arr[i] = i + 1;
}
console.log(arr);筛选数组：
var arr = [13,14,6,66,0,99,52];
var newArr = [];
var j = 0;
for(var i = 0;i < arr.length;i++){
if(arr[i] > 10){
newArr[j] = arr[i];
j++;
}
}
console.log(newArr);
//2法
var arr = [13,14,6,66,0,99,52];
var newArr = [];
for(var i = 0;i < arr.length;i++){
if(arr[i] > 10){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);删除数组指定数据：
var arr = [6,13,14,6,66,6,0,6,99,6,52,6];
var newArr = [];
for(var i = 0;i < arr.length;i++){
if(arr[i] !== 6){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);//[13, 14, 66, 0, 99, 52]翻转数组：
var arr = [1,2,3,4,5];
var newArr = [];
for (var i = arr.length - 1;i >= 0;i--){
newArr[newArr.length] = arr[i];
}
console.log(newArr);//[5,4,3,2,1]冒泡排序：
冒泡排序：是一种算法，把一系列数按一定顺序排列，（升序或者降序）
var arr = [520,13,666,14,999];
var newArr = [];
for (var i = 0;i <= arr.length - 1;i++){
for( var j = 0;j <= arr.length-i-1;j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];//第一个数要和所有的数比一次决定是否交换；
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
2577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
