新手怎么学JS?JavaScript基础入门
准备工作
在正式的学习JavaScript
之前,我们先来学习一些小工具
,帮助我们更好的学习和理解后面的内容。
js代码位置
首先是如何编写JavaScript
代码,说到这,我们首先要来说明一个需要新人们关注的点,因为我们的js
是一门跨平台
的语言,所以说,我们的代码可以运行在不同的平台
之上。这也就导致了可能相同的代码放在不同的平台运行就会有所出入。
这里面说的平台其实被称之为
宿主环境
。
同时,代码在不同的平台上的运行方式也有所不同。
如果运行在服务端
,那么更多的时候我们需要通过命令行的形式去运行,而如果是代码运行在客户端
,则需要通过启动浏览器
来运行代码。
我们在学习的初期建议是在浏览器
中运行代码,减少学习成本。
首先,我们的js
代码可以写在script
标签内部并且将script
标签放在网页的任何位置。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script>
// js code ...
</script>
</head>
<body>
<script>
// js code ...
</script>
</body>
<script>
// js code ...
</script>
</html>
在上面的代码中,我们把包含有js
代码的script
标签放在了head
标签、body
标签、和body
标签之后的位置。从语法的层面来说,上面的这几种写法都是正确的。但是在本教程中较为推荐的写法是将scirpt
标签放在body
标签的闭合标签的后面。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
<script>
// js code ...
</script>
</html>
推荐的原因,是因为
js
代码经常需要操作html
标签,而放在后面可以等到html
标签加载完毕之后再来执行js
代码。避免因为html
标签未加载而导致的报错。
而另外一种写法是将js
代码完全的写在一个后缀名为.js
的文件中。在需要的html
文件中通过script
标签引入。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
// 通过src属性与script标签配合引入外部的js文件
<script src="01.js"></script>
</html>
js语句
js
当中的语句表示js
向宿主环境发送的命令。
例如下面的语句是向页面中输出计算10 + 2
的结果。
document.write(10+2);
在每一条语句的后面都带有一个分号,表示语句结束。
当然js
允许我们将分号省略掉,但是无论是从代码的维护成本还是其他因素考虑,都不建议将每条语句后面的分号省略掉。
需要注意的是,如果分号前面的语句为空,则没有意义。
; ; ;
类似上面的语句代码是没有意义的。
注释
注释
是任何编程语言当中必不可少的一环。通过注释,可以让我们开发过的代码具有更好的可读性,也能变相的提升后期代码的维护和升级速度。
一般情况下,注释的内容可以包含很多,例如参数信息
,代码功能
、使用方式
等等。
在js
中,注释
分为两种,一种是单行注释
,一种是多行注释
。
单行注释
通过//
表示,一般写在语句的后面或者语句的上方。
// 这里是代码注释
多行注释
通过/**/
的形式来创建,一般写在代码的上方。
/*
这里是多行注释...
*/
无论你是一个js
新人,还是一个成熟的老程序员
,合理的应用注释
都是一个非常好的习惯。
直接量
在js
中,直接使用的量,我们称之为叫做直接量
。
例如,在代码中,我们要使用10
,那么这个10
就是一个直接量
。
表达式
一般情况下,表达式
需要得到一个结果。
例如10+2
就是一个表达式,我们在创建这个表达式的时候,就希望得到10+2
的结果。
document.write(10+2);// 通过document.write()方法将10+2这个表达式的结果输出到网页当中
输出方式
我们在编写js
代码的时候,经常需要得到计算的值,用以判断得到的值与我们预期的值是否相符,所以我们需要了解下面的基本的输出方式。
// console.log() 将内容输出到浏览器的控制台
console.log(10+2);
// document.write() 将内容输出到网页当中
document.write(10+2);
通常情况下我们通过
console.log()
这种形式输出代码我们称之为代码打印
。
弹窗
在js
中,如果你的代码运行环境是在浏览器
当中,那么就可以使用浏览器
给我们提供的弹窗。
alert(10+2);
confirm(10+2);
prompt(10+2);
上述的三个弹窗只能够在运行环境为浏览器的情况下使用。
变量
我们上面说到了表达式
,通过表达式
能够得到计算的结果,但是如果我们计算的逻辑较为复杂,那么如果单纯的依赖表达式将会变得不那么方便。
这个时候,就可以使用变量
。
什么是变量
呢?
我们可以把变量
理解为是一个代名词
或者说叫做临时的容器
。
我们可以把一个具体的值存入到变量中。那么此时这个变量就代表着我们这个具体的值。我们如果想要重新的使用这个值,不再需要重新的计算或者其他操作,直接使用变量就可以得到之前存储的这个值。
而想要创建一个变量(也可以说是声明
一个变量),需要通过var
关键字(es6
中通过let
声明)。
var val = 10 + 2;
在上面的代码中,我们创建了一个变量val
,并且使用这个变量val
存储了表达式10+2
的计算结果。那么如果想要第二次使用10+2
的结果,可以直接使用变量val
即可。
console.log(val);// 通过console.log() 输出val,此时就可以在控制台看到10+2的结果
在我们使用变量
的时候,还有一点需要理解,变量
之所以叫变量,是因为变量
随时可以根据我们的需要更改其中存储的值。
var a = 10;
a = 20; // 当我们重新的向变量中存储数据的时候,不需要再加var
console.log(a); // 此时再打印a结果就为20
需要注意的是,上面我们将变量a
内存储的数据由10
变成了20
,在重新存储的过程中,我们并没有使用var
,那么上面的代码就相当于我们将20
的值存储到之前创建的变量a
中。
而如果在重新的存储的过程中使用了var
,如同下面的案例:
var a = 10; // 第一次声明变量a
var a = 20; // 再一次通过var声明变量a,并且使用了var
consoloe.log(a);
需要注意的是,虽然最后的结果和上面的打印结果相同,但是变量a
本质上已经发生了变化。
如果在重新存储数据的过程中,没有在变量名前面加var,那么相当于是更改变量a中存储的值,而如果前面加了var,则相当于重新的创建了一个变量a,并且存储了20这个数据。
如果采用下面的这种写法,那么重新创建的变量将会无效:
var x = 1;
var x;
x // 1
变量提升:
JavaScript
引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部
,这就叫做变量提升(hoisting)。
console.log(a);
var a = 1;
上面代码首先使用console.log
方法,在控制台(console)显示变量a
的值。这时变量a
还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。
var a;
console.log(a);
a = 1;
最后的结果是显示undefined
,表示变量a
已声明,但还未赋值。
标识符
标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感,所以a
和A
是两个不同的标识符。
标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符,就会报错。
简单说,标识符命名规则如下。
第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9。
下面这些都是合法的标识符。
arg0
_tmp
$elem
π
下面则是一些不合法的标识符:
1a // 第一个字符不能是数字
23 // 同上
*** // 标识符不能包含星号
a+b // 标识符不能包含加号
-d // 标识符不能包含减号或连词线
需要注意的是,在js
当中,中文也是合法的标识符,但是并不推荐使用。
JavaScript 有一些保留字,不能用作标识符:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
数据类型
变量
用来临时存储数据(如果想要永久的存储数据,需要通过数据库)。而在任何一门编程语言当中,数据都是分为不同类型的。就如同人类也分为男人和女人一样。
下面就来说一下在JavaScript
中数据的不同类型。
在js
当中数据类型分为两类,一类是原始类型
,一类是引用数据类型
。原始类型
又称之为基础数据类型
,引用类型
也称之为对象类型
。
原始类型
的数据包含有下面几个:
- Boolean
- Null
- Undefined
- Number
- String
- Symbol(ES6中新增加的内容)
引用类型
的数据包含有下面几个:
- Object
- Array
- Function
在
js
当中,引用类型
也包括Date
、Math
和RegExp
等内容。需要注意的是,
JS
当中的原始值并不能够更改,也就意味着一旦一个原始值创建成功。那么将不能够进行第二次的值得修改,除非重新创建一个数据。
Boolean
In computer science, a Boolean is a logical data type that can have only the values
true
orfalse
. For example, in JavaScript, Boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops).
在MDN
中,对于JavaScript
中的布尔值(Boolean)
有上面一段描述,翻译过来的意思大致如下:
在计算机科学中,布尔值是一种逻辑数据类型,其值只能为真或假。例如,在JavaScript中,布尔条件
常用于决定执行哪一部分代码(例如在if语句中)或重复(例如在For循环中)。
布尔值
包含有两个值true
和false
。其中true
表示真
,false
表示假
。
例如我们判断一个条件,如果这个条件满足,那么对应着布尔值true
,如果这个条件不满足,那么就对应着布尔值false
。
下列运算符会返回布尔值:
- 前置逻辑运算符:
!
(Not) - 相等运算符:
===
,!==
,==
,!=
- 比较运算符:
>
,>=
,<
,<=
如果 JavaScript 预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false
,其他值都视为true
。
undefined
null
false
0
NaN
-
""
或''
(空字符串)
Null
In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. The meaning of a null reference varies among language implementations. In JavaScript, null is one of the primitive values.
译文:
在计算机科学中,空值表示一个引用,该引用通常有意指向不存在或无效的对象或地址。空引用的含义因语言实现而异。 在JavaScript中,null是一个基本值(原始数据)。
Null
类型里面只有一个值,就是null
。
关于null
,你可以把它理解为无
,它表示一个空值。
var a = null;
例如上面的代码当中,你可以理解为此事的变量a表示的值为空。
当我们在一些需要传递值的地方,如果我们没有值进行传递,那么就可以传递一个
null
,表示传递的值为空。
undefined
Undefined
类型当中只有一个值就是undefined
。
在代码的编写过程中,一个没有被赋值的变量的类型就是undefined
。
var a;
console.log(a); // 会在浏览器的控制台中输出undefined
如果一个变量声明但是没有被赋值,我们就可以使用typeof
运算符来检查一下结果.
var a;
console.log(typeof a);// 输出undefined类型
Number
Number
类型即为数字类型
。
在MDN
中关于Number
类型的描述如下:
根据 ECMAScript 标准,JavaScript 中只有一种数字类型:基于 IEEE 754 标准的双精度 64 位二进制格式的值(-(263 -1) 到 263 -1)。它并没有为整数给出一种特定的类型。除了能够表示浮点数外,还有一些带符号的值:
+Infinity
,-Infinity
和NaN
(非数值,Not-a-Number)。
JavaScript 内部,所有数字都是以64位浮点数
形式储存,即使整数也是如此。所以,1
与1.0
是相同的,是同一个数。
1 === 1.0 // true
这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算。
由于浮点数
不是精确的值,所以涉及小数的比较和运算要特别小心。
0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false
数值范围:
根据标准,64位浮点数的指数部分的长度是11个二进制位,意味着指数部分的最大值是2047(2的11次方减1)。也就是说,64位浮点数的指数部分的值最大为2047,分出一半表示负数,则 JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。
如果一个数大于等于2的1024次方,那么就会发生“正向溢出”,即 JavaScript 无法表示这么大的数,这时就会返回Infinity
。
如果一个数小于等于2的-1075次方(指数部分最小值-1023,再加上小数部分的52位),那么就会发生为“负向溢出”,即 JavaScript 无法表示这么小的数,这时会直接返回0。
Math.pow(2, -1075) // 0
下面是一个实际的例子。
var x = 0.5;
for(var i = 0; i < 25; i++) {
x = x * x;
}
x // 0
上面代码中,对0.5
连续做25次平方,由于最后结果太接近0,超出了可表示的范围,JavaScript 就直接将其转为0。
而如果在js
小于-1.7976931348623157E+103088 的时候,就会表示为-Infinity
.
Number当中的特殊值:
1、正零和负零
JavaScript 的64位浮点数之中,有一个二进制位是符号位。这意味着,任何一个数都有一个对应的负值,就连0
也不例外。
JavaScript 内部实际上存在2个0
:一个是+0
,一个是-0
,区别就是64位浮点数表示法的符号位不同。它们是等价的。
-0 === +0 // true
0 === -0 // true
0 === +0 // true
几乎所有场合,正零和负零都会被当作正常的0
。
+0 // 0
-0 // 0
(-0).toString() // '0'
(+0).toString() // '0'
但是当0
和-0
被充当分母的时候,返回的值是不相等的。
(1 / +0) === (1 / -0) // false
上面的代码之所以出现这样结果,是因为除以正零得到+Infinity
,除以负零得到-Infinity
,这两者是不相等的。
2、NaN
NaN
是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。
console.log(5 - 'x'); //NaN
需要注意的是,NaN
不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number
,使用typeof
运算符可以看得很清楚。
需要注意,
NaN
是一个非常狠
的角色,它连自己都不认,也就是说,如果你判断NaN
是否等于NaN
,答案是否定的,也就是false
,二者根本不想等。
3、Infinity
Infinity
表示为无穷大
。在js
中,如果数值的内容超过了js
所能表示的范围,就会输出Infinity
或者-Infinity
。
Number当中的全局方法:
1、parseInt()
parseInt
方法用于将字符串转为整数。
parseInt('123') // 123
如果字符串头部有空格,空格会被自动去除。
parseInt(' 81') // 81
如果parseInt
的参数不是字符串,则会先转为字符串再转换。
parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1
字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15
上面代码中,parseInt
的参数都是字符串,结果只返回字符串头部可以转为数字的部分。
如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN
。
parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1
所以,parseInt
的返回值只有两种可能,要么是一个十进制整数,要么是NaN
。
2、parseFloat()
parseFloat
方法用于将一个字符串转为浮点数。
parseFloat('3.14') // 3.14
如果字符串符合科学计数法,则会进行相应的转换。
parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14
如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。
parseFloat('3.14more non-digit characters') // 3.14
parseFloat
方法会自动过滤字符串前导的空格。
parseFloat('tvr12.34n ') // 12.34
如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN
。
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN
parseFloat('1avc') // 1
parseFloat('a1') // NaN
上面代码中,尤其值得注意,parseFloat
会将空字符串转为NaN
。
这些特点使得parseFloat
的转换结果不同于Number
函数。
parseFloat(true) // NaN
Number(true) // 1
parseFloat(null) // NaN
Number(null) // 0
parseFloat('') // NaN
Number('') // 0
parseFloat('123.45#') // 123.45
Number('123.45#') // NaN
3、isNaN()
isNaN
方法可以用来判断一个值是否为NaN
。
isNaN(NaN) // true
isNaN(123) // false
但是,isNaN
只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN
,所以最后返回true
,这一点要特别引起注意。也就是说,isNaN
为true
的值,有可能不是NaN
,而是一个字符串。
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true
4、isFinite()
isFinite
方法返回一个布尔值,表示某个值是否为正常的数值。
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true
除了Infinity
、-Infinity
、NaN
和undefined
这几个值会返回false
,isFinite
对于其他的数值都会返回true
。
String
将0
个或者任意多
个字符排列起来放在单引号
或者双引号
当中,就是一个字符串(String)
。
var a = "hello,world!";
var b = 'hello,JavaScript!';
上面的变量a
和b
当中存储的数据就是字符串
,其中一个使用了单引号,一个使用了双引号,两者都是合法的。
单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。
'key = "value"'
"It's a long journey"
如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。
'Did she say 'Hello'?'
// "Did she say 'Hello'?"
"Did she say "Hello"?"
// "Did she say "Hello"?"
由于 HTML 语言的属性值使用双引号
,所以很多项目约定JavaScript
语言的字符串只使用单引号
,在这套系列教程中会遵守这个约定。当然,只使用双引号也完全可以。重要的是坚持使用一种风格,不要一会使用单引号表示字符串,一会又使用双引号表示。
字符串默认只能写在一行内,分成多行将会报错。
'a
b
c'
// SyntaxError: Unexpected token ILLEGAL
上面代码将一个字符串分成三行,JavaScript 就会报错。
如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
var longString = 'Long
long
long
string';
longString
// "Long long long string"
上面代码表示,加了反斜杠以后,原来写在一行的字符串,可以分成多行书写。但是,输出的时候还是单行,效果与写在同一行完全一样。注意,反斜杠的后面必须是换行符,而不能有其他字符(比如空格),否则会报错。
连接运算符(+
)可以连接多个单行字符串,将长字符串拆成多行书写,输出的时候也是单行。
var longString = 'Long '
+ 'long '
+ 'long '
+ 'string';
转义字符:
反斜杠()在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。
需要用反斜杠转义的特殊字符,主要有下面这些。