JavaScript和ES6

JavaScript

网页的生成

HTML代码转化为DOM

CSS代码转化为CSSOM(CSS Object Model)

结合DOM和CSSOM，生成一棵渲染树，包含每个节点的视觉信息

生成布局(layout), 将所有渲染树的所有节点进行平面整合-耗时5.将布局绘制( paint )在屏幕.上-耗时

渲染render

• 生成布局flow和绘制paint这两步合称为渲染

• 网页生成时至少渲染一次，用户访问过程中会不断重新渲染

• 修改DOM

• 修改样式表

• 用户事件

• 重新渲染包含:重排( reflow )和重绘( repaint),但重绘不一定需要重排，重排必定重绘

JavaScript的应用场景

• 网页特效

• 服务端开发(Node.js)

• 命令行工具(Node.js)

• 桌面程序( Electron)

• App( Cordova)

• 控制硬件-物联网( Ruff )

• 游戏开发( cocos2d-js)

JavaScript的组成

1. ECMAScript: JavaScript的核心，定义了JavaScript的语法规范

2. BOM:浏览器对象模型，操作浏览器功能的API集合,通过BOM可以操作浏览器窗口，比如:弹出框、控制浏览器跳转、获取分辨率等

3. DOM:文档对象模型，操作页面元素的API集合，DOM把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

数据类型

• 简单数据类型: Number、 String、 Boolean、 Undef ined和Nu1ll●复杂数据类型: 0bject

• 获取变量类型: typeof

• 数据类型转换: toString( )、String()、 num+""、 Number( )、 parseInt(str)、parseFloat(str)、 Boolean( )

• 布尔类型的隐式转换

• 转换为true:非空字符串、非0数字、true、 任何对象

• 转换成false:空字符串、0、false、 null、 undefined

数组:掌握数组的定义、获取、遍历、新增

<script>
//定义
var arr = ["red", "green", "blue"]
//获取
console.1og(arr[0]);
//遍历
arr . forEach(el => {
//数组遍历
console.1og(e1);
});
//替换
arr[0] = "yellow";
//新增
arr[3] = "pink";
</script>

函数

• 函数是一种数据类型，是js中的一等公民

• 掌握函数的定义、调用、参数设置、arguments等基础概念

• 高阶应用:函数作为数据类型可以作为参数、返回值

函数的定义方式

• 函数声明方式: function关键字(命名函数)

• 函数表达式(匿名函数)

• new Function( ):执行效率低,较少使用

• 所有的函数都是Function的实例对象

作用域

• 全局变量:不使用var声明的变量(不推荐使用)，关闭网页或浏览器才会销毁

• 局部变量:固定代码片段内可访问的变量，如:函数内部

• 块级作用域: ES6之前没有

词法作用域:

1. 函数允许访问函数外的数据

2. 整个代码结构只有函数可以限定作用域

3. 若当前作用规则中已有名字，则不考虑外面的名字

