ES6相关1(let,const,拓展运算符,迭代器,Promise)

绒山羊
153 阅读3分钟

1.变量声明Let

let a;
let b,c,d;
let e = 100,g = [];

1.变量不能重复声明（var可以）

2.块儿级作用域，指变量只在代码块里面{},if,else,for,while有效，其他位置失效

3.不存在变量提升（先声明在使用）

image.png错的

4.不影响作用域链（指在代码块内在声明代码块，可以使用变量）

image.png是可以的

2.常量声明const

值不能修改的量称为常量

const QWE = 'qwe';

  1. 一定要赋初始值

  2. （潜规则）一般声明常量使用大写

  3. 常量值不可修改

  4. 也是块级作用域（详见let部分）

  5. 对于数组和对象的元素修改不算做对常量的修改，不会报错！（因为常量地址没有改变） image.png 没问题

3.扩展运算符介绍 ...

是可以将数组转化为逗号分割的参数序列

const boys = ['a','b','c'];

function aaa(){
    console.log(arguments);
}
aaa(boys);
aaa(...boys);

第一种会装进一个数组 第二种会变成三个实参，变成了参数序列（把数组打散）

扩展运算符应用

1.数组合并 image.png

2.数组克隆 image.png

3.将伪数组转为真数组

image.png

image.png

把div对象转为数组

4. 迭代器

是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator，就可以完成遍历操作

Es6创建了新的遍历命令 for...of循环

for in 循环的是键名（0123） image.png

for of 循环的是键值 image.png

工作原理

image.png

5. Promise

是一个构造函数，用来封装异步操作并获取其成功或失败的结果

image.png

  • 首先实例化Promise，参数是一个函数，函数里有两个参数一个成功，一个失败。在参数函数内写一个异步任务，最后把数据放在resolve或reject里（成功或失败），从而改变p的状态。

  • p调用then方法，方法参数是两个函数，分别代表成功或失败，成功调第一个，失败调第二个。

Promise读取文件

  1. 不使用promise读取（fs输入node里的核心模块）：

image.png

  1. 使用promise读取

image.png

  • 总的来说就是把上面的方法封装在promise里面，可读性高。

附回调地狱

image.png

Promise封装Ajax请求

  1. 原生Ajax发送请求

image.png

  • xhr首先实例化
  • 然后调用open设定请求
  • 调用send发送请求
  • 调用onreadystatechange处理响应结果
  • 如果readystate=4（代表相应内用解析完成，可以在客户端用了）
  • 在判断响应码status，在200-299内为成功，否则失败（可能会输出404或者500）。
  1. Promise封装Ajax请求

  • 用Promise示例p包裹以上方法 image.png

  • 把控制台输出改为装进resove\reject里，改变p状态

image.png

  • 调用then方法输出结果

image.png

catch方法

image.png

可见catch只指定一个回调函数就可以

未完待续

avatar
文章
阅读
粉丝