JavaScript 前端的灵魂?

71 阅读9分钟

javascript组成

1.ECMASCRIPT:JavaScript的基础语法。

2.BOM:(Browser Object Model) 浏览器对象模型。

弹出框、浏览器跳转、获取分辨率等。

3.DOM:(Document Object Model) 文档对象模型。

操作页面中的元素。加个div 减个div 换位置等。

js引入方式

1.行内式js代码(不常用)

使用a标签的方式点击一下试试

非a标签的方式onclick='js语法'(js语法需要写在一个行为中)

2.内嵌式

写在head标签尾部或者body标签尾部。

(可以是页面内的任意位置)

3.外链式(推荐)

新建 .js 后缀的文件,在文件内书写 js 代码(可以有多个)

(可以是绝对路径或者相对路径)

js注释

1.单行

// 我是一个单行注释

2多行注释

/*

我是一个多行注释

*/

js三种输出语句

  • alert() (弹出框)
  • console.log() (控制台显示)
  • document.write() (直接显示在页面)(一般不用)

js变量(重点)

变量指的是在程序中保存数据的一个容器。

定义变量并赋值:var a =100;

可以声明多个变量:var 变量名1 = 值1, 变量名2 = 值2......

注意:

  1. 一个变量名只能存储一个值
  2. 当再次给一个变量赋值的时候,前面一次的值就没有了
  3. 变量名称区分大小写(JS 严格区分大小写)

js命名规范

1.可以包含数字、字母、下划线、$、 等

2.不能使用数字开头

3.不能使用js中的关键字和保留字(以后可能会成为关键字的字符)

4.不建议使用中文变量名

关键字:arr if else for...

变量命名的建议

1.遵循语义化原则

2.采用小驼峰命名法

js中的数据类型(重点)

定义:如下的数据类型可以直接存在于 js语法中,不会报错

1.基本数据类型

number 类型

所有的数字都是number类型

string 类型

被单引号或双引号包裹的字符都是string型

boolean 类型

作用:一般用于条件判断

Boolean 结果只有两种 1.true 2.false

underfunded 类型

表示 未定义 (声明变量未赋值)

null 类型

表示空

作用:一般用于声明变量时,后续修改重新赋值,初始化没有赋值,那这时候就初始化赋空值

2.复杂数据类型

后续讲:对象 数组 函数

判断数据类型(typeof)

用于判断基本数据类型。

1.typeof 变量名

2.typeof(变量)

区别:typeof 只能检测紧跟着的一个变量;typeof()先运算小括号里,然后使用typeof 去检测结果的数据类型

*特殊的:

typeof(null); 返回值为object

isNaN(变量) 判断变量是否是一个非数字

结果返回Boolean类型 true或者false

true表非数字

false表数字

isNaN( )存在隐式转换 先转换为number()数字型

数据类型转换

1.将其他数据类型转化为number 类型

Number (要转换的数据类型)结果:number 或 NaN (not a number)

parseInt(要转换的内容)

(不认识小数点,只能保留整数)

转成整数,直到一个非数字为止,停止转换,如果第一个为非数字,则结果就是NaN

parseFloat(要转换的内容)

转换成浮点数,直到一个非数字为止,则停止转换,如果第一个是非数字,则返回NaN

2.将其他数据类型转成字符串数据类型

拓展:js是单线程 只要有报错未执行的程序,后面的程序代码不会执行

语法一:变量.tostring()(undefined 和 null 不能被转换)

语法二:String(变量名)(所有的数据类型都可以使用String()转换成字符串数据类型)

3.将其他数据类型转成布尔类型

语法:Boolean(要转换的数据类型)

在 js 中,只有 ''、0、null、undefined、NaN,这些是 false

其余都是 true

运算符

1.数学运算符

+加

两边都是数字的时候才会进行加法运算

只要符号任意一边是字符串类型,就会进行字符串拼接

-减

会执行减法运算

会自动把两边都转换成数字进行运算

*乘

会执行乘法运算

会自动把两边都转换成数字进行运算

/ 除

会执行除法运算

会自动把两边都转换成数字进行运算

%(取余) 也叫模

会执行取余运算

会自动把两边都转换成数字进行运算

**(取幂)

a ** b====a的b次方

2.赋值运算符

= 等于号 赋值

+= (a+=10)相当于a = a + 10

-= (a-=10)相当于a = a - 10

= (a=10)相当于a = a *10

/= (a/=10)相当于a = a / 10

%= (a%=10)相当于a = a % 10

3.比较运算符

定义:只比较值的大小,不关心数据类型,存在隐式转换

==结果为布尔值(true或false)

注意:NaN和谁都不相等

