ES6入坑记

ES6官方文档
阮一峰ES6学习文档

常量声明(const)

// es5 写法
Object.defineProperty(window, 'es', {
	values: '2016',
	writable: false // 不可重写
})

// es6写法-->最开始就初始化②不允许重复声明③不存在变量提升
const es = '2017'

var str = 'abc' // 属于顶层对象window
console.log(window.str) // abc
const str = 'bcd' // 不属于顶层对象window
console.log(str) // undefined


// 暂时性死区  // 块级作用域
if (true) {
	console.log(str) // 报错
	const str = '123'
}

// 递归冻结
function freeze (obj) {
	Object.freeze(obj);
	Object.keys(obj).forEach(function(key){
		if (typeOf obj[key] === 'object') {
			freeze(obj[key]);
		}
	})
}

函数

// 箭头函数
const sum = (x, y) => x + y;
const result = sum(2, 3);
console.log(result) // 5
/// 注意箭头函数的this指向问题，箭头函数中this 指向向上作用域中的this

const obj = {
	myName: 'Saaristo',
	show: () => {
		console.log(this) // this = window
		console.log(this.myName) // undefined
	},
	showName() {
		console.log(this.myName) // Saaristo
	}
}
obj.showName();

注意

• 在箭头函数中，arguments 参数是不能使用的；（arguments 返回形参数组）
• 不能使用箭头函数做为构造函数；
• 使用箭头函数不能定义原型下面的方法。

解构赋值

• 要点： 等号左边和等号右边对应的结构要完全匹配
• 做为函数参数
• 函数返回值
• 变量互换
• JSON应用
• ajax 请求

 obj
const obj = {
	name: 'saaristo',
	age: '18',
	friend: {
		name: 'qiqi',
		course: 'CN'
	}
}
const {
	name:myName, // 别名
	age,
	friend:{name, course}
} = obj;
console.log(myName, age, name, course)  saaristo, 18 qiqi CN


const fn = ({name, sex, age = '18'}) => {
	console.log(name, sex, age)
}
fn({
	'saaristo',
	'femal'
}) // saaristo, femal, 18

let a = 1;
let b = 2;
[b,a] = [a, b] // b=1,a = 2 交换值

浏览器解析问题

• babel 转化成es5