JavaScript基础知识整理

作者: 前白 | 来源:发表于2019-06-13 11:12 被阅读67次

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 易于理解。
语法规则：

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