JavaScript基础知识整理

1 什么是JavaScript

JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；
也是一种广泛应用客户端web开发的脚本语言。
简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。

2 JavaScript的基本结构

<script type="text/javascript">
        JS语句;
</script>

3 JS的使用方法

• HTML标签中内嵌JS；

<button onclick="alert('欢迎进入JavaScript世界')">点击me</button>

• HTML页面中直接使用JS：

<script type="text/javascript">
        JS语句;
</script>

• 引用外部JS文件：

<script language="JScript" src="JS文件路径"></script>

4 变量

变量：是用于存储信息的"容器"，是命名的内存空间，可以使用变量名称找到该内存空间；
JavaScript 的变量是松散类型（弱类型）的，就是用来保存任何类型的数据。
在定义变量的时候不需要指定变量的数据类型。
JavaScript 定义变量有四种方法：const、let、var，还有一种是直接赋值，比如a = " a"（不规范，不推荐使用）
var 定义的变量可以修改，如果不初始化会输出undefined，不会报错。
let let是块级作用域，定义的变量只在let 命令所在的代码块内有效，变量需要先声明再使用。
const 定义的变量不可以修改，而且必须初始化，
const定义的是一个恒定的常量，声明一个只读的常量或多个，一旦声明，常量值就不能改变。

在函数外声明的变量作用域是全局的，全局变量在 JavaScript 程序的任何地方都可以访问；
在函数内声明的变量作用域是局部的（函数内），函数内使用 var 声明的变量只能在函数内容访问。

声明变量注意：

• JS中所有变量类型声明，均使用var关键字。
  变量的具体数据类型，取决于给变量赋值的执行。
• 同一变量可在多次不同赋值时，修改变量的数据类型。
• 变量的命名规范
• 变量命名名要符合驼峰法则：变量开头为小写，之后每个单词首字母大写。

5 JavaScript 变量的命名规则

• 变量命名必须以字母、下划线”_”或者”$”为开头。
  其他字符可以是字母、下划线、美元符号或数字。
• 变量名中不允许使用空格和其他标点符号，首个字不能为数字。
• 变量名长度不能超过255个字符。
• 变量名称对大小写敏感（y 和 Y 是不同的变量），JavaScript 语句和变量都对大小写敏感。
• 变量名必须放在同一行中。
• 不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。

6 JS中的变量的数据类型

String：字符串类型。用""和''包裹的内容，称为字符串。
Number：数值类型。可以是小数，也可以是正数。
boolean：真假，可选值true/false。
Object：（复杂数据类型）
Null：表示为空的引用。var a = null;
Undefined：未定义，用var声明的变量，没有进行初始化赋值。var a;

7 JavaScript对象

JavaScript 对象是拥有属性和方法的数据，是变量的容器。
对象：是封装一个事物的属性和功能的程序结构，是内存中保存多个属性和方法的一块存储空间。
JavaScript中所有事物都是对象：数字、字符串、日期、数组等。
JavaScript对象可以是字面量创建、分配给变量，数组和其他对象的属性、
作为参数传递给函数、有属性和作为返回值。

用字面量创建：

function MyFun(){

};

分配给其他对象的变量，数组和属性：

var myFun = function(){

};
myArray.push(function(){

});
myObject.myFun = function(){

};

作为参数传递给其他函数：

function myFun(someFunc){
      someFunc();
}
myFunc(function(){

});

有属性：

var myFunc = function(){
};

作为返回值：

function myFunc(){
      return function(){

      };
}

在JavaScript中定义对象有5种方式：

• 基于已有对象扩充其属性和方法
• 工厂方式
• 构造函数方式
• 原型(“prototype”)方式
• 动态原型方式

JS 中的对象分为三类：

• 内置对象（静态对象）：js本身已经写好的对象，我们可以直接使用不需要定义它。
  常见的内置对象有 Global、Math（它们也是本地对象，根据定义每个内置对象都是本地对象）。
• 本地对象（非静态对象）：必须实例化才能使用其方法和属性的就是本地对象。
  常见的本地对象有 Object、Function、Data、Array、String、Boolean、Number、RegExp、Error等
• 宿主对象：js运行和存活的地方，它的生活环境就是DOM（文档对象模式）和BOM（浏览器对象模式）。

8 JavaScript函数

使用函数前要先定义才能调用，函数的定义分为三部分：函数名，参数列表，函数体
定义函数的格式：

function 函数名([参数1，参数2...]){
        函数执行部分；
        return 表达式；
}

函数有三种定义方法：

• 函数定义语句
• 函数直接量表达式
• Function构造函数

函数有四种调用模式：

• 函数调用模式（通过函数调用）
• 方法调用模式（通过对象属性调用）
• 构造函数模式（如果是作为构造函数来调用，那么this指向new创建的新对象）
• 函数上下文（借用方法模式：它的this指向可以改变，而前三种模式是固定的）；
  函数上下文就是函数作用域；基本语法：apply 和 call 后面都是跟两个参数。）

在javascript函数中，函数的参数一共有两种形式：（实际参数与形式参数）
形参：在函数定义时所指定的参数就称之为“函数的形参”。
实参：在函数调用时所指定的参数就称之为“函数的实参”。

9 运算符

