本章节复习的是JS中的基本语法,变量声明,数据类型和字面量。

首先要记住:JavaScript 对大小写敏感,即var att;var Att 是两个不同变量。

1.注释

  1. // 单行注释
  2. /*
  3. 多行注释
  4. */

2. 声明

JavaScript有三种声明方式:

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

声明变量

变量的名字又叫做“标识符”,必须以字母、下划线(_)或者美元符号($)开头,并且区分大小写。
变量声明有三种方式:

  • var a = 1,声明局部变量和全局变量。
  • a = 1,声明一个全局变量,且在严格模式报错,不应该使用。
  • let a = 1,声明一个块作用域的局部变量。

注意

  • 若没有为变量赋初始值,则值默认为undefined
  1. let a;
  2. console.log(a); // undefined
  • 若没有声明变量而直接使用,会抛出ReferenceError错误;
  1. console.log(b); // Uncaught ReferenceError: b is not defined
  • 当变量值为undefined时,布尔值环境会当做false,数值环境会当做NaN
  1. var a;
  2. if(!a){
  3. console.log('a为undefined'); // a为undefined
  4. }
  5. a + 1; // NaN
  • 当变量值为null时,布尔值环境会当做false,数值环境会当做0
  1. let a = null;
  2. if(!a){
  3. console.log('a为unll'); // a为unll
  4. }
  5. a + 1; // 1

变量作用域

全局变量:即声明在函数之外,当前文档所有地方都可以访问;
局部遍历:即声明在函数内部,仅在当前函数内可以访问;
在ES5之前没有语句块作用域的概念,并只能使用var进行声明,用var声明的变量,在函数内和全局都可以访问,而在ES6开始,将只能在声明的作用域中使用:

  1. if(true){
  2. var a = 1;
  3. }
  4. a; // 1
  5. if(true){
  6. let b = 2;
  7. }
  8. b; // ReferenceError: b is not defined

变量声明提前

即将变量的声明提升到函数或语句的顶部,并返回undefined直到变量被初始化操作。
千万注意
ES5以及之前,才有变量声明提前,在ES6开始就不存在变量提升。

  1. // ES5及之前
  2. console.log(a); // undefined
  3. var a = 1;
  4. console.log(a); // 1
  5. // ES6开始
  6. console.log(b); // Uncaught ReferenceError: b1 is not defined
  7. let b = 2;
  8. console.log(b); // 2

函数提升

函数声明有两种方式:函数声明函数表达式两种方式:

  1. // 函数声明
  2. f(); // 'hi leo'
  3. function(){
  4. console.log('hi leo');
  5. };
  6. // 函数表达式
  7. g(); // Uncaught TypeError: g is not a function
  8. var g = function(){ // 换成 let 声明也一样
  9. console.log('hi leo');
  10. }

全局变量

全局变量默认是全局对象(window)的属性,常常使用window.variable语法来设置和访问全局变量。
这边还需要记住:

  • ES5之中,顶层对象的属性等价于全局变量(浏览器环境中顶层对象是window,Node中是global对象);
  • ES6之中var/function声明的全局变量,依然是顶层对象的属性,但是let/const/class声明的全局变量不属于顶层对象的属性,即ES6开始,全局变量和顶层对象的属性是分开的。
  1. // ES5
  2. var a = 'leo';
  3. window.a; // 'leo'
  4. // ES6
  5. let b = 'leo';
  6. window.b; // undefined

常量

ES6之后我们可以使用const来声明一个只读的常量,并且在声明时必须赋值,之后在相同作用域中不能赋值不能重新声明,否则报错。

  1. const a;
  2. // Uncaught SyntaxError: Missing initializer in const declaration
  3. const b = 'leo';
  4. b = 'hi';
  5. // Uncaught TypeError: Assignment to constant variable.
  6. function f(){
  7. const a1 = 'hi';
  8. console.log(a1);
  9. }
  10. f(); // 'hi'
  11. const a1 = 'hi leo';
  12. a1; // "hi leo"

