一、JavaScript简介

JavaScript 是一门解释型编程语言，解释型编程语言指代码不需要手动编译，而是通过解释器边解释边执行。所以，要运行 JS，我们需要在计算机中安装 JS 的解释器。我们使用的浏览器已经集成了 JS 的解释器。JS 是一门函数式编程语言。在 JS 中，函数可以向其它类型的值一样赋值给任意变量，也可以作为参数传递给其它函数。JS是一门单线程的编程语言。JS 同一时间只能做一件事，一件事完成才会继续做另一件事。JS 是一门面向对象的语言。

二、JavaScript的编写位置

可以将 JS 编写到网页内部的 <script> 标签中；
可以将 JS 编写到外部的 JS 文件中，然后通过 <script> 标签进行引入
可以将 JS 代码编写到指定的属性中

<!DOCTYPE html>

<html>

    <head>

        <title>JavaScript</title>

        <meta charset="UTF-8">

        <!-- JS代码需要编写到script中 -->

        <script>

            // 在网页中弹出一个警告框

            alert('Hello world!');

            // 在控制台打印

            console.log('你好，世界');

            // 往文档（网页）中写入内容

            document.write('世界，你好');

        </script>

        <!-- 通过外部js文件引入 -->

        <script src="./script/script.js"></script>

    </head>

    <body>

        <!-- 将JS代码写到指定的属性 -->

        <br>

        <button onclick="alert('按钮被点击了')">按钮</button>

        <br>

        <a href="javascript:alert('超链接被点击了')">超链接</a>

    </body>

</html>

script.js 文件位于它的下一级目录【script】中：

alert('外部的JS文件执行了');

<script> 标签同时只能有一个作用，要么写 JS 代码，要么引入外部 JS 文件，不能同时写 JS代码和引入外部 JS文件

三、注释

注释中的内容会被解释器忽略，可以通过注释来对代码进行解释说明，也可以通过注释来注释掉不想被执行的代码；

单行注释：//，注释内容从 // 始到本行和结尾
多行注释：/* */，注释内容以 /* 开头，以 */ 结尾，可以注释多行

/*

    1、JS中严格区分大小写

    2、在JS中多个空格和换行会被忽略

    3、JS中每条语句都应该以 ; 结尾

        JS中具有自动添加;的机制，所以如果不写分号，解释器会自动添加

*/ 

alert(

    123

);               // alert()用来弹出一个警告框

四、关键字

JS 关键字指在 JS 中有特殊含义的单词。

abstract	continue	finally	instanceof	private	this
boolean	default	float	int	public	throw
break	do	for	interface	return	typeof
byte	double	function	long	short	true
case	else	goto	native	static	var
catch	extends	implements	new	super	void
char	false	import	null	switch	while
class	final	in	package	synchronized	with

五、字面量

字面量就是一个一个的值，字面量所表示的意思就是它的字面值，在 JS 中可以直接使用字面量；

字面量类型	说明	举例
数值型	数字 NaN 表示非数字 Infinity 表示无穷大	123、3.14
字符串	用引号引起的内容	"123"、'abc'
布尔值	布尔值，表示真假	true、false
未定义值	一个特殊的值，表示变量还没有赋值	undefine
空值	一个特殊的值，空值	null

console.log(123);

// typeof可以查看值的类型，返回的是一个字符串

console.log(typeof 123);

console.log(3.14);

console.log(typeof 3.14);

console.log(NaN)

console.log(typeof NaN);

console.log(Infinity)

console.log(typeof Infinity);

console.log('hello')

console.log(typeof 'hello');

console.log(true)

console.log(typeof true);

console.log(false)

console.log(typeof false);

console.log(undefined)

console.log(typeof undefined);

console.log(null)

console.log(typeof null);

六、变量

变量可以用来“存储”字面量，并且变量中存储的字面量可以随意的修改。通过变量可以对字面量进行描述。我们可以使用 let 或 var 关键字声明变量。变量中并不存储任何值，而是存储值的内存地址。

// 声明变量，并赋值

let x = 80;

console.log(x);

console.log(typeof x);

x = 'hello';

console.log(x);

console.log(typeof x);

使用 let 关键字声明变量有块作用域，而使用 var 关键字声明的变量没有块作用域；

七、常量

不可变的变量就是常量。在 JS 中用 const 关键字声明常量。常量只能赋值一次，重复赋值会报错。

// 在JS中使用const声明常量

const PI = 3.14;

console.log(PI);

八、标识符

在 JS 中，所有可以由我们自主命名的内容，都可以认为是一个标识符，例如：变量名、函数名、类名等等。使用标识符时，需要遵循以下的命名规范：

标识符只能含有字母、数字、下划线、$，且不能以数字开头
标识符不能是 JS 中的关键字和保留字

命名规范：

不建议使用内置的函数名或类名作为变量名
通常情况下，使用驼峰命名法，首字母小写，剩下每个单词开头大写
类名使用大驼峰命名法，每个单词的首字母大写
常用的字母全部大写多个单词之间使用下划线分隔

let bookName = 'HTML5权威指南';

let MAX_LENGTH = 200;

九、数据类型

