ES6语法

//ES6 基础知识
/**
 * let 定义变量 const 定义常量
 * 不能重复定义
 * 块级作用域
 * 不存在变量提升
 */
// 变量和常量
let r = 2;
r = 4;
console.log(r); //4
const pi = 3.1415926;
pi = 10;//类型错误 TypeError: invalid assignment to const `pi'

//不能重复定义
var foo = 1;
var foo = 2;
console.log(foo); //2
let bar = 1;
let bar = 2;
cons1.log(bar); //已经定义redeclaration of let bar

//块级作用域
if(true){
 var  test = 1;
}
console.log(test);//1

if(true){
 let  test1 = 1;
}
console.log(test1); //undefined

//块级作用域2
let arr = [1,2,3,4];
for (var i = 1;i < arr.length; i++){
   //do nothing
}
console.log(i); //不报错

//不存在变量提升
console.log(foo);
var foo = 1; //不报错

console.log(foo);
let foo = 1; // not defined

/**
 * 箭头函数
 * 参数 => 表达式/语句
 * 继承外层作用域
 * 不能用作构造函数
 * 没有prototype属性
 */
let value = 2;
let double = x => 2 * x;
let treble = x => {
    return 3 * x;
}
console.log(double);
console.log(treble);

//没有独立作用域
var obj = {
    commonFn : function(){
        console.log(this);
    },
    arrowFn:() => {
        console.log(this);
    }
}
obj.commonFn(); // this 指向obj作用域
obj.arrowFn(); //this指向了obj所在作用域， window

//不能用作构造函数
let Animal = function(){}
let animal = new Animal();

let Animal = () =>{}
let animal = new Animal();
//报错，箭头函数没有构造方法

//没有prototype
let commonFn = function(){ };
let arrowFn = () =>{}

console.log(commonFn.prototype);
console.log(arrowFn.prototype);//undefined

/**
 * 模板字符串
 */
//基本用法
let str = `<div>
  <h1 class = "title">123</h1>
</div>`;
document.querySelector('body').innerHTML = str;

//嵌套变量的用法
let name = 'Rosen';
let str = `<div>
  <h1 class = "title">${name}</h1>
</div>`;
document.querySelector('body').innerHTML = str;
//嵌套函数的用法
let getName = () =>{
    return 'Rosen Test';
};
let str = `<div>
  <h1 class = "title">${getName()}</h1>
</div>`;
document.querySelector('body').innerHTML = str;

//循环嵌套
let names  = ['ROsen','Geely','Jimin'];
let 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 : '',
         type : '',
         success(res){
             resolve(res);//成功
         },
         error(err){
             reject(err); //失败
         }
     });
 }).then((res)=>{
    console.log('success',res);
 },(err)=>{
    console.log('error',err);
 });

 // 链式 promise


var promiseFn1 = new Promise((resolve,reject) => {
    $.ajax({
        url : '',
        type : '',
        success(res){
            resolve(res);//成功
        },
        error(err){
            reject(err); //失败
        }
    });
});

 
var promiseFn2 = new new Promise((resolve,reject) => {
    $.ajax({
        url : '',
        type : '',
        success(res){
            resolve(res);//成功
        },
        error(err){
            reject(err); //失败
        }
    });
});

promiseFn1.then((()=>{
    console.log('promiseFn1 success');
    return promiseFn2;
})/*,() => {失败情况} */).then(()=>{
    console.log('promiseFn2 success');
});

/**
 * 面向对象-对象
 * 类：
 * extends : 类的继承
 * super： 调用父类的构造函数
 * 
 */

 // class constuctor

 class Animal{
     constructor(name){
         //this.mame = 'animal';
        this.mame = name;
     }
     getName(){
          return this.name;  
     }
 }
let animal = new Animal();
console.log(animal.getName);

class Cat extends Animal{
    constructor(){
        super();
        this.name = 'cat';//共享父类属性必须用super关键字
    }
}

//对象的用法
//原来写法
var name = 'Rosen',
    age = 18;
var obj = {
    name: name,
    age: age,
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
}

//现在写法
var name = 'Rosen',
    age = 18;
var obj = {
   //变量可以直接用作对象的属性名称
    name,
    age,
    //对象的方法可以简写
    getName(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    },
    //表达式作为属性名或方法名
    ['get' + 'Age'](){
        return this.age
    }
}

// object 对象的扩展

Object.keys(obj);//返回属性数组
Object.assign({a:1},{b:2})/潜拷贝

/**
 * ES6 模块化
 * import
 * export
 * 
 */
// module.js
 let str = 'string';
 let obj = {
     name : 'Rosen'
 };
 let fn = ()=>{
     console.log('module test')
 }

 export {
     str,obj,fn
 }
 //index.js
 import {str as string,obj,fn} from './module.js';

 console.log('name',obj.name);
 console.log('str',str);
 console.log('fn',fn);

 export default {a:1} //默认 导出 import 可以重新取个，名字

 /**
  * session 和 cookie
  */

  document.cookie = '';

  /**
   * localStorage 
   * H5新特性
   * 有域名限制，不存在作用域概念
   * 只有 key-value
   * 没有过期时间
   * 浏览器关闭后不消失
   * 
   * 
   * sessionStorage
   * 浏览器关闭后消失
   */

   //添加 localStorage
   window.localStorage.setItem('name','Rosen');
   //查看 localStorage
   window.localStorage.getItem('name');
   //删除 localStorage
   window.localStorage.removeItem('name');