es6基础内容,重点要理解代码

最新推荐文章于 2022-11-25 15:03:47 发布

aoyia

最新推荐文章于 2022-11-25 15:03:47 发布

阅读量133

点赞数

分类专栏： es6 文章标签： js es6

本文链接：https://blog.csdn.net/weixin_43601701/article/details/117014988

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

尚硅谷Web前端ES6教程，涵盖ES6-ES11

文章目录

尚硅谷Web前端ES6教程，涵盖ES6-ES11
前言es6
一、es6是什么？
二、es6具体内容
总结

前言es6

目标：知道明白说得出es6内容是啥？，那些是重点？那些用处广泛的内容

一、es6是什么？

ES6是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。ES6是JS(JavaScript)的一个版本标准（摘自阮一峰es6教程）

二、es6具体内容

1.let

不可变量提升，所以不能在变量声明前使用，
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>let</title>
    <style>
      .box {
        width: 230px;
        height: 130px;
        border: 2px solid #ccc;
        float: left;
        margin-right: 50px;
      }
    </style>
  </head>
  <body>
    <h2>点击变换颜色</h2>
    <hr />
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
  <script>
    let items = document.querySelectorAll('.box');
    console.log(items, 1);
    for (let i = 0; i < items.length; i++) {
      items[i].onclick = () => {
        console.log(`click事件${i}`);
        items[i].style.background = 'pink';
      };
      console.log(`for 循环第${i}次`);
    }
    /**
     * {
     *   let i = 0
     * }
     * {
     *   let i = 1
     * }
     * {
     *   let i = 2
     * }
     */
  </script>
</html>

2.var

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

10.ES6-箭头函数的实践与应用场景

这里面有箭头函数的 this的指向问题，
箭头函数的 this 是静态的，它是指向在声明时所在作用域下面的this的值，就是上一层的this，就是指向 _this

 <style>
      .box,
      .box3 {
        width: 230px;
        height: 130px;
        border: 2px solid #ccc;
        float: left;
        margin-right: 50px;
      }
    </style>
  </head>

  <body>
    <h2>点击变换颜色</h2>
    <hr />
    <div class="ad">
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="box3"></div>
  </body>

  <script>
    let items = document.getElementsByClassName('box3');
    
    // function 的方式
    items[0].addEventListener('click', function () {
      const _this = this;
      setTimeout(function () {
        console.log(this, 'function');
        console.log(_this, 'function');
        _this.style.background = 'pink';
      }, 2000);
    });

    // 箭头函数的等效方式，
    // 因为箭头函数的 this 是静态的， 
    // 它是指向在声明时所在作用域下面的this的值，就是上一层的this，就是指向 _this

    // items[0].addEventListener('click', function () {
    //   setTimeout(() => {
    //     this.style.background = 'pink';
    //     console.log(this, '箭头函数');
    //     //这里的this指向了上一层作用域的那个this
    //     //就是function的this ，function的this又是指向了items[0]
    //   }, 2000);
    // });
  </script>

19.iterator

<script>
      const banji = {
        name: '水木年华',
        stus: ['xiangming', 'xianing', 'xianisdng', 'xming', 'ming'],
        [Symbol.iterator]() {
          // 索引变量
          let index = 0;
          return {
            next: () => {
              if (index < this.stus.length) {
                return { value: this.stus[index++], done: false };
              } else {
                return { value: undefined , done :true};
              }
            },
          };
        },
      };

      for (let item of banji) {
        console.log(item);
      }

20.生成器

这东西是用来解决异步编程的

 <script>
     //   异步编程
    //   要求： 一秒后输出11，再过两秒输出22，再过两秒输出33
    // 回调地狱 , 如果还有将会是一个难看的难理解的地狱
    // setTimeout(()=>{
    //     console.log('11');
    //     setTimeout(() => {
    //         console.log('22');
    //         setTimeout(() => {
    //             console.log('33');
    //         }, 3000);
    //     }, 2000);
    // },1000)

    // 解决方法 ： 生成器异步编程
    function one(){
        setTimeout(() => {
            console.log('111');
            iterator.next()  //调用next方法，继续执行 iterator函数
        }, 1000);
    }
    function two(){
        setTimeout(() => {
            console.log('222');
            iterator.next()  //调用next方法，继续执行 iterator函数
        }, 2000);
    }
    function three(){
        setTimeout(() => {
            console.log('333');  
            iterator.next()  //调用next方法，继续执行 iterator函数
        }, 3000);
    }

    function * gen(){
       yield  one();
       yield  two();
       yield three();
    }

    // 调用生成器
    let iterator = gen()
    iterator.next()
    </script>

 <script>
      function getUser() {
        setTimeout(() => {
          let data = '用户数据';
          iterator.next(data);   //调用next函数时，传入参数data
          						 //这个参数是 yield getUser的返回值
        }, 1000);
      }
      function getOrders() {
        setTimeout(() => {
          let data = '商品数据';
          iterator.next(data);
        }, 1000);
      }
      function getGoods() {
        setTimeout(() => {
          let data = '订单数据';
          iterator.next(data);
        }, 1000);
      }

      function* gen() {
        const user = yield getUser();
        console.log(user);   
        console.log(yield getOrders());
        console.log(yield getGoods());
      }
      //调用生成器
      const iterator = gen();
      iterator.next();
      //结果 ：
      //用户数据
	  //商品数据
	  //订单数据
    </script>

24.Promise

Promise是ES6引入的异步编程的新解决方案。语法上 Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise构造函数: Promise (excutor){
Promise.prototype.then方法
Promise.prototype.catch方法

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

aoyia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es6基础内容,重点要理解代码

尚硅谷Web前端ES6教程，涵盖ES6-ES11文章目录尚硅谷Web前端ES6教程，涵盖ES6-ES11前言es6一、es6是什么？二、es6具体内容1.let2.var总结前言es6 目标：知道明白说得出es6内容是啥？，那些是重点？那些用处广泛的内容一、es6是什么？ES6是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。另外，一些
复制链接

扫一扫