本章节复习的是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; // 1if(true){let b = 2;}b; // ReferenceError: b is not defined
变量声明提前
即将变量的声明提升到函数或语句的顶部,并返回undefined直到变量被初始化操作。
千万注意:
ES5以及之前,才有变量声明提前,在ES6开始就不存在变量提升。
// ES5及之前console.log(a); // undefinedvar a = 1;console.log(a); // 1// ES6开始console.log(b); // Uncaught ReferenceError: b1 is not definedlet b = 2;console.log(b); // 2
函数提升
函数声明有两种方式:函数声明和函数表达式两种方式:
// 函数声明f(); // 'hi leo'function(){console.log('hi leo');};// 函数表达式g(); // Uncaught TypeError: g is not a functionvar g = function(){ // 换成 let 声明也一样console.log('hi leo');}
全局变量
全局变量默认是全局对象(window)的属性,常常使用window.variable语法来设置和访问全局变量。
这边还需要记住:
- ES5之中,顶层对象的属性等价于全局变量(浏览器环境中顶层对象是
window,Node中是global对象); - ES6之中,
var/function声明的全局变量,依然是顶层对象的属性,但是let/const/class声明的全局变量不属于顶层对象的属性,即ES6开始,全局变量和顶层对象的属性是分开的。
// ES5var a = 'leo';window.a; // 'leo'// ES6let b = 'leo';window.b; // undefined
常量
ES6之后我们可以使用const来声明一个只读的常量,并且在声明时必须赋值,之后在相同作用域中不能赋值也不能重新声明,否则报错。
const a;// Uncaught SyntaxError: Missing initializer in const declarationconst 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; // 30let 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]; // undefineda.length; // 3
布尔字面量
只有true和false:
let a = true;
整数字面量
整数可以用十进制(基数为10)、十六进制(基数为16)、八进制(基数为8)以及二进制(基数为2)表示。
浮点数字面量
浮点数字面量组成:
- 一个十进制的整数,可以带正负号;
- 小数点
- 小数部分(只能十进制)
- 指数部分
let a = 3.14; // 3.14let b = -.001; // -0.001let c = -3.14e+12; // -3.14*1012let 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 = `hileo`;b;// "// hi// leo// "
常用特殊字符:
| 字符 | 含义 |
|---|---|
| \b | 退格符 |
| \f | 换页符 |
| \n | 换行符 |
| \r | 回车符 |
| \t | Tab (制表符) |
| \v | 垂直制表符 |
| ‘ | 单引号 |
| “ | 双引号 |
| \ | 反斜杠字符(\) |
参考文章:
本部分内容到这结束
| Author | 王平安 |
|---|---|
| pingan8787@qq.com | |
| 博 客 | www.pingan8787.com |
| 微 信 | pingan8787 |
| 每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
| ES小册 | js.pingan8787.com |