//作用域
var num = 123;function foo() {
console.1og(num);foo();
if(false) {
var num = 123;}
console.1og( num) ;// undefined

闭包

• 闭包(closure) 指有权访问另一 个函数作用域中变量的函数

• 简单理解:一个作用域可以访问另外-个函数内部的局部变量

• 作用:延伸变量的作用域

应用:计算打车价格(打车起步价13(3公里内)，之后每多-公里增加5块钱。

var car = (function () {
var start = 13; //起步价局部变量
var total = 0; //总价局部变量return {
//正常的总价
price: function (n) {
if(n<=3){
total = start;
} else {
total=start+(n-3)*5return total;
}，//拥堵之后的费用
yd: function (flag) {
输入公里数就可以计算打车价格，如果有
return flag ? total + 10 : total;
拥堵情况，总价格多收取10块钱拥堵费)
})();

JS代码的执行过程

• JavaScr ipt代码的执行是由浏览器中的JavaScri pt解析器来执行的。

• JavaScript解析器执行JavaScri pt代码的时候，分为两个过程:预解析过程和代码执行过程。

• 预解析过程

• 把变量的声明提升到当前作用域的最前面，只会提升声明,不会提升赋值。

• 把函数的声明提升到当前作用域的最前面，只会提升声明,不会提升调用。

• 先提升var,再提升function

//声明提升
vara=25;
function abc() {
alert(a); // undefinedvara=10;
abc();
//如果变量和函数同名的话，函数优先console.1og(a);
function a() {
console.1og( "aaaaa" );
vara=1;
console.1og(a);

JS异步编程

JavaScr ipt对象分类

• 内置对象、浏览器对象、文档模型对象、自定义对象

内置对象

• Math/ Array/ Number/String/Boolean… .

• 通过MDN( https:/ /developer。mozilla. org/zh-CN/ )或
  W3C( https://www. w3school. com.cn/ )查询

浏览器对象BOM

• window对象:顶层对象，所有全局JS对象、函数和变量都自动成为Window对象的成员。
• screen/ locat ion/history/navigator/cookies

文档模型对象DOM

• document

自定义对象

• 无序属性的集合特征–属性

• 特性 - - 属性

• 行为 - -方法

对象创建方式:

• 对象字面量
• new 0bject()
• 工厂函数创建对象
• 自定义构造函数

//1.对象字面值
var person = {
name: 'niit',
age:18,
sex: true,
sayHi: function() {
console. log(this . name);}
}
console . log(person);
// 2. new Object()
var person = new object();
person.name = "lisi";
person.age = 35
person.job = ' actor'
person.sayHi = function() {
console.log('hello, everybody')}
console.log(person)
// 3.工厂函数.
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age
person.job = job
person.sayHi = function() {
console .log( 'hello, everybody')
return person; 
console.log(createPerson('张三', 22, ' student'));// 4.自定义构造函数
function Person(name, age, job) {
this.name = name;
this.age = age
this.job = job
this.sayHi = function() }
console. log('hello, everybody')
  }
}
console.log(new Person('张三', 22, 'student'));

ES6

ES6简介

• 全称ECMAScript 6. 0，由于是在2015年发布，也称为ES2015
• 主要是为了解决ES5的先天不足

ES6核心特性：

目标与愿景:

1. 适应更复杂的应用;

2. 实现代码库之间的共享;

3. 不断迭代维护新版本;

4. 支持更多语法，使用更方便;

新的变量声明方法

let/const

• 与var不同，新的变量声明方式带来了一些不一样的特性，其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。
• let:不可重复声明，块级作用域; const: 声明常量
  例:

<script>
var a=1;
var a=2;
console.1og(a);</script>

最后打印出的是2

<script>
let a=1;
let a=2;
console.log(a);</script>

此时，a无法打印出来。

Uncaught SyntaxError: Identifier 'a' has already been declared

新的变量声明方式Let/ const

解析:

1. ES6之前，使用var声明变量，可以声明多次变量,这样导致的问题查找很难
2. 在ES6中，使用let声明变量,使用cons t声明常量
3. let作用域是块级作用域，如:
   此时b是块级作用域，只能在{ }里打印，外面就无法打印

<script>
let a=1;
if(a>0){
let b=2;
console.1og(b);
}
console.1og(a);
console.1og(b);
</script>

解构赋值

• 解构赋值语法是一种JavaScript表达式， 用来将数组中的值或对象中的属性取出来区分为不同变量分为:
  对象解构赋值和数组解构赋值。

• 使用注意事项

1. == 两边的解构必须一致==
2. == 右边必须是一个实际的内容，数组或对象==

箭头函数

箭头函数是ES6提供的新的语法结构，用于替换匿名函数
相当于简写了function，使用()代替，使用=>代替{}；

箭头函数与普通匿名函数的区别

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象

• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一一个错误。

• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

• 不可以使用yield命令，因此箭头函数不能用作Generator函数。

(generator函数现在经常用async替代)

参数模板(模板字符串)

• 模板字符串是为了解决使用"+"号拼接字符串的不便利而出现的
• 它的功能非常强大，但是大多数时候使用它则非常简单
• $ {变量名称/常量名称}，外面使用’ '(反单引号) 包裹

JavaScript异步编程

• 方案

1. 回调函数Callback
2. 事件监听
3. 发布订阅
4. Promise/A+
5. 生成器Generators/yield·
6. async/ Await

Promise

• 异步编程的解决方案，比传统的解决方案–回调函数和事件–更合理和更强大，完美解决回调地狱问题

• 简单说就是一个容器，保存某个未来才会结束的事件

Promise对象的特点

• 对象的状态不受外界影响。Promise对象代表一 个异步操作，有三种状态:pending (进行中)、fulfilled (已成功)和rejected (已失败)。
• 一旦状态改变,就不会在变。Promise对象的状态改变，只有两种可能:从pending变为fulfilled和从pending变为rejected.

Promise基本用法

• ES6规定，Promis e对象是一个构造函数，用来生成Promise实例

• Promise实例必须实现then( )

• then( )必须可以接收两个函数作为参数

• then( )必须返回Promise实例