ES6的总结及使用（1）

let(声明变量)

let a;
let b,c,d;
let e = 100;
let f = 521,g = 'xiaozhou',h = [];

特性

1、变量不能重复声明

2、块级作用域 全局，函数，eval

if for while 都是块级作用域

{
	let a = 10;
}
console.log(a); 
//报错，有作用域

3、不存在变量提升

console.log(b);
let b = 'hello'; //报错

4、不影响作用域链

{
	let c = "hello";
	function fn(){
		console.log(c);
	}
	fn();//正常输出，无报错
} 

const(声明常量,其值不能修改)

const A = 'hello';

1、一定要赋初始值

const A;//报错

2、一般常量使用大写

3、常量的值不能修改

A = 'hello xiaoming';//报错;

4、块级作用域

{
	const B = 'hello';
}
console.log(B);//报错

5、对数组和对象的元素修改，不算对常量的修改，不会报错

const DATA = [11,22,33,44,55];
DATA.push('66');//正常执行，不会报错

变量的结构赋值

es6允许按照一定的模式从数组和对象中提取值，对变量进行赋值（这被称为解析赋值）

1、数组的结构

 const F4 = ['小沈阳','宋小宝','刘能','赵四'];
let [xiao,song,liu,zhao] = F4;
console.log(xiao);
console.log(song);
console.log(liu);
console.log(zhao);
/* 小沈阳
宋小宝
刘能
赵四 */

2、对象的结构

const li = {
	name :'李易峰',
	age:'保密',
	move:function(){
		console.log("动物世界");
	}
}
let {name,age,move} = li;
console.log(name);
console.log(age);
console.log(move);
				
move();

模板字符串

es6引入了新的申明字符串的方式 `` (’ ’ " " 这两个是以前的)

let str = `我是一个字符串`;
console.log(str,typeof str);

1、内容中可以直接出现换行符

 let str = '<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>';//报错,需要用+号连接每一行的内容
let str = `<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>`;//正确

2、变量拼接

 let love = '李易峰';
let out = `${love}是一个好演员！！`;
console.log(out);
//输出：李易峰是一个好演员！！

简化对象写法

es6允许在大括号里面，直接写变量和函数，作为对象的属性和方法（这样书写更加简洁）

let name = 'xiaozhou';
	let change = function(){
	console.log('we can change you!!');
}
const people = {
	name,
	change,
	improve(){
		console.log("我们可以这样简写方法");
	}
	//等同于
	improve:function(){
					
	}
}
console.log(people); 

箭头函数

es6允许使用箭头（=>）定义函数

let fn = function(){
				
}
let fn = () =>{
				
} 

1、this 是静态的，this始终指向函数声明时所在的作用域下的this的值

function getName(){
	console.log(this.name);
}
let getName2 = () =>{
	console.log(this.name);
}
			
//设置window对象的name属性
window.name = 'xiaozhou';
	const people = {
	name:"buxian"
}

//直接调用
getName();//xiaozhou
getName2();//xiaozhou
			
//call方法调用
getName.call(people);//buxian
getName2.call(people);//xiaozhou 这里始终指向的是声明时的全局window的name 

2、不能作为构造函数，实例化对象

let Person = (name,age) =>{
	this.name = name;
	this.age = age;
				
}
let me = new Person('xiao',20);
console.log(me);//报错

3、不能使用arguments变量

 let fn = () =>{
	console.log(arguments);
}
fn(1,2,3); 
//报错 arguments is not defined

let fn = function(){
	console.log(arguments);
}
fn(1,2,3); 
//正确显示数组

4、箭头函数的简写

（1）、省略小括号，当形参有且只有一个

 let add = n =>{
	return n+n;
}
console.log(add(5));//10

（2）、省略花括号，当代码只有一条语句，此时return必须省略(而且语句的执行结果就是函数的返回值)

let pow = (n) => n*n;
console.log(pow(8));//64

箭头函数适合于this无关的回调，定时器，数组的方法回调
箭头函数不适合于this有关的回调，事件回调，对象的方法

函数参数的默认值

es6允许给函数参数赋初始值
###1、形参初始值,具有默认值的参数，一般放在靠后

function add(a,b,c=10){
	return a+b+c;
}
let result = add(1,2);
console.log(result);//13

###2、与解构赋值结合

function connect({host = "127.0.0.0",username,password,port}){
	console.log(host);
	console.log(username);
	console.log(password);
	console.log(port);
}
connect({
	host:'localhost',
	username:'root',
	password:'root',
	port:8080		
})

rest参数

es6映入rest参数，用于获取函数的实参，用来代替arguments

function date(...args){
	console.log(args);//返回一个数组
}
date('liyifeng','yangmi','dilireba');

rest 参数必须放最后

function fn(a,b,...args){
				
}
fn(1,3,4,5,6);

扩展运算符

(…）扩展运算符能将数组转换为逗号分隔的参数系列

const tfboys = ['王俊凯','王源','易烊千玺'];
//声明一个函数
function chunwan(){
	console.log(arguments);//打印出三个参数
}
chunwan(...tfboys);//等同于 chunwan('王俊凯','王源','易烊千玺')

扩展运算符应用

1、数组合并

const data1 = [1,2,3];
const data2 = [4,5,6];
const data12 = [...data1,...data2];
console.log(data12);//[1,2,3,4,5,6]

2、数组的克隆(浅拷贝)

const data1 = [1,2,3];
const datap = [...data1];
console.log(datap);//[1,2,3]

3、将伪数组转为真正的数组

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

const divs = document.querySelectorAll('div');
const divarr = [...divs];
console.log(divarr);//[div, div, div, div, div]