ES6 —— 学习之六

1. 模块化使用

• 1）模块化介绍
  模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

  一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

模块化的优势有以下几点：

• 防止命名冲突
• 代码复用
• 高维护性

• 2）export 和 import
• export 语法：

• <font color="1ba784" size=2>export 第一种语法：分别暴露</font>

// 这是 目录 js 下的 m1.js
export let name = 'Qinghuan';
export function fun(){
    console.log('hello ES6 ~ ');
}

• <font color="1ba784" size=2>export 第二种语法：统一暴露</font>

// 这是 目录 js 下的 m2.js
let name = 'Qinghuan';
function fun(){
    console.log('hello ES6 ~ ');
}
export {name, fun};

• <font color="1ba784" size=2> export 第三种语法：默认暴露</font>

// 这是 目录 js 下的 m3.js
export default {
    let name = 'Qinghuan';
    function fun(){
        console.log('hello ES6 ~ ');
    }
}

• import 语法

• <font color="1ba784" size=2> import 第一种语法：通用的导入方式</font>

import * as m1 from './m1.js'
console.log(m1);
/* m1:
    Module {Symbol(Symbol.toStringTag): "Module"}
    fun: ƒ fun()
    name: "Qinghuan"
    Symbol(Symbol.toStringTag): "Module"
    get fun: ƒ ()
    set fun: ƒ ()
    get name: ƒ ()
    set name: ƒ () 
*/

• <font color="1ba784" size=2> import 第二种语法：解构赋值导入方式</font>

import {name, fun} from './js/m1.js'
// 假如引进变量重名，使用 as 修改
import {name as name1, fun as fun1} from './js/m2.js'
console.log(name)   // Qinghuan
fun()   // hello ES6 ~ 

• <font color="1ba784" size=2> import 第三种语法：简便导入方式</font>

import m3 from './js/m3.js'  // 简便方式仅适用于 export default
console.log(m3.name)    // Qinghuan
m3.fun()    // hello ES6 ~

2. Array.prototype.includes

<font color="1ba784"> includes 方法用来检测数组中是否包含某个元素，返回布尔类型值 </font>

const arr = [1,2,3,4,5,6];
            
console.log(arr.includes(5));   // true
console.log(arr.includes(0));   //false

3. 指数操作符

<font color="1ba784"> 在 ES6 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同 </font>

console.log(2 ** 4);    // 16
console.log(Math.pow(2, 4));    // 16