我知道的ES6

ES6

块级作用域

之前只有函数作用域和变量作用域
函数作用域：
全局作用域：

{
 var name = "China_forrest"
}
console.log("name",name)  //"China_forrest"

let:定义变量

{
let name = "China_forrest"
}
console.log("name",name)    //name is not defined

cosn定义常量

{
const name = "China_forrest"
}
console.log("name",name)    
// Assignment to constant variable

变量提升

编写中

字符串模板

let name = "China_forrest"
let number = 100
console.log(`${name}一共贡献了${name}条`)

函数扩展

• 参数默认值

const test = (name = "linhao") => {
console.log('name',name)   
}
test()    //  "linhao"
test("test1");    // "test1"

• 箭头函数、展开运算符

const test = (x,y) => {
  console.log("name")
}

箭头函数与普通函数的区别

1.箭头函数是匿名函数，不能作为构造函数，也就是不能使用new

var B = ()=>{
  value:1;
}
var b = new B();
//报错提示：Uncaught TypeError: B is not a constructor

2.箭头函数不绑定arguments，取而代之的是rest ...解决

function test(x,y) {
   console.log("arguments",arguments)
}
test(1,2);

const test = (...rest) => {
console.log('name', rest)
}
test(1,23)   //name (2) [1, 23]

3.普通函数和箭头函数this
普通函数：

this指向他的直接调用者，例如 obj.function ,那么function中的this就是obj;
默认情况下（非严格模式下，未使用'use strict'，没找到直接调用者，则this指的是window）
严格模式下，没有直接调用者，则this指向undefined
使用call,apply,bind(ES5新增）绑定的，this指向的是绑定的对象

箭头函数：
不绑定this,也就是自己本身没有htis,会自动捕获其所在的上下文对象中的this
通过ES5中的call()/apply()/bind()都改变不了其指向。

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b();
obj.c();


通过 call() 或 apply() 方法调用一个函数时，只是传入了参数
而已，对 this并没有什么影响

var obj = {
  a: 10,
  b: function(n){
    var f = (v) => v + this.a;
    return f(n);
  },
  c: function(n) {
    var f = (v) => v + this.a;
    var m = {a:20};
    return f.call(m,n);
  }
}
console.log(obj.b(1)); //11
console.log(obj.c(1)); //11

4.箭头函数没有原型属性

var a = ()=>{
  return 1;
}
function b(){
  return 2;
}
console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}

5.箭头函数不能当做generator函数，不能使用yield关键字

6.箭头函数不能换行

var a = ()
=>1; //SyntaxError: Unexpected token =>

对象扩展

• Object.key、values、entries

const obj = {name:"tom",age:19,sex:"男"}
console.log(Object.keys(obj))
console.log(Object.values(obj))
console.log(Object.entries(obj))

• object属性key的扩展、对象方法简写，计算属性

const name = "imooc"
const obj = {
  name,
  [name]:'hello',
  hello:function() {},
  hello(){}
}
console.log(obj)

• 展开运算符（不是ES6标准，但是babel也支持）
  拓展运算符

const obj1 = {name:'imooc',course:'React'}
const obj2 = {type:'IT',item:'woniu'}
console.log(obj1);
console.log(obj2);
console.log({...obj1,...obj2})

解构赋值

函数也可以多返回值了

• 数组解构
• 对象解构

类

提供class的语法糖

• 是prototype的语法糖
• Extends继承
• Constructor构造函数

1、
//demo1.js
export const name = 'hello world'

export function sayHello(){
    console.log("imooc rocks")


export default fucntion test() {
 console.log("imooc rocks")
}

对应的导入方式：
//demo2.js
import { str, f } from 'demo1' //
import * as App from 'demo1'

console.log(App)

默认导出

//demo1.js  只能有一个默认导出
//export default const str = 'hello world'
export default function test() {
console.log('hello imooc')
}
对应的导入方式：

//demo2.js  
//import str from 'demo1' //导入的时候没有花括号
import course from './demo1'

其他

新的特性（不在ES6范围），被babel支持

• 对象扩展符(Babel-plugin-transform-object-rest-spread插件)，函数绑定
• 装饰器
• async await
• Promise
• 迭代器和生成器
• 代理Proxy

常用代码片段

数组