一、JS基础
1、算法及流程图
解决问题的步骤或程序。
特性:
明确性: 算法对每一个步骤都有确切的,非二性的规定.
有效性: 算法的每一个步骤都能够通过基本运算有效地执行,并得到确定的结果.
有限性: 算法由有限的步骤组成.
分类:算术算法、事务性算法
2、流程图
即算法的一种图形解方法。
特点:顺序结构、选择结构、循环结构
3、JS基础内容
引入JavaScript方式: 注释
标识符
变量
区块
数据类型
分号
运算符
(1)引入JavaScript方式
a、 使用外部的js文件,这样的好处是实现表现和行为的分离,W3C非常提倡页面、样式、
行为都分离,这样页面结构清晰,方便维护和团队的开发。
b、使用<script></script>标签直接嵌入网页,一般放在head标签内,亦可以放在
body标签内,只要保证这些代码在被调用前已读取并加载到内存即可
c、直接作为某个标签的事件代码
4、注释:
单行注释,用 ```//``` 起头;
另一种是多行注释,放在 ```/*``` 和 ```*/``` 之间
快捷注释:ctrl+/
5、标识符
命名规范:
第一个字符可以是任意Unicode字母,以及美元符号($)和下划线(_)。
第二个字符及后面的字符,还可以用数字。
**合法**的标识符。
**不合法**的标识符。
中文是合法的标识符,可以用作变量名(这种方式**不推荐**)
**保留字(reserved word):在 JavaScript 中已经定义过的字,使用者不能再将这些字作
另外,还有三个词虽然不是保留字,但是因为具有特别含义,也不应该用作标识符:
Infinity、NaN、undefined。
6、变量
(1)变量是对“值”的引用,使用变量等同于引用一个值。每一个变量都有一个变量名。
var a = 1;
说明:
最前面的var,是变量声明命令。它表示通知解释引擎,要创建一个变量a。
JavaScript允许省略var,直接对未声明的变量赋值。也就是说,var a = 1 与 a = 1,这两条
语句的效果相同。但是由于这样的做法很容易不知不觉地创建全局变量(尤其是在函数内部),所以建议总是使用var命令声明变量。
如果一个变量没有声明就直接使用,JavaScript会报错,告诉你变量未定义。
(2)关于变量提升:
JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这
造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
var a;
console.log(a); //最后的结果是显示undefined,表示变量a已声明,但还未赋值。
a = 1;
变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升。
7、区块
JavaScript使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。
与大多数编程语言不一样,JavaScript的区块不构成单独的作用域(scope)。也就是说,区块中的变量与区块外的变量,属于同一个作用域。
区块往往用来构成其他更复杂的语法结构,比如for、if、while、function等。
区块
{
a = 1;
console.log(a); //a = 1
}
console.log(a); //a = 1
8、数据类型
(1)JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型,分成两组:原始类型(primitive type)和引用类型(complex type)。
原始类型包括五种数据类型。
**数值( number )**
**字符串类型( string )**
**布尔值(boolean)**
**null**
**undefined**
引用类型也包括三种数据类型。
**对象(object)**
**数组(array)**
**函数(function)**
(2)判断Number类型常用方法**
<table style=‘width:800px;font-size:14px;text-align:center;‘><tr><th>方法</
th><th>描述</th></tr><tr><td>isInteger(value)</td><td>判断参数是否为整数</td></
tr><tr><td>isNaN(value)</td><td>判断参数是否为NaN</td></tr><tr><td>parseFloat
(value)</td><td>把参数转换为浮点数</td></tr><tr><td>parseInt(value)</td><td>把参数转换为整数</td></tr></table>
9、typeof运算符
(1) 原始类型: 数值、字符串、布尔值分别返回number、string、boolean。
typeof 123; //number
typeof "123"; //string
typeof false; //boolean
(2) 函数: 函数返回function
function fn() {}
typeof fn; //function
(3)undefined: 返回undefined
typeof undefined //undefined
可以使用这一点来检测一个变量是否被声明
if(typeof v === "undefined") {
console.log(1);
}
(4) 除此之外,都返回object
typeof window //object
typeof {} //object
typeof [] //object
typeof null //object
10、null和undefined
(1) 相似性
首先,null与undefined都可以表示“无”,含义非常相似。将一个变量赋值为undefined或
null,老实说,几乎没区别。
(2) null的特殊之处
JavaScript把它包含在对象类型(object)之中。这并不是说null的数据类型就是对象,而
是JavaScript早期部署中的一个约定俗成,其实不完全正确,后来再想改已经太晚了,会破坏
现存代码,所以一直保留至今。
(3) 注意点
JavaScript的标识名区分大小写,所以undefined和null不同于Undefined和Null(或者其
他仅仅大小写不同的词形),后者只是普通的变量名。
11、布尔值
如果JavaScript预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转
换规则是除了下面六个值被转为false,其他值都视为true。
undefined
null
false
0
NaN
""(空字符串)
12、分号的使用
不使用分号结尾的语句
for和while语句
分支语句: if, switch, try
函数的声明语句
注意:由于解释引擎自动添加分号的行为难以预测,因此编写代码的时候不应该省略行尾的分
号。省略结尾的分号,还有一个问题。有些JavaScript代码压缩器不会自动添加分号,因此遇
到没有分号的结尾,就会让代码保持原状,而不是压缩成一行。**
13、运算符
JavaScript提供了9种算术运算符
加法运算符(Addition):x + y
减法运算符(Subtraction): x - y
乘法运算符(Multiplication): x * y
除法运算符(Division):x / y
余数运算符(Remainder):x % y
自增运算符(Increment):++x 或者 x++
自减运算符(Decrement):--x 或者 x--
求负运算符(Negate):-x
数值运算符(Convert to number): +x
(1) 加法运算符
加法运算符(+)需要注意的地方是,它除了用于数值的相加,还能用于字符串的连接。
var a = 1 + 2; //a = 3
var b = "1" + 2; //b = "12"
var c = 3 + 4 + "5"; //c = "75"
说明:这种由于参数不同,而改变自身行为的现象,叫做“重载”(overload)
x + ""; //将x重载成字符串类型
加法运算符以外的其他算术运算符,都不会发生重载。它们的规则是:所有运算一律转为
数值,再进行相应的数学运算。
1 - "1" // 0 (number)
+"3" // 3 (number)
-true // -1 (number)
(2) 自增和自减
自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为
数值,然后加上1或者减去1。
var x1 = 1;
var x2 = 1;
console.log(++x1); //1
console.log(x2++); //2
(3) 赋值运算符
赋值运算符(Assignment Operators)用于给变量赋值。
最常见的赋值运算符,当然就是等号(=),表达式x=y表示将y赋值给x。除此之外,
JavaScript还提供以下赋值运算符。
<table style=‘width:800px;font-size:14px;text-align:center;‘><tr><th>运算符</th><th>例子</th><th>等价于</th></tr><tr><td>=</td><td>x=y</td><td></td></tr><tr><td>+=</td><td>x+=y</td><td>x=x+y</td></tr><tr><td>-=</td><td>x-=y</td><td>x=x-y</td></tr><tr><td>```*=```</td><td>x```*=```y</td><td>x=x```*```y</td></tr><tr><td>/=</td><td>x/=y</td><td>x=x/y</td></tr><tr><td>%=</td><td>x%=y</td><td>x=x%y</td></tr></table>
(4) 关系运算符
<table style=‘width:800px;font-size:14px;text-align:center;‘><tr><th>运算符</th><th>描述</th></tr><tr><td>==</td><td>等于</td></tr><tr><td>===</td><td>全等(值和类型)</td></tr><tr><td>!=</td><td>不等于</td></tr><tr><td>></td><td>大于</td></tr><tr><td><</td><td>小于</td></tr><tr><td>>=</td><td>大于或等于</td></tr><tr><td><=</td><td>小于或等于</td></tr></table>
说明:关系运算符的优先级低于算术运算符,高于赋值运算符。在六个关系运算符中,<、<=、>、>=的
优先级相同,高于==和!=。而==和!=的优先级相同。
(5) 取反运算符: 形式上是一个感叹号,用于将布尔值变为相反值,即true变成false,false变成true。
!true // false
!false // true
以下6个值取反后为true:
undefined
null
false
0(包括+0和-0)
NaN
空字符串("")
14、 逻辑运算符
且运算符(&&): 同时为真即为真
或运算符(||): 一个为真即为真
15、 三元条件运算符( 表达式1 ? 表达式2 : 表达式3)
表达式1**成立执行**表达式2**,否则执行**表达式3**
**运算顺序**
左右结合
对于优先级别相同的运算符,大多数情况,计算顺序总是从左到右,这叫做运算符的“左结
合”(left-to-right associativity),即从左边开始计算。
x + y + z
少数运算符的计算顺序是从右到左,即从右边开始计算,这叫做运算符的“右结合”(right-
to-left associativity)。其中,最主要的是赋值运算符(=)和三元条件运算符(?:)
w = x = y = z;
q = a ? b : c ? d : e ? f : g;
总结: 取反运算符 > 算术运算符 > 关系运算符 > && > || > 三目运算符 >赋值运算符
二、流程控制语句
程序执行是过程化的也就是说从上往下依次执行,但是有些时候我们需要让他执行某部分,不执行某
部分或者反复执行某部分,这些就是流程控制.```
1、条件语句
JavaScript提供if结构和switch结构,完成条件判断。
(1) if 结构
语法:
if(表达式1){
表达式2;
}
表达式3;
说明: 程序判断表达式1,成立执行表达式2,不成立执行表达式3
(2) if...else... 语句
语法:
if(表达式1) {
表达式2;
} else {
表达式3;
}
表达式4;
说明: 程序判断表达式1,成立执行表达式2,不成立执行表达式3,再执行表达式4
(3) if...else if..
if(表达式1) {
表达式2;
} else if(表达式3) {
表达式4;
} else if(表达式5) {
表达式6;
} else {
表达式7;
}
表达式8;
(4) 嵌套使用
if(表达式1) { //区块1
if(表达式2) { //区块2
表达式3;
}
表达式4;
}
表达式5;
说明:
1. 程序判断表达式1,不成立执行表达式5,成立进入区块1;
2. 进入区块1,判断表达式2,成立执行表达式3,否则执行表达式4;
2、 switch结构
var a = 1;
switch(a) {
case 1 :
console.log(1);
break;
case 2 :
console.log(2);
break;
case 3 :
console.log(3);
break;
default :
console.log("default");
}
说明: break:跳出控制语句;default:当所有;case:都不匹配时执行;default;
3、循环语句
循环语句用于重复执行某个操作,它有多种形式。
(1) while循环**
while(表达式1) {
表达式2;
}
表达式3;
说明:首先判断表达式1,成立执行表达式2,然后继续判断表达式1,如果不成立执行执行3
(2) do...while...循环**
do {
表达式1;
} while(表达式2);
表达式3;
说明:先执行表达式1,在判断表达式2,如果成立,继续执行表达式1,不成立执行表达式3;
(3) for循环
for语句是循环命令的另一种形式,它分成三步:
初始化(initialize):确定循环的初始值,只在循环开始时执行一次;
测试(test):检查循环条件,只要为真就进行后续操作;
递增(increment):完成后续操作,然后返回上一步,再一次检查循环条件。
语义:
for(初始化;测试;递增) {}
执行流程:
for(表达式1;表达式2;表达式3) {
表达式4;
}
表达式5;
说明:首先执行表达式1,再判断表达式2,如果表达式2成立,则执行表达式4,再执行表达式
3,再判断表达式2,不成立的话执行表达式5;
(4)break语句和continue语
break语句用于跳出代码块或循环。
continue语句用于立即终止本次循环,返回循环结构的头部,开始下一次循环。