JavaScript基础知识

时间 2019-12-05

原文原文链接

1 什么是JavaScript

JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具备安全性的客户端脚本语言；
也是一种普遍应用客户端web开发的脚本语言。
简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。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 的变量是松散类型（弱类型）的，就是用来保存任何类型的数据。
在定义变量的时候不须要指定变量的数据类型。vue

JavaScript 定义变量有四种方法：const、let、var，还有一种是直接赋值，好比a = " a"（不规范，不推荐使用）
var 定义的变量能够修改，若是不初始化会输出undefined，不会报错。
let let是块级做用域，定义的变量只在let 命令所在的代码块内有效，变量须要先声明再使用。
const 定义的变量不能够修改，并且必须初始化，const定义的是一个恒定的常量，
声明一个只读的常量或多个，一旦声明，常量值就不能改变。java

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

声明变量注意：

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

5 JavaScript 变量的命名规则

变量命名必须以字母、下划线”_”或者”$”为开头。其余字符能够是字母、_、美圆符号或数字。
变量名中不容许使用空格和其余标点符号，首个字不能为数字。
变量名长度不能超过255个字符。
变量名称对大小写敏感（y 和 Y 是不一样的变量），JavaScript 语句和 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 事件

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

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