2js基础

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>

js单行注释【快捷键：ctrl + /】

//单行注释内容

js块注释【多行注释】【快捷键：shift + alt + A】

/*

块注释

*/

弹窗输出

描述

alert(“输出内容”)

打开页面就弹出内容

页面输出

描述

document.write(“页面输出内容”)

页面输出内容会在原网页的最后一个元素后面输出在页面上【可以解析标签】【需要在哪个元素里面输出内容，就在哪个元素里面写script标签，然后嵌套该代码。引号用模板字符串】

控制台输出

描述

console.log(“控制台输出内容”)

在控制台可以看见输出内容

弹框输入

描述

prompt(“弹框输入框输入再确认”)

会弹出输入框，用户输入数据后，会弹出确认取消按钮【点击确认，返回值为用户输入的数据；点击取消，返回值为null】，返回值都为字符串类型

确认框

描述

confirm(“提示确认文本”)

没有输入框，但会有确认和取消按钮，提示用户确认信息，是会有返回值的；返回值为布尔值，true或false

1

数字字面量

‘’

字符串字面量【引号引起来的数据是字符串】

[]

数组字面量

{}

对象字面量

语法

描述

let 变量名

变量声明，没有赋值则返回值为undefined

语法

描述

变量名 = 数据

将数据保存到变量名中

语法

描述

变量名

直接使用变量名就可以得到变量保存的数据

语法

描述

let 变量名 = 数据

声明变量的同时进行赋值

语法

描述

let 变量1名 = 数据1, 变量2名 = 数据2,…;

一次初始化多个变量可以在let关键字后面直接进行变量赋值，多个变量赋值之间用逗号分隔

变量名必须以：字母、下划线_、$、数字命名，数字不能开头

变量不能使用关键字和保留字作为变量名

变量名需要有意义【见名知意】

多个单词使用小驼峰命名法【第一个单词首字母小写，后面单词首字母大写】

基本数据类型

描述

number

数字类型【infinity：无穷的；NaN非数字；数字】

string

字符串类型，有成对引号包裹起来的字符【字符串要成对出现；可以单引里面嵌套双引号；也可以双引号里面嵌套单引号；】

boolean

布尔值类型，返回值为true或false

undefined

未定义【已经声明，没有赋值】【应用：不会主动使用，判断变量是否有赋值过程的】

null

空【应用：可以主动使用，有赋值过程，还不确定变量的值时什么的时候用。】

复杂数据类型

描述

[]

数组

{}

对象

语法1

描述

typeof 目标数据

检测目标数据的数据类型【null检测的数据类型为object】

语法2

描述

typeof (目标数据)

检测目标数据的数据类型【null检测的数据类型为object】

优先级

语法

描述

1

()

先算圆括号里面的运算

2

++【自增】、--【自减】

3

*【乘】、/【除】、%【求余或取模】

再算乘除取余

4

+、-

最后加减

6

=【赋值运算符】

语法

描述

b=a++

后置自增【先赋值，后自增：会先将a原来的值赋值给b，然后a自增】

b=++a

前置自增【先自增后赋值：会先将a自增，再将自增后的结果赋值给b】

b=a--

后置自减【先赋值，后自减：会先将a原来的值赋值给b，然后a自减】

b=--a

【先自减，后赋值：会先将a自减，再将自减后的结果赋值给b】

优先级

符号

描述

1

()

小括号

2

++、--

前置自增、前置自减

3

！

逻辑非

4

*、/、%

乘除、求余

5

+、-

加减

6

>、>=、<、<=

关系运算

7

=

赋值

8

,

逗号运算

报错信息

描述

变量名 is not defined at 多少行

变量未定义

Uncaught SyntaxError:missing 符号 after argument list

符号有问题

符号

描述

>

大于

>=

大于等于

<

小于

<=

小于等于

==

内容判断是否一样

===

全等判断【内容和数据类型是否都一样】

!=

内容不等判断

!==

值不全等判断【内容和数据类型是否有一个不一样】

转换语法

描述

parseInt(数据)

将数据转为整数【取整，从左往右遇到非数字结束，不是以数字开头，返回值为NaN】【主要用于以数字开头的字符串转数字】

parseFloat(数据)

将数据转为浮点数【遇到小数点之外的非数字部分结束，不是以数字开头，返回值为NaN】【主要用于以数字开头的字符串转数字】

Number(数据)

有非数字部分和undefined时，返回值为NaN,其他类型和数据都可以转换。

语法

描述

String(数据或变量)

直接给数据【变量保存的值】外面套一个引号

变量.toString()

将变量转为字符串，如果有参数，当变量为数字时，会将数字转换为参数进制后再转为字符串。【主要用于做进制转换】

字符串.toString()

无意义的写法

语法

描述

Boolean(数据)

当数据为0、-0、false、’’、undefined、NaN、null是返回值为false；其余值返回值为true

语法

