变量、数据类型

一、JavaScript介绍

JavaScript 是什么?
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
作用：网页特效 (监听用户的一些行为让网页作出对应的反馈)，表单验证 (针对表单数据的合法性进行判断)，数据交互 (获取后台的数据, 渲染到前端)，服务端编程 (node.js)
JavaScript的组成（有什么？）
ECMAScript:规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等
Web APIs :DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作。BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
JavaScript 书写位置

①内部 JavaScript：直接写在html文件里，用script标签包住

<body>
...
<script>alert('Hello World')
</script>
</body>

②外部 JavaScript：代码写在以.js结尾的文件里

<body>
...
<script src='myjs.js'></script>
</body>

③内联 JavaScript：代码写在标签内部

<body><button onclick="alert(Hello World)">你好</button>
</body>

JavaScript 的注释
① 单行注释：
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /
② 块注释
符号：/* /
作用：在/ 和 */ 之间的所有内容都会被忽略
快捷键：shift + alt + A
JavaScript的结束符
代表语句结束英文分号 ;
可写可不写（现在不写结束符的程序员越来越多）
换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行
因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符
但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）
输入和输出语法
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

//  输出语法：
documenet.write('输出的内容'); //向body内输出内容,如果输出的内容写的是标签，也会被解析成网页元素
alert('输出的内容');// 页面弹出警告对话框
console。log('控制台显示的内容') // 控制台输出语法，程序员调试使用// 输入语法
prompt('输入的内容') //显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

字面量
在计算机科学中，字面量（literal）是在计算机中描述事/物
比如：
我们工资是： 10000 此时 10000 就是数字字面量
‘你好世界’ 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

二、变量

1. 变量：

白话：变量就是一个装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2. 变量基本使用☆

① 声明变量：
要想使用变量，首先需要创建变量（专业说法：声明变量）；声明变量有两部分构成：声明关键字、变量名（标识）； let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
语法：let 变量名
②变量赋值：
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
注意：是通过变量名来获得变量里面的数据

也可以声明变量的时候同时给变量初始化:

// 声明了一个age变量，同时里面存放了181这个数据
let age = 18

③更新变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
注意： let 不允许多次声明一个变量。

// 声明了一个age变量，同时里面存放了18这个数据
let age = 18
// 变量里面的数据发生变化更改为19
age = 19
// 页面输出的结果为19
document.write(age)

④ 声明多个变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。

let age = 18,uname = 'JavaScript'

3. 变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间

4. 变量命名规则与规范

规则：必须遵守，不遵守报错
规范：建议，不遵守不会报错，但不符合业内通识
①规则：不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等，只能用下划线、字母、数字、$组成，且数字不能开头，字母严格区分大小写，如 Age 和 age 是不同的变量
②规范：起名要有意义，遵守小驼峰命名法，第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量拓展-let和var的区别

let 为了解决 var 的一些问题
var 声明：可以先使用在声明 (不合理)，var 声明过的变量可以重复声明(不合理)，比如变量提升、全局变量、没有块级作用域等等
结论：以后声明变量我们统一使用 let

变量拓展-数组

数组(Array)是一种可以按顺序保存多个数据
let arr=[ ]

1. 声明语法

数组是按顺序保存，所以每个数据都有自己的编号，计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推，在数组中，数据的编号也叫索引或下标，数组可以存储任意类型的数据。

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

2. 取值语法

通过下标取数据，取出来是什么类型的，就根据这种类型特点来访问。

// 数组名[下标]
let names = ['小明','小刚','小红','小丽','小米']
console.log(name[0])  // 小明
console.log(name[1])  // 小刚

3.一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号（数组名[小标] ）
长度：数组中数据的个数，通过数组的length属性获得(数组名.length)

三、数据类型

1.数据类型☆

JS 数据类型整体分为两大类：基本数据类型、引用数据类型

Ⅰ、数字类型（number）

整数、小数、正数、负数

Ⅱ、字符串类型（string）

通过单引号（ ‘’）、双引号（ “”）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
① 无论单引号或是双引号必须成对使用
② 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
③必要时可以使用转义符 \，输出单引号或双引号

字符串拼接：

document.write('Hello'+'World')  // HelloWorld
let a = 'Hello'
let b = 'World'
document.write( a + b )  // HelloWorld