JS 中的数据类型由原始值和对象共同组成。JS 中一共有 7 种原始值，它们分别是：数值（Number）、大整数（Bigint）、字符串（String）、布尔值（boolean）、空值（Null）、未定义（undefined）、符号（Symbol）；原始值在 JS 中是不可变类型，一旦创建就不能修改（数据本身不能改变，变量可以指向其它数据）。

9.1、数值

在 JS 中所有整数和浮点数（小数）都是数值。在 JS 中数值并不是无限大的，当数值超过一定范围后会显示近似值。Infinity 是一个特殊的数值表示无穷。所以，在 JS 中进行一些精度比较高的运算时要十分注意。Nan 也是一个特殊的数值，表示非法的数值。使用 typeof 检查一个数值会返回 "number"；

let a = 10;

console.log(a);

console.log(typeof a);

a = 3.14;

console.log(a);

console.log(typeof a);

a = 9999999999999911111;

console.log(a);

a = Infinity;

console.log(a);

console.log(typeof a);

a = NaN;

console.log(a);

console.log(typeof a);

9.2、大整数

大整数用来表示一些比较大的整数。大整数使用 n 结尾，理论上，它可以表示数字的范围是无限大的（受内存大小影响）。使用 typeof 检查一个大整数时，会返回一个 "bigint"；

let a = 99999999999999999999999999999999999999999999999n;

console.log(a);

console.log(typeof a);

9.3、字符串

在 JS 中字符串需要使用引号引起来，引号可以是单引号，也可以是双引号，但是不要混的用。相同的引号间不能嵌套使用。使用 typeof 检查一个字符串时会返回 "string"；

在 JS 中，使用“\” 进行转义。

转义字符	描述
\b	退格
\r	回车符
\n	换行符
\t	水平制表符
\v	垂直制表符
\f	换页
\'	单引号
\"	双引号
\\	反斜杠
\OOO	八进制整数，范围：000~777
\xHH	十六进制整数，范围：00~FF
\uhhhh	十六进制编码的 Unicode 字符