算术运算符：主要是用来进行JavaScript中的算术操作。（+、-、*、/、%、++、--）
赋值运算符：=用于给JavaScript 变量赋值，其作用就是把右侧的值赋给左侧的变量。
关系运算符：用于进行比较的运算符。主要有小于（<）、大于（>）、等于（==）、大于等于（>=）、小于等于（<=）、不等（!=）、恒等（===）、不恒等（!==）。
逻辑运算符：逻辑运算符通常用于布尔值的操作，返回结果是一个布尔类型，一般和关系运算符配合使用，
有三个逻辑运算符：逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
字符串连接运算符：是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。
在JavaScript中，可以使用+和+=运算符对两个字符串进行连接运算。
三目操作符（条件运算符）：？ 根据不同的条件，执行不同的操作/返回不同的值。

10 JavaScript条件语句

分为四种条件语句：

If 语句：只有当指定条件为true时，使用该语句来执行代码
if-else 语句：当条件为true时执行代码，当条件为false时执行其他代码
if-else if-else 语句：使用该语句来选择多个代码块之一来执行
switch 语句：同上，switch的工作原理呢？
首先设置表达式n(通常是一个变量)，随后表达式的值会与结构中的每个case值作比较；
如果存在匹配则该关联代码块执行；
然后使用break来阻止代码自动的向下一个case运行；
default关键词来规定匹配不存在时做的事情。

11 JavaScript 不同类型的循环

常见的循环主要是三种：for 循环、while 循环、do/while 循环。

for 循环：代码块有一定的次数。
for 有三个表达式：1 声明循环变量 2 判断循环条件 3 更新循环变量
特点：先判断再执行，与while相同。
while 循环：当指定的条件为true时循环指定的代码块
do/while 循环：同while循环一样。
特点：先执行再判断，即使初始条件不成立，do/while循环至少执行一次。

循环结构的执行步骤：

• 声明变量
• 判断循环条件
• 执行循环体操作
• 更新循环变量
• 最后执行循环2-4，直到条件不成立，跳出循环

12 JavaScript Break 和Continue 语句

break：跳出本层循环，继续执行循环后面的语句。
　　　　如果循环有多层，则break只能跳出一层。
continue：跳过本次循环剩余的代码，继续执行下一次循环。
　　　　对与for循环，continue之后执行的语句，是循环变量更新语句i++；
　　　　对于while、do-while循环，continue之后执行的语句，是循环条件判断；
　　　　因此，使用这两个循环时，必须将continue放到i++之后使用，否则，continue将跳过i++进入死循环。

13 JavaScript 错误处理使用 try ... catch ... finally

一种是程序写的逻辑不对，导致代码执行异常；
一种是执行过程中，程序可能遇到无法预测的异常情况而报错。
throw 声明
onerror 事件

15 JavaScript 框架（库）

jQuery 库

jQuery 函数是 $() 函数（jQuery 函数）。
jQuery 库包含以下功能：
HTML 元素选取、元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、
HTML DOM 遍历和修改、AJAX、Utilities
面向对象编程包括 创建对象、原型继承、class继承。
类是对象的类型模板；实例是根据类创建的对象。
jQuery 优点：

• 分布规模小
• 学习曲线平缓，在线帮助多
• 语法简洁
• 容易延伸
• 消除了浏览器差异
• 简洁的操作DOM的方法
• 轻松实现动画
• 修改CSS等各种操作
  缺点：
• 增加了本机API的速度开销
• 浏览器兼容性的改善降低了它的性能
• 用法扁平
• 有些开发人员抵制使用

AngularJs企业级框架

其最为核心的特性为：MVC、模块化、自动化双向数据绑定、语义化标签及依赖注入等。

React框架

React被称为构建用户接口而提供的Javascript库；主要用来构建UI，其专注于MVC的V部分。

vue未来的主流

vue.js 是用来构建web应用接口的一个库，技术上，Vue.js 重点集中在MVVM模式的ViewModel层，
它连接视图和数据绑定模型通过两种方式。

Require Js

RequireJs是一个javascript模块加载器，提高网页的加载速度和质量。

Backone框架

Backone是一个帮助开发重量级Javascript应用的框架，但它本身简单的框架。其文件体积很小，压缩后只有5.3KB，提供了全功能的MVC框架及路由。Backone强制依赖于Underscore.js，非强制依赖于jQuery/Zepto。

D3.js

数据可视化和图表是Web应用中不可或缺的一部分。
d3.js就是最流行的可视化库之一，它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。

15 JavaScript this

方法中的this指向调用它所在方法的对象。
单独使用this，指向全局对象。
函数中，函数所属者默认绑定到this上。

this使用场合：

• 全局环境
• 构造函数
• 对象的方法
• Node

16 JavaScript闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包就是创建了一个不销毁的作用域。
闭包需要了解的几个概念： 作用域链、执行上下文、变量对象。
闭包的好处有：

• 缓存
• 面向对象中的对象
• 实现封装，防止变量跑到外层作用域中，发生命名冲突
• 匿名自执行函数，匿名自执行函数可以减少内存消耗
  坏处：
• 内存消耗
• 涉及到跨作用域访问是时会导致性能耗损

17 JS Window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

18 JavaScript JSON

JSON 是一种轻量级的数据交换格式；JSON是独立的语言 ；JSON 易于理解。
语法规则：

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象。
• 方括号保存数组。