描述

if(判定条件){

条件成立，执行代码

}

判断条件为变量或表达式【返回值为布尔值或者返回值可以转为布尔值】，条件成立执行分支语句，不成立就继续执行if语句后面的代码。

语法

描述

if(条件判断){

条件成立，执行的代码

}else{

条件不成立，执行的代码

}

条件为真，执行该条件分支语句，条件不成立，执行else分支语句

语法

描述

if(条件判断){

条件成立，执行的代码

}else if(条件判断){

条件不成立，执行的代码

} else if(条件判断){

条件不成立，执行的代码

}…

else{

其他条件执行的代码

}

按条件出现的顺序判断条件是否成立，选择第一个条件成立的分支来执行

符号

描述

&&

逻辑与符号

语法

描述

表达1 && 表达式2

当表达式1的值为真时，返回表达式2的值。当表达式1的值为假时，返回表达式1的值。【代码执行到第一个表达式值为假的表达式结束。】

表达式1 && 表达式2 && …

返回第一个表达式结果为假的表达式的值【代码执行到第一个表达式值为假的表达式结束，返回第一个表达式为假的表达式的值。如果所有表达式返回值都为真，整个表达式返回值为最后一个表达式为真的表达式】

符号

描述

||

逻辑或符号

语法

描述

表达式1 || 表达式2

表达式1的值为真，返回表达式1的值；表达式1的结果为假，返回表达式2的值

表达式1 || 表达式2 ||…

返回第一个表达式结果为真的表达式的值【代码执行到第一个表达式值为真的表达式结束，返回第一个表达式为真的表达式的值。如果所有表达式返回值都为假，整个表达式返回值为最后一个表达式为假的表达式】

语法

描述

条件判断 ? 条件成立分支 : 条件不成立分支;

条件判断为真，执行冒号前面的条件成立分支语句；条件判断为假，执行冒号后面的条件不成立分支语句。

语法

描述

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穿透

语法

描述

let 计数变量【计数器】=初始化值

while(表达式){

循环体

计数变量操作【操作表达式】

}

表达式的返回值为true或false，表达式返回值为true，执行while循环的循环体；表达式返回值为false，跳出while循环

为了避免死循环，需要给表达式设置计数器变量，而计数器变量以及计数器变量的操作表达式用于控制循环的次数。

语法

描述

let 计数变量【计数器】=初始化值

do{

//循环体

计数变量操作【操作表达式】

}while(判定条件)

do循环和while循环最大的区别便是：对循环控制条件的求值发生在每次循环结束之后。因此，即使循环控制条件的首次求职结果为false，大括号里的语句也至少会被执行一次。

常见语句

等价语句

while(1){

if(判定条件){

只需执行一次的代码

break;

}else{

循环体

判定条件中的变量自增或自减操作【也可以是可以直接返回布尔值的变量重新获取】

}

}

While(!(判定条件)){

循环体

判定条件中的变量自增或自减操作【也可以是可以直接返回布尔值的变量重新获取】

}

只需执行一次的代码

语法

描述

for(变量声明赋值;条件判定;变量自增/自减){

循环体

}

先将变量声明赋值的值进行条件判断，为真走循环体【为假直接跳过循环】，然后进行变量自增/自减操作，再进行条件判定为真走循环体【为假直接跳过循环】，然后继续上述红色字体过程

节流语法

描述

for(变量声明赋值;条件判定;变量自增/自减){

if(节流条件判定){

break;

}

循环体

}

节流条件为真时，退出循环。

for/in语法

描述

for(variable in object){

//执行语句

}

variable是指一个变量名，声明一个变量的var语句，数组的一个元素或者是对象的一个属性。object是一个对象名，或者是计算结果为对象的表达式。

语法

描述

break

用于结束当前整个循环体【结束break的最内侧循环或者退出一个switch语句】

continue

用于结束当前循环，继续下一次循环。

条件

推荐等价条件

变量名 == true

变量名

变量名 == false

!变量名

语句

推荐等价语句

if(判定条件){

调用函数

}

判定条件 && 调用函数

语句

推荐等价语句

if(判定条件1){

重复目标语句

}else if(判定条件2){

重复目标语句

}

if(判定条件1 || 判定条件2){

重复目标语句

}

if(判定条件1){

if(判定条件2){

目标语句

}

}

if(判定条件1 && 判定条件2){

目标语句

}

语法

描述

let 数组名 = [数据1,数据2,…]

方括号里面存放数据，数据之间用逗号分隔。

要素

描述

元素

数组中的数据【获取数组中的元素：数组名[下标]】

下标

元素的位置【下标从0开始】【最后一个元素的下标=元素名.length-1】

长度

元素的个数【获取数组的长度：数组名.length】

获取单个数据语法

描述

数组名[索引号]

获取索引号对应的数据

获取所有数据语法

描述

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

数组名[i]

}

