ES6相关知识点一

本章节概述了ES6的新增关键字 let 、const ，解构赋值，箭头函数 和 新增循环

ES6简介

ES6全称ECMAScript 6.0（也叫ES6 2015），是JavaScript的下一个版本标准，主要为解决ES5的先天不足。

一、ES6新增关键字 let 和 const

let

let声明的变量只在 let 命令所在的代码块内有效

特点

1. let定义的变量不能重复声明
2. let定义的变量没有声明提升
3. let定义的全局变量不能当作顶层属性来用，即不能写成window.xx的格式
4. let定义的是块级作用域

let 和 var 都可以定义全局变量 , 定义时都可以不赋值 , 此时变量的值为undefined

变量声明 let 和 var的区别：

let	var
在代码块内有效	在全局范围内有效
定义的变量是块级作用域，只要是{ }就会形成作用域，并且有作用域链，跟函数作用域链一样	定义的变量是函数作用域，作用域只跟函数的{ }有关系
只能声明一次，不能重复声明	可以声明多次
不存在变量声明提升，用之前必须定义这个变量	存在变量声明提升
定义的全局变量不能当作顶层属性（window的属性）来用	定义的全局变量可以当作顶层属性来用

const

const声明一个只读的常量（简单类型），一旦声明，常量的值就不能改变

特点

1. const定义的是块级作用域
2. const定义的是常量，一旦定义不能改变值
3. const只要声明了就必须赋值

二、解构赋值

解构赋值是赋值运算符（=）的扩展，是对数组和对象的模式匹配，即解构赋值就是把数组和对象解构成变量并赋值

解构赋值分为两部分：左边为解构目标，右边为解构源，左边的解构目标可以有初始值

如果右边的解构源的个数少于左边的解构目标的个数就是不完全解构

let [ a，b = 5] = [1]
console.log(a,b)   // a=1 b=5

数组解构应用场景一： 两个变量交换值

{
	let a=10 , b=20;
	[a,b] = [b,a];		//[a，b] = [20，10] 
	console.log(a,b)；   // a=20 b=10;
}

数组解构应用场景二： 当一个函数有多个返回值的时候

{
	function  fun1(){
		return [1,2];
	}
	let res=fun1();
	let [a,b]=res;
	console.log(res);   //res=[1,2]
}	

对象解构： 从对象里提取数据

var json={name:"小明",age:"18",sex:"nan"};
var {name,sex}=json;
// console.log(name,age)

var  data={
     code:"200",
     result:[1,2,3,[4,5]],
     result2:[]
}
// var res=data.result;

var {result,result2}=data;
console.log(result);// [1, 2, 3,  [4, 5]]

三、箭头函数

格式： document.οnclick=()=>{ }

（1）当箭头函数只有一个参数 和一个 return语句的时候 就可以把（）和 { } 都省略掉

原代码：						省略后的代码：
let fun1=(a)=>{					
    a+=10;			――→			let fun1=a=>a+10;
    return a;
}
console.log(fun1(3));//13

（2）没有参数或参数为undefined时使用默认参数，null值是有效值，可传递

function fun1(a,b=0){
    console.log(a+b);
}
fun1(20);	//20

(3) 参数的个数不确定时使用扩展运算符"…" , 传入的参数都能被values接收

let fun2=(...values)=>{
    // values就代表传进来的实参，是一个数组
    let [a,b,c,d]=values;
    console.log(a,b,c,d);	//1,2,3,4
}
fun2(1,2,3,4)

this

箭头函数里没有this , 但是箭头函数里照样可以使用this，只不过这个this是它所在环境的this

箭头函数改变this指向的方法 :

1.保存this
2.bind改变this
3.箭头函数改变this

var name1="小红";
let obj={
	 name1:"小明",
	 say:function(){
	     // var that=this;	保存this
	     
	     setTimeout(function(a){
	         console.log(a);	//10
	     }.bind(this,10),1000);	//bind改变this
	
	     // setTimeout(()=>{
	     //     console.log(this)
	     //     console.log(this.name1)
	     // },1000);	箭头函数改变this
	 }
}
obj.say();

bind方法除了可以改变this指向 还可以传参数，比如说计时器还有事件后的函数 没有办法传实参的时候， 可以用bind传
绑定在事件后面的函数 如果想要传实参 还有一种方法就是把事件写在标签里当作属性用

let fun1=(x)=>{
    alert(x);
}
 document.onclick=function(a,b){
     alert(a+b);	//aaabbb
 }.bind(null,"aaa","bbb");

箭头函数里没有argument对象 , arguments是实参的集合，是一个类数组

类数组对象 当一个对象 的key值是正整数 还有length属性的时候 (key值为下标)

类数组转化为数组的方法： Array.from 和 […arr]

var obj={ 2:"aa",  3:"bb", length:5 };	//类数组
var arr1=Array.from(obj);	//把类数组转化为数组
console.log(arr1);	//[undefined,undefined,aa,bb,undefined]

转化为数组时，key值为下标，下标不存在时，用undefined补全

四、ES6新增循环 for of

for-of 循环里可以使用 break 和 container ，也可以循环json

循环数组
 var arr=[1,2,3,4];
 
 for (let item of arr) {
     console.log(item);  //1，2，3，4
 }

今天的总结先告一段落！