es6新特性有哪些?

214 阅读3分钟
  1. let 与 const,块级作用域,没有变量提升

 
  什么是块级作用域呢,{} 中let声明的变量外界访问不到。 
  

   {
      let a  = 20 ; 
   
    }
     console.log(a);  //20 
     
      if (true){ 
     let a  = 10 ; 
      console.log(a);  //10 
    }
      console.log(a);  //10 
      
       for (let i=0  i < 2 ;  i++ ){ 
   
      console.log(i);  //0  与 1
    }
   console.log(i);  //2                   
   
   
  ——————————————————————————————————————————
  
    {
      let a  = 20 ; 
      console.log(a);  //20 
    }
       console.log(a);  //报错“ is not definedat”    块级作用域
    if (true){ 
     let a  = 10 ; 
      console.log(a);  //10 
    }
   console.log(a);  //报错“ is not definedat”    块级作用域
   
      for (let i=0  i < 2 ;  i++ ){ 
   
      console.log(i);  //0  与 1
    }
   console.log(i);  //报错“ is not definedat”      块级作用域
   
   
  变量提升呢?

  console.log(a) ;  打印 undefined 有变量提升
  var  a = 10 ;              
  
    console.log(a) ;  打印 报错“before initializationat”
   let a = 10 ;              

  ——————————————————————————————————————————
  const呢? 
  有块级作用域,没有变量提升 , 值不可更改, const声明必须赋值。
  
   const a = ;  报错 const声明必须赋值。
   const b =10;
         b =20; 报错 值不可更改

let 与 const 与var的区别图 如下:

Snipaste_2021-06-29_18-47-35.png

2.解构赋值

ES6中允许从数组或对象中提取值,按照对应位置,对变量赋值,实现解构。


之前 
let arr =[1,2,3];
    arr[0]
    arr[1]
    arr[2]
    
 (1)数组解构
 
let [a , b,c ] =arr;
     console.log(a)   //  1
     console.log(a)   //  2
     console.log(a)   //  3
     
     注:解构不成功,变量值为undefined
     
  (2)对象解构
  方式一:
  
  let  obj = {name:"li",age:20};
  
  let {name,age} =obj;
   console.log(a)   //  li
   console.log(a)   // 20
 
方式二:
 注:myName myAge 属于别名
let {name:myName,age:myAge } =obj;   注:对象值属于别名

  console.log(myName)   //  li
   console.log(myAge)   // 20

3.箭头函数

为了简化函数的声明方式



箭头函数
let fn=()=>{}

特性:形参一个可以省略(),函数体只有一行代码可以省略{}与return ,不产生this,this上下文。

应用场景:当作回调函数使用

4.剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组.

方式1function fn (a , ...b){
 console.log(a)  //10
 console.log(b)    //  [20,30 ] 将一个不定数量的参数表示为一个数组
}
fn(10,20,30);

方式2:

 剩余参数和解构赋值配合使用
 
 let arr = [1 ,2 ,3];
 
 let [a,...b]=arr;
  console.log(a)  // 1
  console.log(b)  [2 ,3]

5.扩展运算符(展开语法)

扩展运算符可以将数组或对象转为用逗号分隔的参数序列

- Array的扩展方法

- 作用1:逗号分隔的参数序列

let arr=[1,2,3];
 ...arr 
 console.log( ...arr)   // 1 ,2,3  将数组用逗号分隔的参数序列
 
-  作用2:合并新数组

 let arr1=[1,2,3];
 let arr2=[4,5,6];
 let arr3=[...arr1,...arr1];  // [1,2,3,4,5,6]
 
 arr1.push(arr2)也是同上一致
 
 
-  作用3:可以伪数组转为真数组

  <ul>
        <li>伪数组</li>
        <li>伪数组</li>
        <li>伪数组</li>
        <li>伪数组</li>
    </ul>
    
   let lili= document.querySelectorAll('ul li'); 为数组
   let arr = [ ...lili] ;   // [li][li][li][li] 转为真数组
   
    
-  作用4:可以将对象转为数组     
   
   语法:Array.from(要转化的,回调函数)
   
    let obj = {
            "0": "1",
            "1": "2",
            length: 2
        };
        注:对象属性名:必须“索引” 加lengt ,其余属性名undefined不加lengt空数组

   需求:让数组[0]与[1] * 2
   
        let newArr = Array.from(obj,item =>item* 2 )
        console.log(newArr);    [2,4]  
        
        
        
-   作用5Array内置对象find(方法)
  
   用于找出第一个符合条件的数组成员,如果没有找到返回undefined
  
  语法:数组.find( (元素,下标)=>{ 条件 元素.id == 1; 条件不满足返回undefined } )
  
 
  let arr =[{ id:1, name:"李" } ,{id:2 ,name:"陈" } ];
  
  需求:查找数组对象中id对应的数据
  
   let dd =arr.find( item=>{  item.d == 1 )    
   
       console.log(dd);     { id:1, name:"李" } 
       
       
-    作用6Array内置对象findIndex(方法)
     
  用于找出第一个符合条件的数组成员,如果没有找到返回-1
  
   
  语法:数组.findIndex( (元素,下标)=>{ 条件 元素.id > 8; 条件不满足返回-1 } )

 需求:查找数组最大值
 
 let arr =[10, 20 ,30];
 
let dd =arr.findIndex( item=>  item > 20 )   
  
     console.log(dd);   返回数组下标 0 。注:代表dd[2]大于20
     
     
     
作用7Array内置对象includes(方法)

表示某个数组是否包含给定的值,返回布尔值

注:包含true,不包含false

let arr= [1,2,3];
       
       需求:查找数组中值为2的,返回布尔值
       
      arr. includes(2) // 包含返回true
       arr. includes(4) // 不包含返回false
       
       
       
  - String的扩展方法     
  
  ES6新增的创建字符串的方法,使用反引号定义.
  
- 作用8:  模板字符串

  let name = `lixiao`;
  
  注:${变量}代表解析这个变量
  
  let moban = ` hi you ${name} ` ;  hi you lixiao
  
  
  - 作用9String - startsWith()和endsWith() 方法
  
    注:startsWith():查找 某个(world) 在头部,返回布尔值
    注:endsWith() :查找 某个(hi) 在尾部,返回布尔值
    
    let str ="world hi";
    str.startsWith(world) " world"是在头部返回true
    str.endsWith(hi) " hi"是在尾部返回true
    
    
-      作用10String - repeat( 方法)

     表示将原字符串重复n次 ,返回一个新字符串
     let str  =x ;
     str.repeat(2)  // xx

6.class类

注:super方法调用父类构造函数

注: extends关键字继承父类方法和属性,super()用于调用父类构造函数

7.Set永不重复数据类型

   注:Set是构造函数
   
   let arr =[1,2,2,4,3];
   
   需求:去重
   
 let newArr= new Set(arr);  //   [1,2,4,3] 去重了
 
    
- 添加数据: add("添加")   注:重复数据添加失败
- 判定: has("判定") 返回布尔值     
- 清除: 要清除的.clear()