ES6学习

今天药忘吃喽~ 2022-01-23 02:07 289阅读 0赞

# 前言 #

ES6：

EMCAScript(ECMA、ES)标准

JavaScript是EMCAScript的一种

\--------------------------------------------------------------------------------

JS特别特别烂

\--------------------------------------------------------------------------------

ES6新语法：  
1.变量/赋值  
  var     可以重复定义、不能限制修改、没有块级作用域

let     不能重复定义、变量、块级作用域  
  const   不能重复定义、常量、块级作用域

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

解构赋值：  
  1.左右两边必须一样；右边得是个东西  
  2.必须定义和赋值同步完成

2.函数  
  箭头函数  
    function (参数,参数)\{  
      函数体  
    \}

(参数,参数)=>\{  
      函数体  
    \}

1.如果有且仅有1个参数，()可以省  
    2.如果函数体只有一句话，而且是return，\{\}可以省  
    \*关于this

默认参数  
    (a=xx, b=xx, c=xx)

参数展开(剩余参数、数组展开)  
  1.“三个点”的第1个用途：接收剩余参数  
    function show(a, b, ...名字)  
    剩余参数必须在参数列表的最后

2.“三个点”的第2个用途：展开一个数组

3.数组/json  
  数组——5种  
    map     映射：一个对一个  
      \[18, 67, 98, 25, 17, 96\] => \[false, true, true, false, false, true\]

reduce  汇总：一堆->一个

filter  过滤：  
      \[12,5,88,37,21,91,17,24\]

forEach 遍历：

Array.from(\[array-like\])=>\[x,x,x\]

json——2变化  
    1.简写：名字和值一样的，可以省  
    2.function可以不写

4.字符串  
  字符串模板：植入变量、任意折行

if(sNum.startsWith('135'))\{  
    alert('移动');  
  \}else\{  
    alert('联通');  
  \}

if(filename.endsWith('.txt'))\{  
    alert('文本文件');  
  \}else\{  
    alert('图片文件');  
  \}

5.面向对象  
  class/constructor  
  extends/super

普通函数：根据调用我的人  this老变  
  箭头函数：根据所在的环境  this恒定

bind——给函数定死一个this

function show(a,b,...args)\{

def show(a,b,\*args,c,d):  
  pass

\--------------------------------------------------------------------------------

6.Promise  
  Promise——异步、同步化

7.generator  
  生成器

ES7  
8.async/await

\--------------------------------------------------------------------------------

9.模块化 ES6

打包、编译

ES6 -> ES5编译      babel  
打包                browserify

\--------------------------------------------------------------------------------

ajax/jsonp  
websocket

\--------------------------------------------------------------------------------

变量预解析

# 0.变量提升 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        var a=12;
    
        function show(){
          alert(a);
    
          var a=5;
        }
    
        show();
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 1.变量定义     #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        const a=12;
    
        a=55;
    
        alert(a);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        if(3<5){
          let a=12;
        }
    
        alert(a);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        window.onload=function (){
          let aBtn=document.getElementsByTagName('input');
    
          for(let i=0;i<aBtn.length;i++){
            aBtn[i].onclick=function (){
              alert(i);
            };
          }
        };
        </script>
      </head>
      <body>
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
      </body>
    </html>

# 2.参数展开 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function show(a, b=5, c=12){
          console.log(a,b,c);
        }
    
        show(12, 37, 88);
        </script>
      </head>
      <body>
      </body>
    </html>

