近来最先把精神放在从新温习JavaScript的基础知识上面，不再太寻求种种花枝招展的前端框架，框架再多，合适现实项目才是最主要。
上星期在掘金宣布了几篇文章，个中最大块算是 【温习材料】ES6/ES7/ES8/ES9材料整顿(个人整顿)，也是让我好好把这些范例温习了一遍，虽然不是完整的原创，而是本身的一些温习笔记，然则照样让我觉得照样挺有用的，在项目开辟历程当中，有有意识的去运用到这些新的范例。
此次最先温习 MDN 这个系列的文章，稳固好本身的基础，也让本身养成纪录进修的习气，固然这些文章我也会同步到本身的博客。
愿望本身的文章会对列位有所协助，也迎接列位大佬指导。

1.MDN 语法和数据范例

正文最先

本章节温习的是JS中的基础语法，变量声明，数据范例和字面量。

首先要记着：JavaScript 对大小写敏感，即var att; 和 var Att 是两个差别变量。

1.解释

// 单行解释
/*
    多行解释
*/

2. 声明

JavaScript有三种声明体式格局：

• var 声明一个变量，可赋一个初始值。
• let 声明一个块作用域的部份变量，可赋一个初始值。
• const 声明一个块作用域的只读定名的常量。

声明变量

变量的名字又叫做“标识符”，必需以字母、下划线（_）或许美圆标记（$）开首，而且辨别大小写。
变量声明有三种体式格局：

• 如var a = 1，声明部份变量和全局变量。
• 如a = 1，声明一个全局变量，且在严厉形式报错，不应该运用。
• 如let a = 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
// "

经常使用特别字符:

本部份内容到这完毕

迎接关注微信民众号【前端自习课】天天清晨，与您一同进修一篇优异的前端手艺博文 .