ES6学习总结

上传于 | In
关于前段时间系统学习ES6的学习总结

ES6新的特性

  • 1.变量:let/const
  • 2.箭头参数以及参数扩展
  • 3.解构赋值
  • 4.数组方法
  • 5.字符串
  • 6.JSON
  • 7.面向对象
  • 8.Promise
  • 9.generator

知识点详解

ES6变量 let-const

  • ES5 var :可以重复声明，不能定义常量，无块级作用域
  • ES6 let :变量，不可重复声明，有块级作用域
  • ES6 const :常量，不可重复声明，有块级作用域

块级作用域： {}包裹的代码块，eg：{} if(){} for(){}etc.;ES5只有函数级作用域。

实例应用场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ES6-let/const</title>
</head>
<body>
    <!-- ES5 变量var：
    1.可以重复声明   ==>  var a=1;var a=2; alert(a)//2
    2.无法限制修改   ==>  没有常亮概念（eg:PI=3.14）
    3.没有块级作用域 ==>  语法块{ }（eg：1.{}/2.if(){}/3.for(){}） 

    ES6 let/const：
    let   不能重复声明;变量,可以修改;有块级作用域
    const 不能重复声明;常量,不可修改;有块级作用域 -->
    <input type="button" value="按钮1"/>
    <input type="button" value="按钮2"/>
    <input type="button" value="按钮3"/>

    <script>
        window.onload=function(){
            var oBtn=document.getElementsByTagName('input');

            // for(var i=0;i<oBtn.length;i++){
            //     oBtn[i].onclick=function(){
            //         alert(i);//3次3
            //     }
            // }

            // 传统解决方法：利用匿名函数的作用域-闭包
            // for(var i=0;i<oBtn.length;i++){
            //     (function(i){
            //             oBtn[i].onclick=function(){
            //                 alert(i);//1、2、3
            //             }
            //     })(i);
            // }
            
            // ES6解决方法：let的块级作用域
            for(let i=0;i<oBtn.length;i++){
                oBtn[i].onclick=function(){
                    alert(i);//1、2、3
                } 
            }
        }
    </script>
</body>
</html>

箭头函数

  • 1.function省略改为箭头函数
  • 2.如果只有一个参数：() 可以省略
  • 3.如果只有一个return语句 {} 可以省略 注： 箭头函数只是对原有的简写模式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>箭头函数</title>
</head>
<body>
    <!-- 箭头函数只是对原有的简写模式：
    1.function省略改为箭头函数
    2.如果只有一个参数：() 可以省略
    3.如果只有一个return语句 {} 可以省略 -->
    
    <script>
        // let show =function (a,b){
        //     console.log(a+b);
        // }

        //1.箭头函数的写法
        let show = (a,b)=>{
            console.log(a+b);
        }
        show(1,2);

        let arr=[5,6,2,4,8,9,7,];
        arr.sort((a,b)=>{return a-b});
        console.log(arr);
        //3.如果只有一个return语句 {} 可以省略
        arr.sort((a,b)=>a-b);
        console.log(arr);
        //2.如果只有一个参数：() 可以省略
        let c=a => a*2
        console.log(c(22));
    </script>
</body>
</html>

参数扩展

  • 1.参数的展开（…展开符的运用）和扩展
  • 2.默认参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数的参数</title>
</head>
<body>
    <!-- 函数的参数：
    1.参数的展开（...展开符的运用）和扩展
    2.默认参数 -->

    <script>
        //参数的扩展 
        //1.手机剩余的参数 rest parameter 必须是最后一个参数
        function show(a,...args){
            console.log(a);
            console.log(args);
        }
        let a=[1,1,2,3,4,5];
        show(1,1,2,3,4,5);

        //2.  '...'是展开符 展开数组let a=[1,2,3]; ...a==> 1,2,3 结合[...new Set(a)]数组去重

        show(...a);

        //数组去重 基本类型和引用类型均可
        let b=[...new Set(a)]
        console.log(b);

        //2.默认参数:默认参数不传取默认值，传值则覆盖
        function c(a,b=5,c=10){
            console.log(a,b,c);
        }
        c(99);
        c(99,88,77);
    </script>
</body>
</html>

解构赋值

  • 1.左右两边结构一样
  • 2.右边必须是一个东西(数组、对象等)
  • 3.声明和赋值不能分开（必须在一句话里完成）let {a,b}; {a,b}={a:1,b:2} ==> 报错 原因：解构赋值专门写法 不能分开写 注意:对象属性赋值时 赋值的变量名和属性名相同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解构赋值</title>