在 JS 中使用 ` 来表示模板字符串，模板字符串中可以嵌入变量。

let a = 'hello';

console.log(a);

console.log(typeof a);

a = '子曰："君子不重则不威，学则不固。"';

console.log(a);

a = 'hello\tworld';

console.log(a);

let name = '冰翎';

a = `你好，${name}`;

console.log(a);

9.4、布尔值

布尔值主要用来逻辑判断。布尔值只有两个：true 和 false；使用 typeof 检查一个布尔值会返回 "boolean"；

let bool = true;

console.log(bool);

console.log(typeof bool);

bool = false;

console.log(bool);

console.log(typeof bool)

9.5、空值

空值用来表示空对象。空值只有一个： null；使用 typeof 检查空值会返回 "object"；

let a = null;

console.log(a);

console.log(typeof a);

9.6、未定义

当声明一个变量而没有赋值时，它的值就是 undefined，undefined 类型的值只有一个就是 undefined。使用 typeof 检查一个 undefined 类型的值时，会返回 "undefined"。

let a;

console.log(a);

console.log(typeof a);

9.7、符号

符号用来创建一个唯一的标识。使用 typeof 检查符号时会返回 "symbol"。

let c = Symbol();

console.log(c);

console.log(typeof c);

十、类型转换

类型转为是根据原有的数据创建出它所对应的要转换类型的数据，并不是直接将原有的类型直接转换为你要转换的类型；

10.1、类型转换—字符串

调用 toString()方法将其它类型转换为字符串
- 由于 null、undefined 中没有 toString()方法，所以对这两个值调用 toString()方法时会报错；
调用 String() 函数将其它类型转为字符串
- 对于拥有 toString()方法的值调用 String()函数时，实际上就是在调用 toString()方法；
- 对于 null，则直接转换为 "null"；
- 对于 undefined，则直接转换为 "undefined"；

// 调用toString()方法

let a = 10;

let b = a.toString();

console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

let c = null;

console.log(c);

console.log(typeof c);

// 调用String()函数

let d = String(c);

console.log(d);

console.log(typeof d);

类型转为字符串是根据原有的数据创建出它对应的字符串值，并不是直接将原有的类型直接转换为字符串类型；

10.2、类型转换—数值

使用 Number()函数，将其它类型转为为数值；
- 如果字符串是一个合法的数字，会自动转换为对应的数据；
- 如果字符串不是合法的数字，则转换为 NaN；
- 如果字符串是空串或纯空格的字符串，则转换为 0；
- 布尔值：true 转换为 1，false 转换为 0；
- null 转换为 0；
- undefined 转换为 NaN；
使用 parseInt()，将一个字符串转换为一个整数；
- 解析时，会自左向右读取一个字符串，直到读取字符串中所有的有效的整数；
使用 parseFloat()，将一个字符串转换为浮点数；

// 合法数字的字符串 --> 对应的数值

let a = '123';

let b = Number(a);

console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

// 不合法的数字的字符串 --> NaN

a = 'abc';

b = Number(a);

console.log(a);

console.log(b);

// '' --> 0

a = '';

b = Number(a);

console.log(a);

console.log(b);

// ' ' --> 0

a = ' ';

b = Number(a);

console.log(a);

console.log(b);

// true --> 1

a = true;

b = Number(a);

console.log(a);

console.log(b);

// false --> 0

a = false;

b = Number(a);

console.log(a);

console.log(b);

// null --> 0

a = null;

b = Number(a);

console.log(a);

console.log(b);

// undefined --> NaN

a = undefined;

b = Number(a);

console.log(a);

console.log(b);

a = "123.45px";

console.log(a);

b = parseInt(a);

console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

b = parseFloat(a);

console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

类型转为数值是根据原有的数据创建出它对应的数值，并不是直接将原有的类型直接转换为数值类型；

10.3、类型转换—布尔值

使用 Boolean()函数，将其它类型转换为布尔值；
- 非0的数字和 Infinity，转换为 true；数字0 和 NaN，转换为 false；
- 非空字符串，转换为 true；空串，转换为 false；
- null 和 undefined 转换为 false；

// 非0数字 --> true

let a = -1;

b = Boolean(a);

console.log(a);

console.log(typeof a);

console.log(b);

console.log(typeof b);

// 0 --> false

a = 0;

b = Boolean(a);

console.log(a);

console.log(b);

// NaN --> false

a = NaN;

b = Boolean(a);

console.log(a);

console.log(b);

// Infinity --> true

a = Infinity;

b = Boolean(a);

console.log(a);

console.log(b);

// 非空字符串 --> true

a = 'abc';

b = Boolean(a);

console.log(a);

console.log(b);

// ' ' --> true

a = ' ';

b = Boolean(a);

console.log(a);

console.log(b);

// '' --> false

a = '';

b = Boolean(a);

console.log(a);

console.log(b);

// null --> false

a = null;

b = Boolean(a);

console.log(a);

console.log(b);

// undefine --> false

a = undefined;

b = Boolean(a);

console.log(a);

console.log(b);

类型转为布尔值是根据原有的数据创建出它对应的布尔值，并不是直接将原有的类型直接转换为布尔类型；

所有的表示空性的、没有的、错误的值都会转换为 false；

01. JavaScript基础知识的更多相关文章

JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...
JavaScript基础知识从浅入深理解（一）
JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...
JavaScript基础知识必知！！！
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...
JavaScript基础知识梳理，你能回答几道题？
在学习JavaScript的时候,总是这里学一点,那里学一点,很的很零星,很杂,没有很系统的去学习,感觉好像JavaScript的知识点都了解了,但是真正要说起来,又不知道从何说起! 最深刻的体会就是 ...
JavaScript基础知识笔记
做前端几年了,一直疏于整理归纳,所以这两天把基础看了一遍,加上使用经验,整理了基础知识中关键技术,旨在系统性的学习和备忘.如果发现错误,请留言提示,谢谢! 重要说明:本文只列举基础知识点,中级和高级内 ...
JavaScript——基础知识，开始我们的js编程之旅吧！
JavaScript基础第01天 1. 编程语言编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...

随机推荐

通过Container制作Image
1.拉取tomcat镜像 docker pull tomcat docker images 2.根据tomcat镜像创建一个tomcat container docker run -d -it --n ...
Jmeter 实现Json格式接口测试
接口Request Headers中的Content-Type和和charset 在"HTTP请求"中添加UTF-8 在"HTTP信息头管理器"中添加Conte ...
nginx配置根据url的参数值进行转发
server { listen 8081; location / { set $tag ""; set $cs "/index/test/test"; prox ...
go语言web框架-如何使用gin教程+react实现web项目
go-web+ react实践项目前端使用react 搭建,从webpack搭建开始写,后端是学习go语言过程中的实践,由于之前没有实际的后端web经验,所以是自己一点一点摸索出来的.有错漏还望指正 ...
CGAL求最小外包矩形
有两种所谓的最小外包矩形,第一种通过求所有节点的最小与最大xy来求的,这种叫与坐标轴平行的最小外包矩形:另外一种则是本文说的这种,与范围的形状与走势有关的,叫非坐标轴平行的最小外包矩形,效果如下图所示 ...
VUE学习-生命周期
生命周期函数描述 beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用. created 在实例创建完成后被立即 ...
Cascader 级联选择器数据不回显
这次的问题原因主要是因为数据存在于两张表并且索引的字段不同一个为id(int)一个为字符(string) 在做修改操作数据回显的时候会导致后端返回的数组中一个为字符一个为bumber ...
Git commit时提示错误时解决办法
问题描述: * Please tell me who you are. Run git config –global user.email "you@example.com" ...
ESP8266_RTOS_SDK更新子模块出错git remote: [session-f0448081] 404 not found!
报错:git remote: [session-f0448081] 404 not found! 在.git文件夹中的config文件中找到子模块的地址,用浏览器打开发现确实没有对应的子模块仓库,这个 ...
Count Triplets That Can Form Two Arrays of Equal XOR
Count Triplets That Can Form Two Arrays of Equal XOR 题意给定一个数组,求多少个三元对$(i,j,k)$满足\(S(i,j-1)=S(j,k) ...

01. JavaScript基础知识