模板字符串
①作用
拼接字符串和变量
在没有它之前，要拼接变量比较麻烦

document.write('向大家说:'+ a + ',Javascript!') // 向大家说:Hello,Javascript!

②符号：· · （Tab上面的键）
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
内容拼接变量时，用 ${} 包住变量

document.write('向大家说：${a},Javascript!') // 向大家说：Hello,Javascript!

Ⅲ、布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

Ⅳ、未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。在只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为undefined。

工作中的使用场景：我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

let age              // 声明变量但是未赋值
docunment.write(age) // 输出undefind

Ⅴ、null（空类型）

null 表示值为空

let obj = null
typeof(null)  // 'object'

null 和 undefined 区别：①undefined 表示没有赋值②null 表示赋值了，但是内容为空
null 开发中的使用场景：
官方解释：把 null 作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2.检测数据类型

① 控制台输出语句：
控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

② 通过 typeof 关键字检测数据类型：

四、类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

console.log('500'+ '00')  ///输出结果  50000

此时需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

1、隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：

号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
缺点：
转换类型不明确，靠经验才能总结
小技巧：
+号作为正号解析可以转换成Number

2、显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
概念：
自己写代码告诉系统该转什么类型
转换为数字型
Number(数据)：转成数字类型，如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字，NaN也是number类型的数据，代表非数字。
parseInt(数据)：只保留整数
parseFloat(数据)：可以保留小数
转换为字符型： String(数据)、变量.toString(进制)

实战案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

let a, b, c, d, e, f;a = prompt('银行卡余额：');b = prompt('水费');c = prompt('电费');d = prompt('网费');f = Number(a - b - c - d);document.write(`<table class="tab"><caption><h1>2021年9月消费支出</h1></caption><tr><th>银行卡余额</th><th>水费</th><th>电费</th><th>网费</th><th>银行卡余额</th></tr><tr><td>${a}元</td><td>${b}元</td><td>${c}元</td><td>${d}元</td><td>${f}元</td></tr></table>`)
console.log('银行卡余额:' + f);

流程控制

一、运算符

1、算术运算符

数学运算符也叫算术运算符，主要包括加+、减-、乘*、除/、取余%（求模）。
同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。
乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结：先乘除后加减，有括号先算括号里面

2、赋值运算符

let num = 1num +=1console.log(num)

3、一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符
一元运算符：例：正负号
二元运算符：例：let num = 10 + 20

自增：
符号：++
作用：让变量的值 +1

自减：
符号：–
作用：让变量的值 -1

自增运算符的用法：
前置自增：先自加再使用
后置自增：先使用再自加

注意：
1.前置自增和后置自增独立使用时二者并没有差别！
2. 一般开发中我们都是独立使用
3. 后面 i++ 后置自增会使用相对较多

4、比较运算符

5、逻辑运算符

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

6、运算符优先级

一元运算符里面的逻辑非优先级很高，逻辑与比逻辑或优先级高。

二、语句

1、表达式和语句

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果
JS整句或命令，JS语句是以分号结束（可以省略）
区别：表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

2、分支语句

① 程序三大流程控制语句

② 分支语句
分支语句包含： If分支语句，三元运算符，switch 语句

Ⅰ、if语句

有三种使用：单分支、双分支、多分支

// 单分支
//括号内的条件为true时，进入大括号里执行代码
//小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
if(条件){满足条件要执行的代码
}// 双分支
if(条件){满足条件要执行的代码
} else{不满足条件执行的代码
}
// 多分支
if(条件1){          // 先判断条件1，若满足条件1就执行代码1，其他不执行代码1
}else if(条件2){    // 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行代码2
}else if(条件3){    // 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行代码3
}
...
else{              // 若以上条件都不满足，执行else里的代码n代码n
}

Ⅱ、三元运算符

作用：简化 if-else 双分支更简单的写法，有时候也叫做三元表达式。
符号：? 与 : 配合使用
语法：

条件表达式 ? 结果表达式1 : 结果表达式2

在三元运算表达式中，结果表达式1或者结果表达式2代表整个结果，当条件为真时，结果表达式1为结果，当条件为假时。结果表达式2为结果。

Ⅲ、switch 语句

switch case语句一般用于等值判断,不适合于区间判断，一般需要配合break关键字使用没有break会造成case穿透。

