ES6相关知识点一

谁践踏了优雅 2023-06-06 12:18 1阅读 0赞

本章节概述了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的区别： ######

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

### 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]
    }

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

## 三、箭头函数 ##

*格式：* 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

*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
     }

今天的总结先告一段落！