一、ES6基础常用功能应用(1)

1. 课程主题&知识点

• 掌据ES6基本使用
• 了解数据驱动视图模式

2. ECMAScript6入门

2-1.简介

• JavaScript 三大组成部分： ECMAScript、DOM、BOM

• ECMAScript 发展历史 developer.mozilla.org/zh-CN/docs/…

• ECMAScript 包含内容： JS 中的数据类型及相关操作，流程控制，运算符及相关运算……

2-2.知识点

let & const区别

let 和 var 的差异：

• let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
  • 块级作用域
  • var 声明的变量只能是---全局或者整个函数块的
  • let 不能重复声明、不会被预解析
  • 手册地址：developer.mozilla.org/zh-CN/docs/…

const 常量：

• 常量不能重新赋值、不能重复声明、不会被预解析
• 块级作用域
• 手册地址：developer.mozilla.org/zh-CN/docs/…

深度冻结对象数据：

解构赋值

• 对象的解构赋值
• 数组的解构赋值
• 字符串的解构赋值
• 手册地址：developer.mozilla.org/zh-CN/docs/…

    let obj = {
        name:"张三",
        age:20,
        hobby:{
            one:"篮球"
        }
    }
    let { name:myname, age, hobby:{one} } = obj;
    console.log(myname, age, one);

展开运算符

• 对象展开
• 数组展开
• 手册地址：developer.mozilla.org/zh-CN/docs/…

    let obj = {
        name:"张三",
        age:20,
        hobby:{
            one:"篮球"
        }
    }
    let newObj = { height:"178cm", ...obj };
    console.log(newObj);

    function test(...args){
        // console.log(arguments);
        console.log(args);
    }
    test(1,2,3);

Set对象

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

set会清除重复的数据 注： 若要频繁更改某对象的属性，建议使用Map，Set这样性能更高；

Map对象

• Map 对象的数据结构
• Map 相关属性与方法
• size 属性
• clear()、delete()、get()、has()、set()
• 手册地址：developer.mozilla.org/zh-CN/docs/…

weakMap弱引用：清空会被垃圾机制回收，性能更好但API少，而map不会被回收；

打印：被清空了；

Symbol：唯一标识

[Symbol(key)] :‘值’ 这样增加获取的难度--需要使用getOwnPropertySymbols 获取

函数新增扩展

• 箭头函数
  • 箭头函数的各种写法
  • 箭头函数的 this 问题
  • 箭头函数的不定参问题
  • 手册地址：developer.mozilla.org/zh-CN/docs/…
• rest 参数设置
• 参数默认值设置

对象返回的情况需要注意一些，加个小括号包裹起来； 箭头函数默认return 返回；

新增数组扩展

• Array.from()、Array.of()
• find()、findIndex()、includes()
• flat()、flatMap()
• 手册地址：developer.mozilla.org/zh-CN/docs/…

新增字符串扩展

• includes(), startsWith(), endsWith()
• repeat()
• 模版字符串
• 手册地址：developer.mozilla.org/zh-CN/docs/…

新增对象扩展

• 属性简洁表示法
• 属性名表达式
• 手册地址：developer.mozilla.org/zh-CN/docs/…

babel的使用

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

带着问题学习

• var、let 及 const 区别？
• 说一下 ES6 对 Object 类型做了哪些优化更新?

2-3.下期预告

• js面向对象