// 找到跟小括号里数据全等的case值，并执行里面对应的代码
// 若没有全等 === 的则执行default里的代码
// 例：数据若跟值2全等，则执行代码2
switch(数据){case 值1：代码1breakcase 值2：代码2breakdefault:代码nbreak
}

条件是全等比较，case代表一个条件，break: 结束case以及switch，没有break: 穿透到下一个case。default: 所有条件都不匹配
案例
简单计算器：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

let num1 = +prompt('请输入一个数')let symbol = prompt('请输入运算符：+ - * / %')let num2 = +prompt('请输入二个数')switch (symbol) {case '+':alert(`您选择的是加法：结果是：${num1+num2}`)breakcase '-':alert(`您选择的是减法：结果是：${num1-num2}`)breakcase '*':alert(`您选择的是乘法：结果是：${num1*num2}`)breakcase '/':alert(`您选择的是除法：结果是：${num1/num2}`)breakcase '%':alert(`您选择的是取余：结果是：${num1%num2}`)breakdefault:alert('您选择的运算符错误')break}

3、循环语句

Ⅰ、断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面
1.按F12打开开发者工具
2.点到sources一栏
3.选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

Ⅱ、while循环

while循环的条件实在外部定义，条件变化在循环体中变化，适合不限定次数的循环（死循环）
1.while 循环语法：

while(循环条件){要重复执行的代码(循环体)
}

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码。while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到，小括号判断条件，直到括号内条件不满足，即跳出。
案例
在页面中打印输出10句“月薪过万”

let money = 1;while (money <= 10) {document.write('月薪过万<br>')money++}

综合案例

简易ATM取款机案例
需求：用户可以选择存钱、取钱、查看余额和退出功能
分析：
①：循环的时候，需要反复提示输入框，所以提示框写到循环里面
②：退出的条件是用户输入了 4
③：提前准备一个金额预先存储一个数额
④：取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额
⑤：输入不同的值，可以使用switch来执行不同的操作

 // 用户可以无限操作: 直到退出
// 1. 让用户进入ATM: 循环操作
// 1.1 定义一个记号: 控制循环条件 let flag = true
let flag = true// 1.2 定义一个余额账号: let account = 0
let account = 800000000// 1.3 进入循环: while(flag){}while (flag) {// 2. 提示用户: 获取用户的信息  1. 存钱  2. 取钱 3. 查看余额 4. 退出let change = +prompt(`请输入操作对应的编号：1.存钱2.取钱3.查看余额4.退出`)// 3. 判定用户的操作行为, 进行其他的操作switch (change) {// 3.1 存钱行为: 给用户一个输入框: 输入存钱数, 累加到账户余额中case 1:let save = +prompt('请输入要存的余额')account += savebreak// 3.2 取钱行为: 给用户一个输入框: 输入取钱数, 从账户余额中扣除case 2:let cash = +prompt('请输入要存的余额')account -= cashbreak// 3.3 查看行为: 显示账户余额case 3:alert('账户余额为:' + account)break// 3.4 退出行为: 修改条件变量为falsecase 4:flag = falsebreak}
}

循环和数组

一、循环-for

1、for循环基本使用

for循环：条件初始化, 条件判定, 条件变化，都在for()小括号中。for循环体只要专注解决业务问题，而且适合指定次数的循环（数组的遍历）—访问：数组名[小标]

for(声明记录循环次数的变量;循环条件:变化值){循环体
}

案例

利用for循环输出1~100岁
求1-100之间所有的偶数和
页面中打印5个小星星
for循环的最大价值：循环数组
需求：请将数组 [‘马超’，‘赵云’， ‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来

// 1、利用for循环输出1~100岁
let age
for (age = 1; age <= 100; age++) {document.write(age, '<br>')console.log(age, '岁')
}//2.求1-100之间所有的偶数和
let sum = 0
for (let i = 1; i <= 100; i++) {if (i % 2 == 0) {sum += i;}
}
console.log(sum); //3. 页面中打印5个小星星
let i
for (i = 1; i <= 5; i++) {document.write('♥'+'<br>')
}//4.请将 数组 [‘马超’，‘赵云’， ‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来
let arr = ["马超", "赵云", "张飞", "关羽", "黄忠"];
for (let index = 0; index < arr.length; index++) {document.write(arr[index] + '<br>')
}

2、退出循环

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

3、循环嵌套

for 循环嵌套：

// 一个循环里再套一个循环，一般用在for循环里
for(外部声明记录循环次数的变量：循环条件；变化值){for(内部声明记录循环次数的变量：循环条件；变化值){循环体}
}

案例

//1、假如每天记住5个单词，3天后一共能记住多少单词？
for (let i = 1; i <= 3; i++) {document.write(`第${i}天<br>`)for (let j = 1; j <= 5; j++) {document.write(`记住第${j}个单词<br>`)}
} //2.打印5行5列的星星
for (i = 1; i <= 5; i++) {for (let j = 1; j <= 5; j++) {document.write('★')}document.write('<br>')
}//3.打印倒三角形星星/*  */
for (let i = 1; i <= 5; i++) {for (let j = 1; j <= i; j++) {document.write('★')}document.write('<br>')
} //九九乘法表
for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`${j}*${i}=${i*j}\n`)}document.write('<br><br>')
}

