javascript基础

-特点

  • 解释性语言
  • 类似于C和JAVA的语法
  • 动态语言
  • 基于原型的面向对象

基础(Hello World)

注释

1
2
3
4
//单行注释
/*
* 多行注释
*/

-alert

1
alert("余额不足,请充值") //控制器发出一个警告,此时网页处于暂停状态

-document.write()

1
document.write("Hello World") //向网页的body输出一个内容

-console.log()

1
console.log("表格,我出来了窝")  //向控制台输入内容

JS编写的位置

-onclick执行js脚本

1
<button onclick="javascript:alert('这是点击时运行的javascript脚本')">点我</button>

-执行顺序

javascript是按从上至下的顺序执行代码的

1
2
3
4
<script>
alert("这是第一条代码");
alert("这是第二条代码");
</script>

当代码顺序调换

1
2
3
4
<script>
alert("这是第二条代码");
alert("这是第一条代码");
</script>

-src替换

script中的src指向一个js脚本(脚本地址可填本地地址或者外部地址),当script标签中有src时,script中的内容将不生效。通常情况下比较建议用js外链,这样可以调用浏览器的缓存功能,减少再次访问时的加载时间

1
2
3
<script src="我是外部引入的.js">
alert("这是内部的js")
</script>

JS的基本语法

  • js中严格区分大小写
  • js中每一条语句要以分号结尾
  • 空格和换行不对对js语句造成影响

字面量和变量

字面量是什么?

字面量是一个已经定义好的值,比如1永远都等于1,1是字面量

变量是什么?

变量是一个可以任意改变的值,可用于保存字面量,从而方便开发

注意,使用变量前要先声明变量并赋值,下图为变量未定义的就使用变量的情况

下图则为变量没赋值就使用变量的情况

标识符

标识符是什么?

在JS所有的可以由我们自主命名的都可以称为标识符,例如:变量名、函数名、属性名都属于标识符

命名标识符需要遵守的规则

  1. 标识符可以含有字母、数字、_、$
  2. 标识符不能以数字开头
  3. 标识符不能是JS中的关键字保留字
  4. 标识符一般采用驼峰命名法:首字母小写,每个单词开头的字母大写,其余字母小写。例如:helloWorld

下图为javascript的关键字

下图为javascript的保留字

数据类型

什么是数据类型?

数据类型指的就是字面量的类型,在js中一共有六种数据类型:

  1. String 字符串
  2. Number 数值
  3. Boolean 布尔值
  4. Null 空值
  5. Undefined 未定义
  6. Object 对象
    其中Object属于引用数据类型,其余属于基本数据类型

Str-字符串

因为这里和C语言差不多,我就不过多阐述

  • 在js中字符串要用引号引起来,使用单双引号都行,但是不能混用
  • “\“为转义字符,当表示一些特殊符号需要转义的时候可以使用其进行转义
  • “\t”表示tab键,”\n”表示换行,与C语言类似
  • 引号不能全套,字符串中想表示引号时要用 “\“ 转义

Number-数值

js中所有的数值都是Number类型

  • Number.Max_VALUE 为js可以表示的最大值
1
2
3
//用法示例
var a = Number.Max_VALUE;
console(a)

如果Number表示的数超过了这个最大值,则会返回一个”Infinity”表示正无穷,或返回”-Infinity”表示负无穷

js可以表示的最大值

  • Number.MIN_VALUE 表示大于0的最小值
1
2
3
//用法示例
var b = Number.MIN_VALUE;
console(b)

js可以表示的大于0的最小值

  • typeof 可以检查返回的数据类型,
1
2
3
//用法示例
var a = '';
console(typeof a)

NAN(Not A Number)表示一个特殊的数字,通常在js运算 “abc” * “cbd” 这类”不是人能想出的数字”时也会出现,使用typeof也会返回Number

  • 用js计算浮点数类型,如 “0.1 + 0.2” 返回的是一个不精确的数(所有语言的通病),所以不要用js进行精确计算

Boolean-布尔值

布尔值只有两个,用来做逻辑判断

  • true 表示为真
  • false 表示为假

Null-空值

Null 类型的值只有一个,就是null,专门用来表示一个为空的objec(对象)

  • 使用typeof检查一个null时会报错,返回一个空的object(对象),就是说你没对象

Undefined-未定义

Undefined的值只有一个,就是Undefined

  • 当使用typeof检查一个undefined时会返回undefined
  • 当声明一个变量但是不给变量赋值时,它的值就是Undefined

强制转换为String

强制将其他数据类型转换为String常用方法有两种

方式一:调用被转换数据类型的toString()方法

1
2
3
4
5
6
var a = 12345;  //声明一个a,将数值12345赋值给a

a = a.toString(); //调用a的toString方法,并将其结果覆盖掉原来的数值a

console.log(typeof a)
console.log(a)

  1. 该方式不会改变原有变量的值,仅改变该变量的数据类型
  2. 注意:null和undefined这两个值没有toString方法,使用该方式强制转换会报错