通过for循环遍历数组，因为数组索引从0开始，所以索引变量i初始化为0。

语法

描述

数组名[索引号] = 新数据

修改数组某个元素的值，数组就会更新

语法1

描述

数组名[新索引号] = 新增数据值

新索引号存放新增数据值，新索引号与原最大索引号之间的数据会用empty占位

语法2【推荐】

描述

数组名[数组名.length] =新增数据值

该方法可以在数组中新增数据，不会有empty占位问题，新数据和原数据之间索引位置是依次增大的【相邻的】

语法

描述

数组名.unshift(数据1 , 数据2,…)

将参数数据整体放在数组数据中，放在数组的最前面，会更新数组；返回值为更新后数组的长度

数组名.push(数据1,数据2,…)

将多个数据整体放在数组数据中，放在数据的最后面，会更新数组；返回值为跟新后数组的长度

数组名.splice(新增索引位置【数字】,0,数据1,数据2,…)=

在索引位置删除0个数据，并在该索引位置添加第三个参数及后面的参数数据。返回值为删除的数据【这里没有删除数据就返回空数组】

语法

描述

数组名.shift()

删除数组的第一个数据，没得参数，每次只能删除一个数据，会更新数组；返回值为删除的那个数据【原数组第一个数据】

数组名.pop()

删除数组的最后一个数据，没得参数，每次只能删除一个数据，会更新数组；返回值为删除的那个数据【原数组最后一个数据】

数组名.splice(值1,值2,值3,…)

值1为开始下标位置，值2是删除数据个数【为0表示不删除数据】，值3开始到后面的数据表示新增的数据【位置从值1索引位置开始】；会更新数组；返回值为被删除的数组元素组成的数组【可以只有值1和值2】

数组名.splice(删除位置索引,删除元素个数)

这个方法可以删除数组中的元素，实时更新数组，所以在删除数据那一瞬间，后续的数据后填充到删除数据的索引位置，后续的数据索引号也就更新了，所以在遍历数组的时候，删除了原数组中的几个元素，那一步就需要对索引进行减几的操作

语法

描述

数组名.splice(修改位置索引,1，修改值)

将索引号为修改位置索引的元素删除它，并修改为修改值；返回值为删除的元素

步骤

语法

描述

1

定义字符串变量str=’’

用于拼接页面html结构

2

str+=`html结构`

html结构写在模板字符串中，这样可以利用${变量名}的方式添加数据到html结构的内容中或html的属性中去

3

document.write(str)

将html结构重绘到页面上【可以将其写在script标签中，然后将该script标签放在某个元素最后一个子元素上，就表示再该元素的内部创建相关html元素上去。】

函数声明语法

描述

function 函数名(形参列表){

函数体

return 返回值或表达式

}

函数不调用，函数体里面的代码不执行，形参之间用逗号分隔

函数调用语法

描述

函数名(实参列表)

调用函数，执行对应的函数名下面的函数体。实参列表中的实参用逗号分隔

语法一【推荐】

描述

function 函数名(形参1 = 默认值1 , 形参2 = 默认值2,…){

函数体

return 返回值或表达式

}

当函数调用没有传值时，没有匹配到实参的形参会使用默认值

语法二

描述

function 函数名(形参1, 形参2,…){

形参1 = 形参1 || 默认值1

形参2 = 形参2 || 默认值1

函数体

return 返回值或表达式

}

当函数调用没有传值时，没有匹配到实参的形参会使用默认值

语法1

描述

(function(){})()

立即执行函数，或叫自执行函数

语法2

描述

(function(){}())

立即执行函数，或叫自执行函数

语法3

描述

let 变量名 = function(){}

具名写法【需要变量调用执行】

相同点

不同点

都是复杂数据类型，可以存储多个数据

数组是有序存储：元素会按照顺序来存储【一般存储有序的相似数据】

对象是无序存储：属性值是无序的【一般存储无序的关联数据】

声明语法

描述

let 对象名={

属性名1：属性值1,

属性名2：属性值2,

…

方法名1：function(){方法体}

}

声明对象的字面量为{}，对象属性和属性值之间用冒号隔开。多个属性之间用逗号分隔。

使用语法

描述

对象名.属性名

获取对象中的属性对应的属性值

对象名[‘属性名’]

获取对象中的属性对应的属性值

对象名.方法名()

使用对象中的方法

对象名[变量]

通过变量获取对象中的变量值属性对象的属性值。

语法

描述

对象名.新属性名=属性值

给对象添加新属性

语法

描述

对象名.原属性名=修改后的属性值

修改原对象中的属性对应的属性值

语法

描述

delete 对象名.属性名

删除对象中的某个属性名

语法

描述

for(let key in obj){

key

obj[key]

}

key为变量：在遍历对象中为对象的属性名。

obj：为需要遍历对象的对象名

obj[key]：遍历对象的每一个属性值

对象

语法

描述

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()

时间戳