二、数组

1、数组是什么

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

2、数组的基本使用

Ⅰ、声明语法：

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

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

Ⅱ、取值语法

通过下标取数据，取出来是什么类型的，就根据这种类型特点来访问

数组名[下标]

Ⅲ、术语

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

Ⅳ、遍历数组

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

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

案例
求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值

let sum = 0let arr = [2, 6, 1, 7, 4]for (let i = 0; i < arr.length; i++) {sum += arr[i]}let avg = sum / arr.lengthdocument.write(`所有元素的和为${sum}<br>`)document.write(`所有元素的平均值为${avg}`) *//* let tablebox = '<table>'for (let i = 0; i < 5; i++) {tablebox += '<tr>';for (let b = 0; b < 5; b++) {tablebox += '<td>*</td>'}tablebox += '</tr>';}tablebox += '</table>';document.write(tablebox);

求数组 [2,6,1,77,52,25,7] 中的最大值

let arr = [2, 6, 1, 77, 52, 25, 7]let max = [0]for (let i = 1; i < arr.length; i++) {if (max < arr[i]) {max = arr[i]}}document.write('数组最大值为:', max)document.write('<br>') */// 3、求数组 [2,6,1,77,52,25,7] 中的最小值/* let arr = [2, 6, 1, 77, 52, 25, 7]let min = arr[0]for (let i = 1; i < arr.length; i++) {if (min > arr[i]) {min = arr[i]}}
document.write('数组最小值为:', min)

3、操作数组

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

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

