每天三道前端题（6）

一、common.js和es6模块引入的区别？

commonJs是一种模块规范，最初被应用与Nodejs，成为Nodejs的模块规范。
运行在浏览器端的JavaScript由于也缺少类似的规范，在ES6出来之前，前端也实现了一套相同的模块规范（例如：AMD），用来对前端模块进行管理。

自ES6起，引入了一套新的ES6 Module规范，在语言规范的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。
在使用上的差别主要有：

• CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
• CommonJS模块是运行时加载，ES6模块是编译时输出接口。
• CommonJS是单个值的导出，ES6 Module可以导出多个。
• CommonJS是动态语法，可以卸载判断里，ES6 Module静态语法，只能卸载顶层
• CommonJS的this是当前模块，ES6 Module的this是undefined

二、ES6中函数新增了哪些扩展？

1、参数

ES6允许为函数的参数设置默认值

function func(x, y = "world"){
	console.log(x,y);
}
console.log("hello") // hello world
console.log("hello","hi") // hello hi
console.log("hello"," ") // hello

参数的默认值应该是函数的尾参数，否则是不能省略的

function func(x="hello",y){
	console.log(x,y)
}
func()  // 1 undefined
func(2) // 1  2
func(, 1) //error
func(undefined ,2) //1 2

函数的形参是默认声明的，不能用let 或者 const 再次声明

function func( x = "hello"){
	let x = "hi";   //error
	const x = "world";  //error 
}

参数的默认值可以与结构函数的默认值结合起来使用

function func({x,y = 5}){
	console.log(x,y);
}
func({}) //undefined 5
func({x:1}) //1 5
func({x:1,y:2})// 1 2
func() //TypeError: Cannot read property 'x'

2、属性

1、函数的 length属性

length 将返回没有指定默认值的参数个数；如果设置了默认值的参数不是尾参数，那么length 属性不会再计算后面的参数个数。

(function(a){}).length  		//1
(function(a=1){}).length  		//0
(function(a,b,c=1){}).length 	//2

//设置默认值的参数不是尾参数
(function(a=1,b,c){}).length 	//0
(function(a,b=1,c){}).length 	//1

2、name属性

name 属性用来返回函数的函数名

var func = function () {};
//ES5
f.name  // ""
//ES6
f.name //"func"

如果将一个具名函数，赋值给一个变量，则name属性返回的是具名函数原本的名字

const new = function old () {};
new.name // "old"

Function构造函数返回的函数实例，name 属性的值为 anonymous

(new Function).name //"anonymous"

bind返回的函数，name属性值会加上bound前缀

function func () {};
foo.bind({}).name // "bound foo"

3、作用域

一旦设置了参数的默认值，函数进行生命初始化时，参数会形成一个单独的作用域
等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值是，是不会出现的
下面梨子中，y=x 会形成一个单独的作用域，x 没有被定义，所以指向全局变量x

let x = 1
function func(y = x) {
// 等同于 let y = x
let x = 2
console.log(y);
}
func() //1

4、严格模式

只要函数参数设置了默认值、结构复制、或者扩展运算符，那么函数内部就不能显示设置为严格模式，否则会报错

// 报错
function func(a, b=a){
	'use strict';
	// code
}
// 报错 
const func = function({a,b}){
	'use strict';
	//code
}
//报错
const func = (...a) =>{
	'use strict';
	//code
}
const obj = {
	//报错
	func({a,b}){
		'use strict';
		//code
	}
}

5、箭头函数

使用 “箭头” ( =>) 来定义函数

var func = v => v ;
//等同于
var func = function(v) {
	return v;
}

如果箭头函数不需要参数或者需要多个参数，就使用一个() 表示参数部分

var func = () => "value";
//等同于
var func = function() { retrun "value" }；

var func2 = (value2,value2) => value2+ value2;
//等同于
var func2 = functiong(value1,value2) {
	return value1+value2
}

如果箭头函数的代码部分有多条语句，就要用大括号将他们括起来，并且使用 return语句返回

var func = (value1,value2) =>{ 
	value1++;
	value2++;
	return value1 + value2
}

如果返回对象，则需要加括号将对象包裹

const func = id =>({ 
	id :id,
	name: "Mike"
})

注意点：

• 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象
• 不可以当做构造函数，也就是说，不可以使用new 命令，否则会抛出一个错误
• 不存在使用 arguments 对象，该对象在函数体内不存在。。如果要使用，可以用 rest 参数代替
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator函数

三、下面代码输出是什么？

async function fn () {
	//return await 1234
	//等同于
	return 1234
}
fn().then(res => console.log(res))

答： 1234
正常情况下，async中的await命令是一个Promise对象，返回该对象的结果。
但如果不是Promise对象的话，就会直接返回对应的值，相当于Promise.resolve()