ECMA6 | 青训营

57 阅读5分钟

1.let 块级作用域 声明赋值

2.const 声明不变量

3.对象的结构

结构赋值

 const zhao = {name:‘1’,age:‘2’,}
 let {name , age} = zhao
 console.log(name)
 console.log(age)

4.模板字符串 ${}

5.允许大括号内直接写入变量和函数,作为对象的属性和方法

6.箭头函数

let fn = (a,b)=>{

return a + b

}

箭头函数要求

this静态 this始终指向函数声明时所在作用域下的this的值

不能作为构造函数去实例化对象

箭头函数简写

1.省略小括号 当形参只有一个

2.省略花括号 代码体只有一行 此时return也得省略 返回值就是结果

允许函数参数赋值初始值与结构赋值结合

rest参数 ...args

用来获取函数的实参,用来代替arguments

扩展运算符

将数组转换为逗号分隔的参数序列

symbol 原始数据类型

symbol() 两个创建的bool不一样

symbol.for 两个创建的一样

不能与其他数据进行运算

迭代器

ES6 引入了迭代器(iterator)和 for...of 循环语句用于迭代可迭代对象(iterable)

为不同的数据结构提供访问机制

遍历操作

for 。。。。of 键值

for.....in 保存的是健名 123

创建对象

 const xiyou = ['tang','sun','zhu']
 let iterator = xiyou[symbol.iterator]()
 console.log(iterator.next())
 console.log(iterator.next())
 ​

迭代器是一个对象,用于提供一个 next() 方法,该方法返回可迭代对象中的下一个值和一个布尔值(表示是否已经迭代完了所有的值)。

迭代器自定义遍历对象

 // 定义一个自定义迭代器
 const myIterator = {
   data: [1, 2, 3, 4, 5],
   currentIndex: 0,
 ​
   // 定义一个next方法,返回当前元素和是否还有下一个元素的状态
   next() {
     if (this.currentIndex >= this.data.length) {
       return {
         done: true
       };
     } else {
       return {
         value: this.data[this.currentIndex++],
         done: false
       };
     }
   },
 ​
   // 定义一个Symbol.iterator方法,返回自身,使得该对象可以被for...of遍历
   [Symbol.iterator]() {
     return this;
   }
 };
 ​
 // 使用for...of遍历自定义迭代器
 for (const item of myIterator) {
   console.log(item);
 }

以上代码定义了一个包含datacurrentIndex属性的对象,data属性表示需要遍历的数据,currentIndex属性表示当前遍历到的元素的索引。该对象还定义了一个next方法,用于返回当前元素和是否还有下一个元素的状态。最后,该对象还定义了一个Symbol.iterator方法,返回自身,使得该对象可以被for...of遍历。

生成器

生成器函数使用function*语法声明,它可以暂停执行,并且可以返回多个值。当生成器函数被调用时,它不会立即执行,而是返回一个迭代器对象,通过调用迭代器的next()方法可以逐步执行生成器函数的代码。在生成器函数的代码执行过程中,可以使用yield关键字暂停执行,并返回一个值。

生成器函数解决函数异步回调

ES6的生成器函数可以通过使用yield关键字将异步操作转换为同步操作,从而简化代码并使其更易于理解。 例如,以下是一个简单的生成器函数示例,它使用setTimeout模拟异步操作:

 function* asyncOperation() {
   yield setTimeout(() => {
     console.log('Async operation completed');
     gen.next();
   }, 2000);
   console.log('Generator function resumed');
 }
 ​
 const gen = asyncOperation();
 gen.next();

在这个示例中,我们使用yield关键字暂停了生成器函数的执行,直到异步操作完成。当异步操作完成时,我们调用gen.next()来恢复生成器函数的执行。这样,我们就可以使用同步的方式来处理异步操作,而不需要使用回调函数。

promise

ES6中的Promise是一种处理异步操作的机制,它可以将异步操作的结果封装在一个对象中,并提供了一系列方法来处理异步操作的状态和结果。 ,我们创建了一个Promise对象,并传递了一个函数作为参数。这个函数接受两个参数:resolve和reject。当异步操作成功时,我们调用resolve方法并传递异步操作的结果;当异步操作失败时,我们调用reject方法并传递错误信息。

在Promise对象上,我们可以调用then方法来处理异步操作成功的情况,catch方法来处理异步操作失败的情况。在then方法中,我们可以获取异步操作的结果,并进行下一步的处理。在catch方法中,我们可以获取错误信息,并进行错误处理。

值得注意的是,Promise对象的状态一旦改变,就不能再次改变。也就是说,一旦Promise对象的状态从pending变为fulfilled或rejected,就不能再次变为pending状态。

promise封装ajax请求

 function ajax(url, method, data) {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
     xhr.open(method, url);
     xhr.onload = () => resolve(xhr.responseText);
     xhr.onerror = () => reject(xhr.statusText);
     xhr.send(data);
   });
 }
 ​
 ajax('http://example.com', 'GET')
   .then(response => console.log(response))
   .catch(error => console.error(error));

我们定义了一个名为ajax的函数,它接受三个参数:URL、HTTP方法和要发送的数据。该函数返回一个Promise对象,该对象在成功或失败时执行相应的回调函数。

在函数内部,我们创建了一个XMLHttpRequest对象,并使用open方法设置HTTP方法和URL。然后,我们定义了onloadonerror回调函数来处理成功和失败的响应。最后,我们使用send方法发送数据。

使用ajax函数来发送Ajax请求,我们可以使用then方法来处理成功的响应,并使用catch方法来处理错误。在这个例子中,我们只是将响应输出到控制台,但是你可以根据需要执行任何操作。

then方法

Promise对象提供了then方法,它可以接受两个参数:一个是成功时的回调函数,另一个是失败时的回调函数。then方法返回一个新的Promise对象,可以链式调用多个then方法,实现多个异步操作的顺序执行。

es8中async/await函数的使用

一种更简单、更直观的处理异步代码的方式。async/await 允许我们像编写同步代码一样编写异步代码,从而使异步代码更易于理解和维护。

async函数

返回值是promise对象

promise对象的结果由async函数执行的返回值决定

async和await函数结合读取文件

动态import

import()函数返回一个 Promise,可以使用then()方法来处理加载完成后的模块。