let arr = ['red','green']
arr.push('pink','hotpink')
console.log(arr） // ['red','green','pink','hotpink']

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

let arr = ['red','green']
arr.unshift('pink','hotpink')
console.log(arr） // ['pink','hotpink','red','green']

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

let arr = ['red','green']
arr.pop()
console.log(arr） // ['red']

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

let arr = ['red','green']
arr.shift()
console.log(arr)  // ['green']

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

// arr.splice(操作的下标,删除的个数)
let arr = ['red','green']
arr.splice(0,1)
console.log(arr) // ['green']

4、数组案例

1、将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

let newArr = []
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
for (let i = 0; i < arr.length; i++) {if (arr[i] >= 10) {newArr.push(arr[i])}
}
document.write(newArr)
console.log(newArr);

2、将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组

let newArr = []
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
for (let i = 0; i < arr.length; i++) {if (arr[i] != 0) {newArr.push(arr[i])}
}
document.write(newArr)
console.log(newArr);

冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]

let arr = [2, 3, 1, 4, 5]
for (let j = 0; j < arr.length - 1; j++) {// 这里要根据外层for循环的 j，逐渐减少内层 for循环的次数for (let i = 0; i < arr.length - 1 - j; i++) {if (arr[i] > arr[i + 1]) {let temp = arr[i];arr[i] = arr[i + 1];arr[i + 1] = temp;}}}
document.write(arr)

综合案例

用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入4次，所以可以把4个数据放到一个数组里面，利用循环，弹出4次框，同时存到数组里面。
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中，柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
，div里面包含显示的数字和第n季度。

 let data = []data.push(+prompt('请输入第一季度的数据：'))data.push(+prompt('请输入第二季度的数据：'))data.push(+prompt('请输入第三季度的数据：'))data.push(+prompt('请输入第四季度的数据：'))console.log(data);let box = `<div class="box">`
for (let i = 0; i < data.length; i++) {box += `<div style="height:${data[i]}px"><span>${data[i]}</span><h4>第${i+1}季度</h4></div>`
}
box += `<div>`
document.write(box)

函数

一、函数

1、为什么需要函数

function，是被设计为执行特定任务的代码块。函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

2、函数使用

函数名命名规范：和变量命名基本一致，尽量小驼峰式命名法，前缀应该为动词
命名建议：常用动词约定
函数的声明语法：

function 函数名（）{函数体
}
// 调用函数
函数名()

3、函数传参

声明语法:

function 函数名(参数列表){函数体
}
// 传参
function getSum(num1,num2){document.write(num1+num2)
}
getSum(10,20)  // 30

参数列表：传入数据列表，声明这个函数需要传入几个数据，多个数据用逗号隔开
形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值。
开发中尽量保持形参和实参个数一致， alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参。

4、函数返回值

当调用某个函数，这个函数会返回一个结果出来，这就是有返回值的函数。当函数需要返回数据出去时，用return关键字。
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用，函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写， return会立即结束当前函数，函数可以没有 return，这种情况函数默认返回值为 undefined。

5、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这
个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

在JavaScript中，根据作用域的不同，变量可以分为：

变量有一个坑，特殊情况：
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。但是有一种情况，函数内部的形参可以看做是局部变量。

变量访问原则-作用域链：
只要是代码，就至少有一个作用域，写在函数内部的局部作用域，如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

6、匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

综合案例

用户输入秒数，可以自动转换为时分秒

function secondToTimeStr(seconds) {//时分秒转换let h = parseInt(tol / 3600) % 24let m = parseInt(tol / 60) % 60let s = parseInt(tol % 60)console.log(h, m, s);//前补‘0’h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sdocument.write(`${tol}秒转换成时分秒：${h}小时${m}分钟${s}秒钟`)document.write('<br>')document.write(`${tol}秒转换成时分秒：${h}:${m}:${s}`)
}
let tol = +prompt('请输入总秒数：')
secondToTimeStr(tol)

对象

1、什么是对象

◢ 对象（object）：JavaScript里的一种数据类型
◢可以理解为是一种无序的数据集合
◢用来描述某个事物，例如描述一个人
▪ 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
▪ 如果用多个变量保存则比较散，用对象比较统一
◢ 比如描述班主任信息：
▪ 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
▪ 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

2、对象使用

属性：信息或叫特征（名词）。
方法：功能或叫行为（动词）。
属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔。多个属性之间使用英文 , 分隔；属性就是依附在对象上的变量（外面是变量，对象内是属性）；属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

let  对象名 = {}// 声明一个person的对象
let person = {name:'John',do:function(){documenet.write('do homework!')}
}

属性访问：声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。简单理解就是获得对象里面的属性值。

对象中的方法：数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

对象中的方法访问：声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

3、操作对象

对象本质是无序的数据集合, 操作数据无非就是增删改查语法：

增加属性：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

新增对象中的方法：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

4、遍历对象

对象没有像数组一样的length属性,所以无法确定长度。对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标。
一般不用这种方式遍历数组、主要是用来遍历对象。遍历对象一般不用这种方式遍历数组、主要是用来遍历对象。一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值：

5、内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。Math对象是JavaScript提供的一个“数学高手”对象，提供了一系列做数学运算的方法：
random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值

 // 1. 随机小数: 0-1之间, random()let rand = Math.random()console.log(rand);// 2. 取整方式// 2.1 ceil(): 向上取整, Math.ceil(参数)    : 天花板数// Math.ceil()console.log(Math.ceil(10.5));// 2.2 floor(): 向下取整, Math.floor(参数)  : 地板数console.log(Math.floor(10.5));// 2.3 round(): 四舍五入, Math.round(参数)console.log(Math.round(10.4));// 3. 求最大值和最小值// 3.1 max(): 最大值, 不限定参数console.log(Math.max(1, 10));// 3.2 min(): 最小值, 不限定参数console.log(Math.min(1, 10));// 4. 求幂: x 的 y 次方: Math.pow(底数x,指数y)console.log(Math.pow(10, 2));

案例
随机点名案例：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中

let personage = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
console.log(personage[Math.floor(Math.random() * ((personage.length - 1) + 1))]);
// 需求： 请把[‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中， 但是不
// 允许重复显示
// 分析：①： 利用随机函数随机生成一个数字作为索引号②： 数组[随机数] 生成到页面中③： 数组中删除刚才抽中的索引号
let personage = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let i = Math.floor(Math.random() * ((personage.length - 1)))
console.log(personage[i]);
personage.pop(personage[i])
console.log(personage);

综合案例

根据数据渲染列表页面

let students = [{name: '小明',age: 18,gender: '男',hometown: '河北省'}, {name: '小红',age: 19,gender: '女',hometown: '河南省'}, {name: '小刚',age: 17,gender: '男',hometown: '山西省'}, {name: '小丽',age: 18,gender: '女',hometown: '山东省'}]let table = `<table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr>`//遍历数组：取出对象，然后动态产生tr>td结构
for (let i in students) {//i时数组的下标，students[i]访问的时元素table += `<tr><td>${+i+1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`
}
table += `</table>`
document.write(table)

拓展-术语解释

拓展- 基本数据类型和引用数据类型

堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中
的栈；
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面

⚪ 值类型（简单数据类型）： string ，number，boolean，undefined，null
⚪值类型变量的数据直接存放在变量（栈空间）中

⚪引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
⚪引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

【JavaScript】基础知识相关推荐

JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
js java用var_Java基础———JavaScript基础知识
原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...
JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性节点分类: 标签节点文本节点属性节点注释节点节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值常见的节 ...
javaweb(02) JavaScript基础知识
javaweb(02): JavaScript基础知识 JavaScript简介为什么出现JavaScript Javascript是什么 JavaScript和Java的关系? 就像卡巴斯基和巴基 ...
Javascript基础知识之四（常用数组方法）
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
JavaScript 基础知识 - 入门篇(二)
11. 函数 11.1 函数的基础知识为什么会有函数? 在写代码的时候,有一些常用的代码需要书写很多次,如果直接复制粘贴的话,会造成大量的代码冗余: 函数可以封装一段重复的javascript代码, ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
JavaScript 基础知识查漏补缺
JavaScript 基础知识查漏补缺(持续更新) 数据类型 var bool = '4.3' > '11' console.log(bool) // 结果为true,二者都为字符串,字符串之间 ...
网页游戏开发基础——JavaScript基础知识
对于初学编程的朋友来说,这篇文章有点长,而且会有点难懂.但是请不要放弃,我尽量以通俗的语言解释相关的编程概念,这里只讲解编写一个游戏需要的相关编程概念(如需要会在后面的文章中随时补充相关概念),对其余 ...

【JavaScript】 基础知识

变量、数据类型

一、JavaScript介绍

二、变量

1. 变量：

2. 变量基本使用☆

3. 变量的本质

4. 变量命名规则与规范

变量拓展-let和var的区别

变量拓展-数组

1. 声明语法

2. 取值语法

3.一些术语

三、数据类型

1.数据类型☆

Ⅰ、数字类型（number）

Ⅱ、字符串类型（string）

Ⅲ、布尔类型（boolean）

Ⅳ、未定义类型（undefined）

Ⅴ、null（空类型）

2.检测数据类型

四、类型转换

1、隐式转换

2、显式转换

实战案例

流程控制

一、运算符

1、算术运算符

2、赋值运算符

3、一元运算符

4、比较运算符

5、逻辑运算符

6、运算符优先级

二、语句

1、表达式和语句

2、分支语句

Ⅰ、if语句

Ⅱ、三元运算符

Ⅲ、switch 语句

3、循环语句

Ⅰ、断点调试

Ⅱ、while循环

综合案例

循环和数组

一、循环-for

1、for循环基本使用

2、退出循环

3、循环嵌套

二、数组

1、数组是什么

2、数组的基本使用

Ⅰ、声明语法：

Ⅱ、取值语法

Ⅲ、术语

Ⅳ、遍历数组

3、操作数组

4、数组案例

冒泡排序

综合案例

函数

一、函数

1、为什么需要函数

2、函数使用

3、函数传参

4、函数返回值

5、作用域

6、匿名函数

综合案例

对象

对象

1、什么是对象

2、对象使用

3、操作对象

4、遍历对象

5、内置对象

综合案例

拓展-术语解释

拓展- 基本数据类型和引用数据类型

【JavaScript】 基础知识相关推荐

最新文章

【JavaScript】基础知识

【JavaScript】基础知识相关推荐