此学习笔记来自哔哩哔哩尚硅谷

什么是JavaScript

JavaScript诞生于1995年，前身是LiveScript,其实与Java并没有关系，只是同一公司开发，当时作用是用于处理网页中的前端验证，现在一些动态效果也依赖JavaScript。

如今JavaScript已经开源，所以几个公司制订了一个标准命名为ECMAScript.

JS的HelloWorld

实验环境准备

下载HBuilderX

创建一个基本HTML项目

在项目中创建一个html文件

实验过程

JS代码和CSS一样需要使用标签包裹，JS的标签是<script>，输出的内容使用括号()和单/双引号"/'包裹，<script>标签通常写在<head>标签中

1
2
3
4
5
6
7
8
<script>
	// 控制浏览器弹出警告框
	alert("JS-HelloWorld");
	// 在页面body中输出内容
	document.write("JS-HelloWorld");
	// 向控制台输出内容，右击检查控制台查看
	console.log("JS-HelloWorld");
</script>

TIP：JS的执行是由上到下一行行执行的

JS的书写方式

JS的内部书写

1
2
3
4
5
6
7
8
<body>
	<!-- js代码可以写在onclick属性中,点击按钮出现弹窗 -->
	<button onclick="alert('JS-HelloWorld')">js-button</button>
    
    	<!-- JS在超链接中的位置,点击超链接出现弹窗 -->
	<a href="javascript:alert('JS-HelloWorld')">js-link</a>
    	<a href="javascript:;">js-link</a><!-- 没有任何反应的JS超链接 -->
</body>

以上的书写方式知道即可，因为结构与行为耦合了不方便使用，推荐往外部JS文件中书写

JS的外部导入

一个基本的项目中包括有存放js的文件夹，在文件夹下存放新建js文件，再在html文件使用<script>标签引入外部JS文件

1
2
3
4
5
6
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 引入外部JS文件 -->
	<script src="js/helloworld.js"></script>
</head>

注意：一旦这行标签引入了外部JS文件，就不能在内部编写代码了，如果需要编写就只能另起一行标签编写

JS的基本语法

  1. JS严格区分大小写
  2. JS以英文分号;结尾（虽然JS的分号是浏览器自动添加，但会消耗资源，而且容易加错分号，所以十分推荐在开发中书写分号）
  3. JS会忽略多个空格和换回，可以用于提高可读写

JS的注释方法

1
2
3
4
5
6
7
<script>
	/* 
	JS的块注释
	*/
    
	// JS的单行注释
</script>

JS的字面量和变量

字面量：不可变的，可以直接使用，但通常不会直接使用
变量：用于保存字面量，变量可以任意更改
JS变量使用var声明，同一个变量var只需要使用一次

1
2
3
4
5
6
//多条语句声明
var a;
a = sth;

//单条语句声明
var b = sth;

JS的标识符

由我们自主命名的称为是标识符
如：变量名、函数名、属性名
标识符的命名规则：

  1. 标识符中可以含有字母、数字、下划线_、dollar 符＄

  2. 不能以数字开头

  3. 不能是JS中的关键字或保留字；如break、if、for等

  4. 推荐使用驼峰命名法，helloKitty

JS的数据类型

JS中有六种数据类型，1-5是JS的基本类型

  1. String 字符串
  2. Number 数值
  3. Boolean 布尔值
  4. Null 空值
  5. Undefined 未定义
  6. Object 对象

可以使用typeof检查变量类型

1
2
var a = 123;
console.log(typeof a);	// 查看变量a的类型

String字符串

在JS中字符串需要单或双引号""引起,如果需要转义使用反斜杠\

1
2
3
var str = "hello";	// 对字符串hello赋值
document.write(str);// 对变量进行输出
document.write("str");// 对字符串str进行输出

Number数值

在JS中所有的数值都是Number，包括整数和浮点数

1
2
3
4
var a = 123;	// 数值
var a = "123";	// 字符串
console.log(Number.MAX_VALUE);// 控制台输出可以表示的数字最大值
console.log(Number.MIN_VALUE);// 最小的正值

数值的运算

1
2
var a = 123 + 222;	//整数的计算基本是精确的
var a = 0.1 + 0.05;	//但计算一些浮点数时，会得到不精确的结果

特殊数值

Infinity：超过最大值Infinity正无穷，-Infinity负无穷，它们的类型也是数值

NaN：是特殊数字，表示Not A Number

Boolean布尔值

布尔值只有两个，用作逻辑判断

  • true 真
  • false 假
1
2
var a = true;
var b = false;

NULL和Undefined

null用于表示为空的对象，如果使用typeof检查null值会返回object

undefined声明了但没有对变量赋值，它的值就是这个

1
2
var a = null;
var b;

强制类型转换

将一个数据类型强制转换为其他数据类型，通常转换为String、Number、Boolean

