【重温基础】1.语法和数据类型

最近开始把精力放在重新复习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
// "
复制代码

常用特殊字符:

字符	含义
\b	退格符
\f	换页符
\n	换行符
\r	回车符
\t	Tab (制表符)
\v	垂直制表符
'	单引号
"	双引号
\	反斜杠字符（\）

本部分内容到这结束