## 2.1处理DIV ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
          div {width:200px; height:200px; background:#CCC; float:left; margin:10px;}
        </style>
        <script>
        window.onload=function (){
          let aDiv=document.getElementsByTagName('div');
    
          Array.from(aDiv).forEach(div=>{
            div.style.background='yellow';
          });
        };
        </script>
      </head>
      <body>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
      </body>
    </html>

# 3.传统JS对象 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function Person(name, age){
          this.name=name;
          this.age=age;
        }
    
        Person.prototype.showName=function (){
          alert('我叫'+this.name);
        };
        Person.prototype.showAge=function (){
          alert('我'+this.age+'岁');
        };
    
        //------------------------------------------------
        function Worker(name, age, job){
          Person.call(this, name, age);
          this.job=job;
        }
    
        Worker.prototype=new Person();
        Worker.prototype.constructor=Worker;
        Worker.prototype.showJob=function (){
          alert('我是做：'+this.job);
        };
    
        let w=new Worker('blue', 18, '打杂的');
    
        w.showName();
        w.showAge();
        w.showJob();
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        /*function Person(name, age){
          this.name=name;
          this.age=age;
        }
    
        Person.prototype.showName=function (){
          alert('我叫'+this.name);
        };
        Person.prototype.showAge=function (){
          alert('我'+this.age+'岁');
        };*/
    
        class Person{
          constructor(name, age){
            this.name=name;
            this.age=age;
          }
    
          showName(){
            alert('我叫'+this.name);
          }
          showAge(){
            alert('我'+this.age+'岁');
          }
        }
    
        let p=new Person('blue', 18);
    
        p.showName();
        p.showAge();
    
        //------------------------------------------------
        function Worker(name, age, job){
          Person.call(this, name, age);
          this.job=job;
        }
    
        Worker.prototype=new Person();
        Worker.prototype.constructor=Worker;
        Worker.prototype.showJob=function (){
          alert('我是做：'+this.job);
        };
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        /*function Person(name, age){
          this.name=name;
          this.age=age;
        }
    
        Person.prototype.showName=function (){
          alert('我叫'+this.name);
        };
        Person.prototype.showAge=function (){
          alert('我'+this.age+'岁');
        };*/
    
        class Person{
          constructor(name, age){
            this.name=name;
            this.age=age;
          }
    
          showName(){
            alert('我叫'+this.name);
          }
          showAge(){
            alert('我'+this.age+'岁');
          }
        }
    
        /*let p=new Person('blue', 18);
    
        p.showName();
        p.showAge();*/
    
        //------------------------------------------------
        /*function Worker(name, age, job){
          Person.call(this, name, age);
          this.job=job;
        }
    
        Worker.prototype=new Person();
        Worker.prototype.constructor=Worker;
        Worker.prototype.showJob=function (){
          alert('我是做：'+this.job);
        };*/
    
        class Worker extends Person{
          constructor(name, age, job){
            //super-超类(父类)
            super(name, age);
            this.job=job;
          }
    
          showJob(){
            alert('我是做：'+this.job);
          }
        }
    
        let w=new Worker('blue', 18, '打杂的');
    
        w.showName();
        w.showAge();
        w.showJob();
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        class Person{
          constructor(name, age){
            this.name=name;
            this.age=age;
          }
    
          showName(){
            alert(this);
            alert('我叫'+this.name);
          }
          showAge(){
            alert('我'+this.age+'岁');
          }
        }
    
    
    
    
        let p=new Person('blue', 18);
    
        document.onclick=p.showName.bind(p);
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 4.箭头函数 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let show=(a,b)=>{
          return a+b;
        };
    
        alert(show(12, 5));
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        window.onload=()=>{
          alert('abc');
        };
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,34,32,19];
    
        /*arr.sort(function (n1, n2){
          return n1-n2;
        });*/
        arr.sort((n1, n2)=>{
          return n1-n2;
        });
    
        alert(arr);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,34,32,19];
    
        arr.sort((n1, n2)=>n1-n2);
    
        alert(arr);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        /*let show=function (a){
          return a*3;
        };*/
        let show=a=>a*3;
    
        alert(show(13));
        </script>
      </head>
      <body>
      </body>
    </html>

## 4.1箭头函数的this ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[1,2,3];
    
        arr.a=()=>{
          alert(this);
        };
    
        arr.a();
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        document.onclick=function (){
          let arr=[1,2,3];
    
          arr.a=()=>{
            alert(this);
          };
    
          arr.a();
        };
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        document.onclick=function (){
          let a=()=>{
            alert(this);
          };
    
          let oBtn=document.getElementById('btn1');
          oBtn.onclick=a.bind(12);
        };
        </script>
      </head>
      <body>
        <input type="button" value="aaa" id="btn1">
      </body>
    </html>