</head>
<body>
    <!-- 解构赋值：
    1.左右两边结构一样
    2.右边必须是一个东西(数组、对象等)
    3.声明和赋值不能分开（必须在一句话里完成）let {a,b}; {a,b}={a:1,b:2} ==> 报错 原因：解构赋值专门写法 不能分开写
    4.注意:对象属性赋值时 赋值的变量名和属性名相同 -->

    <script>
        //传统赋值
        let arr=[1,2,3];
        let a=arr[0];
        let b=arr[1];
        let c=arr[2];
        console.log(a,b,c);

        //结构赋值
        let [d,e,f]=[1,2,3];
        console.log(a,b,c);

        let {g,h,i}={g:4,h:5,i:6};
        console.log(g,h,i);

        //粒度随意 两边结构对应
        // let [{attr1,attr2},[n1,n2,n3],num,str]=[{attr1:1,attr2:2},[3,4,5],6,'7']
        // console.log(attr1,attr2,n1,n2,n3,num,str);

        let [json,arr1,num,str]=[{attr1:1,attr2:2},[3,4,5],6,'7'];
        console.log(json,arr1,num,str);
    </script>
</body>
</html>

数组方法

ES6数组：4个新增方法

  • 1.map 映射 1个对1个
  • 2.reduce 汇总 1堆出来一个
  • 3.filter 过滤器 筛选对应条件结果
  • 4.forEach 迭代(循环) 遍历数组操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组</title>
</head>
<body>
    <!-- ES6数组：4个新增方法
    1.map       映射               1个对1个
    2.reduce    汇总               1堆出来一个
    3.filter    过滤器
    4.forEach   迭代（循环） -->


    <script>
        //1.map
        let score=[12,60,58,99,90,0];

        let res1=score.map(item => item>=60?'及格':'不及格');
        console.log(res1);

        //2.reduce
        let num=[1,10,100,1000];
        //temp临时处理结果 item当前数组元素 index操作索引
        //利用reduce求和
        let res2=num.reduce((temp,item,index)=> temp+item);
        //利用reduce求平均数
        let res3=num.reduce((temp,item,index)=>{
            if(index!=num.length-1){
                return temp+item;
            }else{
                return (temp+item)/(index+1);
            }
           
        });

        console.log(res2);
        console.log(res3);

        // 3.filter  
        let res4=score.filter(item => item>=60)
        console.log(res4);

        //forEach   迭代（循环）
        let res5=score.forEach((item)=>{alert(item+1)});
    </script>
</body>
</html>

字符串

  • 新增字符串方法：1.startsWith()/endsWith()
  • 字符串模板： 反单引号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串</title>
</head>
<body>

    <!-- 新增字符串方法：1.startsWith()/endsWith() -->


    <script>
        //新增字符串方法
        let str="abcdefghijk";
        console.log(str.startsWith('abc'));//true
        console.log(str.endsWith('ijk'));//true

        //字符串模板语法：
        let a='7';
        let b=`abc${a}def`;
        console.log(b);

        let html='';
        html =  `<div>
                    <h3>I bought an iphone ${a}</h3> // 在模板界面中引用变量
                </div>`
        console.log(html);


    </script>
</body>
</html>

JSON

字符串和JSON之间的互相转换

  • 1.字符串转json-JSON.parse(str)
  • 2.json转字符串-JSON.stringify(json)
  • 3.简写（key和velue一样的时候留一个）/(对象中的方法fn：function(){} -> fn(){})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON</title>
</head>
<body>

    <!-- 1.json转字符串-JSON.stringify(json)
    2.字符串转json-JSON.parse(str) -->

    <script>
        //1.json转字符串-JSON.stringify(json)
        let json2='{"a":12,"b":5}';
        let str2=JSON.stringify(json2));
        console.log(str2,encodeURIComponent(str2));

        //2.字符串转json-JSON.parse(str)
        let str1='{"a":12,"b":5}';
        let json1=JSON.parse(str1);
        console.log(json1);

        //3.简写
        let a='1';
        let b='2';
        function c(){
            console.log('key-value一致简写')
        }

        let obj={
            a,
            b,
            c,
            d(){
                console.log('方法简写')
            }
        }

        console.log(obj);
    </script>
</body>
</html>

