高级前端面试题——es6

[dujuncheng]

es6

前言

• 开发环境已经普及使用
• 浏览器环境支持不够
• 内容很多，重点了解常用语法
• 面试�: 开发环境的使用 + 重点语法的掌握

模块化的使用和编译环境

模块化基本语法

// util1.js
export default {
  a:1 
}
// util2.js
export function f1(){}
export function f2(){}

// index.js
import obj from 'util1.js'
// 哪怕只引入一个也需要添加花括号
import { f1, f2 } from 'util2.js'

主要分为导出模块和引入模块：

导出模块

有两种方式可以导出模块

• 在定义的语句面前，加export

export var a =1;
export let myVar= 'sss';
export const MYVAR = 'ssss';
export function Myfunc(){
   ……
  }
export class myclass{
   ……
 }

• 另一种，写代码的时候不用考虑外部世界，在最后把想要导出的东西（变量，对象，方法）塞进一个对象里面。
  导入绑定列表看起来和解构赋值一样，但并不是

const my_const ='ssss';
function my_func () {
.....
}
export { my_const, my_func}

这两种方法以外的方法，比如说直接导出一个简单的值，是错误的：

//报错
export 1;
//报错
var m = 1;
export m;
//报错
function f () {}
export f ;
//正确
export function f (){};

简单来说，es6的export只有两种，要么在声明的时候导出，要么在花括号内导出

导入模块

import 必须把文件的拓展名加上，node 遵循基于文件系统前缀区分本地文件和包的惯例，example 是一个包，而 ./example.js 是一个文件。

import {test1, test2 } from './example.js'
import {test1} from './example.js'
import {test2} from './example.js'
import * as example from './example.js'

注意，要有大括号，和结构赋值很像。如果没有大括号，这是导入一个默认值

默认值

default 只能使用一次。如export default, 则不需要import {}，如果export 哪怕是一个值，也需要在import时需要 import {}

//第一组
export default function crc32 (){
 //...
}
import crc32 from'crc32'; //输入
//第二组
export function crc32(){//输出
//...
};
import {crc32} from'crc32';//输入

export a = 1
export default function () {}

// 默认值在前，使用逗号分隔
import sum, { a } from 'example.js'

重命名

在导入导出的时候，都可以重命名

// 重命名
export { test as name }
import{ name as name2 }from'./example.js'

只读绑定

简单来说，就是导入的东西，无法重名，无法修改

当从一个模块导入一个绑定时，就如同const, 无法重名声明，重名声明会报错,导入其他模块也不能重名。
不管导入的东西，是个简单值还是引用类型，都不能修改。如果想修改，只能回退到被导入的模块。

// export.js
var name= 'test1'
function changeName (name) {
 name = name
}
export {name, changeName }
//import.js
import { name,changeName }from'./export.js'
console.log(name)//test1
changeName('test2')
console.log(name)//test2
name = 'test3'//报错

• 模块顶部创建的变量不会添加到全局作用域，只会存在模块的顶级作用域中。
• 模块的顶部，this是undifined
• 不能 if(){ 导入或导出 }, 这是为了让javascript引擎静态的确定有哪些可以导出。
• import 会被提升到顶部，因此代码中“先使用，再导入也是可以”

foo();
import { foo } from 'my_module';

更深入细节可以学习 http://exploringjs.com/es6/ch_modules.html 这片博客

class

promise 用法

其他es6的功能