ES6 声明与表达式

- 日理万妓 2023-10-11 12:17 48阅读 0赞

## 一、新的声明方式 let ##

#### 用let声明变量与var的区别 ####

###### 1、 let声明的变量拥有块级作用域 ######

块级作用域 由 \{ \} 包裹，if语句和for语句里面的\{ \}也属于块作用域。

for(var i=1;i<10;i++){ }
    console.log(i);   //10
    for(let j=1;j<10;j++){ }
    console.log(j);  //j is not defined

###### 2、不存在变量提升 ######

console.log(a);    //Uncaught ReferenceError
    let a=1;

###### 3、let声明的变量不能重复定义 ######

![在这里插入图片描述][20190923142940682.png]

###### 4、let声明的全局变量不是window对象的属性 ######

var a=1;
    let aa=1;
    function aaa(){ }
    console.log(window)

这个例子中，window对象中有属性a,没有属性aa,在查看函数aaa的作用域时出现了一个script作用域，该作用域中存在变量aa  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

## 二、ES6可以定义常量 ##

过去，js中没有常量的概念，ES6可以用const关键字定义常量，引入了新的关键字const来定义常量。

原则上，使用const定义的常量无法改变，但是如果常量中保存的是引用类型，实际上是可以被修改的  
，Object.freeze()可以冻结对象，来达到无法修改的目的。

const的其他方面和let定义的变量类似，没有提升，有块级作用域，声明的全局常量不是window对象的属性。

const p={ 
        name:'Li'
      }
      p.name='LiLy';
      Object.freeze(p);   //冻结对象p
      p.name='Lilyan'; //静默失败，不会报错
      console.log(p);  //{name: "Lily"}

## 三、ES6 新增基本数据类型Symbol ##

Symbol表示独一无二的值，是基本数据类型。

Symbol 值通过Symbol函数生成,传入相同参数的两个Symbol 值不相等,如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值。

let a=Symbol(1);
      let b=Symbol(1);
      console.log(a==b)  //false
      console.log(typeof a) //symbol
      let c=Symbol({ title:'Symbol'})
      console.log({ title:'Symbol'}.toString())  //[object Object]
      console.log(c)  //Symbol([object Object])

## 四、新的赋值方式-变量的解构赋值 ##

> 解构赋值给我们一种新的变量赋值方式，指按照一定模式从数组或对象等数据结构中的提取值，并对变量进行赋值，解构赋值有两个步骤，1. 变量的声明 2. 变量的赋值  
> 解构赋值时，等号左侧是变量名，右侧是要解构的值。

### 解构赋值可以解构成对象或数组 ###

##### 1、解构成数组 #####

iterator接口的类型都可以被解构，如Array，Set，Map，字符串也可以被解构成数组,匹配时按次序模式匹配

1.  解构数组

//解构数组
    let [a, b,c] = [1, 2,3];  //完全解构
    let [e]=[1,2];           //不完全解构，右侧值有比左侧变量名多
    let [f,g]=[1];			//解构不成功，左侧变量名有多余，g的值为undefined
    let [h]=1;              //解构出错，Uncaught TypeError: 1 is not iterable
    let [i,j,k]=[1,[2,3],4]     //多维数组的解构 
    console.log(j);             //[2, 3]

1.  解构Set，Map数据结构

let [a,b]=new Set([1,2])  //解构Set集合
    let [c,d,e]=new Map([['id',1],[2,'2']]);        //解构Map集合

1.  解构字符串

let [a,b]='Lily';       //解构字符串
    console.log(a);      //L

##### 2、解构成对象 #####

匹配数组是按次序进行模式匹配，对象的元素按属性名进行匹配。  
解构成数组，右侧必须是可迭代对象，如果解构成对象，右侧不是null或undefined就可以。

//解构成对象
    let { name,age} ={ "name":"Lily", "age":18}
    let { a,b,length}='Lily';
    console.log({ a,b,length});    //{a: undefined, b: undefined, length: 4}

PS：把字符串解构成对象时，能取出变量length的值，因为字符串作为基本包装类型，有属性length

### 解构规则 ###

