目录
1 JavaScript是什么
JavaScript是一种运行在客户端(浏览器)的编程语言
2 js三种编写位置
js行内式
js内部式
js外部式
Js行内式 |
<标签名 事件类型属性=“js代码”></标签名> |
Js行内式案例 |
<button onclick="console.log(111)">大家好</button> |
js内部式【写在body标签的最后一个子元素后面】 |
<script> js代码 </script> |
js内部式案例 |
<script> console.log('我是内部式') </script> |
js外部式 |
<script src="js文件路径"></script> |
js外部式案例 |
<script src="./1.js"></script> |
3 js注释
js单行注释【快捷键:ctrl + /】 |
//单行注释内容 |
js块注释【多行注释】【快捷键:shift + alt + A】 |
/* 块注释 */ |
4 js输入输出语句
4.1 输出的三种方式
弹窗输出 | 描述 |
alert(“输出内容”) | 打开页面就弹出内容 |
页面输出 | 描述 |
document.write(“页面输出内容”) | 页面输出内容会在原网页的最后一个元素后面输出在页面上【可以解析标签】【需要在哪个元素里面输出内容,就在哪个元素里面写script标签,然后嵌套该代码。引号用模板字符串】 |
控制台输出 | 描述 |
console.log(“控制台输出内容”) | 在控制台可以看见输出内容 |
4.2 输入【弹框输入】
弹框输入 | 描述 |
prompt(“弹框输入框输入再确认”) | 会弹出输入框,用户输入数据后,会弹出确认取消按钮【点击确认,返回值为用户输入的数据;点击取消,返回值为null】,返回值都为字符串类型 |
确认框 | 描述 |
confirm(“提示确认文本”) | 没有输入框,但会有确认和取消按钮,提示用户确认信息,是会有返回值的;返回值为布尔值,true或false |
5 字面量
数据本身就是字面量
1 | 数字字面量 |
‘’ | 字符串字面量【引号引起来的数据是字符串】 |
[] | 数组字面量 |
{} | 对象字面量 |
6 变量
变量是一个可变化的量,用于保存数据的容器。
声明变量的本质是在内存中开辟一个空间的名字,不是数据本身。
变量不能重复声明,但可以重复赋值【会销毁原来的数据,保存新的数据】
6.1 变量声明
语法 | 描述 |
let 变量名 | 变量声明,没有赋值则返回值为undefined |
6.2 变量赋值
语法 | 描述 |
变量名 = 数据 | 将数据保存到变量名中 |
6.3 使用变量中的数据【使用变量】
语法 | 描述 |
变量名 | 直接使用变量名就可以得到变量保存的数据 |
6.4 变量初始化
语法 | 描述 |
let 变量名 = 数据 | 声明变量的同时进行赋值 |
6.5 一次声明多个变量
语法 | 描述 |
let 变量1名 = 数据1, 变量2名 = 数据2,…; | 一次初始化多个变量可以在let关键字后面直接进行变量赋值,多个变量赋值之间用逗号分隔 |
7 取名规则
变量名必须以:字母、下划线_、$、数字命名,数字不能开头 |
变量不能使用关键字和保留字作为变量名 |
8 取名规范
变量名需要有意义【见名知意】 |
多个单词使用小驼峰命名法【第一个单词首字母小写,后面单词首字母大写】 |
9 常量
常量值是不可用修改的【只能赋值一次,再次赋值会报错】
获取页面元素时声明的DOM对象一般都用const声明。
常量命令用大写字母单词表示
10 赋值语句【赋值运算符:存储数据的符号】
变量或常量 = 字面量或变量或常量
11 数据类型
不同的数据在存储和使用时,会有不同的处理方式,我们根据不同的方式对数据进行划分。
11.1 基本数据类型
基本数据类型 | 描述 |
number | 数字类型【infinity:无穷的;NaN非数字;数字】 |
string | 字符串类型,有成对引号包裹起来的字符【字符串要成对出现;可以单引里面嵌套双引号;也可以双引号里面嵌套单引号;】 |
boolean | 布尔值类型,返回值为true或false |
undefined | 未定义【已经声明,没有赋值】【应用:不会主动使用,判断变量是否有赋值过程的】 |
null | 空【应用:可以主动使用,有赋值过程,还不确定变量的值时什么的时候用。】 |
11.2 复杂数据类型
检测复杂数据类型的返回值都为object
复杂数据类型 | 描述 |
[] | 数组 |
{} | 对象 |
12 检测数据类型
语法1 | 描述 |
typeof 目标数据 | 检测目标数据的数据类型【null检测的数据类型为object】 |
语法2 | 描述 |
typeof (目标数据) | 检测目标数据的数据类型【null检测的数据类型为object】 |
13 算术运算符
运算符:对数据进行运算的符号
算术运算符:对数据进行算术运算的符号【除了+算术运算符之外,对不是算术运算的式子会进行隐式转换:将不是数字类型的值会先转换为数字类型,转不了的返回值为NaN,等价于用Number(数据)方法转换。】
表达式:由运算符参与的式子叫表达式【表达式一定会有返回值】
算术表达式:由算术运算符参与的式子叫算术表达式
优先级 | 语法 | 描述 |
1 | () | 先算圆括号里面的运算 |
2 | ++【自增】、--【自减】 | |
3 | *【乘】、/【除】、%【求余或取模】 | 再算乘除取余 |
4 | +、- | 最后加减 |
6 | =【赋值运算符】 |
14 自增自减
当自增自减同时出现在算术表达式中时,先从左到右,再由整体到局部【a++就当整体的值,然后a的值自增的1当局部的a新值,继续执行表达式中整体a++右边后面的代码】【表达式中的自增自减:整体做计算,局部做递增】
自增自减可以将字符串转为数字,不能转为数字的字符串会是NaN一个坏值
语法 | 描述 |
b=a++ | 后置自增【先赋值,后自增:会先将a原来的值赋值给b,然后a自增】 |
b=++a | 前置自增【先自增后赋值:会先将a自增,再将自增后的结果赋值给b】 |
b=a-- | 后置自减【先赋值,后自减:会先将a原来的值赋值给b,然后a自减】 |
b=--a | 【先自减,后赋值:会先将a自减,再将自减后的结果赋值给b】 |
15 连接符+
当+左右两边有一边是字符串时,+起的作用就是拼接
16 表达式运算顺序【优先级】:
优先级 | 符号 | 描述 |
1 | () | 小括号 |
2 | ++、-- | 前置自增、前置自减 |
3 | ! | 逻辑非 |
4 | *、/、% | 乘除、求余 |
5 | +、- | 加减 |
6 | >、>=、<、<= | 关系运算 |
7 | = | 赋值 |
8 | , | 逗号运算 |
17 模板字符串
``反引号引起来的字符串,反引号里面的变量用${变量名}来写,这样变量可以被解析
18 常见报错信息
报错信息 | 描述 |
变量名 is not defined at 多少行 | 变量未定义 |
Uncaught SyntaxError:missing 符号 after argument list | 符号有问题 |
19 比较运算符
比较运算符返回值为布尔值,true或false
符号 | 描述 |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 内容判断是否一样 |
=== | 全等判断【内容和数据类型是否都一样】 |
!= | 内容不等判断 |
!== | 值不全等判断【内容和数据类型是否有一个不一样】 |
20 数据类型转换显示转数字类型
转换语法 | 描述 |
parseInt(数据) | 将数据转为整数【取整,从左往右遇到非数字结束,不是以数字开头,返回值为NaN】【主要用于以数字开头的字符串转数字】 |
parseFloat(数据) | 将数据转为浮点数【遇到小数点之外的非数字部分结束,不是以数字开头,返回值为NaN】【主要用于以数字开头的字符串转数字】 |
Number(数据) | 有非数字部分和undefined时,返回值为NaN,其他类型和数据都可以转换。 |
21 数据类型转换显示转字符串
一般使用String(数据或变量)这个写法【推荐写法】
语法 | 描述 |
String(数据或变量) | 直接给数据【变量保存的值】外面套一个引号 |
变量.toString() | 将变量转为字符串,如果有参数,当变量为数字时,会将数字转换为参数进制后再转为字符串。【主要用于做进制转换】 |
字符串.toString() | 无意义的写法 |
22 数据类型转换显示转为boolean类型
Boolean()方法的返回值为布尔值,只能是true或false
语法 | 描述 |
Boolean(数据) | 当数据为0、-0、false、’’、undefined、NaN、null是返回值为false;其余值返回值为true |
23 隐式转换
当数值不能直接计算,或者运算符两边数据类型不一致的时候,编译器会转成一致后运算。
除+符号以外的算术运算,会将表达式中的每一项转为数字类型【Number()】
+做为表达式中的取正符号时,会将其他数据类型的数据转为数字类型【Number()方法转,转不了返回值为NaN】
当+起连接作用时【+两边都有值且有一边为字符串时】,会将表达式中的非字符串项转为字符串类型【String()】
24 语句
控制编译器执行代码的语句,做什么
表达式:有运算符参与的式子,会有一个返回值。
25 流程控制
顺序结构【代码从上到小依次执行】
分支结构【根据顺序条件选择对应分支执行】
循环结构
26 分支结构
根据条件选择一个分支执行。
27 if单分支结构
条件判断的时候用
语法 | 描述 |
if(判定条件){ 条件成立,执行代码 } | 判断条件为变量或表达式【返回值为布尔值或者返回值可以转为布尔值】,条件成立执行分支语句,不成立就继续执行if语句后面的代码。 |
28 双分支结构
二选一的时候用
语法 | 描述 |
if(条件判断){ 条件成立,执行的代码 }else{ 条件不成立,执行的代码 } | 条件为真,执行该条件分支语句,条件不成立,执行else分支语句 |
29 多分支结构
多选一的时候用
语法 | 描述 |
if(条件判断){ 条件成立,执行的代码 }else if(条件判断){ 条件不成立,执行的代码 } else if(条件判断){ 条件不成立,执行的代码 }… else{ 其他条件执行的代码 } | 按条件出现的顺序判断条件是否成立,选择第一个条件成立的分支来执行 |
30 条件对比
30.1 假设法
需要求什么值,就假设该值为一个变量
30.2 枚举法
if一直嵌套,把所有条件列举出来
30.3 累加法
自定义累加变量【初始值为0】 += 累加项变量
30.4 标记法
使用flag当开关
使用index做计数器
31 逻辑表达式
逻辑中断【短路】:在逻辑表达式中,当左边的式子【表达式中的项】可以决定整个式子的结果时,就返回左边式子【表达式中的项】的值,右边不执行,否则返回右边式子【表达式中的项】的值
31.1 逻辑与
符号 | 描述 |
&& | 逻辑与符号 |
语法 | 描述 |
表达1 && 表达式2 | 当表达式1的值为真时,返回表达式2的值。当表达式1的值为假时,返回表达式1的值。【代码执行到第一个表达式值为假的表达式结束。】 |
表达式1 && 表达式2 && … | 返回第一个表达式结果为假的表达式的值【代码执行到第一个表达式值为假的表达式结束,返回第一个表达式为假的表达式的值。如果所有表达式返回值都为真,整个表达式返回值为最后一个表达式为真的表达式】 |
31.2 逻辑或
符号 | 描述 |
|| | 逻辑或符号 |
语法 | 描述 |
表达式1 || 表达式2 | 表达式1的值为真,返回表达式1的值;表达式1的结果为假,返回表达式2的值 |
表达式1 || 表达式2 ||… | 返回第一个表达式结果为真的表达式的值【代码执行到第一个表达式值为真的表达式结束,返回第一个表达式为真的表达式的值。如果所有表达式返回值都为假,整个表达式返回值为最后一个表达式为假的表达式】 |
32 三元表达式
语法 | 描述 |
条件判断 ? 条件成立分支 : 条件不成立分支; | 条件判断为真,执行冒号前面的条件成立分支语句;条件判断为假,执行冒号后面的条件不成立分支语句。 |
33 switch
穿透:代码从上一个case无条件的执行到下一个case的情况【产生条件:去掉break】
当switch的case语句后面没有break语句时,会有case穿透,遇到break语句才会退出switch语句【case穿透的运用场景:当匹配值中有多个固定值的执行代码是一样的时候,可以利用case穿透】
一个if语句会在程序的执行流程中产生一个分支,但是当条件有多个分支,并且所有的分支都依赖于一个变量的值时,多个if语句重复性地检测同一个变量的值将会造成资源浪费。而switch语句正是用来处理这种情况的,它比if语句要高校得多。
语法 | 描述 |
switch(匹配值){ case 固定值1: 代码块 break; case 固定值2: 代码块 break; default: 代码块 break; } | 用switch中的匹配值去和case后面的固定值进行匹配,匹配成功执行该case固定值下面的代码,每个case固定值后面代码的末尾需要加break语句【用于中断case语句的执行。】 |
case穿透语法 | 描述 |
switch (匹配值) { case 固定值1: case 固定值2: case 固定值3: 代码块; break; default: break; } | 当匹配值在多个固定值下面执行相同代码时,可以利用case穿透 |
34 循环语句
使用场景:相同代码需要重复使用
34.1 while循环
语法 | 描述 |
let 计数变量【计数器】=初始化值 while(表达式){ 循环体 计数变量操作【操作表达式】 } | 表达式的返回值为true或false,表达式返回值为true,执行while循环的循环体;表达式返回值为false,跳出while循环 为了避免死循环,需要给表达式设置计数器变量,而计数器变量以及计数器变量的操作表达式用于控制循环的次数。 |
34.2 do-while循环
语法 | 描述 |
let 计数变量【计数器】=初始化值 do{ //循环体 计数变量操作【操作表达式】 }while(判定条件) | do循环和while循环最大的区别便是:对循环控制条件的求值发生在每次循环结束之后。因此,即使循环控制条件的首次求职结果为false,大括号里的语句也至少会被执行一次。 |
34.3 while循环应用
不是某些状态不是固定值,就一直执行该代码
常见语句 | 等价语句 |
while(1){ if(判定条件){ 只需执行一次的代码 break; }else{ 循环体 判定条件中的变量自增或自减操作【也可以是可以直接返回布尔值的变量重新获取】 } } | While(!(判定条件)){ 循环体 判定条件中的变量自增或自减操作【也可以是可以直接返回布尔值的变量重新获取】 } 只需执行一次的代码 |
35 for循环
语法 | 描述 |
for(变量声明赋值;条件判定;变量自增/自减){ 循环体 } | 先将变量声明赋值的值进行条件判断,为真走循环体【为假直接跳过循环】,然后进行变量自增/自减操作,再进行条件判定为真走循环体【为假直接跳过循环】,然后继续上述红色字体过程 |
节流语法 | 描述 |
for(变量声明赋值;条件判定;变量自增/自减){ if(节流条件判定){ break; } 循环体 } | 节流条件为真时,退出循环。 |
for/in语法 | 描述 |
for(variable in object){ //执行语句 } | variable是指一个变量名,声明一个变量的var语句,数组的一个元素或者是对象的一个属性。object是一个对象名,或者是计算结果为对象的表达式。 |
36 结束循环
语法 | 描述 |
break | 用于结束当前整个循环体【结束break的最内侧循环或者退出一个switch语句】 |
continue | 用于结束当前循环,继续下一次循环。 |
37 常见if等价条件判定
条件 | 推荐等价条件 |
变量名 == true | 变量名 |
变量名 == false | !变量名 |
语句 | 推荐等价语句 |
if(判定条件){ 调用函数 } | 判定条件 && 调用函数 |
语句 | 推荐等价语句 |
if(判定条件1){ 重复目标语句 }else if(判定条件2){ 重复目标语句 } | if(判定条件1 || 判定条件2){ 重复目标语句 } |
if(判定条件1){ if(判定条件2){ 目标语句 } } | if(判定条件1 && 判定条件2){ 目标语句 } |
38 循环嵌套
外侧for循环用于控制有多少行,内层for循环用于控制每行有多少个字符
39 数组
变量存储:多个数据,每个数据都需要一个变量来存储,代码冗余,数据之间没有关联
数组存储:所有数据只需一个变量存储,单个数据之间用逗号分隔,代码简洁,
39.1 什么是数组
一种复杂的数据类型,符号就是[]
39.2 语法
语法 | 描述 |
let 数组名 = [数据1,数据2,…] | 方括号里面存放数据,数据之间用逗号分隔。 |
39.3 数组三要素
下标和数组长度是自动获取的【数组定义好,下标和长度就确定了】。
要素 | 描述 |
元素 | 数组中的数据【获取数组中的元素:数组名[下标]】 |
下标 | 元素的位置【下标从0开始】【最后一个元素的下标=元素名.length-1】 |
长度 | 元素的个数【获取数组的长度:数组名.length】 |
39.4 查询数据【获取数据】
通过数组下标获取元素位置,通过数组名[索引号]获取数据
当获取数据的索引在数组中没有时,获取数据得到的结果为undefined
获取单个数据语法 | 描述 |
数组名[索引号] | 获取索引号对应的数据 |
获取所有数据语法 | 描述 |
for(let i=0;i<数组名.length;i++){ 数组名[i] } | 通过for循环遍历数组,因为数组索引从0开始,所以索引变量i初始化为0。 |
39.5 修改数组数据
通过数组下标获取元素位置,通过数组名[索引号]获取数据,通过数组名[索引号] = 新数据修改数组目标元素数据
语法 | 描述 |
数组名[索引号] = 新数据 | 修改数组某个元素的值,数组就会更新 |
39.6 新增数组数据
语法1 | 描述 |
数组名[新索引号] = 新增数据值 | 新索引号存放新增数据值,新索引号与原最大索引号之间的数据会用empty占位 |
语法2【推荐】 | 描述 |
数组名[数组名.length] =新增数据值 | 该方法可以在数组中新增数据,不会有empty占位问题,新数据和原数据之间索引位置是依次增大的【相邻的】 |
40 数组方法
40.1 新增数据
语法 | 描述 |
数组名.unshift(数据1 , 数据2,…) | 将参数数据整体放在数组数据中,放在数组的最前面,会更新数组;返回值为更新后数组的长度 |
数组名.push(数据1,数据2,…) | 将多个数据整体放在数组数据中,放在数据的最后面,会更新数组;返回值为跟新后数组的长度 |
数组名.splice(新增索引位置【数字】,0,数据1,数据2,…)= | 在索引位置删除0个数据,并在该索引位置添加第三个参数及后面的参数数据。返回值为删除的数据【这里没有删除数据就返回空数组】 |
40.2 删除数据
语法 | 描述 |
数组名.shift() | 删除数组的第一个数据,没得参数,每次只能删除一个数据,会更新数组;返回值为删除的那个数据【原数组第一个数据】 |
数组名.pop() | 删除数组的最后一个数据,没得参数,每次只能删除一个数据,会更新数组;返回值为删除的那个数据【原数组最后一个数据】 |
数组名.splice(值1,值2,值3,…) | 值1为开始下标位置,值2是删除数据个数【为0表示不删除数据】,值3开始到后面的数据表示新增的数据【位置从值1索引位置开始】;会更新数组;返回值为被删除的数组元素组成的数组【可以只有值1和值2】 |
数组名.splice(删除位置索引,删除元素个数) | 这个方法可以删除数组中的元素,实时更新数组,所以在删除数据那一瞬间,后续的数据后填充到删除数据的索引位置,后续的数据索引号也就更新了,所以在遍历数组的时候,删除了原数组中的几个元素,那一步就需要对索引进行减几的操作 |
40.3 修改数据
语法 | 描述 |
数组名.splice(修改位置索引,1,修改值) | 将索引号为修改位置索引的元素删除它,并修改为修改值;返回值为删除的元素 |
42 js字符串拼接方式创建页面结构
步骤 | 语法 | 描述 |
1 | 定义字符串变量str=’’ | 用于拼接页面html结构 |
2 | str+=`html结构` | html结构写在模板字符串中,这样可以利用${变量名}的方式添加数据到html结构的内容中或html的属性中去 |
3 | document.write(str) | 将html结构重绘到页面上【可以将其写在script标签中,然后将该script标签放在某个元素最后一个子元素上,就表示再该元素的内部创建相关html元素上去。】 |
43 函数
一段代码 被多次重复使用时 可以使用函数
与for循环区别:for循环结构循环体会立即执行,而函数的函数体可以控制执行的时机。
参数本质:实参给形参赋值的过程。
形参个数可以和实参个数不一致,多的形参,形参在函数体内使用时为undefined,多的实参没有任何作用
函数只是执行没有return返回值得到的结果是undefined。
return 有两个作用:返回函数结果、结束函数【return后面的代码块不再执行】
函数声明语法 | 描述 |
function 函数名(形参列表){ 函数体 return 返回值或表达式 } | 函数不调用,函数体里面的代码不执行,形参之间用逗号分隔 |
函数调用语法 | 描述 |
函数名(实参列表) | 调用函数,执行对应的函数名下面的函数体。实参列表中的实参用逗号分隔 |
43.1 函数参数默认值设置
当调用者没有传参或者遗漏时,我们需要让形参有一个默认值。
语法一【推荐】 | 描述 |
function 函数名(形参1 = 默认值1 , 形参2 = 默认值2,…){ 函数体 return 返回值或表达式 } | 当函数调用没有传值时,没有匹配到实参的形参会使用默认值 |
语法二 | 描述 |
function 函数名(形参1, 形参2,…){ 形参1 = 形参1 || 默认值1 形参2 = 形参2 || 默认值1 函数体 return 返回值或表达式 } | 当函数调用没有传值时,没有匹配到实参的形参会使用默认值 |
44 js作用域
全局作用域:函数外部声明的变量【没有被{}包裹的变量】
局部作用域:函数内部声明的变量
块级作用域:分支或者循环语句大括号声明的变量
功能:避免变量污染【变量同名导致冲突】
函数内部没有声明的变量会当全局变量处理
没有被{}包裹的变量,且该变量没有声明直接赋值,会当全局变量处理【函数体内的变量,没有声明该变量,该变量也会当全局变量处理】
45 匿名函数【函数表达式】
匿名函数:没有名字的函数
作用:开辟局部作用域,避免变量污染
语法1 | 描述 |
(function(){})() | 立即执行函数,或叫自执行函数 |
语法2 | 描述 |
(function(){}()) | 立即执行函数,或叫自执行函数 |
语法3 | 描述 |
let 变量名 = function(){} | 具名写法【需要变量调用执行】 |
46 对象
对象:JavaScript里的一种数据类型
46.1 对象与数组异同点
相同点 | 不同点 |
都是复杂数据类型,可以存储多个数据 | 数组是有序存储:元素会按照顺序来存储【一般存储有序的相似数据】 |
对象是无序存储:属性值是无序的【一般存储无序的关联数据】 |
46.2 对象查询语法
声明语法 | 描述 |
let 对象名={ 属性名1:属性值1, 属性名2:属性值2, … 方法名1:function(){方法体} } | 声明对象的字面量为{},对象属性和属性值之间用冒号隔开。多个属性之间用逗号分隔。 |
使用语法 | 描述 |
对象名.属性名 | 获取对象中的属性对应的属性值 |
对象名[‘属性名’] | 获取对象中的属性对应的属性值 |
对象名.方法名() | 使用对象中的方法 |
对象名[变量] | 通过变量获取对象中的变量值属性对象的属性值。 |
46.3 对象新增属性
语法 | 描述 |
对象名.新属性名=属性值 | 给对象添加新属性 |
46.4 对象修改属性【原属性重新赋值】
语法 | 描述 |
对象名.原属性名=修改后的属性值 | 修改原对象中的属性对应的属性值 |
46.5 对象删除属性
语法 | 描述 |
delete 对象名.属性名 | 删除对象中的某个属性名 |
46.6 遍历对象
语法 | 描述 |
for(let key in obj){ key obj[key] } | key为变量:在遍历对象中为对象的属性名。 obj:为需要遍历对象的对象名 obj[key]:遍历对象的每一个属性值 |
46.7 内置对象
对象 | 语法 | 描述 |
Math | Math.PI | 圆周率 |
Math.random() | 返回0-1之间的随机数 Math.random()*目标值:返回0到目标值【左闭右开】之间的数 (Math.random()*值)+最小值:返回[最小值 | |
Math.ceil() | 向上取整 | |
Math.floor() | 向下取整 | |
Math.round() | 四舍五入 | |
Math.max(实参列表) | 返回值为实参列表中的最大值 | |
Math.min(实参列表) | 返回值为实参列表中的最小值 | |
Math.pow(底数,次数) | 返回值为底数的次数 | |
Math.abs(目标值) | 返回目标值的绝对值 | |
data对象 | let 自定义data时间对象名=new date() | 创建一个data时间对象 |
自定义data时间对象名.getTime() | 时间戳 | |
47 引用数据类型和值类型
48 字符串的方法
49
标签:2js,变量,基础,语法,数组,返回值,数据,表达式 From: https://www.cnblogs.com/BlueGirl/p/17013562.html