最近开始把精力放在重新复习JavaScript的基础知识上面，不再太追求各种花枝招展的前端框架，框架再多，适合实际项目才是最重要。
上星期在掘金发布了几篇文章，其中最大块算是 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)，也是让我好好把这些规范复习了一遍，虽然不是完全的原创，而是自己的一些复习笔记，但是还是让我感觉还是挺有用的，在项目开发过程中，有有意识的去使用到这些新的规范。
这次开始复习 MDN 这个系列的文章，巩固好自己的基础，也让自己养成记录学习的习惯，当然这些文章我也会同步到自己的博客。
希望自己的文章会对各位有所帮助，也欢迎各位大佬指点。
正文开始
本章节复习的是JS中的基本语法，变量声明，数据类型和字面量。
首先要记住：JavaScript 对大小写敏感，即 varatt; 和 varAtt 是两个不同变量。
1.注释
-
// 单行注释 -
/* -
多行注释 -
*/
2. 声明
JavaScript有三种声明方式：
-
var 声明一个变量，可赋一个初始值。 -
let 声明一个块作用域的局部变量，可赋一个初始值。 -
const 声明一个块作用域的只读命名的常量。
声明变量
变量的名字又叫做“标识符”，必须以字母、下划线（ _）或者美元符号（ $）开头，并且区分大小写。
变量声明有三种方式：
- 如
vara=1，声明局部变量和全局变量。 - 如
a=1，声明一个全局变量，且在严格模式报错，不应该使用。 - 如
leta=1，声明一个块作用域的局部变量。
注意：
- 若没有为变量赋初始值，则值默认为
undefined；
-
let a; -
console.log(a); // undefined
- 若没有声明变量而直接使用，会抛出
ReferenceError错误；
-
console.log(b); // Uncaught ReferenceError: b is not defined
- 当变量值为
undefined时，布尔值环境会当做 false，数值环境会当做 NaN；
-
var a; -
if(!a){ -
console.log('a为undefined'); // a为undefined -
} -
a + 1; // NaN
- 当变量值为
null时，布尔值环境会当做 false，数值环境会当做 0；
-
let a = null; -
if(!a){ -
console.log('a为unll'); // a为unll -
} -
a + 1; // 1
变量作用域
全局变量：即声明在函数之外，当前文档所有地方都可以访问；
局部遍历：即声明在函数内部，仅在当前函数内可以访问；
在ES5之前没有语句块作用域的概念，并只能使用 var进行声明，用 var声明的变量，在函数内和全局都可以访问，而在ES6开始，将只能在声明的作用域中使用：
-
if(true){ -
var a = 1; -
} -
a; // 1 -
if(true){ -
let b = 2; -
} -
b; // ReferenceError: b is not defined
变量声明提前
即将变量的声明提升到函数或语句的顶部，并返回 undefined直到变量被初始化操作。
千万注意：
ES5以及之前，才有变量声明提前，在ES6开始就不存在变量提升。
-
// ES5及之前 -
console.log(a); // undefined -
var a = 1; -
console.log(a); // 1 -
// ES6开始 -
console.log(b); // Uncaught ReferenceError: b1 is not defined -
let b = 2; -
console.log(b); // 2
函数提升
函数声明有两种方式：函数声明和函数表达式两种方式：
-
// 函数声明 -
f(); // 'hi leo' -
function(){ -
console.log('hi leo'); -
}; -
// 函数表达式 -
g(); // Uncaught TypeError: g is not a function -
var g = function(){ // 换成 let 声明也一样 -
console.log('hi leo'); -
}
全局变量
全局变量默认是全局对象（ window）的属性，常常使用 window.variable语法来设置和访问全局变量。
这边还需要记住：
- ES5之中，顶层对象的属性等价于全局变量（浏览器环境中顶层对象是
window，Node中是 global对象）； - ES6之中，
var/ function声明的全局变量，依然是顶层对象的属性，但是 let/ const/ class声明的全局变量不属于顶层对象的属性，即ES6开始，全局变量和顶层对象的属性是分开的。
-
// ES5 -
var a = 'leo'; -
window.a; // 'leo' -
// ES6 -
let b = 'leo'; -
window.b; // undefined
常量
ES6之后我们可以使用 const来声明一个只读的常量，并且在声明时必须赋值，之后在相同作用域中不能赋值也不能重新声明，否则报错。
-
const a; -
// Uncaught SyntaxError: Missing initializer in const declaration -
const b = 'leo'; -
b = 'hi'; -
// Uncaught TypeError: Assignment to constant variable. -
function f(){ -
const a1 = 'hi'; -
console.log(a1); -
} -
f(); // 'hi' -
const a1 = 'hi leo'; -
a1; // "hi leo"
尽管 const声明的变量不能直接修改值，但是对于对象和数组，却是不受保护可以修改的：
-
const a = {name:'leo',age:25}; -
a.name = 'pingan'; // a => {name: "pingan", age: 25} -
const b = ['hi', 'leo']; -
b[1] = 'pingan'; // b => ["hi", "pingan"]
3.数据结构和类型
数据类型
JavaScript中一共分为7中不同类型：
- 六种原型数据类型：
- 1.Boolean : 布尔值，true和false;
- 2.null : 对大小写敏感（即
null/ Null/ NULL完全不同）; - 3.undefined : 空类型，变量未定义时候的值；
- 4.Number : 数值类型，如
100; - 5.String : 字符串类型，如'hi pingan';
- 6.Symbol（ES6新增） : 表示一种唯一且不可变的数据;
- 以及Object对象类型
数据类型转换
由于JavaScript是门动态类型语言，因此在开发过程可以不需要指定数据类型，在执行时会自动转换：
-
var a = 100; -
a = 'hi leo'; // 这样不报错
另外还有：
-
let a1 = '10'; -
let b1 = 20; -
a1 + b1; // 30 -
let a2 = 'leo ' + 10 + ' age'; // 'leo 10 age' -
'10' - 5; // 5 -
'10' + 5; // 105
转换字符串为数字小技巧
小技巧很多，这里说个最简单的：
-
// 这样不会使两个数字计算总和： -
'1.1' + '1.2'; // '1.11.2' -
// 实际上要这样： -
+'1.1' + +'1.2'; // 2.3
4.字面量
字面量是用来表示如何表达这个值，简单理解就是变量赋值时右边的都是字面量。比如：
-
let a = 'hi leo';
hi leo为字符串字面量， a为变量名。
字面量分为七种：
- 1.数组字面量
- 2.布尔字面量
- 3.浮点数字面量
- 4.整数字面量
- 5.对象字面量
- 6.正则字面量
- 7.字符串字面量
数组字面量
使用数组字面量创建数组的时，指定元素的值，并作为数组的初始化，从而确定数组长度。
-
let a = ['hi','leo','hello','pingan']; -
a[1]; // 'leo' -
a.length; // 4
若使用多余逗号，作为数组字面量，则值为 undefined，并且数组长度也会正常计算：
-
let a = ['hi', ,'leo']; -
a[0]; // 'hi' -
a[1]; // undefined -
a.length; // 3
布尔字面量
只有 true和 false：
-
let a = true;
整数字面量
整数可以用十进制（基数为10）、十六进制（基数为16）、八进制（基数为8）以及二进制（基数为2）表示。
浮点数字面量
浮点数字面量组成：
- 一个十进制的整数，可以带正负号;
- 小数点
- 小数部分（只能十进制）
- 指数部分
-
let a = 3.14; // 3.14 -
let b = -.001; // -0.001 -
let c = -3.14e+12; // -3.14*1012 -
let d = .1e-23;// 0.1*10 - 23 = 10-24 = 1e-24
对象字面量
对象字面量是由 {}包含一个或多个 键:值 对的列表：
-
let a1 = 'hi leo'; -
let a2 = function(){ return 'my name is pingan' }; -
let obj = { -
n1 : 'pingan', -
n2 : a1, -
n3 : a2() -
} -
obj; // {n1: "pingan", n2: "hi leo", n3: "my name is pingan"}
也可以使用任意数字或字符串作为对象属性的名字，但必须用 ''引号包裹：
-
let obj = { -
"" : "hi leo", -
"!" : "hi pingan", -
2 : 'hi number' -
} -
obj; // {2: "hi number", "": "hi leo", !: "hi pingan"} -
obj[""]; // "hi leo" -
obj[2]; // "hi number"
正则字面量
使用字符被正斜杠“ /”围起来的表达式：
-
var a = /ab+c/;
字符串字面量
使用单引号（ ''）或者双引号（ ""）括起来的字符串：
-
let a = 'leo'; -
a.length; // 3
ES6中新增了模板字符串，作用于：
- 方便拼接字符串
- 有效实现字符串换行
- 防止注入
- 建立基于字符串的高级数据抽象
-
// 拼接字符串 -
let name = 'leo'; -
let a = ` -
hi ${name} -
`; -
a; // 'hi leo' -
// 换行 -
let b = ` -
hi -
leo -
`; -
b; -
// " -
// hi -
// leo -
// "
常用特殊字符:
字符 | 含义 |
\b | 退格符 |
\f | 换页符 |
\n | 换行符 |
\r | 回车符 |
\t | Tab (制表符) |
\v | 垂直制表符 |
\' | 单引号 |
\" | 双引号 |
\ | 反斜杠字符（\） |
参考文章：
1.MDN 语法和数据类型
