当前位置: 首页 > news >正文

ECMAScript 6 基础

ECMAScript 6 基础

  • 课堂目标
    • 录播视频要点回顾
    • 掌握ES6基本使用
    • 了解数据驱动视图模式
    • 完成员工列表案例
    • 完成百度音乐案例
  • 本节知识要点
    • ES6+基本使用
    • 数据驱动视图
    • 员工列表案例
    • 百度音乐全选案例

ECMAScript 6 简介

  • JavaScript 三大组成部分
    • ECMAScript
    • DOM
    • BOM
  • ECMAScript 发展历史 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources
  • ECMAScript 包含内容:JS 中的数据类型及相关操作,流程控制,运算符及相关运算……

ECMAScript 6

  • let 和 const

    • let 和 var 的差异
      • let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
        • 块级作用域
      • var 声明的变量只能是全局或者整个函数块的
      • let 不能重复声明
      • let 不会被预解析
      • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
    • const 常量
      • 常量不能重新赋值
      • 不能重复声明
      • 块级作用域
      • const 不会被预解析
      • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
  • 解构赋值

    • 对象的解构赋值
    • 数组的解构赋值
    • 字符串的解构赋值
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  • 展开运算符

    • 对象展开
    • 数组展开
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax
  • Set 对象

    • Set 对象的数据结构
    • Set 相关属性与方法
      • size 属性
      • clear()、delete()、has()、add()
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
  • Map 对象

    • Map 对象的数据结构
    • Map 相关属性与方法
    • size 属性
    • clear()、delete()、get()、has()、set()
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
  • 函数新增扩展

    • 箭头函数
      • 箭头函数的各种写法
      • 箭头函数的 this 问题
      • 箭头函数的不定参问题
      • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    • rest 参数设置
    • 参数默认值设置
  • 新增数组扩展

    • Array.from()、Array.of()
    • find()、findIndex()、includes()
    • flat()、flatMap()
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
  • 新增字符串扩展

    • includes(), startsWith(), endsWith()
    • repeat()
    • 模版字符串
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
  • 新增对象扩展

    • 属性简洁表示法
    • 属性名表达式
    • 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
  • babel 使用

    • Babel 是一个 JavaScript 编译器
    • 手册地址:https://www.babeljs.cn/
    • Babel 基本是否方法

带着问题学习

  • 小试牛刀

    • var、let 及 const 区别?

    • 说一下 ES6 对 Object 类型做了哪些优化更新?

员工列表

  • 数据驱动视图
  • 员工列表筛选

###百度全选列表

  • 实现添加功能
  • 实现全选功能
  • 实现删除功能

总结

  • ES6基本使用
  • let、const、解构赋值、展开运算符…
  • 数据驱动视图
  • ES6员工列表案例
  • ES6百度音乐全选案例

下期预告

  • js面向对象

http://www.mrgr.cn/news/11630.html

相关文章:

  • 什么是数据分析,企业数据分析的流程是什么?
  • IO进程线程 0827作业
  • 计算机网络-2-tcpip协议
  • npm阿里云制品仓库
  • 【笛卡尔积】深入理解笛卡尔积及其在SQL中的应用
  • React多功能管理平台项目开发全教程
  • 第三十二天学习笔记
  • EmguCV学习笔记 VB.Net 6.3 轮廓外接多边形
  • 关于多参数/排列组合的结果分配
  • 【LLM之Data】SKYSCRIPT-100M论文阅读笔记
  • 测试使用--
  • 日志排查——linux
  • Spring Boot如何压缩Json并写入redis?
  • GDB基础指令分类与汇总
  • 解决CSS布局中padding-right不生效问题
  • Linux5.0 NVMe驱动详细注释
  • 组播(UDP)
  • 【匹配】枚举所有可能的资源组合
  • Ansys Zemax | 如何寻找几何错误 - 第1部分
  • 个人博客和文档管理之vuepress