一、JS介绍
1.1 简介
JS是一种运行在客户端（浏览器）的编程语言，实现人机交互的效果
作用：
-
网页特效：监听用户的一些行为让网页做出对应的反馈
-
表单验证：针对表单数据的合法性进行判断
-
数据交互：获取后台的数据，渲染到前端
-
服务端编程：node.js
组成：
-
JavaScript语言基础（ECMAScript）：变量、分支语句、循环语句、对象等等
-
Web APIs（DOM（网页文档对象模型：对网页元素进行移动、大小等），BOM（浏览器对象模型：页面弹窗，检测窗口宽度））
1.2 书写位置
-
内部JavaScript
直接写在html文件里，用script标签围住
规范：script标签写在</body>上面
注：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。
如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
-
外部javaScipt
代码写在.js结尾的文件里，通过script标签，引入到html页面里
注：. script标签中间无需写代码，否则会被忽略！
-
内部JavaScript
代码写在标签内部
1.3 javaScript注释和结束符
单行注释：//
块注释：/* */
结束符：
-
作用： 使用英文的 ; 代表语句结束
-
实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
1.4 输入输出语法
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程
3种输出语法：
document.write("要输出的内容")
//想body输出内容
//如果输出的内容写的是标签，也会被解析成网页元素
alert('要出的内容')
//页面弹出警告对话框
cosole.log('控制台打印')
//控制台输出语法，程序员调试使用
输入语法：
prompt("please enetr your age")
//显示一个对话框，对话框种包含一条文字信息，用来提示用输入文字
代码执行顺序：
-
按HTML文档流顺序执行JavaScript代码
-
alert() 和 prompt() 它们会跳过页面渲染先被执行
1.5 字面量
字面量（literal）是在计算机中描述事/物
二、JS基础语法
2.1变量
变量是计算机存储数据的容器
注：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
2.1.1 基本使用
1.声明变量：let 变量名
let是关键字，是系统提供的专门用来声明、定义变量的词语
2.变量赋值：变量名=18
定义了一个变量后，就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
let age=18
3.更新变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它
4.声明多个变量：let age=123,uname="gaoxin
2.1.2 变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
2.1.3 var与let区别
let 为了解决 var 的一些问题。
var 声明:
Ø 可以先使用 在声明 (不合理)
Ø var 声明过的变量可以重复声明(不合理)
Ø 比如变量提升、全局变量、没有块级作用域等等
2.1.4 变量声明
变量声明有三个var、let和const
-
var：老派写法，问题很多
-
const：尽量使用const，很多变量声明的时候我们知道不会在更改，就可以用const
-
let：如果后面是要修改的，将const改为let
注：
-
只要对象是引用类型，里面存储的是地址，只要地址不变，就不会报错，所以修改const声明的对象的属性不会报错
-
建议数组和对象使用const来声明
2.2 数组
数组是一种将一组数据存储在单个变量名下的优雅方法
声明语法
let arr = [10, 2, 3, , 45, 3] let name = ["刘德华", "张学友", "郭富城", "黎明"] console.log(name[0])
数组按顺序保存，每个数据都有自己的编号，编号也叫做索引或下标
-
元素：数组中保存的每个数据都叫做数组元素
-
下标：数组中数据的编号
-
长度：数组中数据的个数，通过数组的length属性获得2.2常量
使用const声明的变量称为常量
当某个变量永远不会改变时，就可以使用const来声明，而不是let
注：常量不允许重新赋值，声明的时候必须赋值
数组添加新的数据：
-
数组.push():方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.push(elememt1,element2,element3....) -
数组.unshift():方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
arr.unshift(elememt1,element2,element3....)
删除数组中的数据：
-
数组.pop():方法从数组中删除最后一个元素，并返回该元素的值
-
数组.shift():方法从数组中删除第一个元素，并返回该元素的值
-
数组.splice():方法删除指定的元素
arr.splice(start,deleteCount)deleteCount如果不写，则默认从指定的起始位置删除到最后
2.3数据类型
整体分为两大类：基本数据类型、应用类型
2.3.1 数值类型
即我们数学中学习到的数字，可以是整数、小数、正数、负数
引用数据类型：object
-
NaN代表一个计算错误，它是一个不正确的或者一个未定义的数学操作所得到的结果
-
NaN是粘性的，任何对NaN的操作都会返回NaN
2.3.2 字符串类型
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
-
无论单引号或是双引号必须成对使用
-
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
-
必要时可以使用转义符
\，输出单引号或双引号
字符串拼接：可以用加号实现
模板字符串：
let age = 11
document.write(`我今年${age}岁`)
//我今年11岁
2.3.3 布尔类型，未定义类型，null
-
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值
true和false，表示肯定的数据用true，表示否定的数据用false。 -
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
-
null仅仅是一个代表”无“、”空“或”值未知“的特殊值,使用typeof检测类型时，它的结果为object
2.3.4 检测数据类型
typeof运算符可以返回被检测的数据类型，支持两种语法：
-
作为运算符：typeof x(常用的写法)
-
函数形式：typeof(x)
2.4 类型转换
JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚；
使用表单、prompt获取过来的数据默认是字符串类型，此时不能直接简单的进行加法运算
类型转换就是把数据类型的变量转换成我们需要的数据类型
2.4.1 隐式转换
某些运算被执行时，系统内部自动将数据类型进行转换，这就是隐式转换
规则：
-
+号只要两边有一个是字符串，都会把另外一个转换成字符串
-
除了+以外的算数运算符，比如-*/都会把数据转换成数字类型
缺点：
-
转换类型不明确
小技巧：
-
+号作为正号解析可以转换成数字类型
-
任何数据和字符串相加结果都是字符串
2.4.2 显示转换
告诉系统该转换成什么类型
转换为数字类型：
-
Number（数据）
转成数字类型
如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number）既不是一个数字
NaN也是number类型的数据
-
parseInt（数据）
只保留整数
-
parseFloat（数据）
可以保留小数
转换为boolean型：
-
Boolean(内容)
''、0、undefined、null、false、NaN转换为布尔值后都是false，其余则为true-
有字符串的加法" "+1，结果是"1"
-
减法"-"只能用于数字，它会使空字符串""转换为0
-
null经过数字转换会变为0，undefined经过数字转换之后会变为NaN
-
2.5 简单数据类型与应用数据类型
2.5.1 概述
-
基本数据类型(又叫做简单类型或者值类型)：number,string,boolean,undefined,null
在存储时变量中存储的是值本身
-
应用类型(复杂类型)：通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
在存储变量时中存储的仅仅是地址（引用）
2.5.2 堆栈空间分配区别
-
栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量等。其操作方式类似于数据结构的栈；简单数据类型存放到栈里面
-
堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，又垃圾回收机制回收；
引用数据变量（栈里面）存放的是地址，真正的引用数据类型对象存放到堆里面
三、语句
-
表达式：表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果
-
语句：语句是可以执行的一段代码，语句不一定有值
3.1 运算符
=：左右两边是否类型和值都相等，开发中判断是否相等，推荐===
！==：左右两边是否不全等
运算符优先级：
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算术运算符 | 先* / %后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
3.2 分支语句
分支语句可以让我们有选择性的执行想要的代码
3.2.1 if分支语句
if(条件){
满足条件要执行的代码
}
3.2.2 三元运算符
使用场景：比if双分支更简单的写法，可以使用三元运算符
条件？满足条件执行的代码：不满足条件执行的代码
3.2.3 switch分支语句
switch(数据){
case 值1:
代码1
break
case 值1:
代码1
break
default:
代码n
break
}
若没有全等===，则执行default里的代码
if 多分支语句和 switch的区别：
-
共同点
-
都能实现多分支选择， 多选1
-
大部分情况下可以互换
-
-
区别：
-
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
-
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
-
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
-
结论：
-
当分支比较少时，if…else语句执行效率高。
-
当分支比较多时，switch语句执行效率高，而且结构更清晰。
-
-
3.3 循环语句
3.3.1 while循环
while(循环条件){
循环体
}
3.3.2 for循环
for(变量起始值;终止条件;变量变化量){
循环体
}
四、函数
4.1 函数使用
函数：function，被设计为执行特定任务的代码块
说明：函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些别“包裹”的代码逻辑，有利于精简函数代码使用
函数声明语法：
function 函数名(){
函数体
}
函数命名建议：
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些值 |
函数调用语法：
函数名()
-
声明的的函数必须调用才会被执行，使用()调用函数
-
两个相同的函数后面的会覆盖前面的函数
4.2 函数传参
function 函数名(参数列表){
函数体
}
形参：声明函数时写在函数名右边小括号里的叫形参
实参：调用函数时写在函数名右边小括号里的叫实参
-
如果用户不输入实参，就会出现undefined+undefined，结果为NaN
-
在Javascript中，实参的个数和形参的个数可以不一致
如果形参过多，会自动填上undefined
如果实参过多，那么多余的实参会被忽略（函数内部有一个arguments，里面装着所有实参）
4.3 函数返回值return
当函数需要返回数据出去时，用return关键字
function 函数名(参数列表){
函数体
return 数据
}
细节：
-
在函数体中使用return关键字能将内部的执行结果交给函数外部使用
-
return后面代码不会在被执行，会立即结束当前函数，所以return后面的数据不要拿换行写
-
return函数可以没有return，这种情况函数默认返回值为undefined
4.4 匿名函数
没有名字的函数，无法直接使用
使用方式：
-
函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用，这个称之为函数表达式
函数表达式和具名函数的不同：具名函数的调用可以写在任何位置，函数表达式必须先写表达式后调用
-
立即执行函数
使用场景：避免全局变量的污染
//第一种写法 (function () { console.log(11)//函数体 } )(); //第二种写法 (function () { console.log(11)//函数体 } ());多个执行函数要用分号来分隔开，要不然会报错
4.5 逻辑中断
逻辑运算符里的短路
短路：只存在于&&和||中，当满足一定条件会让右边的代码不执行
| 符号 | 短路条件 |
|---|---|
| && | 左边为false就短路 |
| || | 左边为true就短路 |
原因：通过左边就能得到整个式子的结果，因此没必要在判断右边
运算结果：无论是&&还是||，运算结果都是最后被执行的表达式求值，一般用在变量赋值
五、对象
对象是一种数据类型，可以理解为一种无序的数据集合，而数组是有序的数据集合，可以详细的描述某个事物
5.1 对象基本使用
1.对象声明语法：
let 对象名={}
let 对象名=new Object()
2.对象由属性和方法组成
属性：信息或叫特征（名词）
-
属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔
-
多个属性之间使用英文”,“分隔
-
属性就是依附于对象上的变量
方法：功能或叫行为（动词）
let 对象名={
属性名：属性值,
方法名：函数
}
5.2 对象的操作
5.2.1 查询对象
声明对象，并添加了若干属性后，可以使用"."获得对象中属性对应的值，称之为属性访问
语法：对象名.属性
查的另外一种属性
语法：对象名['属性'] 属性名必须加引号
let obj = {
'goods-name': '小米',
num: '100',
weight: '0.22kg',
address: '中国大陆'
}
obj.address = 'Amercian'
console.log(obj.address)//Amercian
console.log(obj['goods-name']);//小米
console.log(obj['num']);//100
5.2.2 修改对象
语法：对象名.属性=新值
5.2.3 增加对象
语法：对象名.新属性=新值
5.2.4 删除对象
语法:delete 对象名.属性
5.3 遍历对象
let obj = {
'goods-name': '小米',
num: '100',
weight: '0.22kg',
address: '中国大陆'
}
for (let i in obj) {//i是带着引号的属性名
console.log(i + ':')
console.log(obj[i])
}
//goods-name:
//小米
//num:
//100
//weight:
//0.22kg
//address:
//中国大陆
5.4 内置对象-Math
JavaScript内部提供的对象，包含各种属性和方法者供开发者调
| 方法名 | 说明 |
|---|---|
| abs(a) | 获取参数的绝对值 |
| ceil(b) | 向上取整 |
| floor(a) | 向下取整 |
| min(a, b) | 获取两个值的较小值 |
| max(a, b) | 获取两个值的较大值 |
| pow( a, b) | 返回a的b次幂 |
| double random() | 返回值为随机值，范围[0,1) |
5.5 术语解释
| 术语 | 解释 | 举例 |
|---|---|---|
| 关键字 | 在JavaScript中有特殊意义的词汇 | let,var,function,if,else,switch,for,case,break,continue |
| 保留字 | 在目前没有意义，但在未来可能具有特殊的意义 | int,short,long,char |
| 标识（标识符） | 变量名、函数名的另一种叫法 | 无 |
| 表达式 | 能产生值的代码，一般配合运算符出现 | 10+3，age>=19 |
| 语句 | 一段可执行的代码 | if(),for() |
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
