JavaScript和jQuery的概述《干货》

JavaScript 简介

JavaScript，简称 js，是一种基于对象（object-based）和事件驱动（Event Driven）的简单的并具有安全性能的脚本语言。

JavaScript 特性

• JavaScript 是解释性语言，而不是编译性语言；
• 在支持 JavaScript 的浏览器中运行的过程中没有编译过程，而是逐行解释执行。
• JavaScript 是一种轻量级的脚本语言（script language）。
• 不具备开发操作系统的能力，只能用来编写控制其他大型应用程序（比如浏览器）的脚本。
• Javascript 是一种嵌入式语言，本身不提供任何 I/O 相关的 API，主要通过调用宿主环境（host）的 API 来工作。
• JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 组成

ECMAScript：JavaScript 的核心，语法格式，使用方法

文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

DOM 将把整个页面规划成由节点层级构成的文档 document 对象 有 一个一个的元素（element）

浏览器对象模型（BOM，browser object model）：对浏览器窗口进行访问和操作

JavaScript 特点：

脚本语言：脚本语言是一种简单的程序，是由一些 ASCII 字符构成，可以使用任何一种文本编辑器编写。

一些程序语言（如 C、C++、Java 等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

脚本语言是指在 web 浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。

基于对象的语言：非面向对象

面向对象有三大特点（封装，继承，多态）缺一不可。

通常"基于对象"是使用对象，但无法利用现有对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。

注意：目前的 js 脚本已经支持创建自定义类，继承等

事件驱动：在网页中执行了某种操作的动作，被称为"事件"(Event)

比如按下鼠标、移动窗口、选择菜单等都可以视为事件。

当事件发生后，可能会引起相应的事件响应。

简单性 ：变量类型是采用弱类型，并未使用严格的数据类型。

安全性：JavaScript 不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

跨平台（系统）性：JavaScript 依赖于浏览器本身，与操作平台无关。

只要计算机安装了支持 JavaScript 的浏览器（装有JavaScript 解释器），JavaScript 程序就可以正确执行。

缺点：

部分浏览器兼容性不好！

各种浏览器支持 JavaScript 的程度是不一样的，支持和不完全支持 JavaScript 的浏览器在浏览同一个带有 JavaScript 脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

JavaScript 的版本

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

JavaScript 的数据类型
基本数据类型
undefined 类型：只有一个值 undefined（未定义），它是一个保留字。表示变量虽然已经声明，但却没有赋值

number 类型：所有的整数和小数

注：NaN 是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。不是数字的字符串通过函数进行数据类型转换为数字，结果就是 NaN

string 类型：所有被单引号和双引号包裹的字符串

boolean 类型：布尔值，只有两个值 true 和 false

object 类型：所有对象的数据类型

注：

可以使用关键字 typeof 可以查看变量的数据类型

null 类型：只有一个值 null（空），它是一个保留字。表示没有值，用于定义空的或不存在的引用。

注意：

空值不等同于空字符串 “” 或 0
undefined 类型就是使用 null 演化而来，所以 undefined == null 为 true
undefined 的数据类型是 undefined，null 的数据类型是 object，所以 undefined === null 为 false

Js中的四大基本数据类型？

• ①原始数据类型：字符串、数字、布尔值、空值、未定义(undefined)

• ②对象数据类型：Object

• ③数组：Array

• ④函数：Function

字符串拼接：+= | | 模板字符串：${}【注意：拼接使用反引号】

判断数据类型：type of()

JavaScript的系统对话框：

• alert()只有确定按钮
• confirm()有确定、取消按钮
• prompt()提示输出框

系统函数：

1、parseInt("字符串")

2、parseFloat("字符串")

3、是否是非数字：isNaN()

闭包(嵌套函数)：

优点：可以读取函数内部的变量，使这些值始终保存在内存中。

缺点：消耗内存大，造成网页性能问题。

作用域和作用域链

作用域：

全局作用域：在程序中的任何位置都能够被访问。

局部作用域：在定义的代码块和函数内部被访问。

作用域链：

本质：底层的变量查找机制--优先从当前函数开始，依次逐级查找父级作用域直到全局作用域。

总结：

1.嵌套关系的作用域串联起来形成了作用域链

2.相同作用域链中按着从小到大的规则查找变量

3.子作用域能够访问父作用域，父级作用域无法访问子级作用域

let person = { 
name: "Alice", age: 25, 
greet: function() { 
console.log("Hello, my name is " + this.name);
 } 
};

console.log(person.name); 
★console.log(person['age']);

person.name = "Hellen"; // 直接赋值 
Object.defineProperty(person, 'job', 
{ value: 'Developer', 
writable: true, 
enumerable: true,
configurable: true }); // 使用Object.defineProperty方法

for (let key in person) { 
if (person.hasOwnProperty(key)) {
 console.log(key + ': ' + person[key]); 
}
 }//for-in遍历

Object.keys(person).forEach(function(key) { //每次都借用回调函数
console.log(key + ': ' + person[key]);
 });//使用ES6的Object.keys方法

(function 函数名() {
 // 函数体 
})()      或(function 函数名(){//函数体}())

例：setTimeout(function() { 
console.log('这是在5秒后执行的。'); 
}, 5000);

let arr = [1, 2, 3]; 
arr.push(4); // arr 现在是 [1, 2, 3, 4]

let arr = [1, 2, 3, 4, 5];
let slicedArr = arr.slice(2, 4); // slicedArr 为 [3, 4]

let arr = [1, 2, 3, 4]; 
arr.spli