1. 环境：

JavaScript简称js，后续我们将使用js来代替JavaScript。

认识代码前，需要安装js代码运行环境。

安装nodejs：在https://nodejs.org/zh-cn/ 下载LTS版本，然后安装
安装visual studio code：https://code.visualstudio.com/ 下载安装
注：本教程基于ES6标准

安装完成后，打开visual studio code后，软件右下角会建议你安装中文插件，直接点安装。

建立一个新js文件：hello.js，保存到你想保存的目录。

在文件中输入：

console.log('hello world')
复制代码

点击 visual studio code 上方菜单”调试-启动调试“，你将会在下方的调试窗口看到输出的'hello world'。

后续我们会将 visual studio code 简称为 vscode。

2. 输出：

现在你应该知道console.log的作用是在调试窗口输出一行文字。

3. 注释

注释的意思是，将代码中不需要运行的部分标记出来。注释一般用于代码说明，来告诉代码阅读者，代码的运行逻辑。

注释的写法有2种。

//单行注释

/*
多
行
注
释
*/

console.log('hello world');

复制代码

上述代码运行结果，同之前的一样。

扫描二维码关注公众号，回复： 5814372 查看本文章

4. 变量和常量：

变量是代码运行的基本单位，代码中所有的最重要的元素都是由变量组成。

常量是一种特殊的变量，一旦声明，无法更改，无法被赋值。

let v = 12;//这是变量
const v1 = 'hello world';//这是常量
复制代码

变量有2种属性：类型和值。

4.1 变量的命名

变量名字规则如下：

字母：A-Z
数字：0-9
下划线：_
$
不能以数字开头

下面都是合法的变量：

let aaa;
let a123;
let a__;
let a_123;
let a$12_$;
let $23;
let $_a;
复制代码

下面是不合法的变量：

let 123;
let 1aa;
let +00;
let '';
let #$;
复制代码

4.1 变量的类型

不同的类型和值，代表变量的不同使用方法。

console.log('hello world');
//上面这行语句中：
//console是变量，类型是object
//log是变量，类型是function
//'hello world'是常量，类型是string
复制代码

js基本数据类型有5种，分别是：object, function, string, number, boolean。

下面分别列出：

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型

//可以使用typeof函数来输出变量的类型
console.log(typeof(obj))//输出：object
console.log(typeof(func))//输出：function
console.log(typeof(str))//输出：string
console.log(typeof(num))//输出：number
console.log(typeof(b))//输出：boolean

复制代码

除上述类型外，js中还包含一个特殊变量：undefined。这个变量表示变量没有初始化。下面来对比一下：

let a = 123;//声明了一个变量a，并且初始化为123
let b;//声明了一个变量b，没有初始化
console.log(a);//输出123
console.log(b);//输出undefined
复制代码

注意：undefined在同其他变量进行计算的时候，有时候虽然不会报错，但是不建议依赖默认值。所以声明变量一定要初始化。

4.1.1 数组

其实除了上面的类型外，还有一个特殊类型，就是数组。

数组是多个变量的合在一起组成了一种新的数据类型。一般用来表示一堆相似的数据。比如：一班级的学生，一群小动物，一家人等等。

let students = [1,2,3,4];//4个学生，编号分别为1，2，3，4
let animals = [1,2,3,4];//4个动物，编号分别为1，2，3，4
let familys = [1,2,3,4];//4个家庭成员，编号分别为1，2，3，4

console.log(students[0]);//输出：1
console.log(students[1]);//输出：2
console.log(students[2]);//输出：3
console.log(students[3]);//输出：4
复制代码

数组的值是要用 [] 来包含的，数组内部的值可以用变量或常量或表达式表示，并使用 , 分割。

如果想获取数组的元素，可以使用：数组名[下标值]的形式获取。

下标值从0开始计，比如：数组第一个元素为 数组名[0]，第二个元素为 数组名[1] ...

4.2 变量的值

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型
let arr = []; //object类型

//在上一节这个例子中，每个变量都是有值的。
//obj这个变量的值是：{}
//func这个变量的值是： function(){}
//str这个变量的值是：'hi'
//num这个变量的值是：123
//b这个变量的值是：true
//arr这个变量的值是: []
复制代码

可以看出，要给一个变量赋值，需要使用 =。

我们可以用 = 改变一个变量的值。

let num = 123;//变量的值是123
num = 234;//变量的值是234。
//注意只有声明的时候才需要在变量前加let关键字。
//而且变量不能重复声明。
let num = 344;//报错，num这个变量已经在上面声明过了。
复制代码

4.3 关键字

