es6入坑之旅

1、const
不允许重复声明
不属于顶层对象window
不存在变量提升
暂时性死区
块级作用域

const 不属于顶层对象window
const str='es6';
console.log(window.str); // undefined

//变量提升
console.log(str);
var str = 'es6';

//相当于
var str；
console.log(str);
str = 'es6';

//不存在变量提升(1、需先定义后使用；2、块级作用域)
console.log(str);
const str = 'es6';

2、const声明的常量能被改变吗？
变量如何存储
js中分为基本数据类型和引用数据类型
基本数据类型（栈内存）：number、boolean、string、NUN、undefined
引用数据类型（堆内存）：对象、数组
freeze浅冻结
深层次冻结：需要将每一层对象都冻结

const esObj = {
	name:'es6',
	year:2015
}
esObj.name = 'es2015';
console.log(esObj); // es2015

const arr = ['es6','es7','es8'];
arr[0] = 'es2015';
console.log(arr[0]);//es2015

const arr = ['es6','es7','es8'];
Object.freeze(arr);
arr[0] = 'es2015';
console.log(arr[0]);//es6

const esObj = {
	name:'es6',
	year:2015,
	extension:['es7','es8','es9']
}

Object.freeze(esObj );
esObj.extension[0]= 'es2015';
console.log(esObj.extension[0]); // es7

Object.myFreeze(esObj );
esObj.extension[0]= 'es2016';
console.log(esObj.extension[0]); // es7

function myFreeze(obj){
	Object.freeze(obj);
	Object.keys(obj).forEach(function(key){
		if(typeof obj[key] === 'object'){
			myFreeze(obj[key]);
		}
	})
}

3、箭头函数
箭头函数左边：指函数参数
箭头函数右边：指方法体
箭头左边如果只有一个参数，则不需要写括号
箭头右边如果只有一行代码，则不需要大括号

使用箭头函数我们应注意：
1、事件的回调函数用箭头写的时候，因为this指向与之前是不同的，箭头函数里面没有this,它会沿着它的 作用域链向上查找，找到谁就指向谁
2、通过箭头函数去定义对象里面的方法，因为this指向与之前是不同的，我们需要注意
3、箭头函数里面arguments不能使用
4、箭头函数不能作为构造函数
5、箭头函数不能定义原型下面的方法

const res = (x,y) => x+y;
const fn = x  => {
	//业务逻辑代码
}
const oBtn  = document.querySelector('#btn');
oBtn.addEventListener('click',()=>{
	console.log(this); // this只向window
	this.style.backgroundColor = '#f0f';
})

const obj = {
	name :'zj',
	showName: () => {
		console.log(this);//this指向window
		console.log('my name' + this.name)
	},
	showAge(){ //es6对象 简写的形式
		console.log(this);this指向obj
	}
}
obj.showName();

function sum2(x, y){
	console.log(arguments);//arguments可以取到该方法里面形参的值
}
sum2(2,3);
const sum =(x,y)=>{
	console.log(arguments);//会报错
	return x+y;
}
sum2(22,33);

//类
function Course(name,price){
	this.name = name;
	this.price = price;
}
const Course = (name,price) => {
	this.name = name;
	this.price = price;
}
Course.prototype.study = function(){
	console.log(`名字${this.name},价格${this.price}`);
}
Course.prototype.study = () => {
	console.log(`名字${this.name},价格${this.price}`);
}
const c1 = new Course('es',500);
console.log(c1);

4、es6优雅取值
js:数组取值（下标取值），对象取值（属性取值）
es6:解构赋值

//解构赋值
const course = {
	name: 'es6',
	price:500,
	student:{
		name:'xioahong',
		age:16
	}
};
//const name = course.name;
//const price = course.price;
const {
	name: courseName, 
	price,
	student:{
		name, age
	}
} = course;
console.log(courseName,price,name,age);

const courseArr = ['es6', 'es7', 'es8' ];
//const a = courseArr [0];
//const b = courseArr [1];
//const c = courseArr [2];
const [
	a,
	b,
	c
] = courseArr;

//项目中使用解构赋值
1、函数参数
2、函数返回值
3、变量互换
4、JSON应用
5、Ajax请求应用

const sum = arr => {
	let result = 0;
	for(let i=0; i< arr.length; i++) {
		result += arr[i];
	}
	console.log(result);
}
const sum = ([a,b,c])=> {
	console.log(a+b+c);
}
sum([1,2,3]);

const foo = ({name,age,course:'语文'}) => {
	console.log(name,age,course);
};
foo({
	name:'张三'，
	age:20,
	course:'数学'
})

const foo = () => {
	return {
		name:'张三'，
		age:20
	}
};
const {name, age} = foo();
console.log(name,age);

let a = 1;
let b = 2;
[b, a] = [a, b];

const json = '{"name":"es","price":"500"}';
const obj = JSON.parse(json);
console.log(obj);
const {name,price} = JSON.parse(json);
console.log(name,price);

axios.get('./data.json').then(res => {
	console.log(res);
})
axios.get('./data.json').then( ({data}) => {
	console.log(data);
})
axios.get('./data.json').then( ({data:{name,age}}) => {
	console.log(name,age);
})

5、es6不能被所有的浏览器识别
建议使用最新版的chrome,或可使用babel工具将es6转换为es5

安装
 1、安装node.js环境
 2、进入项目初始化package.json（npm init -y）
 3、安装babel：npm install --save-dev babel-preset-env babel-cli
 4、创建文件并配置：.babelrc 
 	{"presets":["env"]}

文件转化
文件：babel src/index.js -o dist/index.js
文件夹：babel src -d dist
实时监控： babel src -w -d dist

[es官网]：http://www.ecma-international.org/ecma-262/6.0/
参考：http://es.xiecheng.live/