*  变量和值完全对应称为完全解构
 *  右侧值有比左侧变量名多，称为不完全解构
 *  左侧变量名有多余，即部分变量找不到对应的值称为解构不成功，变量的值就等于undefined
 *  解构出错：  
    解构成数值时 ，如果右边不是可遍历的结构或字符串会报错  
    解构成对象时，解构嵌套对象，若子对象外层的属性不存在时会报错
 *  省略解构赋值
    
        let [,,c]=[1,2,3];          
        console.log(c);             //3
 *  含剩余参数的解构赋值，变量名前面加三点运算符，会使该变量成为一个包裹匹配元素的对象（被\[\]或\{\}包裹）
    
        let [a,...rest] = [1,2,3];  
        console.log(rest);             //[2,3]
        let [c,...d]=[1,2];             
        console.log(d);              //[2] 
        let { ...f}={ a:{ },b:{ }};
        console.log(f);            //{a: {…}, b: {…}, c: {…}}
 *  允许设定默认值
    
        let [f,g=2]=[1];			//解构不成功，g值应该为undefined但是g设置了默认值，g的值为2
        let { a,b=[1]}={ 
          a:{ },
          b:{ }
        };
        console.log({ a,b});       //{}，解构不成功时默认值才会被赋值给变量
 *  解构对象时，允许使用别名，使用别名后不允许再使用原有的属性名
    
        let { id,ename:realName,age} ={ "id":1,"ename":"Lily", "age":18}
        console.log(realName);    //Lily
        console.log(ename);       //ename is not defined
 *  解构嵌套对象
    
        let p={ 
            "cname":"Lily",
            "age":18,
            "family":{ 
              "mother":"Dong",
              "father":"Li"
            }
          };
          let { cname,age,family:{ mother}}=p;
          console.log(mother);
          //console.log(family); //family is not defined
          let { a:{ father}}=p;   //解构出错，不存在要解构的a属性

这里可以理解为family定义了一个别名\{mother\}，该别名也是解构赋值的，这时候不存在变量family，

### 解构赋值的常见用途 ###

##### 1、交换变量的值 #####

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

##### 2、提取 JSON 数据 #####

解构赋值对提取 JSON 对象中的数据，在前后端交换数据时尤其有用。

//假设从后端返回一个对象，而前台只需要id,name,age
    	let jsonData={ "id":1,"name":"Lily","age":18,"gender":"female "}
    	let {  id,name,age } = jsonData;

##### 3、提取函数返回的多个值 #####

因为一个函数只有一个返回值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，就可以很方便的取出这些值。

function fun(){ 
    	    return { "name":"Lily","age":18}
    	}
    	var { name,age} = fun();

##### 4、定义函数参数并设置默认值 #####

解构赋值可以方便地将一组参数与变量名对应起来。

//用解构的方式定义函数参数
    //给参数gender设置默认值
    function fun({ name,age,gender='male'}){ 
      console.log(`姓名：${ name},年龄：${ age},性别:${ gender}`);
    }
    fun({ name:"Lily",age:"18",weight:"50"});	//姓名：Lily,年龄：18,性别:male

## 五、Rest运算符和扩展运算符（ … ） ##

Rest运算符和扩展运算符都是三个点，通俗的称为三点运算符，但他们是相反的运算，Rest运算符是将一些元素合并到一个集合中，使用扩展运算符是分隔一个集合的元素。

#### Rest运算符（剩余运算符） ####

Rest运算符主要用在解构赋值的场合

let [a,...rest] = [1,2,3];  
    let [c,...d]=[1,2];   
    ///用解构的方式定义函数参数
    function fun(...param) { 
      //es6之前，借助函数的局部变量arguments
      for(let i=0;i<arguments.length;i++){ 
        console.log(arguments[i]);
      }
      //es6
      for(let j=0;j<param.length;j++){ 
        console.log(param[j]);
      }
    }
    fun(1,2,3)

前面的参数一一对应，…rest，…b，…param代表剩下的参数，称为Rest运算符或剩余运算符

#### 扩展运算符（spread） ####

扩展运算符（spread）是三个点（…）。与Rest运算符相反，将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2]);   //1 2

#### …扩展运算符的应用场景 ####

*  作为函数的参数  
    之前的例子中，给函数传递了3个参数，实际上很多时候我们想直接传递一个数组给参数

function fun(...param) { 
        for(let j=0;j<param.length;j++){ 
          console.log(param[j]);
        }
      }
    fun(1,2,3);
    //es5 传入数组
    fun.apply(null,[1,2,3]); //等同于fun.apply(window,[1,2,3])，apply可以将一个数组默认的转换为一个参数列表
    //es6 传入数组
    fun(...[1,2,3]);

*  合并数组

let arr1=[1];
    let arr2=[2];
    arr1.push(...arr2);   //[1, 2]

*  实现数组的深拷贝

let a=[1,2];
      let b=a;
      let c=[...a];
      a[0]=2;
      console.log(b);      // [2, 2]
      console.log(c);      //[1, 2]

*  将类数组对象转化为数组

let nodeList = document.querySelectorAll('p');
    console.log(nodeList);  //NodeList(4) [p, p, p, p]
    //es5
    console.log(Array.prototype.slice.call(nodeList));  //[p, p, p, p]
    //es6
    console.log([...nodeList]);  // [p, p, p, p]

## 六、ES6中用&&跟||来简化if\{\}else\{\}的写法 ##

[20190923142940682.png]: https://img-blog.csdnimg.cn/20190923142940682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190923135609732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70