【JavaScript笔记 · 基础篇(一)】帮你构建JavaScript的世界观！小白入门必看！！（JavaScript基本概念篇）

本文链接：https://blog.youkuaiyun.com/JZevin/article/details/107616493

前言 · 学习模式推荐

前期——服务器端思想：

系统	linux系统（ubuntu16.04）
编辑器	vim
执行环境	node.js
学习重点	ES5，ES6语法
兼容性问题	不存在

在node.js中，不存在兼容性问题，因为node.js中压根就没有DOM / BOM。因此切记不要在node.js中执行任何DOM / BOM代码。

由于不存在兼容性问题，node.js可以大量发挥js高级标准——ES6，所以刚开始在学习基础语法的时候，更推荐大家在linux系统上的node.js环境下学习。

后期——浏览器端思想：

系统	Windows / Mac os
编辑器	vscode等
执行环境	chrome / Firefox等浏览器
学习重点	BOM，DOM
兼容性问题	存在

由于node.js中无法执行DOM / BOM代码，所以后续学习就必须得切换到浏览器端学习。
当然之前的基础语法也可以继续巩固，但是由于ES6的部分高级语法在某些浏览器上存在兼容性问题，所以学习时要注意。

一. 历史背景

JavaScript诞生于1995年，当时的主要目的是为了运行在浏览器中进行简单的表单验证。

JavaScript其实本来叫LiveScript，但在发布前夕，为了搭上势头正劲的java顺风车，临时把LiveScript改名为JavaScript。（没错，JavaScript与java其实并没有关系，蹭热度实锤，哈哈）

二. JS组成

组成部分	作用	提供者	兼容性
ECMAScript	核心语法	ECMA	不存在（ES6的部分高级语法仍存在）
BOM (Browser Object Model)	浏览器对象模型用来控制浏览器的代码	浏览器厂商	存在
DOM (Document Object Model)	文档对象模型用来控制html / css 的代码	浏览器厂商	存在

三. 与Java的区别对比（特点）

	JavaScript	Java
数据类型	弱类型语言 ① 变量的数据类型在初始化的时候确定； ② 变量的数据类型可以随时变化； ③ 类型细分不明显；	强类型语言 ① 变量的数据类型在声明的时候确定； ② 变量的数据类型一旦确定不能更改； ③ 类型细分明显；
定位	基于对象和事件驱动的脚本语言	完全面向对象的编程语言
执行方式	解释性语言，执行前无需编译	执行前必须编译为.class文件
联编方式	动态联编（JS的对象引用在运行时进行检查）	静态联编（Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查）

拓展问题：那到底是强类型语言学习难度大还是弱类型语言学习难度大？

学习难度上肯定是弱类型语言比较难。
这就相当于小公司和大公司的区别：
在小公司中工作划分不明显，有时候会需要承担多个岗位的工作，比如偶尔客串设计，后端攻城狮等等；
大公司分工明确，做好自己的本职工作即可。

四. 书写位置

JavaScript是需要嵌入到HTML文档里发挥作用。

4.1 内嵌式

理论上JavaScript代码可以写在HTML文档的任意位置。建议写在<body>结束标签之前。

    <script>
      alert("内嵌式")
    </script>
  </body>
</html>

4.2 外链式

单独新建一个后缀名为.js的JS文件，编写好HTML文件，在<head>标签中添加<script> 标签来导入JS文件。

<script src="js文件路径地址"></script>

4.3 行内式

比如：直接写在开始标签里的点击事件属性。

<button onclick="alert('提交成功！');">提交</button>

五. 注释

5.1 单行注释

var a = 2;//单行注释

5.2 多行注释

/*
  第一行注释
  第二行注释
*/
var a = 2;
let b = 3;

六. 关键字&保留字

6.1 关键字：(在js中有特殊功能)

break	do	try	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger	this	function	with
default	if	throw	instanceof
delete	in

6.2 保留字：(将来可能成为关键字)

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	double	implements	protected
volatile	import	public

七. 变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型，可以用来保存任何类型的数据。

弱类型特点：
① 变量的数据类型在初始化的时候确定；
② 变量的数据类型可以随时发生变化；
③ 类型细分不明显；

7.1 var

var(variable 变量)这种声明变量的方法是ES5中的做法，它存在以下三大特点：

变量可以重复声明；（体现JS弱类型语言特点：变量的数据类型可以随时变化）

var a = 2;
var a = "hello world";

变量声明会被提升（函数的声明也会），提升到所有代码执行之前；

console.log(a);
var a = 2;

执行这两句代码会输出undefined而不是报错。按理说应该是从上到下顺序执行，但是JS会在所有代码执行之前，进行预处理，会去寻找整个js代码中所有var的声明，并提升到所有代码执行之前。
相当于如下代码：

var a;
console.log(a);
a = 2;

var在函数外声明的变量作用域是全局的，全局变量在 JavaScript 程序的任何地方都可以访问；函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量。

function fun(){
   if(true){
      var a = 3;
      console.log(a); //输出：3 正常访问
   }
   console.log(a); //输出：3 变量a定义在函数内，函数内任意位置都可以访问
};
console.log(a); //会报错：函数外不能访问
fun();