尽管const声明的变量不能直接修改值,但是对于对象和数组,却是不受保护可以修改的:

  1. const a = {name:'leo',age:25};
  2. a.name = 'pingan'; // a => {name: "pingan", age: 25}
  3. const b = ['hi', 'leo'];
  4. 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是门动态类型语言,因此在开发过程可以不需要指定数据类型,在执行时会自动转换:

  1. var a = 100;
  2. a = 'hi leo'; // 这样不报错

另外还有:

  1. let a1 = '10';
  2. let b1 = 20;
  3. a1 + b1; // 30
  4. let a2 = 'leo ' + 10 + ' age'; // 'leo 10 age'
  5. '10' - 5; // 5
  6. '10' + 5; // 105

转换字符串为数字小技巧
小技巧很多,这里说个最简单的:

  1. // 这样不会使两个数字计算总和:
  2. '1.1' + '1.2'; // '1.11.2'
  3. // 实际上要这样:
  4. +'1.1' + +'1.2'; // 2.3

4.字面量

字面量是用来表示如何表达这个值,简单理解就是变量赋值时右边的都是字面量。比如:

  1. let a = 'hi leo';

hi leo为字符串字面量,a为变量名。
字面量分为七种:

  • 1.数组字面量
  • 2.布尔字面量
  • 3.浮点数字面量
  • 4.整数字面量
  • 5.对象字面量
  • 6.正则字面量
  • 7.字符串字面量

数组字面量

使用数组字面量创建数组的时,指定元素的值,并作为数组的初始化,从而确定数组长度。

  1. let a = ['hi','leo','hello','pingan'];
  2. a[1]; // 'leo'
  3. a.length; // 4

若使用多余逗号,作为数组字面量,则值为undefined,并且数组长度也会正常计算:

  1. let a = ['hi', ,'leo'];
  2. a[0]; // 'hi'
  3. a[1]; // undefined
  4. a.length; // 3

布尔字面量

只有truefalse

  1. let a = true;

整数字面量

整数可以用十进制(基数为10)、十六进制(基数为16)、八进制(基数为8)以及二进制(基数为2)表示。

浮点数字面量

浮点数字面量组成:

  • 一个十进制的整数,可以带正负号;
  • 小数点
  • 小数部分(只能十进制)
  • 指数部分
  1. let a = 3.14; // 3.14
  2. let b = -.001; // -0.001
  3. let c = -3.14e+12; // -3.14*1012
  4. let d = .1e-23;// 0.1*10 - 23 = 10-24 = 1e-24

对象字面量

对象字面量是由{}包含一个或多个 键:值 对的列表:

  1. let a1 = 'hi leo';
  2. let a2 = function(){ return 'my name is pingan' };
  3. let obj = {
  4. n1 : 'pingan',
  5. n2 : a1,
  6. n3 : a2()
  7. }
  8. obj; // {n1: "pingan", n2: "hi leo", n3: "my name is pingan"}

也可以使用任意数字或字符串作为对象属性的名字,但必须用''引号包裹:

  1. let obj = {
  2. "" : "hi leo",
  3. "!" : "hi pingan",
  4. 2 : 'hi number'
  5. }
  6. obj; // {2: "hi number", "": "hi leo", !: "hi pingan"}
  7. obj[""]; // "hi leo"
  8. obj[2]; // "hi number"

正则字面量

使用字符被正斜杠“/”围起来的表达式:

  1. var a = /ab+c/;

字符串字面量

使用单引号('')或者双引号("")括起来的字符串:

  1. let a = 'leo';
  2. a.length; // 3

ES6中新增了模板字符串,作用于:

  • 方便拼接字符串
  • 有效实现字符串换行
  • 防止注入攻击
  • 建立基于字符串的高级数据抽象
  1. // 拼接字符串
  2. let name = 'leo';
  3. let a = `
  4. hi ${name}
  5. `;
  6. a; // 'hi leo'
  7. // 换行
  8. let b = `
  9. hi
  10. leo
  11. `;
  12. b;
  13. // "
  14. // hi
  15. // leo
  16. // "

常用特殊字符:

字符 含义
\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