方式二:调用String函数,并将转换后的数据作为参数传回给变量

1
2
3
4
5
6
var a = undefined;

a = String(a); //调用String函数

console.log(typeof a)
console.log(a)

  1. 强制转换时,对于Number和Boolean实际上就是调用toString方法
  2. 对于null和undefined,会直接转换为’null’和’undefined’

强制转换为Number

强制转换为Number同样也有两种方式

方式一:使用Number函数

  1. 当变量是纯数字的字符串时,直接转换为对应数字
  2. 当变量是非法数值或Undefined时,则转换为’NAN’
  3. 当变量是布尔类型的值时,true为1,false为0

方式二:使用parseInt函数或parseFloat

这种方式是专门用来对付既包含纯数字,又包含非法字符的字符串

parseInt() 把一个字符串转换为一个整数,只能截断第一个非法字符前的数字
paserFloat() 把一个字符串转换为浮点数,只能阶段第二个 . 之前的整数和小数
如果不满足以上两个函数的对应使用条件,则会返回 ‘NAN’

强制转换为Boolean

使用Boolean函数

Boolean类型比较深情专一,只有一种方式强制转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var a = 'asd' ;  //非纯数字非空字符串

a = Boolean(a);

console.log(typeof a)
console.log(a)
//分割线
a = ' ' ; //有空格的字符串
a = Boolean(a);
console.log(typeof a)
console.log(a)

结果:true
//分割线
a = ''; //没有空格的空字符串
a = Boolean(a);
console.log(typeof a)
console.log(a)

结果:false
//分割线
a = 123456; //合法的纯数字字符串
a = Boolean(a);
console.log(typeof a)
console.log(a)

结果:true
//分割线
a = dsads;
a = Boolean(a);
console.log(typeof a)
console.log(a)

结果:false/报错
分割线
a = null;
a = Boolean(a); //Null(object)类型
console.log(typeof a)
console.log(a)

结果:false
//分割线
a = undefined; //Undefined类型
a = Boolean(a);
console.log(typeof a)
console.log(a)

结果:false

算术运算符

二元运算符汇总

  • 编程中的+ - * / 相当于我们的加减乘除
  • % 为取模,取两个数相除之后的余数

不同数据类型间的加法运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

var a = 123456 ;
var b = 123 + a; //数字与数字类型相加,将对应数值进行运算
console.log(b)
console.log(typeof b)

//分割线

a = 123456;
b = true + a; //数字类型与布尔型相加,会先将布尔类型转换为对应数字,再进行计算

console.log(b)
console.log(typeof b)

//分割线

a = 123456;
b = null + a; //同样,先将null转换为对应数值,再进行运算

console.log(b)
console.log(typeof b)

//分割线

a = 123456;
b = '' + a; //字符串与数字类型相加,会先将将数字转换为字符串类型,再进行计算

console.log(b)
console.log(typeof b)

//分割线

a = '我的很大';
b = a + ',你忍一下' //字符串与字符串相加,就是两个字符串相加

console.log(b)
console.log(typeof b)

// 分割线

a = true;
b = a + '12' //字符串与布尔型相加,先将布尔型转换为字符串,再进行运算

console.log(b)
console.log(typeof b)

//分割线

a = null;
b = a + '123' //同上,Null也是这样

console.log(b)
console.log(typeof b)

总结

  1. 数字类型与任何数据类型进行相加,先将其转换为对应数值,再进行运算,任何数值与非法数值或者’NAN’都得’NAN’(Not A Number)=
  2. 字符串与其他数据类型相加,先将其转换为字符串,再进行运算,空字符串与数值相加可把Number转为字符串
  3. 除了加法以外,Number与任何类型进行运算,都会将其类型转换为对应数值,再进行运算
  4. 除了加法以外,Number与任何类型进行运算,运算结果都会转换为Number类型,这就是大名鼎鼎、高手才会用的”隐式转换”

一元运算符

  • + - 属于一元运算符,只需要一个数
  • + 对数值没有任何影响,但可以将其他类型转换为Number类型
  • - 可以将对应数值取反也可以将其他类型转换为Number类型

自增和自减

自增:

1
2
3
4
5
6
a = 50;
console.log(a++)
console.log(a);

a = 50;
console.log(++a)

对于上面的自增,我是这样理解的:a++执行完毕后,将相加后的数与a自身的数相互替换了,所以才出现a++ = a的原值,a = a++ 计算后的结果。看到别人还有一种说法就是js的执行顺序:从上至下,从左至右

等我什么时候学了计算机原理后再回来看看我的想法是否正确

自减

1
2
3
4
5
6
7
a = 60;
console.log(a--);
console.log(a)

a = 60;
console.log(--a)
console.log(a);

对于自减,我的想法还是和自增的想法一样

逻辑运算符

js的逻辑运算符有3个,分别是!(取反)、&&(与)、||(或),这里的和C语言、python的逻辑运算符可以说是一模一样,我就长话短说,阐述一下

