ES6基础

ES6基础

1 ES6

• ECMA Script，Javascript的语言标准
• 提升JS编写大型的复杂的应用程序的能力
• Babel：ES6 -> ES5的转化器

2 let，const

• let定义变量，const定义常量
• 不能重复定义
• 块级作用域
• 不存在变量提升

2.1 let定义变量，const定义常量

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

const pi = 3.1415926;
pi = 10;
//报错

2.2 不能重复定义

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

let bar = 1;
let bar = 2;
console.log(bar);
//error

2.3 块级作用域

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块级作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。

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

if(true){
	let test1 = 2;
}
console.log(test1);//error

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

2.4 变量提升

// let、const不存在变量提升
console.log(foo);
var foo = 1;//1,var进行了变量提升
// 实际执行过程如下
var foo;
console.log(foo);
foo = 1;

3 箭头函数

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

3.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

3.2 没有独立作用域

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

3.3 不能用作构造函数

let Animal = () => {

}
let animal = new Animal();//error

3.4 没有prototype

// 没有prototype
let commonFn = function(){};
let arrowFn  = () => {};
console.log(commonFn.prototype);//指向commonFn的构造函数
console.log(arrowFn.prototype);//null

4 模版字符串

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

4.1 基本用法

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

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

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

// 循环嵌套
let names = ['sc1', 'sc2', 'sc3'];
let str = `
	<ul>
		${
			names.map(name => `<li>Hi, I am ${name}</li>`).join('')
		}
	</ul>
`;
document.querySelector('body').innerHTML = str;

5 Promise

• Promise对象的出现是为了解决异步回调函数层层嵌套的问题
• 关键词：resolve, reject, then

new Promise((resolve, reject) => {
	// 异步函数
	$.ajax({
		url  	: 'http://happymmall.com/user/get_user_info.do',
		type 	: 'post',
		success : function(res){
			resolve(res);
		},
		error 	: function(err){
			reject(err);
		}
	});
}).then((res) => {
	console.log('success:', res);
}, (err) => {
	console.log('error:', err);
});

// 串行
$.ajax({
	url  	: 'http://happymmall.com/user/get_user_info.do',
	type 	: 'post',
	success : function(res){
		$.ajax({
			url  	: 'http://happymmall.com/user/get_product_count.do',
			type 	: 'post',
			success : function(res){
				resolve(res);
			},
			error 	: function(err){
				reject(err);
			}
		});
	},
	error 	: function(err){
		reject(err);
	}
});
// 链式promise
var promiseFn1 = new Promise((resolve, reject) => {
	$.ajax({
		url  	: 'http://happymmall.com/user/get_user_info.do',
		type 	: 'post',
		success : function(res){
			resolve(res);
		},
		error 	: function(err){
			reject(err);
		}
	});
});
var promiseFn2 = new Promise((resolve, reject) => {
	$.ajax({
		url  	: 'http://www.happymmall.com/cart/get_cart_product_count.do',
		type 	: 'post',
		success : function(res){
			resolve(res);
		},
		error 	: function(err){
			reject(err);
		}
	});
});

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

6 面向对象

6.1 类

• 关键词：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());

6.2 类的继承

• extends：类的继承
• super：调用父类的构造函数。子类是没有this对象的，如过想要使用父类的方法，就需要使用super方法继承父类的this对象。

// 类的继承
class Animal{
	constructor(){
		this.name = 'animal';
	}
	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());

6.3 ES6中对象的新变化

• 对象里属性的简写
• 对象里方法的简写
• 属性名可以为表达式
• 其他扩展

// 对象的用法
var name  = 'sc',
	age   = 23;
var obj = {
	name : name,
	age  : age,
	getName: function(){
		return this.name;
	},
	getAge: function(){
		return this.age;
	}
}

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

// Object对象的扩展
Object.keys(obj);//获得对象的属性名，结果为数组

// 和jQuery中$.extends()很像，就是把几个对象进行整合
Object.assign({a:1}, {b:1});// {a:1, b:2}
Object.assign({a:1}, {a:2, b:1});// {a:2, b:2},后面会把前面的覆盖掉，但这是一个浅拷贝过程，只会考虑第一层级的关系

7 ES6模块化

• 解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程
• CommonJs，AMD，CMD等方案都不是原生的
• 关键词：export，import

//module.js
'use strict';
let str = 'string';
let obj = {
	name : 'SC'
};
let fn = () =>{
	console.log('module test')
};
export {
	str,
	obj,
	fn
}
// 默认输出，引入的时候可以随便起名
export default {a:1}

//index.js
'use strict';
import {str, obj, fn} from './module.js'
import foo from './module.js'

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

console.log('export default:',foo);

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