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
- let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
- const 常量
- 常量不能重新赋值
- 不能重复声明
- 块级作用域
- const 不会被预解析
- 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
- let 和 var 的差异
-
解构赋值
- 对象的解构赋值
- 数组的解构赋值
- 字符串的解构赋值
- 手册地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-
展开运算符
-
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
-
新增对象扩展
-
babel 使用
- Babel 是一个 JavaScript 编译器
- 手册地址:https://www.babeljs.cn/
- Babel 基本是否方法
带着问题学习
-
小试牛刀
-
var、let 及 const 区别?
-
说一下 ES6 对 Object 类型做了哪些优化更新?
-
员工列表
- 数据驱动视图
- 员工列表筛选
###百度全选列表
- 实现添加功能
- 实现全选功能
- 实现删除功能
总结
- ES6基本使用
- let、const、解构赋值、展开运算符...
- 数据驱动视图
- ES6员工列表案例
- ES6百度音乐全选案例
下期预告
- js面向对象