JS基础
一、JS语言介绍
1、概念
- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释性、弱语言类型编程语言
2、组成
- ES语法:ECMAScript、主要版本ES5和ES6
- DOM:文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- BOM:浏览器对象模型(Browser Object Model),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
二、三种存在位置
1、行间式:存在于行间事件中
<body id="body" onload="body.style.backgroundColor='#0ff'">
</body>
2、内联式:存在于页面script标签中
<body id="body">
<script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>
3、外联式:存在于外部JS文件,通过script标签src属性链接
index.js文件
body.style.backgroundColor='#0ff'
index.html文件
<script src="./js/index.js"></script>
三、解释性语言特性决定JS代码位置
- 出现在head标签底部:依赖型JS库
- 出现在body标签底部:功能型JS脚本
四、JS语法规范
// 单行注释
/*
多行注释
*/
五、变量的定义
1、ES5定义变量
var num = 10; // 无块级作用域变量
num = 10; // 全局变量
2、ES6定义变量
let num = 10; // 局部变量
const NUM = 10; // 常量
3、变量(标识符)的命名规范
- 由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)
- 区分大小写
- 不能出现关键字及保留字
|
|
|
|
|
abstract |
arguments |
boolean |
break |
byte |
case |
catch |
char |
class* |
const |
continue |
debugger |
default |
delete |
do |
double |
else |
enum* |
eval |
export* |
extends* |
false |
final |
finally |
float |
for |
function |
goto |
if |
implements |
import* |
in |
instanceof |
int |
interface |
let |
long |
native |
new |
null |
package |
private |
protected |
public |
return |
short |
static |
super* |
switch |
synchronized |
this |
throw |
throws |
transient |
true |
try |
typeof |
var |
void |
volatile |
while |
with |
yield |
|
|
六、三种弹出框
- alert:普通弹出框
- confirm:确认框
- prompt:输入框
七、四种调试方式
- alert()
- console.log()
- document.write()
- 浏览器断点调试
八、数据类型
1、值类型
var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'number')
var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)
2、引用类型
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
3、具体的对象类型
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
4、类型转换
var a = 10 or true
String(a)
a.toString()
var a = true or '10'
Number(a)
+ a
parseFloat()
parseInt()
var a = 10 or '10'
Boolean(a)
5 + null // 5
"5" + null // "5null"
"5" + 1 // "51"
"5" - 1 // 4
// NaN: 非数字类型
// 不与任何数相等,包含自己
// 利用isNaN()进行判断
九、运算符
1、算数运算符
前提:n = 5
运算符 |
描述 |
例子 |
x结果 |
n结果 |
+ |
加法 |
x=n+2 |
7 |
5 |
- |
减法 |
x=n-2 |
3 |
5 |
* |
乘法 |
x=n*2 |
10 |
5 |
/ |
除法 |
x=n/2 |
2.5 |
5 |
% |
驱魔(余数) |
x=n/2 |
1 |
5 |
++ |
自增 |
x=++n |
6 |
6 |
x=n++ |
5 |
6 |
-- |
自减 |
x=--n |
4 |
4 |
x=n-- |
5 |
4 |
2、赋值运算符
前提:x=5,y=5
运算符 |
例子 |
等同于 |
运算结果 |
= |
x=y |
|
5 |
+= |
x+=y |
x=x+y |
10 |
-= |
x-=y |
x=x-y |
0 |
*= |
x*=y |
x=x*y |
25 |
/= |
x/=y |
x=x/y |
1 |
%= |
x%=y |
x=x%y |
0 |
3、比较运算符
前提:x=5
运算符 |
描述 |
比较 |
结果 |
== |
等于 |
x=="5" |
true |
=== |
绝对等于 |
x==="5" |
false |
!= |
不等于 |
x!="5" |
fales |
!== |
不绝对等于 |
x!=="5" |
true |
> |
大于 |
x>5 |
false |
< |
小于 |
x<5 |
false |
>= |
大于等于 |
x>=5 |
true |
<= |
小于等于 |
x<=5 |
true |
4、逻辑运算符
前提:n=5
运算符 |
描述 |
例子 |
结果 |
&& |
与 |
x=n>10&&++n |
x=false,n=5(短路) |
|| |
或 |
x=n<10||n-- |
x=true,n=5(短路) |
! |
非 |
x=!n |
x=false,x=5 |
5、ES6语法解构赋值
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
let {key: a} = {key: 10}
// a=10
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'