es6特性介绍（上）

这是一篇专门介绍es6特性的文章，文章写的非常棒，全文通过代码示例像我们展示了es6的特性，虽然全英文但是用的都是很基础的单词，即使因为不怎么好的同学依然能看懂，我这里将其翻译过来有2个目的，1是加深自己的记忆，2是做个备份。我这里翻译是按照我理解的进行翻译，并非"直译"。如有不当之处欢迎指正。

箭头函数

实践中使用

    // jquery中
    $('.class').bind('click',e=>{
        console.log(e);
    })
    $.ajax({
        url:'/api/**/*',
        type:'POST',
        data:{
        },
        success:(data, textStatus,jqXHR)=>{
            // response data
        },
        error:err=>{
            // http error
        },
        comp
    })
    // 在react中
    export default ()=>(<div>这是一个最简单的组件</div>);
    export default ()=>{
        return <div>hello</div>
    }

箭头函数不绑定this

    const persion = {
        name:'小明',
        arrowGetName:()=>this.name,
        regularGetName:function(){
            return this.name
        },
        arrowThis:()=>this,
        regularThis:function(){
            return this;
        }
    }
    // 执行结果，
    persion.name;                    // 输出：'小明'
    persion.arrowGetName();          // 抛出异常，'Cannot read property 'name' of undefined'
    persion.regularGetName();        // 输出：'小明'
    persion.arrowThis();             // 输出：undefined
    persion.regularThis();           // 输出：persion对象
    // 说明：如果基于执行上下文是window，那么输出结果会有不同

箭头函数不绑定this，但是可以直接使用上下文的this，更加方便

const getName = function(){
    let name = 'getName func';
    setTimeout(()=>{
        console.log(this.name);
    },1000)
}
// 执行结果
getName();
//1s delay 'getName func'

classess

在其他语言中class的概念非常明确，特别是那些面向对象的编程语言中，例如:java;在javascript中class只是基于原型集成的一个高级语法糖，也就是说语法经过编译之后，是通过prototype实现的。

实践使用

class Persion {
  static version=13
  static getVersion(){
    return this.version;
  }
  constructor(name,age){
    this.name = name;
    this.age = age;
    this.level = 0;
  }
  updateLevel(newLevel){
    this.level = newLevel;
  }
}
class Student extends Persion {
  constructor(name,age){
    super(name,age);
  }
  get levelT(){
    return `${this.level}:from XiaoMing`
  }
  set levelUpdate(level){
    this.level =level;
  }
  updateLevel(newLevel){
    super.updateLevel(newLevel);
  }
}

const tom = new Student('hello');

console.log(tom.level); // 0
console.log(tom.levelT); // 0:from XiaoMing
tom.levelUpdate = 2; 
console.log(tom.levelT); // 2:from XiaoMing
tom.updateLevel(3);
console.log(tom.levelT);  // 3:from XiaoMing

增强的对象字面量

const customProtoObj = {
  toString:function(){
    return "the customProtoObj To string"
  }
}
const handler = ()=>'handler';
const obj = {
  // 直接指定重定义原型链
  __proto__:customProtoObj,
  // 属性赋值的简约写法
  handler,
  // 重定义 对象的toString 方法
  toString(){
    return `d:${super.toString()}`;
  },
  // 动态属性名称，这是最大的特性了
  ["prop_"+(()=>42)()]:42,
}

console.log(obj.handler)
console.log(obj.handler())
console.log(obj.toString())
console.log(obj.prop_42)

这个特性非常给力，特别是动态属性，在实践开发中真的是屡试不爽

字符串插值表达式，或者叫做字符串模版

    // 以前的字符串拼接只能通过加号 完成
    let str = 'hello';
    let str1 = 'world'
    let strEnd = 'end'+str+str1;
    // 使用该特性进行重构
    let strEndEs6 = `end${str}${str1}`;
    // 函数调用
    const getStr = ()=>`from getStr func:${str}`;
    let strEndFun = `from func ${getStr()}`

数据解构

这是一个超强的特性，让我们前端处理后端接口数据的时候游刃有余（特别是遇到，那种后端 <..>）

    // 1.数组解构
    let [a,,b] = [1,2,3];
    console.log(a,b);// 1,3
    // 2. 对象解构
    const data = ()={name:'tom',age:18};
    let {name:a,age} = data();
    console.log(a,age);// 'tom',18
    // 这种对象的解构，如果你用过当前流行的几个框架:react、vue、ng2，这种解构随处可见
    import {render} from 'react-dom'; // 这里的render就是解构出来的
    // 3. 在形参中使用
    function update({name:x}){
        console.log(x);
    }
    function update2({name}){
        console.log(name)
    }
    update({name:'tom'}); // 'tom’
    update2({name:'tom2'}); // 'tom2'

设置默认值

    // 1.形参默认值
    function f(x, y=12) {
      return x + y;
    }
    console.log(f(3))
    // 2.对象默认值
    const p = {name:'123',age:18};
    let {name,age,level=123} = p;
    console.log(level); // 123

... 语法糖(可以翻译为数据传播)

    // 1. 形参中使用
    function f(x,y,z){
        return x+y+z;
    }
    let params = [1,2,3];
    f(...params); //他还把数组的每个元素作为参数传递过去
    // 上面的通过es5的方式编写如下
    f.apply(undefined, [1, 2, 3, 4]);
    // 2. 数组中使用
    const arr1 = [1,2,'h'];
    const arr2 = [2,3,...arr1,4,5];
    // 上面通过es5的方式
    arr2 = [2,3].concat(arr1,[4,5]);
    // 3. 在对象字面量中使用
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // { a: 3, b: 4 }
    
    // Spread properties
    let n = { x, y, ...z };
    console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
    console.log(obj)
    

Rest形参

这个特性让我们可以不去现在形参的个数，使我们在编写功能的时候更加灵活，代码的扩展性也增强很多

function demo(part1, ...part2) {
    return {part1, part2}
}
console.log(demo(1,2,3,4,5,6))