转换为String

方式一：调用toString() 方法,此方法不改变原变量，转换结果为返回值

1
2
3
var a = 123;
var b = a.toString();	//将结果赋值到变量b
console.log(typeof b);	//返回值为String

如果需要改变原变量直接将a赋值到输出结果即可a = a.toString();

ps:此方法对于数据类型null和undefined是没有toString()方法的

方式二：调用String()函数，参数放在括号内

1
2
var a = true;
a = String(a);

ps：此方法可以使用在null和undefined，直接转换为String

转换为Number

方式一：使用Number()函数

  1. 如果是纯数字的字符串，可以直接转换为数字
  2. 如果字符串中有非数字或类型是undefined，则转换为NaN
  3. 如果字符串是空串或空格或类型是null，则转换为0
1
2
3
4
5
6
var a = "123";
a = Number(a);

// 布尔值转数字
var b = true;
b = Number(b); //输出1，false输出0

方式二：对于字符串中夹杂有数字的一般使用，函数parseInt()转换为整数，函数parseFloat()转换为浮点数

1
2
var a = "123px";
a = parseInt(a);

Ps：parseInt()的识别是从左到右的，一旦读取到非数字的字符就会中断，后面的也不会继续识别，只取整数

1
2
var a = "123.456px";
a = parseFloat(a);

转换其他进制数字

16进制以0x开头

1
2
var a = 0x10;
console.log(a);	//输出16

8进制以0开头

1
2
3
4
5
6
var a = 070;
console.log(a);	//输出56

//即使是字符串"070"有的浏览器会解析为8进制有的会解析为10进制，可以使用parseInt()的第二个参数解决
var a = "070"
a = parseInt(a,8); 	//输出8进制

2进制以0b开头，但不是所有的浏览器都支持，兼容性不好

1
2
var a = 0b10;
console.log(a);	//输出2

转换为Boolean

使用Boolean()函数

  • 数字转换除了0和NaN，其余都是true

  • 字符串转换除了空串，其余都是true

  • null和undefined都是false

  • 对象也是true

1
2
3
4
5
6
7
8
var a = 123;
Boolean(a);	//输出true

a = NaN
Boolean(a);	//输出false

a = "hello"
Boolean(a);	//输出true

算数运算符

运算符就是操作符，对一个或多个值进行运算，并获取字符串形式的返回值，运算符操作不会改变原变量

二元运算符

加法+

从左往右运算，对两个值进行加法运算，并返回结果

1
2
3
4
5
6
result = true + false;	//输出1，Boolean会转换为1、0进行运算
result = 2 + null;	//输出2，null转换为0进行运算
result = 2 + NaN;	//输出NaN
result = "Hello" + "World";	//输出"HelloWorld",字符串相加形成拼串
result = 123 + ""	//输出"123"，任何值和字符串相加都会转变为字符串再拼串
result = 1 + 2 + "3"	//输出33，从左往右运算

减法-

做减法运算

1
2
result = 100 - true;	//输出99，Boolean会转换为1、0进行运算
result = 100 - "1";		//输出99，和字符串做减法会转变为Number再减

乘法*

做乘法运算

1
2
3
result = 2 * "8";	//输出16，和字符串做乘法会转变为Number再相乘
result = 2 * undefined;	//输出NaN
result = 2 * null;	//输出0，null转换为0

除法/

做除法运算

1
result = 4 / 2;	//输出2

求余%

1
result = 9 % 5;	//输出4，得1余4

特性

  • 任何值和NaN类型做运算都是NaN
  • 任何值做-、*、/做运算都转换为Number，任何值-0,*1,/1做Number隐性转换
  • 加法+，和任何字符串相加都会变成字符串，任何值加空串+""进行String隐性转换

一元运算符

正号+

正号不会对数字产生任何影响，对非Number的类型会先转换为Number

1
2
var a = "18";
a = +a;	//转换为Number的18

负号-

对数字进行取反，对非Number的类型会先转换为Number

1
2
var a = true;
a = -a;	//输出-1

自增和自减

自增++

在自身基础上增加1，会改变原变量

1
2
3
var a = 1;
a++;	//使用后++使a增加1，输出2
++a;	//使用前++使a增加1，输出3

前和后的自身区别

  • a++的值等于原值（自增前）
  • ++a的值等于新值（自增后）
1
2
3
4
//一个典型的例子区别前后++
var d = 20;
var result = d++ + ++d + d;	//d++是20，++d是22，d是22	
console.log("result = "+result);	// 输出result = 64

自减--

在自身基础上减1,会改变原变量

1
2
3
var num = 10;
num--;	//使用后--使unm减1，输出9
--num;	//使用后--使unm减1，输出8

前–和后–的自身区别

  • num–的值等于原值（自减前）
  • –num的值等于新值（自减后）