ES6语法笔记

{
  // let定义变量  const 定义常量
  let a = 1;
  a = 2
  console.log(a);

  const pi = 3.1415926;
  // pi = 4;
  console.log(pi);
  // 不能重复定义
  // let a = 3
  // console.log(a);

  // const pi = 10;
  // console.log(19);
  // 块级作用域
  if (true) {
    var b = 3
  }
  console.log(b);
  if (true) {
    let c = 3;
  }
  // console.log(c);
  // 不存在变量提升
  let arr = [1, 2, 3, 4, 5, 6, 7, 8];
  for (var i = 0; i < arr.length; i++) {

  }
  console.log(i);

  for (let j = 0; j < arr.length; j++) {

  }
  // console.log(j);
  // -------------------------------------
  // 箭头函数
  // 参数 => 表达式/语句
  let value = 2;
  let double = x => 2 * x;
  let treble = x => {
    return 3 * x;
  }
  console.log('double', double(value));
  console.log('treble', treble(value));
  // 继承外层作用域
  var obj = {
    commFun: function () {
      console.log(this);
    },
    arrowFun: () => {
      console.log(this);
    }
  }
  obj.commFun();
  obj.arrowFun();
  // 不能用作构造函数
  let Obj = function () { }
  let obj = new Obj();
  let Animal = () => {

  }
  let animal = new Animal();
  // 没有prototype属性
  let constFm = function () { }
  let pontFm = () => { }
  console.log(constFm.prototype);
  console.log(pontFm.prototype);
  // -------------------------------------
  // 模板字符串
  // 反引号标记`
  let str = `
    <div class="title">
      <h1>测试标题一</h1>
    </div>
  `;
  // document.querySelector('body').innerHTML = str;
  // 支持多行字符串
  // 支持变量和表达式
  let name = 'Rosen';
  str += `${name}`;
  // document.querySelector('body').innerHTML = str;

  let getName = () => {
    return 'Rosen title'
  }
  str += `${getName()}`;
  // document.querySelector('body').innerHTML = str;

  let names = ['tim', 'dodo']

  str += `
    <ul>
      ${names.map(name =>
    `<li>Hi, i am ${name}</li>`
  ).join(' ')}
    </ul>
  `
  document.querySelector('body').innerHTML = str;


  // Promise
  // Promise对象 
  new Promise((resolve, reject) => {
    // 异步函数
    $.ajax({
      url: 'http://happymmall.com/user/get_user_info.do',
      type: 'post',
      // 关键词：resolve,reject,then
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      }
    })
  }).then(
    (res) => {
      console.log('success:', res);
    },
    (err) => {
      console.log('error:', err);
    }
  )
  // 链式Promise
  let promiseFn1 = new Promise((resolve, reject) => {
    // 异步函数
    $.ajax({
      url: 'http://happymmall.com/user/get_user_info.do',
      type: 'post',
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      }
    })
  })

  let promiseFn2 = new Promise((resolve, reject) => {
    // 异步函数
    $.ajax({
      url: 'http://happymmall.com/user/get_cart_prodouct_count.do',
      type: 'post',
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      }
    })
  })

  promiseFn1.then(() => {
    console.log('promiseFn1 success')
    return promiseFn2;
  }).then(() => {
    console.log('promiseFn2 success')
  })


  // 面向对象-类
  // 关键词：class
  // 语法糖，对应function
  // 构造函数：constructor
  class Animal {
    constructor(name) {
      this.name = name
    }
    getName() {
      return this.name
    }
  }
  let animal = new Animal('animal title');
  console.log(animal.getName());

  // 面向对象-类的继承
  // extends：类的继承
  // super：调用父类的构造函数 
  class Animal2 {
    constructor() {
      this.name = '张三'
    }
    getName() {
      return this.name
    }
  }
  class Cart extends Animal2 {
    constructor() {
      super();
      this.name = 'cart'
    }
  }

  let animal2 = new Animal2();
  let cart = new Cart();

  console.log(animal2.getName());
  console.log(cart.getName());

  // 面向对象-对象
  // 对象里属性的简写
  // 对象里方法的简写
  // 属性名可以为表达式
  // 其他扩展
  var name = "Reson",
    age = 18;

  // old
  var obj = {
    name: name,
    age: age,
    getName: function () {
      return this.name
    },
    getAge: function () {
      return this.age
    }
  }

  // news
  let name1 = "Reson",
    age1 = 18;

  let obj1 = {
    // 变量名可以用作对象属性名
    name1,
    age1,
    // 对象方法可以简写
    getName() {
      return this.name1
    },
    // 表达式作为属性方法名
    ['get' + 'Age']() {
      return this.age1;
    }
  }

  // Object对象的扩展
  Object.keys(obj1);
  Object.assign({ a: 1 }, { a: 2, b: 2 })  // 浅拷贝

  // ES6模块化
  // 解决一个复杂问题时，自上而下逐层把系统划分成若干模块的过程
  // CommonJS,AMD,CMD
  // 关键词 export import

  // 基本指令：let const
  // 箭头函数：value => return value + 1
  // 模板字符串： `Hell ${name}`
  // promise: Promise, resolve, reject, then
  // 面向对象： class, extends, super, constructor
  // 模块化：export, import, as, default
}