ECS6 基础知识汇总

ECMAScript 6基础

• 本节知识要点
  • ES6基本使用
  • 数据驱动视图
  • ES6员工列表案例
  • 百度音乐全选案例

ECMAScript 6 简介

• JavaScript 三大组成部分
  • ECMAScript
  • DOM
  • BOM
• ECMAScript 发展历史 ECMAScript 发展历史
• ECMAScript 包含内容：JS 中的数据类型及相关操作，流程控制，运算符及相关运算……

ECMAScript 6

• let 和 const
  • let 和 var 的差异
    • let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
      • 块级作用域
    • var 声明的变量只能是全局或者整个函数块的
    • let 不能重复声明
    • let 不会被预解析
    • 手册地址：let手册地址
  • const 常量
    • 常量不能重新赋值
      （如果定义对象，想要实现不能修改的效果，需要添加freeze，如果对象内还包含对象，则需要手动递归写一个deepfreeze，类似于深拷贝浅拷贝等等）
    • 不能重复声明
    • 块级作用域
    • const 不会被预解析
    • 手册地址：const手册地址
• 解构赋值
  • 对象的解构赋值 （解构的名称必须和对象的键名对应上）
  • 数组的解构赋值
  • 字符串的解构赋值
  • 手册地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

      // 也可以重命名
      
      let obj = {
        myname:"张三",
        age:20
      }
      
      let {myname:name,age} = obj;
      console.log(name,age);
      
      #结果为张三，20

• 展开运算符

  • 对象展开
  • 数组展开（之前数组展开为contact，只能浅层展开，不能深层展开，深层展开还需要用展开运算符）
  • 可以把类数组转换成数组
  • 手册地址：展开运算符手册地址

• Set 对象

  • Set 对象的数据结构
  • Set 相关属性与方法
    • size 属性
    • clear()、delete()、get()、has()、add()
  • 手册地址：Set对象手册地址

• Map 对象

  • Map 对象的数据结构
  • Map 相关属性与方法
  • size 属性
  • clear()、delete()、get()、has()、set()
  • 手册地址：Map对象手册地址

• 函数新增扩展

  • 箭头函数
    • 箭头函数的各种写法
    • 箭头函数的 this 问题（this会渗透，箭头语法内没有this，会拿到上层this）
    • 箭头函数的不定参问题
    • 箭头函数的return问题（如果没有大括号，则会隐式返还所传的参数，如果给了大括号，需要在大括号内手动return）
    • 手册地址：箭头函数手册地址
  • rest 参数设置
  • 参数默认值设置

• 新增数组扩展

  • Array.from()、Array.of()
  • find()、findIndex()、includes()
  • flat()、flatMap()
  • 手册地址：新增函数

• 新增字符串扩展

  • includes(), startsWith(), endsWith()
  • repeat()
  • 模版字符串
  • 手册地址：新增字符串

• 新增对象扩展

  • 属性简洁表示法
  • 属性名表达式
  • 手册地址：新增对象

• babel 使用

  • Babel 是一个 JavaScript 编译器
  • 手册地址：Babel
  • Babel 基本使用方法

员工列表

• 数据驱动视图（主流思想）
  把思维更多的放在业务逻辑上面，主层架构方面，形成数据响应式，而不是放在操作DOM上面
• 员工列表筛选

百度全选列表

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

总结

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

案例在下一节