ES6

ES6基础

1、let

1、let声明的变量只能在当前块级作用域内有效
2、let声明的变量不能被重复声明
3、不存在变量提升
4、暂存死区

let monkey = '美猴王';
{
	console.log(monkey);   //暂存死区
	let monkey = '孙悟空';
}
console.log(monkey);

块级作用域
通俗的讲，就是一对花括号中的区域{ … }，且块级作用域可以嵌套
1、if( ) { }
2、switch( ) { }
3、fort( ) { }
4、try{ } catch( err ) { }
5、{ }

案例：生成四个按钮 每一个按钮点击的时候弹出1-10
使用var定义i

		var i=0;
		for(i=1; i<=0; i++){
			(function(i){
				var btn = document.createElement('button');
				btn.innerText = i;
				btn.onclick = function(){
					alert(i);
				};
				document.body.appendChild(btn);
			}(i)
		}

使用let定义i

		for(let i=1; i<=0; i++){
			var btn = document.createElement('button');
			btn.innerText = i;
			btn.onclick = function(){
				alert(i);
			};
			document.body.appendChild(btn);
		}

2、const

声明一个常量 — 不可改变的量
const a = 1；
常量必须在声明的时候赋值
否则会报错：Missing initializer in const declaration
const的特性：
1、常量声明后不能被修改
2、不能重复声明
3、不存在变量提升
4、只在当前块级作用域内有效
5、常量为引用类型时，可以修改该引用类型
修改的时候指向的地址不能改变

const xiaoming = {
	age: 14,
	name: '小明'
}
console.log(xiaoming);
xiaoming.age = 22;
xiaoming
console.log(xiaoming);  //修改成功
xiaoming = {};  //修改失败

可以通过Object.freeze( )方法阻止常量为引用类型时候的修改

const xiaoming = {
	age: 14,
	name: '小明'
}
Object.freeze(xiaoming);
console.log(xiaoming);
xiaoming.age = 22;
xiaoming.dd = 14;  //修改失败
xiaoming
console.log(xiaoming);  //修改失败
xiaoming = {};  //修改失败

es6之前如何定义常量

	//1. 假装是常量
	var base_color = '#ff00ee';
	//2. Object.defineProperty();
	var cst = {a = 1};
	Object.defineProperty(cst, 'a', {
		value: 'xiaoming',
		writable: false
	});
	//Object.seal()阻止对象添加属性或对象
	Object.seal(cst);

自己封装一个freeze方法

	//自己封装一个freeze方法
	Object.defineProperty(Object, 'freezePolyfill', {
		value: function(obj){
			for(var i in obj){
				if(obj.hasOwnProperty){
					Object.defineProperty(obj, i, {
						writable: false
					});
				}
			}
			Object.seal(obj);
		}
	});

3、解构赋值

//数组的解构赋值
// let [a,b,c] = [1,2,3];
// let [a,b,c] = [,123,];
// let [a=111,b,c] = [,222,];
// let [a=111,b,c=333] = [,222,444];
// console.log(a,b,c);		
		

//对象的解构赋值
// let {foo,bar} = {foo: 'hello', bar: 'hi'};
// let {foo,bar} = {bar: 'hi', foo: 'hello'};
// console.log(foo, bar);
// 给对象属性添加别名(如果有了别名，原名就无效了)
// let {foo:abc,bar} = {bar: 'hi', foo: 'nihao'};
// console.log(abc, bar);
		

// 对象的解构赋值指定默认值
let {foo:abc="world",bar} = {bar: 'hi'};
console.log(abc, bar);

let {cos,sin,random} = Math;
console.log(cos);
console.log(sin);
console.log(random);


//字符串的解构赋值
let [a,b,c,d,e] = "hello";
// let [a,b,c,d,e,length] = "hello";
console.log(a,b,c,d,e);
// console.log(length);
console.log("hello".length);

// let {length} = "hinihao";
// console.log(length);

4、字符串扩展

/*
	字符串扩展
	includes()：判断字符创中是否包含指定的字符串（有true，无false）
				参数一：匹配的字符串
				参数二：从第几个字符开始匹配
	startsWith()：判断2字符串是否以特定的字串开始
	endsWith()：判断2字符串是否以特定的字串结束

	模板字符串
 */ 
console.log('hello world'.includes('world',6));
console.log('hello world'.includes('world',8));

let url = 'admin/index.php';
console.log(url.startsWith('admin'));
console.log(url.startsWith('aadmin'));
console.log(url.endsWith('php'));
console.log(url.endsWith('phph'));

//----------------------------------------------
let obj = {
	username: 'list',
	age: '13',
	gender: 'male'
}
let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';
console.log(tag);

//反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据
let fn = function(info){
	return info;
}
let tpl = `
	<div>
		<span>${obj.username}</span>
		<span>${obj.age}</span>
		<span>${obj.gender}</span>
		<span>${1+1}</span>
		<span>${fn('hello world')}</span>
	</div>
`;
console.log(tpl);

5、函数扩展

/*
	函数扩展
	1、参数默认值
	2、参数解构赋值
	3、rest参数 (剩余参数)
	4、...扩展运算符
 */

//	1、参数默认值
function foo1(param){
	let p = param || 'hello';
	console.log(p);
}
foo1();
foo1('hi');

function foo2(param = 'hillo'){
	console.log(param);
}
foo2();
foo2('hello world');

//-------------------------------
//	未解构赋值
// function foo(name='list', age=15){
// 	console.log(name,age);
// }
// foo();
// foo('zhangsan', 25);

//	2、参数解构赋值
function foo3({name='list', age=15} = {}){
	console.log(name,age);
}
foo3();
foo3({name: 'zhangsan', age:25});

//---------------------------------
//	3、rest参数 (剩余参数)
function foo4(a,b, ...param){
	console.log(a,b);
	console.log(param);
}
foo4(0, 55, 1, 21, 31, 64, 0);

//----------------------------------
//	4、...扩展运算符 
function foo5(a,b,c,d,e,f){
	console.log(a+b+c+d+e+f);
}
foo5(1,2,3,4,5,7);
let arr = [1,2,3,4,5,6];
foo5.apply(null, arr);
foo5(...arr);

//-----------------------------------
//合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1, ...arr2];
let arr4 =  [0,0,0];
arr4 = arr4.concat(arr1,arr2,arr3);
console.log(arr3);
console.log(arr4);

6、剪头函数

/*
	箭头函数
 */
function foo1(){
	console.log('hello');
}
foo1();

let foo2= () => console.log('hello');
foo2();
//---------------------------------------
function foo3(v){
	return v;
}
let foo4 = v => v;
console.log(foo3(111));
console.log(foo4(111));
//----------------------------------------
//多个参数需要小括号包住
let foo5 = (a,b) => {let c=1; console.log(a+b+c);}
foo5(10,4);

let arr = [111, 222, 333, 444, 555];
arr.forEach(function(element, index){
	console.log(index, element);
});
arr.forEach((element, index)=>{
	console.log(index, element);
})

//剪头函数的注意事项
//1、箭头函数中this取决于函数的定义，而不是调用
let foo00 = (a,b) => {
	console.log(this);  //为空对象：{}
}
foo00(1,2);

function foo01(){
	//使用call调用foo时，这里的this其实是call的第一个参数
	// console.log(this);
	setTimeout(()=>{
		console.log(this.num);
	},1000);
}
foo01();
foo01.call({num:110});

//2、箭头函数不可以new
let foo02 = () => {this.num = 123;}
//new foo02();

//3、箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
let foo03 = (a,b,c) => {
	console.log(a,b,c);
	// console.log(arguments);
}

foo03(111,222,333);
let foo04 = (...param) =>{
	console.log(param[1]); //222，param确定为一个数组对象
	console.log(param);
}
foo04(111,222,333,444,555);