ES6基础ECMAScript 6 简介 JavaScript 三大组成部分 ECMAScript DOM BOM

ECMAScript 6 简介

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

ECMAScript 6

let 和 const
- let 和 var 的差异
  - let 允许声明一个在作用域限制在块级中的变量、语句或者表达式
    - 块级作用域
  - var 声明的变量只能是全局(windows)或者整个函数块的
  - let 不能重复声明
  - let 不会被预解析 {
    1. 不允许重复声明
    2. 块儿级作用域
    3. 不存在变量提升
    4. 不影响作用域链
  }
  - 手册地址：developer.mozilla.org/zh-CN/docs/…
- const 常量
  - 常量不能重新赋值
  - 不能重复声明
  - 块级作用域
  - const 不会被预解析 {
    1. 声明必须赋初始值
    2. 标识符一般为大写
    3. 不允许重复声明
    4. 值不允许修改
    5. 块儿级作用域 }
  [注意]：对象属性修改和数组元素变化不会出发 const 错误 //定义数组 const MY_ARRAY = []; // 可以向数组填充数据 MY_ARRAY.push('A'); // ["A"] 应用场景：声明对象类型使用 const，非对象类型声明选择 let
  - 手册地址：developer.mozilla.org/zh-CN/docs/…

- 解构赋值
    - 对象的解构赋值
    {
        const lin = {
            name: '林志颖',
            tags: ['车手', '歌手', '小旋风', '演员']
        };
        let {name, tags} = lin;
        //复杂解构
        let wangfei = {
            name: '王菲',
            age: 18,
            songs: ['红豆', '流年', '暧昧', '传奇'],
            history: [
                {name: '窦唯'},
                {name: '李亚鹏'},
                {name: '谢霆锋'}
            ]
        };
        let {songs: [one, two, three], history: [first, second, third]} = 
        wangfei;
    }
    - 数组的解构赋值
    {
        const arr = ['张学友', '刘德华', '黎明', '郭富城'];
        let [zhang, liu, li, guo] = arr;
    }
    - 字符串的解构赋值
    {
        const metadata = {
        title: 'Scratchpad',
        translations: [
            {
            locale: 'de',
            localization_tags: [],
            last_edit: '2014-04-14T08:43:37',
            url: '/de/docs/Tools/Scratchpad',
            title: 'JavaScript-Umgebung'
            }
        ],
        url: '/en-US/docs/Tools/Scratchpad'
        };

        let {
        title: englishTitle, // rename
        translations: [
            {
            title: localeTitle, // rename
            },
        ],
        } = metadata;

        console.log(englishTitle); // "Scratchpad"
        console.log(localeTitle);  // "JavaScript-Umgebung"
    }
    - 手册地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

展开运算符
- 对象展开 { let skillOne = { q: '致命打击', }; let skillTwo = { w: '勇气' }; let skillThree = { e: '审判' }; let skillFour = { r: '德玛西亚正义' }; let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};
}
- 数组展开 { let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子']; function fn(){ console.log(arguments); } fn(...tfboys) 等价于 fn.apply(null,tfboys)
}
- 手册地址：developer.mozilla.org/zh-CN/docs/…

ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费
原生具备 iterator 接口的数据(可用 for of 遍历) a) Array b) Arguments c) Set d) Map e) String f) TypedArray g) NodeList
工作原理 a) 创建一个指针对象，指向当前数据结构的起始位置 b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员 c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员 d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

Set 对象 (元素不重复)
- Set 对象的数据结构
- Set 相关属性与方法
  - size 属性
  - clear()返回undefined、delete()返回boolean、has()检测集合中是否包含某个元素，返回 boolean 值、add()
- 手册地址：developer.mozilla.org/zh-CN/docs/…
Map 对象
- Map 对象的数据结构
- Map 相关属性与方法
- size 属性
- clear()、delete()、get()、has()、set()
- 手册地址：developer.mozilla.org/zh-CN/docs/…
函数新增扩展
- 箭头函数
  - 箭头函数的各种写法
  - 箭头函数的 this 问题
  - 箭头函数的不定参问题 {
    1. 如果形参只有一个，则小括号可以省略
    2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
    3. 箭头函数 this 指向声明时所在作用域下 this 的值
    4. 箭头函数不能作为构造函数实例化
    5. 不能使用 arguments }
  - 手册地址：developer.mozilla.org/zh-CN/docs/…
- rest 参数设置
- 参数默认值设置
新增数组扩展
- 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 基本是否方法