=== 全等

定义:值相等并且数据类型也要相等才是true,否则是false

!=不等于

定义:判断值不相等,也存在隐式转换 不等于为true 等于为false

!==

定义:比较符号两边的数据类型和值是否不等,不等等于就是true 否则false

大于存在隐式转换

如果左边大于右边,为true 否则为false

<小于存在隐式转换

如果右边大于左边,为true 否则为false

=

左边大于等于右边的,为true 否则为false

<=

右边大于等于左边,为true 否则为false

4.逻辑运算符

&& 与 表示“且”(一假全假)

语句一 && 语句二 左右都是true 结果才是true 其余都是 false

| | 或运算(一真全真)

语句一 | | 语句二 其中一个是true就是true 两边都是false才是false

当遇到值时 值为真就是值

! 取反

true 会变成 false;false 会变成 true;!true 结果是 false;!false 结果是 true

5.自增自减运算符 (一元运算符)

前置++(++a): 先+1 再返回值

后置++ (a++): 先返回值 再+1

前置-- (--a) :先-1 再返回值

后置-- (a--) : 先返回值 再-1

if分支结构

1.if

if(条件语句){

执行语句

} 总结:条件语句可以是boolean值 也可以是表达式,但是表达式最终结果是boolean值

嵌套使用最好不超过五层

  1. if else

if(条件语句){

执行语句

} else{

执行语句

}

3.if else if else

if(条件语句){

执行语句

}else if(执行语句)[

执行语句

}...

有一个条件满足,其他下面的条件都不会执行

switch-case条件分支语句

语法结构:

switch(值0){

case 值1: 执行语句1;

break;

case 值2: 执行语句2

......

default: 执行语句;

break;

}

switch 当没有break 中断语句的时候,则会穿透 直到遇见break结束

switch 中 break 和 default 可省略

三元表达式(也叫三目运算符)

语法结构: 条件?执行语句1:条件语句2 当条件为true时,执行语句1 否则执行语句2

注意:三元运算符相当于if else 的简写形式 也可以嵌套

循环结构

循环必须要有某些固定的内容组成

  1. 初始化值
  2. 条件判断
  3. 要重复执行的代码
  4. 自身改变

while 循环

语法结构:while(条件){执行语句}

定义:当while中的条件满足,则执行执行语句

  • 如果没有自身改变,那么就会一直循环不停了。

终止循环break,结束循环语句

do while 循环

语法结构:do{执行语句}while(条件语句)

与while区别

先执行一次,再进行条件判断

(就算条件不满足,都先执行一遍)

for循环

语法结构:for(var 变量名 = 值;变量条件;条件改变){执行语句}

for (var i = 0; i < 10; i++) { 要执行的代码 }

注意:循环结束后,初始条件最后还改变一次 例如i++

双重for

特点:

外层执行一次,内层循环一圈

break终止循环

continue

表示继续,表示跳过本次循环,继续执行后面的循环

函数

概念 :将公共的代码封装在函数中,相当于一个包装的盒子,可以任意位置使用,避免重复书写

声明式函数:调用可以在任意位置

赋值式函数:只能在函数定义下面

声明提升:就是声明提升到当前作用域的最上方,赋值留在原地

语法结构:

function 函数名(){执行语句}

function 类似于 var 声明函数,也可以理解为声明函数的关键字

函数名规则:和定义变量的规则一样

执行的语法(函数的调用):函数名()

函数的参数

形参:形式上的参数

实参:实际上给到的参数

实参多于形参:剩余的形参传不到形参了

形参多于实参:未被赋值到的的形参,是undefined

函数的返回值

return

函数中的return只能写在函数的执行语句内

return作用

1.中断函数内的代码执行,下面的不再执行

2.return返回值

return后面没有值 和不写return 函数表达式的值都是undefined

函数的作用域

(函数是分界线)

全局变量:声明再函数外的变量,函数内外都可以使用

局部变量:声明在函数内部的变量,只能在局部使用

当局部变量和全局变量重名时,优先使用局部变量,遵循就近原则

函数中的arguments

arguments里面存储了所有传递过来的实参

每一个函数自带一个局部变量arguments,该变量存在于函数内,只能在函数中使用

arguments 就是函数形参的集合,为一个数组结构(类数组)

1.具有数组的 length 属性

2.按照索引的方式进行存储

3.没有真正数组的一些方法 pop()push()

递归函数

定义:也是函数 只不过自己调用自己

缺点:如果递归的执行次数超过一定范围,电脑的内存空间容易出现爆栈

递归四要素:递归结束条件,执行语句(包含自己调用自己);初始条件,初始条件改变