JavaScript总结

JavaScript前四章

基本语法

1.声明变量

var a = 1;

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

var a = 1;
a = 'hello';

JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

2.变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
如:

console.log(a);
var a = 1;

真正运行的是

var a;
console.log(a); // 结果是显示undefined，表示变量a已声明，但还未赋值。
a = 1;

3.条件语句

1.if…else 结构

if (布尔值) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

2.switch 结构

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

3.三元运算符 ?:

//(条件) ? 表达式1 : 表达式2
var even = (n % 2 === 0) ? true : false;

4.循环语句

1.while 循环 .
2.for 循环
3.do…while 循环
4.break 语句和 continue 语句

5.标签（label）

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

数据类型

JavaScript 中的简单数据类型及其说明如下：

1. 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）

var age = 21;       // 整数 
var Age = 21.3747;  // 小数     

1.1数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

// 1.八进制数字序列范围：0~7  
var num1 = 07;   // 对应十进制的7  
var num2 = 019;  // 对应十进制的19  
var num3 = 08;   // 对应十进制的8   
// 2.十六进制数字序列范围：0~9以及A~F  
var num = 0xA;

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

1.2 数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 
alert(Number.MIN_VALUE); // 5e-324

1.3 数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

1.4 isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false

2. 字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

2.1 字符串引号嵌套

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''

2.2 字符串转义符

2.3 字符串长度

通过字符串的 length 属性可以获取整个字符串的长度

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

2.4 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串.
同java的字符串拼接相同

2.5 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1);  // 2
console.log(false + 1); // 1

3 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

4. 获取变量数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number      

parseFloat() 方法用于将一个字符串转为浮点数。

parseFloat('3.14') // 3.14
isNaN() 
isNaN方法可以用来判断一个值是否为NaN
isNaN(NaN) // true
isNaN(123) // false

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true

5.对象

5.1生成方法

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。

什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

var obj = {
  foo: 'Hello',
  bar: 'World'
};

5.2属性的操作

5.2.1 属性的读取

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。

var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

5.2.2 属性的赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。

var obj = {};

obj.foo = 'Hello';
obj['bar'] = 'World';

JavaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性。

5.2.3 属性的查看

查看一个对象本身的所有属性，可以使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

5.2.4 属性的查看属性的删除：delete 命令

delete命令用于删除对象的属性，删除成功后返回true

var obj = { p: 1 };
Object.keys(obj) // ["p"]

delete obj.p // true
obj.p // undefined
Object.keys(obj) // []

5.2.5 属性是否存在：in 运算符

in运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。它的左边是一个字符串，表示属性名，右边是一个对象。

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

6. 函数

1.声明函数

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

function print(s) {
  console.log(s);
}

2.函数的属性和方法

2.1 name 属性

函数的name属性返回函数的名字。

function f1() {}
f1.name // "f1"

2.2 length 属性

函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。

function f(a, b) {}
f.length // 2

2.3 toString()

函数的toString()方法返回一个字符串，内容是函数的源码。

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }

连注释也能返回嗷~

3.函数的其他知识点

3.1 闭包

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

上面代码中，函数f1的返回值就是函数f2，由于f2可以读取f1的内部变量，所以就可以在外部获得f1的内部变量了。闭包就是函数f2，即能够读取其他函数内部变量的函数。
闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在

3.2 立即调用的函数表达式（IIFE）

我们需要在定义函数之后，立即调用该函数
在 JavaScript 中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。

(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}()); 

7. 数组

7.1 创建数组

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

7.2 length 属性

数组的length属性，返回数组的成员数量。

7.3 in 运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false

运算符

1.算术运算符

2.递增和递减运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。
使用口诀：先返回原值，后自加
递减运算符同理.

3.指数运算符

指数运算符（**）完成指数运算，前一个运算子是底数，后一个运算子是指数。

2 ** 4 // 16

注意，指数运算符是右结合，而不是左结合。即多个指数运算符连用时，先进行最右边的计算。
上面代码中，由于指数运算符是右结合，所以先计算第二个指数运算符，而不是第一个。

// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512

4.比较运算符

大于运算符
< 小于运算符
<= 小于或等于运算符
= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符

5.严格相等运算符

JavaScript 提供两种相等运算符：和=。

简单说，它们的区别是相等运算符（）比较两个值是否相等，严格相等运算符（=）比较它们是否为“同一个值”。如果两个值不是同一类型，严格相等运算符（=）直接返回false，而相等运算符（）会将它们转换成同一个类型，再用严格相等运算符进行比较。

6.布尔运算符

布尔运算符用于将表达式转为布尔值，一共包含四个运算符。

取反运算符：!
且运算符：&&
或运算符：||
三元运算符：?:

语法专题

1.错误处理机制

1.1 Error 实例对象

JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。

var err = new Error('出错了');
err.message // "出错了"

上面代码中，我们调用Error构造函数，生成一个实例对象err。Error构造函数接受一个参数，表示错误提示，可以从实例的message属性读到这个参数。抛出Error实例对象以后，整个程序就中断在发生错误的地方，不再往下执行。
使用name和message这两个属性，可以对发生什么错误有一个大概的了解。
message：错误提示信息
name：错误名称（非标准属性）
stack：错误的堆栈（非标准属性）

if (error.name) {
  console.log(error.name + ': ' + error.message);
}

stack属性用来查看错误发生时的堆栈。

1.2 原生错误类型

Error实例对象是最一般的错误类型，在它的基础上，JavaScript 还定义了其他6种错误对象。也就是说，存在Error的6个派生对象。

1. SyntaxError 对象
2. ReferenceError 对象
3. RangeError 对象
4. TypeError 对象
5. URIError 对象
6. EvalError 对象

1.3 自定义错误

 function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

上面代码自定义一个错误对象UserError，让它继承Error对象。然后，就可以生成这种自定义类型的错误了。

new UserError('这是自定义的错误！');

1.4 try…catch 结构

一旦发生错误，程序就中止执行了。JavaScript 提供了try…catch结构，允许对错误进行处理，选择是否往下执行。

try {
  throw new Error('出错了!');
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log(e.stack);
}
// Error: 出错了!
//   at <anonymous>:3:9

后可加finally进行清理操作 ,具体用法与java相同

console对象静态方法

console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。console.log方法会自动在每次输出的结尾，添加换行符。
console.log(‘Hello World’)

// Hello World
console.log('a', 'b', 'c')
// a b c

console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3

如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。

console.log(' %s + %s = %s', 1, 1, 2)
//  1 + 1 = 2

console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符。

%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格式字符串

console.warn()，console.error()
warn方法和error方法也是在控制台输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错。

console.table()
对于某些复合类型的数据，console.table方法可以将其转为表格显示。
console.count()
count方法用于计数，输出它被调用了多少次。
console.assert()
console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确。

它接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会提示有错误，在控制台输出第二个参数，否则不会有任何结果。

console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立

// 相当于
try {
  if (!false) {
    throw new Error('判断条件不成立');
  }
} catch(e) {
  console.error(e);
}

console.time()，console.timeEnd() #
这两个方法用于计时，可以算出一个操作所花费的准确时间。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。