ES6基础

变量

1. 变量和常量

let r = 2;
r = 4;
console.log(r)  // 4

// 常量不可修改
const pi = 3.1415926
pi = 10   //  Identifier 'pi' has already been declared
console.log(pi)

2. 不能重复定义

var foo = 1;
var foo = 2;
console.log(foo) // 2

// let不能重复定义
let bar = 1;
let bar = 2;   // Identifier 'bar' has already been declared
console.log(bar)

3. 块级作用域

if(true){
    var test = 1;
}
console.log(test) // 1

if(true){
    let test2 = 1;
}
console.log(test2) // test2 is not defined

let arr = [1, 2, 3, 4]
for(var i = 0, iLength = arr.length; i < iLength; i++){
    // do nothing
}
console.log(i) // 4

for(let j = 0, jLength = arr.length; j < jLength; j++){
    // do nothing
}
console.log(j) //  j is not defined

4. 不存在变量提升

console.log(foo) //  foo is not defined

console.log(foo) // undefined
var foo = 1;

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

箭头函数

参数 => 表达式/语句
继承外层作用域
不能用作构造函数
没有prototype属性

1. 参数 => 表达式/语句

let value = 2;
let double = x => 2 * x;
let treble = x => {
    return 3 * x;
}

console.log('double:', double(value)) // 4
console.log('treble:', treble(value)); // 6

2. 继承外层作用域，没有独立作用域

var obj = {
    commonFn : function(){
        console.log(this);
    },
    arrowFn: () => {
        console.log(this);
    }
}
obj.commonFn(); // {commonFn: ƒ, arrowFn: ƒ}
// this 指向obj

obj.arrowFn(); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
// this 指向了obj所在的作用域，window

3. 不能用作构造函数

let Animal =  function(){}
let animal = new Animal();
console.log(animal) //  //Animal {}

let Fruit =  () => {} // Fruit is not a constructor
let fruit = new Fruit();

4. 没有prototype

let commonFn = function(){}
let arrowFn = () => {};
console.log(commonFn.prototype)  // {constructor: ƒ}
console.log(arrowFn.prototype) //  undefined

模板字符串

反引号标识 ``
支持多行字符串
支持变量和表达式

1. 基本用法

let str = `
<div>
    <h1 class="title">123</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

2. 嵌套变量的用法

let name = 'viiv'
let str = `
<div>
    <h1 class="title">welcome ${name}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

3. 嵌套函数的用法

let getName = (x) => {
    return 'viiv ' + x
}
let str = `
<div>
    <h1 class="title">welcome ${getName('seek')}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

4. 循环嵌套

let names = ['viiv', 'seek', '小花']
let str = `
    <ul>
    ${
        names.map(name => `<li>Hi, I am ${name}</li>`).join('')
    }
    </ul>
`
document.querySelector('body').innerHTML = str;

Promise

Promise对象
关键词：resolve, reject, then

1. Promise 结构

new Promise((resolve, reject)=>{
    // 异步函数
    $.ajax({
        url: 'http://viivmall.viivlgr.cn/user/get_user_info.do',
        type: 'POST',
        success(res){
            resolve(res);
        },
        err(err){
            reject(err);
        }
    })
}).then((res) => {
    console.log('success:', res);
}, (err) => {
    console.log('err:', err);
});

2. 链式调用

var promiseFn1 = new Promise((resolve, reject)=>{
    // 异步函数
    $.ajax({
        url: 'http://viivmall.viivlgr.cn/user/get_user_info.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        err(err){
            reject(err);
        }
    })
});

var promiseFn2 = new Promise((resolve, reject)=>{
    // 异步函数
    $.ajax({
        url: 'http://viivmall.viivlgr.cn/cart/get_cart_product_count.do',
        type: 'GET',
        success(res){
            resolve(res);
        },
        err(err){
            reject(err);
        }
    })
})
promiseFn1.then((res) => {
    console.log('promiseFn1 success', res)
    return promiseFn2;
}, (err) => {
    console.log('promiseFn1 fail', err)
    return promiseFn2;
}).then((res)=>{
    console.log('promiseFn2 success', res)
}, (err) => {
    console.log('promiseFn2 fail', err)
})

面向对象-类

类

关键词：class
语法糖，对应function
构造函数: constructor

// class constructor
class Animal{
    constructor(name) {
        this.name = name;
    }
    getName(){
        return this.name;
    }
}
// 实例化
let animal = new Animal("animal test");
console.log(animal.getName()) // animal test

类的继承

extends: 类的继承
super: 调用父类的构造函数

class Animal{
    constructor() {
        this.name = 'animal';
    }
    getName(){
        return this.name;
    }
}

class Cat extends Animal{
    constructor(){
        super(); // 与Animal共享this指针
        this.name = 'cat';
    }
}

let animal = new Animal()
let cat = new Cat();
console.log(animal.getName()) // animal
console.log(cat.getName()) // cat

对象

对象里属性的简写
对象里方法的简写
属性名可以为表达式

// 之前的写法
var name = 'viiv',
    age = 18;
var obj = {
    name: name,
    age: age,
    getName: function(){
        return this.name;
    },
    getAge: function(){
        return this.age;
    }
}

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

其他扩展

// 所有属性名
Object.keys(obj) // ["name", "age", "getName", "getAge"]

// extend  对象整合 (重叠覆盖)    浅拷贝
Object.assign({a: 1}, {b: 2}, obj) // {a: 1, b: 2, name: "viiv", age: 18, getName: ƒ, …}

ES6模块化

解决一个复杂问题时，自顶向下逐层吧系统划分成若干模块的过程
CommonJs, AMD, CMD
关键词：export, import

module.js

let str = 'str';
let obj = {
    name: 'viiv'
};
let fn = () => {
    console.log('module test')
};

export{
    str, 
    obj,
    fn
}
export default {a: 1}

index.js

import foo from './module.js'
console.log('string', string)
console.log('name', obj.name)
console.log('fn', fn)
console.log('foo',foo)

index.html

<script type="module" src="./index.js"></script>