ES6 新特性

Posted sun927

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 新特性相关的知识,希望对你有一定的参考价值。

ES6新特性

1.变量

  (1).var 的问题:可以重复声明;  无法限制修改;  没有块级作用域;

  (2).新加let: 不能重复声明;  变量—可以重新进行赋值;  块级作用域;

  (3).新加const:不能重复声明;  常量—不可以重新进行赋值;  块级作用域;

        //var a=1;
        //var a=2;
        //alert(a); //可以重复声明
            
        //let a=1;
        //let a=2;
        //alert(a);//不可以重复声明
            
        const a=1;
        const a=2;
        alert(a);//和let一样

块级作用域有什么用?

    <script>
         window.onload=function(){
             var aBtn=document.getElementsByTagName("input");                 
             for (var i=0;i<aBtn.length;i++)
             {
                 aBtn[i].onclick=function()
                 {
                     alert(i);    
                 }
             }                 
         }                          
    </script>

    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    //都会弹出3

以前解决的办法:用密封空间

        <script>
             window.onload=function(){
                 var aBtn=document.getElementsByTagName("input");
                 
                 for (var i=0;i<aBtn.length;i++)
                 {
                     (function(i){  //封密空间
                         aBtn[i].onclick=function()
                     {
                         alert(i);    
                     };
                     })(i);                     
                 }                 
             }                          
        </script>   
// 用一个封密空间,利用函数加了一级作用域。
var 只认函数这一层。

现在:直接改成let即可

        <script>
             window.onload=function(){
                 var aBtn=document.getElementsByTagName("input");                 
                 for (let i=0;i<aBtn.length;i++)  //本身就是一层作用域
                 {                 
                     aBtn[i].onclick=function()
                     {
                         alert(i);    
                     };                                          
                 }                 
             }                          
        </script>  
        <input type="button" value="按钮1">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">        
     //把var 改成 let 即可,for循环就是一个语法块。

总结:let 完全可以取代const

 

2.函数

 (1)箭头函数

      window.onload=function()
      {
         alert("abc")
      }
            
       window.onload=()=>{
          alert("abc")
       }

 

  箭头函数还有有两个特性:

  • 如果只有一个参数,“()”小括号可以省;
  • 如果只有一个return, “ { } ”花括号可以省;
    /*let show=function(a){
        return a*2;
    }*/
    //可以简写成            
    let show=a=> a*2;                            
    alert(show(12))

     

 (2)函数的参数

  • 参数扩展/展开;
    1.收集剩余参数,  形式:三个点,一个任意名字 ...args
    function show(a,b,...args){
         alert(a);
         alert(b);
         alert(args);
     }
     show(1,2,3,4,5,6)
                
    //1     
    //2   
    //3,4,5,6
    注意 ...args 必须放在最后一个

    2.展开数组:展开后的效果,相当于直接数组的内容写在这儿。
    let arr1=[1,2,3];
    let arr2=[5,6,8];            
    let arr=[...arr1,...arr2];            
    //  let arr=[1,2,3,5,6,8];   相当于这么写
                
    alert(arr);
                
    //1,2,3,4,5,6,7,8

     

  • 默认参数; ——传了听你的,不传听我的
    function show(a,b=88,c=99){         
       console.log(a,b,c)
    }
            
     show(1,2)
    
    // 1,2,99

     

3.变量解构赋值

  • 左右两边结构必须一样;
  • 右边必须是个内容;
  • 声明和赋值不能分开;
    //数组:
    /*let arr=[1,2,3];            
     let a=arr[0];
     let b=arr[1];
     let c=arr[2];*/
                
    //可以写成这样
     let [a,b,c] = [1,2,3]
                
     console.log(a,b,c);   //1,2,3
    --------------------------------------------------------------------------------------
    //json
    
    let {a,b,c} = {a:1,b:2,c:4}
    console.log(a,b,c);  //1,2,3

     

4.数组

  添加了四个方法:map  reduce  filter  forEach

 

  map — 映射  —  一个对一个

let arr=[10,2,3];            
let result=arr.map(function(item){
    //alert(item)
    return (item*2)
})
alert(result)    // 20,4,6

//可以写成箭头函数
let arr=[10,2,3];             
let result=arr.map(item=>item*2);
alert(result)    // 20,4,6

--------------------------------------------------------------------------------------

//在写一个应用
let score=[90,40,58,60];
let result=score.map(item=>item>=60?"及格":"不及格");
alert(result)  //及格,不及格,不及格,及格

 

  reduce  — 汇总   — 一堆出来一个  

 // 总和 