7.2 let

let 声明的变量只在 let 命令所在的代码块{}内有效。

{ 
    let a = 2;
}
// 这里不能访问a变量

7.3 const

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

const GLOBAL = 10;

7.4 变量名的命名规则

变量名由字母，数字，下划线以及$组成；
不要使用下划线或者数字作为变量名的开头；
变量名应该具有一定的意义，使用驼峰命名规则（比如：myGoodsList）；
不要使用关键字或是保留字；

八. 流程控制语句

这一部分在C语言，java等语言中都是通用的，属于编程基础。

8. 1分支语句

8.1.1 if语句

if（exp）{
   //if代码块
};

如果exp为true或者可以被转换为true的时候，大括号内的代码可以被执行。

if（exp）{
   //if代码块
}else{
   //else代码块
};

如果exp为true或者可以被转换为true的时候，执行if代码块的内容；否则执行else代码块的内容。

if（exp1）{
   //if代码块1
}else if（exp2）{
   //if代码块2
}else{
   //else代码块
};

如果exp1为true或者可以被转换为true的时候，执行if代码块1的内容；否则继续判断exp2，如果exp2为true时，执行if代码块2的内容；否则执行else代码块的内容。

8.1.2 switch语句

if-else分支较多时，代码很繁琐，用switch更简洁一些。

switch（v）{
    case v1:
       ...
       break;
    case v2:
       ...
       break;
    case v3:
       ...
       break;
    default:
       ...
}

v与v1，v2，v3等依次进行全等（===）运算，结果为true时，执行该case段代码，然后break跳出switch循环。
default代码块可以位于switch的任意位置，但要注意，如果不是位于最下方，一定要在default代码块中添加break。

8.2 循环语句

8.2.1 for

for（初始化条件；结束判定条件；迭代）{
     循环体
}

案例一：1 ~ 100累加（一重循环）：

var num = 0;
for（var i = 0 ; i < 100 ; i ++）{
    num += i;
};
console.log（num）; 


——————OUTPUT———————
5050

案例二：九九乘法表（多重循环）：

for(var i = 1;i<=9;i++){
    var num = " ";
    for(var j = 1;j<=i;j++){
        num +=(j + " * " + i + " = " + i*j) + (i*j >9?" ":"  ");
    };
    console.log(num);
};


——————OUTPUT———————
 1 * 1 = 1  
 1 * 2 = 2  2 * 2 = 4  
 1 * 3 = 3  2 * 3 = 6  3 * 3 = 9  
 1 * 4 = 4  2 * 4 = 8  3 * 4 = 12 4 * 4 = 16 
 1 * 5 = 5  2 * 5 = 10 3 * 5 = 15 4 * 5 = 20 5 * 5 = 25 
 1 * 6 = 6  2 * 6 = 12 3 * 6 = 18 4 * 6 = 24 5 * 6 = 30 6 * 6 = 36 
 1 * 7 = 7  2 * 7 = 14 3 * 7 = 21 4 * 7 = 28 5 * 7 = 35 6 * 7 = 42 7 * 7 = 49 
 1 * 8 = 8  2 * 8 = 16 3 * 8 = 24 4 * 8 = 32 5 * 8 = 40 6 * 8 = 48 7 * 8 = 56 8 * 8 = 64 
 1 * 9 = 9  2 * 9 = 18 3 * 9 = 27 4 * 9 = 36 5 * 9 = 45 6 * 9 = 54 7 * 9 = 63 8 * 9 = 72 9 * 9 = 81

8.2.2 while（前置判断循环）

while循环会先进行结束条件判断才会执行循环体。

初始化条件
while（结束判定条件）{   
    迭代
};

仍以1 ~ 100累加为例：

var i = 1;
var result = 0;
while（i < = 100）{
    result += i;
    i++;
};
console.log（result）;


——————OUTPUT———————
5050

8.2.3 do-while

do-while循环中会先执行一次循环体之后，才会进行结束条件判断。可根据实际需求选择循环语句。

初始化条件
do {
    迭代
}  while（结束判定条件）;

仍以1 ~ 100累加为例：

var i = 1;
var result = 0;
do {
    result += i;
    i++;
} while（i < = 100）;
console.log（result）; 


——————OUTPUT———————
5050

8.2.4 for-in

for-in循环常用来遍历一个对象的全部属性或者一个数组的全部元素。从这里也可以看出，数组是特殊的对象，对象的属性值（键名）对应数组的索引下标（index）。
for-in循环其实还有更多深层的点，之后文章再详细补充。

var arr = [12,43,4,67,23];
var obj = {
    name:"zevin", 
    gender:"male",
    '1107':21,
};

//遍历数组arr的所有元素
for(var num in arr){
    console.log(num,arr[num]);
};
//遍历对象obj的所有属性
for(var key in obj){
    console.log(key,obj[key]);
};

——————OUTPUT———————
0 12
1 43
2 4
3 67
4 23
1107 21
name zevin
gender male