es6 依赖循环_ES6常用特性

1.背景介绍

ES6是ECMAScript2015的常用叫法。

ES6在2015年发布，所以也被称之为 ES2015

ES2016指 2016年发布

ES2017指 2017年发布

ES2018指 2018年发布

ES2019指 2019年发布

ES2012指 20120年发布

一直以为ES6就是2016年发布的，今天查了一些资料才发现理解错了。

2.常用特性

• let和const
  变量声明，与ES5中var的区别点就在作用域的不同
  var属于函数式作用域，存在变量提升，例如在for循环中

for(var x=0;x<5;x++){
    //
}
console.log(x)  //5

let属于块级作用域，不存在变量提升，不可重复定义，例如在for循环内部声明，外部无法 访问到

for(let x=0;x<5;x++){
    //
}
console.log(x)  //Uncaught ReferenceError: x is not defined

const属于不可修改类型，当我们定义以后，就不可再进行重新赋值修改

• 类[class]
  在之前，我们的javascript只有对象得概念，并不存在类得概念，在ES6中新增类，它是基于原型的面向对象的语言，会继承自身所有的属性，共享给新的对象。下面我们通过构造函数与class进行对比，协助我们更好的理解 构造函数---

function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);
//通过构造函数创建对象，必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年88岁了

class ---

class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88岁了
console.log(typeof Person);//function－－类实质上就是一个函数
console.log(Person===Person.prototype.constructor);//true
//类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法！

• 模块化

在此之前是没有模块这一说法的，我们若想使用，就需要使用外部插件进行依赖使用，在ES6中，直接提供了导出（export），引入（import）
export的用法，我们在项目中，增加一个文件，专门进行处理一些 公共逻辑，进行分批导出，可以是一个函数，一个变量，一个对象，当我们使用的时候，直接export导出，import进行接收。

  // 声明一个变量
  export const name = 'test'
  // 声明一个函数
  export const fn = ()=>{
    console.log('这是一个函数')
  }
  // 声明一个对象
  export const Obj = {
      name:'xiaoming',
      age:'22'
  }
  // 假如我们声明的这些变量在test.js 文件中，使用import 进行引入使用
  import {name,fn,Obj} from './test.js'
  console.log(name) // test
  console.log(fn()) // 这是一个函数
  console.log(Obj.name) // xiaoming 
  //还有其他的引入放式  如果你不想暴露模块当中的变量名字，可以通过as来进行操作:
  let myName="xiaoming";
  let myAge=12;
  let myfn=function(){
      return "我是"+myName+"！今年"+myAge+"岁了"
  }
  export {
      myName as name,
      myAge as age,
      myfn as fn
  }
  import {fn,age,name} from "./test.js";
  console.log(fn());//我是xiaoming！今年12岁了
  console.log(age);//12
  console.log(name);//xiaoming

• 箭头函数
  箭头函数基本是面试必问，而且在我们的工作中也经常用到，它与之前的函数的最大区别就是this指针指向问题，箭头函数本身是没有this指针的，它的this始终指向函数创建时，不是函数执行时，若没有则为undefined
• 模板字符串(后续增加)
• 解构赋值(后续增加)
• 延展操作符(后续增加)
• Promise(后续增加)