ES6

1.模版字符串:`String`

2.对象解构赋值

var obj = { name: 'T1', age: 22 }

// 用解构赋值的方式获取name，age
let {name} = obj; // 创建了一个变量name， 值为obj.name
console.log(name); // T1

let {age} = obj;
console.log(age); // 22

var obj1 = { gender: '男', height: 173, grade: '一年级'}
// 用解构赋值的方式获取gender, height, grade

/*
创建了 gender = obj1.gender; 
        height = obj1.height; 
        grade = obj1.grade;
*/
let { gender, height, grade } = obj1;
console.log(gender); // 男

// 解构赋值的意义
function fn(option) {
  /**
    option.width
    option.height
    option.age
  */
}

fn({
  width: 100,
  height: 100,
  age: 22
});

// 使用解构赋值
function fn1({ width, height, age }) {
    // 创建了width, height, age三个局部变量，值来自于实参
    // 节省了一些字符～～～
}

fn1({
  width: 100,
  height: 100,
  age: 22
});

// 解构赋值其他用法
var obj2 = { name: 'T2', age: 22 }
// 创建一个新的变量：obj2Name, 值obj.name
var {name: obj2Name } = obj;

3.函数扩展：rest参数

// 之前
function fn() {
    // arguments 是函数内部的一个局部变量
    // arguments.length 实参个数
  console.log(arguments.length);
  console.log(arguments[0]); // 第一个实参
}

fn(1, 2, 3);

// ES6箭头函数内部不能使用arguments
// rest参数就是为了解决这个问题

// ...args就是rest参数
// 产生一个变量，这个变量是数组，数组里面包含这个函数调用时传递的所有实参
function q(...args) {
    // 验证是否是数组 - 3种方式
    console.log(args instanceof Array);
    console.log(Object.prototype.toString.call(args)); // [Object Array]
    console.log(Array.isArray(args)); // ES5的新方法
    
  console.log(args);
}

q(1, 2, 3);

4.箭头函数

// 箭头函数简化匿名函数
div.onclick = function() { 
  
}
// --> 简化
div.onclick = () => {
  
}

div.onclick = function(name) {
  console.log(name);
}
// --> 简化
div.onclick = name => {
}
// or
div.onclick = (name) => {
}

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

箭头函数的特点

var p = {
  age: 18,
  run: () => {
    setTimeout(() => {
        // this -> Window
      console.log(this);
    }, 1000)
  },
  // ES6简写 推荐使用
  say() {
    console.log(this);
    setTimeout(() => {
        // this -> p
      console.log(this);
    }, 1000)
  },
  travel: function() {
    setTimeout(() => {
        // this -> p
      console.log(this);
    }, 1000)
  }
}

4.数据类型

// 判断数据类型
typeof: 只能判断数字、字符串、布尔值、undefined、函数

`Object.prototype.toString.call()`
// 5 [object Number]
// "abc" [object String]
// true [object Boolean]
// null [object Null]
// undefined [object Undefined]
// [1, 2, 3] [object Array]
// function(){} [object Function]
// newDate() [object Date]
// /abc/ [object RegExp]