ES6基础语法

变量定义 let const

• let定义变量,cons定义常量 let定义的变量可以修改值，const不可以修改变量的值
• 不能重复定义 声明一个变量之后,无法再次声明一个同名的变量(var可以)
• 块级作用域 {}里面的变量外部不可访问
• 不存在变量提升 变量未定义无法使用

箭头函数

参数 => 表达式/语句

• 继承外部作用于
• 不能用作构造函数
• 没有prototype属性 来吧，展示：

let value=2;
let double = x=> 2 * x
let treble = x=> {
	return 3 * x
}
console.log('double:',double(value));
console.log('treble:',treble(value));

double:4
treble:6

模板字符串

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

基本用法 ` ` 👇

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

嵌套变量 ${} 👇

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

嵌套函数 ${} 括号中可以放入表达式 👇

let getName = ()=>{
    return "HOPE 123";
};
let str = `
<div>
    <h1 class="title">${getName()}</h1>
</div>
`;
document.querySelector('body').innerHTML = str;

循环嵌套模板 👇

let names = ['Apple','Orange','Banana'];
let str = `
    <ul>
        ${
            names.map(name => `<li>Frult:${name}</li>`).join('')
        }
    </ul>
`;
document.querySelector('body').innerHTML = str;

Promise

• resolve,reject,then

展示👇

new Promise((resolve,reject)=>{
    // 异步操作
    $.ajax({
        url : 'www.xxx',
        type : 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
})
.then((res)=>{
        // resolve 对应的回调
    },(err)=>{
        // reject 对应的回调
    }
);

链式调用

// 定义一个promise
var promise1 = new Promise((resolve,reject)=>{
    $.ajax({
        url : 'xxx',
        type : 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});
// 定义另外一个promise
var promise2 = new Promise((resolve,reject)=>{
    $.ajax({
        url : 'xxx',
        type : 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});
// 操作👇
promise1.then(()=>{
    console.log('promise1 success');
    return promise2;
}).then((res)=>{
    console.log('promise2 success');
});
// 其中👇整个表达式返回的就是promise2对象，所以可以继续调用then方法。
promise1.then(()=>{
    console.log('promise1 success');
    return promise2;
})
// 那如果是这样的呢 这样也可以继续调用吗 好像也可以
promise1.then(()=>{
    console.log('promise1 success');
    return promise2;
},()=>{
    console.log('promise2 error');
}).then((res)=>{
    console.log('promise2 success');
});

面向对象-类

关键字 class 展示👇

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

let animal = new Animal('dog');
console.log(animal.getName());

类的继承👇 子类必须在使用this关键字或子类构造器调用return之前调用父类的构造方法

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

class Dog extends Animal{
    constructor(){
        super();
        this.name='dog'
    }  
}

面向对象-对象

变量名可以直接作为对象的属性名称

let name = 'Hope',
    age = 22;

let obj = {
    name,
    age,
    // 对象里的方法可以简写
    getName(){
        return this.name;
    },
    // 表达式作为属性名或方法名
    ['get'+'Age'](){
        return this.age;
    }
}

Object对象扩展

// 展示传入对象的所有属性 以数组的形式呈现
Object.keys(obj);

// 整合两个对象 
// 如果两个对象有相同的属性值的时候 后面对象属性值会覆盖前面对象的属性值
Object.assign({a:1},{b:2});

模块化

关键字export import推荐使用 展示👇

index.html

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

module.js

let str = 'string';
let obj = {
    name : 'Hope'
};
let fn = () =>{
    console.log('module export');
}
// 输出
export {
    str,
    obj,
    fn
}

index.js

imoport {str,obj,fn} from './module.js'
// 就可以使用这些引入的变量or对象了

其他import/export方式

// do something...
export default {a:1,name:'hope'}
// 引入 这种就是引用export default
import foo from './modules.js'

// 别名 使用的话就需要使用别名
import {str as string} from './module.js'