var arr=[88,12,20];

let result=arr.reduce(function(tmp,item,index){
  //alert(tmp+‘,‘+item+","+index) 三个参数分别代表:中间结果、每次的数、下标
    return tmp+item;
})
alert(result)  // 120


//求平均数
let result =arr.reduce(function(tmp,item,index){    
  if(index!=arr.length-1)  //不是最后一次
  {
    return tmp+item;   //先求和
  }
  else
  {
    return (tmp+item)/arr.length;   //去求平均数
  }    
})
alert(result) // 40

 

  filter —  过滤器

//求能被三整除的
let arr=[88,12,20,11];
let result=arr.filter(item=>item%3==0)
alert(result)  //12

 

  forEach  —  循环(迭代)

let arr=[12,10,44];          
arr.forEach((item,index)=>
{
    alert(index+":"+item)
});  

// 0:12
// 1:10
// 2:44

 

5.字符串

  • 添加了两个新方法 :startsWith 起始,endsWith 结尾
    //startsWith 
    let str="http://www.baidu.com"; if(str.startsWith("http://")){ alert("普通网址") } else if(str.startsWith("https://")) { alert("保密网址") } else { alert("其他网址") } //普通网址

     

    //endsWith 
    let str="xxx.png"; if(str.endsWith("txt")) { alert("文本文件"); } else if(str.endsWith("png")) { alert("图片文件"); } else { alert("其他"); } //图片文件

     

  • 字符串模板:字符串连接
    1.可以把东西塞到字符串里 ${ }
    2.可以换行
    let title="标题";
    let content="内容";
    
    let str=`<div>
    <h1>${title}</h1>
    <p>${content}</p>
    </div>`;
    alert(str);
    
    
    //结果:
    <div>
    <h1>标题</h1>
    <p>内容</p>
    </div>

     

6.面向对象

之前的缺点:构造函数和类不区分

主要变化:1.class关键字,构造器(constructor) 和类分开了;

     2.class 里直接加方法。

 

//之前的
function User(name,pass)
{
    this.name=name;
    this.pass=pass;
};
User.prototype.showName=function(){
    alert(this.name);
};
User.prototype.showPass=function(){
    alert(this.pass);
};
var Obj=new User("wy","123");
Obj.showName();
Obj.showPass();
// 结果 wy 123


//ES6
class User{
    constructor(name,pass){   //constructor 构造器
        this.name=name;
        this.pass=pass;
    }
    
    showName(){
        alert(this.name)
    }
    showPass(){
        alert(this.pass)
    }
}
var Obj=new User("wy","123");
Obj.showName();
Obj.showPass();
// 结果 wy 123

 继承:

  extends:扩展,延展

  super:超类,父类

 

// 之前的继承写法
function User(name,pass)
{
    this.name=name;
    this.pass=pass;
}

User.prototype.ShowName=function(){
    alert(this.name);
}

User.prototype.ShowPass=function(){
    alert(this.pass);
}

function VipUser(name,pass,level)
{
    User.call(this,name,pass);
    this.level=level;
}

VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;

/*for(var i in User.prototype)
{
    VipUser.prototype[i]=User.prototype[i];
}*/

VipUser.prototype.ShowLevel=function(){
    alert(this.level)
}
                
var obj=new VipUser("wy","123","3");
obj.ShowName();

obj.ShowPass();

obj.ShowLevel();
// wy
// 123
// 3
---------------------------------------------------------------------------------------------------------------

//ES6
class User{
    constructor(name,pass){
        this.name=name;
        this.pass=pass;
    }
    showName(){
        alert(this.name)
    }
    showPass(){
        alert(this.pass)
    }
}

class VipUser extends User{     //用extends
    constructor(name,pass,level){    
        super(name,pass);   //用 super 从父类上继承属性
        
        this.level=level;                                        
    }
    
    showlevel(){
        alert(this.level);
    }
}

var Obj=new VipUser("wy","123","3");
Obj.showName();
Obj.showPass();
Obj.showlevel();
// wy 
// 123 
//3

 

7.json

8.promise

9.generator


  




























以上是关于ES6 新特性的主要内容,如果未能解决你的问题,请参考以下文章

总结常见的ES6新语法特性

ES6解构赋值

ES6新特性

react入门系列之todolist代码优化(使用react 新特性,es6语法)

总结常见的ES6新语法特性。

ES7-Es8 js代码片段