上文中提到了关键字，什么是关键字呢？

关键字是js语言中，为了规范代码编写规则，添加的一系列固定的单词。这些单词必须以固定的形式出现，每个关键字都表示不同的含义。

在代码中，除去变量，常量和注释，操作符以及括号，剩余的部分就是关键字。

常用关键字如下：

let
const
function
new
for
if
else
switch
break
continue
class
extends
constructor
this
super
...
复制代码

现在不需要知道每个关键字是什么意思，只知道有关键字这个概念就行。

最重要的一点是，不要给你的变量命名同关键字一样。

let let;//错误
let function;//错误
let switch;//错误
复制代码

4.4 函数

函数是为了更方便地控制程序结构，同时让程序更加容易编写，容易阅读而添加的概念。

函数能够将多条语句封装成一个整体来执行。

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型

console.log(typeof(obj))//输出：object
console.log(typeof(func))//输出：function
console.log(typeof(str))//输出：string
console.log(typeof(num))//输出：number
console.log(typeof(b))//输出：boolean

//上面的代码，封装成函数可以这样编写

function printType(val) {
	console.log(typeof(val));
}

printType(obj);
printType(func);
printType(str);
printType(num);
printType(b);

复制代码

运行一下，上下2部分的运行结果是相同的。

可以看出，封装成函数后，执行结果是相同的。

而好处显而易见。

消除了很多重复代码：console.log和typeof，使代码更容易编写。
通过printType的名字，我们可以判断出，这个函数的用途，它应该是打印类型的一个函数，这样使代码更容易阅读。

函数声明的写法是固定的：

function 函数名(参数名1, 参数名2 ...) {

//你的函数内部语句

return ...;

}

调用方式也是固定的：

函数名(参数1，参数2);

函数可以有返回值，用return表示。return 后面是一个变量或者一个表达式。

一旦一个函数添加了return，那么当调用它的时候，这个函数调用就能够像变量一样使用。

function returnInt(){
	return 123;
}

let a = returnInt();

console.log(a);//输出 123

复制代码

5. 运算符

只有变量是不够的，为了能够计算赋值，形成逻辑，js定义了一系列运算符，这些运算符将变量和常量连接在一起，形成了不同的计算过程，和逻辑代码。

上文已经介绍了 = 这个运算符，它的作用是给一个变量赋值。

现在我们介绍一些其他一些简单的运算符。

let a = 1 + 2;
let b = 3 * 4;
let c = 5 - 2;
let d = 6 / 3;

console.log(a);//输出3
console.log(b);//输出12
console.log(c);//输出3
console.log(d);//输出2
复制代码

没错就是你熟悉的 +（加法） -（减法） *（乘法） /（除法）。

上述代码，会计算等号右侧的四则运算，然后将结果赋给左侧的变量。

一些常用的运算符如下：

+
-
*
/
%
>
<
=
==
&&
||
!
()
++
+=
*=
/=
-=
%=
...
复制代码

现在你不需要了解所有运算符的含义，你只需要了解运算符是用来连接变量的，并且会一些简单的四则运算就好了。

6. 表达式

如上文所述，表达式就是：将变量使用运算符连接起来之后形成的复杂语句。

表达式出现的位置和变量相同。也就是说，能够出现变量的地方，就能出现表达式。

有一点例外，就是表达式不能出现在 = 的左侧，也就是说不能给表达式赋值。你可以认为表达式出现的位置和常量相同。

let a = 1 + 2 * 3;
let b = (1 + 2) * 3;
let c = a + b;
let d = c * a;
let e = c == d;
//上述语句 ‘=’ 右侧的都是表达式
复制代码

上面介绍的数组取值也可以认为是一个表达式：students[0]。

7. 总结

经过上面的介绍，现在给你一个程序，你应该能知道程序的每个单词分别是什么元素了。

那我们练习一下，为下列程序的每一行添加注释，说明一下这行包含什么元素。

也可以将代码copy到vscode中，运行一下看看是什么结果。


function max(a, b){
	if(a > b) {
		return a;
	}else{
		return b;
	}
}

function sort(arr) {
	for(let i = arr.length - 1; i >= 0; i--) {
		for(let j = i - 1; j >= 0; j--) {
			if(i > 0 && arr[i] != max(arr[i], arr[j])) {
				let tmp = arr[i];
				arr[i] = arr[j];
				arr[j] = tmp;
			}
		}
	}
}

let arr = [9,4,1,3,6,5,7,8,2];

sort(arr);

console.log(...arr);

复制代码

0基础JavaScript入门教程（一）认识代码