# 5.解构赋值 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        //let [a,b,c]=[12,5,8];
        //let {a,b,c}={a: 12, b: 88, c: 95};
    
        //粒度
        let [n1, {a, b, c}, n2]=[12, {a: {n1: 5, n2: 8}, b: 12, c: 88}, 55];
    
        console.log(n1,a,b,c,n2);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        //let [a,b]={a: 12, b: 5};
        let {a,b}={12,5};
    
        console.log(a, b);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let {a,b};
    
        {a,b}={a: 12, b: 5};
    
        alert(a+','+b);
        </script>
      </head>
      <body>
      </body>
    </html>

# 6.、默认参数 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function show(a, b, c){
          b=b||5;
          c=c||12;
    
          console.log(a,b,c);
        }
    
        show(12, 37);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,8,99];
    
        //...arr    =>    12,5,8,99
    
        let arr2=[1,2,...arr,7,8];
    
        alert(arr2);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,8,99];
        let arr2=[...arr, ...arr];
    
        alert(arr2);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[1,2,3];
        let arr2=[4,5,6,7];
    
        arr.push(...arr2);
    
        alert(arr);
        </script>
      </head>
      <body>
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function show1(...args){
          show2(...args);
        }
    
        function show2(a, b){
          alert(a+','+b);
        }
    
        show1(12, 5);
        </script>
      </head>
      <body>
      </body>
    </html>

# 7展开数组 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function show(a, b, ...args){
          console.log(a,b,args);
        }
    
        show(12, 37, 88, 99, 123, 56);
        </script>
      </head>
      <body>
      </body>
    </html>

# 8字符串模板 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let json={name: 'blue', age: 18};
    
        //alert('我叫：'+json.name+'，我今年'+json.age+'岁');
        alert(`我叫：${json.name}，我今年${json.age}岁`);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        const a=12;
    
        console.log(`${a?a:'1'}`);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        /*alert('ab\
        c');*/
    
        alert(`ab
    cde
    f
    d`);
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 9.filter #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,37,21,91,17,24];
    
        let arr2=arr.filter(item=>item%2);
    
        alert(arr2);
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 10.forEach #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,37,21,91,17,24];
    
        let sum=0;
        arr.forEach(item=>{
          sum+=item;
        });
    
        alert(sum);
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 11.function的bind #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        function show(){
          alert(`this是：${this}`);
        }
    
        document.onclick=show.bind('abc');
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 12.json-简写 #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let a=12;
        let b=5;
    
        let json={a, b};
    
        console.log(json);
        </script>
      </head>
      <body>
    
      </body>
    </html>

## 12.1.json-省略function ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        /*let json={
          a: 12,
          b: 5,
          show: function (){
            alert(this.a+this.b);
          }
        };*/
        let json={
          a: 12,
          b: 5,
          show(){
            alert(this.a+this.b);
          }
        };
    
        json.show();
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 13.map #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[62, 55, 82, 37, 26];
    
        let arr2=arr.map(function (item){
          if(item>=60){
            return true;
          }else{
            return false;
          }
        });
    
        alert(arr2);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[62, 55, 82, 37, 26];
    
        let arr2=arr.map((item)=>{
          if(item>=60){
            return true;
          }else{
            return false;
          }
        });
    
        alert(arr2);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[62, 55, 82, 37, 26];
    
        let arr2=arr.map(item=>{
          if(item>=60){
            return true;
          }else{
            return false;
          }
        });
    
        alert(arr2);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[62, 55, 82, 37, 26];
    
        let arr2=arr.map(item=>item>=60);
    
        alert(arr2);
        </script>
      </head>
      <body>
    
      </body>
    </html>

# 14.reduce #

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,37,21,91,17,24];
    
        let sum=arr.reduce((tmp,item,index)=>{
          console.log(tmp, item, index);
    
          return tmp+item;
        });
    
        console.log(sum);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,37,21,91,17,24];
    
        let sum=arr.reduce((tmp,item,index)=>{
          return tmp+item;
        });
    
        console.log(sum/arr.length);
        </script>
      </head>
      <body>
    
      </body>
    </html>

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        let arr=[12,5,88,37,21,91,17,24];
    
        let ave=arr.reduce((tmp,item,index)=>{
          if(index<arr.length-1){
            return tmp+item;
          }else{    //最后一次迭代
            return (tmp+item)/arr.length;
          }
        });
    
        console.log(ave);
        </script>
      </head>
      <body>
    
      </body>
    </html>