ES6入门笔记

1，作用域

const定义的常量，不能重新赋值，否则会报错。

let声明的变量只在声明的块里有效。

const callbacks2 = []
for (let j = 0; j <= 2; j++) {
    callbacks2[j] = function() {
        return j * 2
    }
}

可以用｛｝来隔离作用域。

{
    function foo() {
        return 1
    }

    console.log("foo()===1", foo() === 1)
    {
        function foo() {
            return 2
        }

        console.log("foo()===2", foo() === 2)
    }
    console.log("foo()===1", foo() === 1)
}

2，箭头函数

基本格式：

function a(){
  (函数参数，当只有一个函数参数时可不要括号)=>{执行操作，当返回值为执行结果时可不要花括号}
}

ES3、ES5与ES6的对比：

{
  // ES3,ES5
  var evens = [1, 2, 3, 4, 5];
  var odds = evens.map(function(v) {
    return v + 1
  });
  console.log(evens, odds);
};
{
  // ES6
  let evens = [1, 2, 3, 4, 5];
  let odds = evens.map(v => v + 1);
  console.log(evens, odds);
}

得到的结果是一样的

箭头函数中this的指向，是定义时，this的指向。

{
  // ES3,ES5
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: function() {
        return this.a
      }
    }
  }

  console.log(new factory().c.b());
};

{
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: () => {
        return this.a
      }
    }
  }
  console.log(new factory().c.b());
}

ES3,ES5控制台打印出 a+，ES6中打印出a

3，默认参数

一个函数中的默认参数，ES3,ES5中必须用判断来写，代码量大；

ES6可直接写，如下所示：

{
  // ES5\ES3 默认参数的写法
  function f(x, y, z) {
    if (y === undefined) {
      y = 7;
    }
    if (z === undefined) {
      z = 42
    }
    return x + y + z
  }
  console.log(f(1, 3));
} {
  // ES6 默认参数
  function f(x, y = 7, z = 42) {
    return x + y + z
  }
  console.log(f(1, 3));
} 

可用同样的方法抛出异常：

{
  function checkParameter() {
    throw new Error('can\'t be empty')
  }
  function f(x = checkParameter(), y = 7, z = 42) {
    return x + y + z
  }
  console.log(f(1));
  try {
    f()
  } catch (e) {
    console.log(e);
  } finally {}
} 

如此一来，如果没有参数传入，即x=0，就会抛出cant be empty的异常了。

4，扩展运算符

当无法确定函数参数的个数时，需要对传入的参数个数判断。

ES3,ES5中使用argument将其定义成一个数组，然后遍历出来。

而ES6中，只需要使用扩展运算符（...a）即可，a就是参数列表。

// ES3,ES5 可变参数
  function f() {
    var a = Array.prototype.slice.call(arguments);
    var sum = 0;
    a.forEach(function(item) {
      sum += item * 1;
    })
    return sum
  }
  console.log(f(1, 2, 3, 6));
} {
  // ES6 可变参数
  function f(...a) {
    var sum = 0;
    a.forEach(item => {
      sum += item * 1
    });
    return sum
  }
  console.log(f(1, 2, 3, 6));
}

利用扩展运算符可以直接合并数组。

{
  // ES5 合并数组
  var params = ['hello', true, 7];
  var other = [1, 2].concat(params);
  console.log(other);
} {
  // ES6 利用扩展运算符合并数组
  var params = ['hello', true, 7];
  var other = [
    1, 2, ...params
  ];
  console.log(other);
}

5，中间代理

为了达到加密部分数据的效果，需要对某些属性做只读操作，以下列出ES3、ES5、ES6等几种不同的写法。

/* eslint-disable */
{
  // ES3,ES5 数据保护
  var Person = function() {
    var data = {
      name: 'es3',
      sex: 'male',
      age: 15
    }
    this.get = function(key) {
      return data[key]
    }
    this.set = function(key, value) {
      if (key !== 'sex') {
        data[key] = value
      }
    }
  }

  // 声明一个实例
  var person = new Person();
  // 读取
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
  // 修改
  person.set('name', 'es3-cname');
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
  person.set('sex', 'female');
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
} {
  // ES5
  var Person = {
    name: 'es5',
    age: 15
  };

  Object.defineProperty(Person, 'sex', {
    writable: false,
    value: 'male'
  });

  console.table({name: Person.name, age: Person.age, sex: Person.sex});
  Person.name = 'es5-cname';
  console.table({name: Person.name, age: Person.age, sex: Person.sex});
  try {
    Person.sex = 'female';
    console.table({name: Person.name, age: Person.age, sex: Person.sex});
  } catch (e) {
    console.log(e);
  }
} {
  // ES6
  let Person = {
    name: 'es6',
    sex: 'male',
    age: 15
  };

  let person = new Proxy(Person, {
    get(target, key) {
      return target[key]
    },
    set(target,key,value){
      if(key!=='sex'){
        target[key]=value;
      }
    }
  });

  console.table({
    name:person.name,
    sex:person.sex,
    age:person.age
  });

  try {
    person.sex='female';
  } catch (e) {
    console.log(e);
  } finally {

  }

}