什么是es6?
- es ECMA Script ,javascript的语言标准，第6个大版本（2015年发布，也成为es2015）
- 提升JS编写大型的复杂应用程序的能力
- babel: es6 --> es5的转换器
let,const
- let 定义变量，const定义常量
- 不能重复定义
- 块级作用域内生效（var是在函数作用域）
- 不存在变量提升
箭头函数
- 参数 => 表达式 / 语句
// 箭头函数
let value = 2;
let double = x => x * 2;
let treble = x => {
return x * 3;
}
console.log("double:"+double(value)); // double:4
console.log("treble:"+treble(value)); // treble:6
- 没有自己的this 指针，继承外层作用域
var obj = {
commonFn: function () {
console.log(this);
},
arrowFn: () => {
console.log(this);
}
}
console.log(obj.commonFn()); // this 指向是他的调用者 obj
console.log(obj.arrowFn()); // arrowFn 和 obj 共享一个作用域 ,this 指向了obj所在的作用域window
- 不能用作构造函数 （ 不能用new）
let Animal = function (){
}
let anmial = new Animal()
let Animal = function (){
}
let anmial = new Animal()
- 没有prototype属性
模板字符串
- 反引号标识 ``
- 支持多行字符串
- 支持变量和表达式
//
let name = "hello";
let getName = ()=>{
return 'dsfderek';
}
let nums = [1,2,3,4,5];
let str = `
<div>
<h1 class="h1">${name} - ${getName()}</h1>
</div>
<ul>
${
nums.map(n=>`<li>数字 ${n}</li>`).join('')
}
</ul>
`;
document.querySelector('body').innerHTML = str;
Promise
- promise 对象
- resolve,reject,then
new Promise((resolve,reject)=>{
// 异步函数
$.ajax({
url:'',
type:'post',
succes(res){
resolve(res);
},
error(err){
reject(err);
}
})
}).then((res)=>{
console.log(res);
},(err)=>{
console.log(err);
});
// 链式操作
let promiseFn1 = new Promise((resolve,reject)=>{
// 异步函数
$.ajax({
url:'',
type:'post',
succes(res){
resolve(res);
},
error(err){
reject(err);
}
})
})
let promiseFn2 = new Promise(()=>{
// 异步函数
$.ajax({
url:'',
type:'post',
succes(res){
resolve(res);
},
error(err){
reject(err);
}
})
})
promiseFn1.then(()=>{ // promiseFn1的then
return promiseFn2;
}).then(()=>{ // promiseFn2的then
// promiseFn2的返回
})
面向对象- 类
- class
- 语法糖，对应 function
- 构造函数，constructor 初始化该类的对象
class Animal{
constructor(name){
this.name = name
}
getName(){
return this.name;
}
}
// 实例
let animal = new Animal("dsfderek");
console.log(animal.getName());
面向对象-类的继承
- extends 类的继承
- super 调用父类的构造函数 ，子类是没有this的，想在子类里调用父类的方法，调用super方法，把父类的this对象继承过来，在子类通过this操作父类的属性和方法
// 类的继承
class Animal{
constructor(){
this.name = "dsfderek"
}
getName(){
return this.name;
}
}
class Cat extends Animal{
constructor(){
super();
this.name = "cat"
}
}
let animal = new Animal();
let cat = new Cat();
console.log(animal.getName());
console.log(cat.getName());
面向对象-对象
- 对象里属性的简写
- 对象里方法的简写
- 属性名可以为表达式
let name = "dsfderek",
age = 18;
let obj = {
// 变量名可以直接用作对象的属性名
name,
age,
// 对象里的方法可以简写
getName(){
return this.name;
},
// 表达式作为属性名或方法名
['get' + 'Age'](){
return this.age;
}
}
Object 扩展
Object.keys(obj) // 一个对象里所有的属性名，结果是一个数组
Object.assign({a:1},{b:2}); //合并对象，后面的覆盖前面的
ES6 模块化
- 解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程
- CommonJs,AMD,CMD
- export,import
let str = 'string';
let obj = {
name : 'dsfderek'
}
let fn = ()=>{
console.log('module test');
}
export {
str,
obj,
fn
}
export default {a:1};
import {str as string,obj,fn} from './module.js'
import foo from './module.js'
console.log('name:',obj.name);
// console.log('str:',str);
console.log('string:',string);
console.log('fn:',fn);
console.log(foo);
·
