最近开始把精力放在重新复习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 语法和数据类型 本部分内容到这结束 Author 王平安 E-mail pingan8787@qq.com 博 客 www.pingan8787.com 微 信 pingan8787 每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues ES小册 js.pingan8787.com