! 对一个布尔值进行取反操作,比如a是true,用了a = !a后,返回的是false,用两个!!可以将一个任意变量转换为布尔值 (隐式转换) ,原理跟Boolean一样

&& 这个运算符可以比拟爱情,当&&两边布尔值只要有一个为false (不爱对方),则返回false;只有两边的布尔值同时 (双方互相奔赴) 为true,最后才会返回true。js中的&&属于短路’与’,当&&左边的布尔值为false,则不会执行&&右边的了

|| 这个运算符可以比喻为亲情,只要||两边有一个为true,结果返回true,只有当||两边为false时 (两个人绝交时) 才会返回false。同样,这个也属于短路’或’,只要左边的变量为true,就不会看右边的了

非布尔值的逻辑运算

&&-与

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
c =  1 && 2 ;   //两个布尔值都为true的字面量进行与运算,返回后面那个值

console.log(c);

结果:2

//我是分割线

c = 5 && 0 ;
d = 0 && 5 ; //两个转换为布尔值的字面量之中有一个为false进行与运算,则返回的布尔值为false的那个字面量

console.log(c);
console.log(d)
结果:00

||-或

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
c =  5 || 0 ;   
d = 0 || 5 ; //两个字面量之中有一个为true,则返回字面量为true的那个字面量的值

console.log(c);
console.log(d)

结果: 5,5

//我是分割线

c = 5 || 6 ;
d = 6 || 5 ; //两个字面量的布尔值都为true,则返回前面的那个字面量的值

console.log(c);
console.log(d)

结果:5,6

赋值运算符

这个没什么好说的,用多就会了,python和C都有这个

  1. a + 1 可以简写为 a += 1
  2. a - 1 可以简写为 a -= 1
  3. a * 1 可以简写为 a *= 1
  4. a / 1 可以简写为 a /= 1
  5. a % 1 可以简写为 a %= 1

关系运算符

常见的关系运算符有”>”、”<”、”=”、”>=”、”<=”
在关系运算符两边都是Number数值的情况下,关系运算符的使用与我们现实中的差异不大
这里主要讲非数值的情况

字符串与数字

1
2
3
4
5
6
a =  5 < '3';
b = 5 > '3';
console.log(a)
console.log(b)

//总结:当字符串和数字类型进行关系比较时,会先将字符串内的值转换为对应数值,再进行比较

字符串与字符串

1
2
3
4
5
6
7
8
a =  'a' < 'A';
b = 'a' > 'A';
c = 'a' < 'ab';

console.log(a)
console.log(b)
console.log(c)
//总结:当字符串和字符串进行关系比较时,会先将字符串内的值转换为Unicode编码,再比较;如果字符串内的开头两位Unicode编码一样,则会继续往下比较,可以利用这个特点来对英文进行排序

数字与字符串

1
2
3
4
5
6
7
a = +'1456465451'; //正确做法:将a或b转为数字型
b = '5';
c = a < b;

console.log(a)
console.log(b)
console.log("'1456465451' < '5' :" + c)

注意:当两个字符串的数字进行比较时,一定要给其中一个数字转为数字型,不然会出现以下错误

相等运算符

== 相等,当使用==来比较两个值时。如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型再比较,如果相等会返回true,不相等返回false
!= 不相等,当使用!=来比较两个值时。如果值的类型不同,则会自动进行类型转换,如果不相等会返回true,相等则返回false
=== 全等,判断两个值是否全等,与==不同的是,如果两个值类型不同,则会直接返回false
!== 不全等,判断两个值是否不全等,与!=不同的是,如果两个值类型不同,则会直接返回false

条件运算符

条件运算符又称三元运算符

1
2
3
4
5
6
7
8
9
10
- 语法:
条件表达式?语句一:语句二;
条件运算符在执行时,首先对条件表达式进行求职
如果值为true,执行语句一,并返回执行结果
如果值为false,则执行语句二,返回执行结果
- 示例:
普通用法:a和b谁大?
var a = 100;
var b = 150;
a > b ? alert("a大"):alert("b大");

1
2
3
4
5
6
7
8
- 示例:
- 进阶用法:打印a,b,c之中的最大值
var a = 100;
var b = 150;
var c = 230;
var max = a > b ? (a > c ? a : c ) : (b > c ? b : c )
console.log(max)

拓展

Unicode编码,又称万国码,为了解决传统的字符编码方案的局限而产生的,我国的Unicode为Kangxi Radicals。

在js中表示Unicode编码

1
2
3

a = '\u2620';
document.write(a)

在HTML网页中表示Unicode编码

1
2
<!-- 在HTML中表示要先将2620转换为十进制 -->
h1 &#9760; h1

代码块

在js中{}仅表示代码块作用,没其他作用,代码块后面不用分号结束
代码块的内容要不都不执行,要不都执行,具有同步性
代码块的内容执行后在{}外部也可见

1
2
3
4
5
6
7
{
var a = 100;
var b = 200;
}
console.log("a = "+a);
console.log("b = "+b);
//代码块内部定义的变量外部也能接收