面向对象

  • ES5面向对象：支持弱
    1. 类和构造函数不分
    2. 继承 call/原型指向父类的实例化对象/构造函数指向自身
  • ES6面向对象：类似Java的方式
    1. 关键字class实现，constructor构造器
    2. 继承 extends关键字 constructor/super()继承父类的属性方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象</title>
</head>
<body>

    <!-- ES5面向对象：支持弱
        1.类和构造函数不分
        2.继承 call/原型指向父类的实例化对象/构造函数指向自身
    ES6面向对象：类似Java的方式
        1.关键字class实现，constructor构造器
        2.继承 extends关键字 constructor/super()继承父类的属性方法 -->
    <script>
        // ES5面向对象实现 支持较弱
        function User(name,password){
            this.name=name;
            this.password=password;
        }
        //ES5：在原型上加方法
        User.prototype.showName=function(){
            console.log(this.name);
        }
        User.prototype.showPassword=function(){
            console.log(this.password);
        }

        var user1=new User('张三','123456');
        user1.showName();
        user1.showPassword();

        //ES5继承实现：无直接继承方法 call实现
        function VipUser(name,password,level){
            User.call(this,name,password);
            this.level=level;
        }
        //子类的原型指向父类的实例化对象
        VipUser.prototype=new User();
        //子类的构造器指向自身
        VipUser.prototype.constructor=VipUser;
        
        //挂载自己的方法
        VipUser.prototype.showLevel=function(){
            console.log(this.level);
        }

        var user3=new VipUser('小张三','123456',12);
        user3.showName();
        user3.showPassword();
        user3.showLevel();

        //ES6面向对象实现 类似java语言
        class ES6User{
            constructor(name,password){
                this.name=name;
                this.password=password;
            }

            showName(){
                console.log(this.name);
            }

            showPassword(){
                console.log(this.password);
            }
        }

        let user2=new ES6User('李四','654321');
        user2.showName();
        user2. showPassword();

        //ES6继承实现：extends
        class ES6VipUser extends ES6User{
            constructor(name,password,level){
                super(name,password);
                this.level=level;
            }

            showLevel(){
                console.log(this.level);
            }
        }

        let user4=new ES6VipUser('小李四','654321',10);
        user4.showName();
        user4. showPassword();
        user4.showLevel();
        
    </script>
</body>
</html>

promise

用來解決异步操作的无穷回调问题

  • 消除异步操作-用同步的方式书写异步代码（本质任然是异步）
  • 用法： 
      let p=new Promise(function(resolve,reject){
      //异步代码
      //resolve --> 成功
      //reject  --> 失败
      $.ajax({url：xxx,dataType:'json',success(data){
          resolve(data)//data-->then()中的res
      },error(err){
         reject(err);//err-->then()中的err
      }})
  });
  p.then(function(res){...},function(err){...})

数据请求过程：

    //传统数据请求模式
    $.ajax({url：xxx,dataType:'json',success(data1){
        $.ajax({url：xxx,dataType:'json',success(data2){
            //do something
        },error(){
            console.log('something worry');
        }})
    },error(){
        console.log('something worry');
    }})

    //Promise实现方式：
    //封装请求数据方法
    function createPromise(url){
        return new Promise(function(resolve,reject){
            $.ajax({url,dataType:'json',success(data){
            //do something
            },error(){
                console.log('something worry');
            }})
        })
        
    }
    Promise.all([
        createPromise(url1),
        createPromise(url2)
    ]).then(function(data){
        let[res1,res2]=data;
        alert('全部请求成功')
    },function(err){
        alert('至少一个请求失败')
    })

    //Jquery实现方式：jquery.js-高版本支持
    //$.ajax()--> 返回的是一个Promise对象
    Promise.all([
        $.ajax({url:url1,dataType:'json'}),
        $.ajax({url:url2,dataType:'json'})
    ]).then(data=>{
        let[res1,res2]=data;
        alert('全部请求成功')
    },err=>{}{
        alert('至少一个请求失败');
    })
  • Promise.rece()–竞速
    Promise.rece([
        $.ajax({url:url1,dataType:'json'}),
        $.ajax({url:url2,dataType:'json'}),
        $.ajax({url:url3,dataType:'json'}),
        $.ajax({url:url4,dataType:'json'})
    ])
    //向服务器发出多个请求 哪个先读取下来就用哪个
  • Promise 存在的问题（适用场景）–一次读取多个数据（不涉及逻辑）

generator 生成器–对Promise的封装

  1. generator是什么？
  2. generator怎么用？
  3. generator应用场景