ES6全面讲解

时间 2020-04-05

标签 es6 全面讲解栏目 JavaScript 繁體版

原文原文链接

写在以前.讲解了比较经常使用的ES6知识点,能够快速的入门.有两个比较复杂的知识点(promise,generator)则是留在了其余文章中,在里面详细讲解.javascript

介绍

1.历史css

1.ECMAScript历史html

在上个世纪全部的浏览器都采用本身的编码标准，史称浏览器战争。各大浏览器厂商相互用本身手中的技术对对方进行技术限制，争取市场份额。java

这也是为何今天不少代码要搞适配的缘由。react

ECMAScript做为一个统一的标准应运而生，结束了这场战争。jquery

有兴趣的能够看看这个:es6

ECMAScript 的发展历史ajax

而咱们今天的要讲的内容则是则是ECMAScript的第六个版本——ES6。json

你所须要拥有的知识: JavaScript,ES5数组

ES6

1.变量//改进
2.函数//更改
3.数组//数组改进
4.字符串//改进
5.面向对象//改进
6.Promise//增长
7.generator//增长
8.模块化//增长

简单

变量

js的缺点

能够重复声明

<script>
    var a=5;
    var a=12;
    alert(a);//返回12
</script>

没法限制修改

/*
好比常量PI
*/

没有块级做用域<>

{
//一对括号包起来的语法块
int a=10;
}//java的话a出去就用不了

{
        var a = 12;
}//js就一点问题没有
    alert(a);

ES6的改进

let不能重复声明,变量-能够修改,块做用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tite</title>
</head>
<body>
</body>
<script>
   let a=12;
   let a=5;
   alert(a);//报错,不能重复声明
</script>
</html>

const不能重复声明,且为常量-不能修改,块做用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tite</title>
</head>
<body>

</body>
<script>
    const a=12;
     const a=5;//这也会报错,由于不能重复声明
    a=5;//常量不能修改,爆错.
   alert(a);
</script>
</html>

块级做用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tite</title>
</head>
<body>

</body>
<script>
    if(true) {
        var  b=10;
        let a = 12;
        const c=13;
    };
    alert(b);//成功,弹出窗口
   alert(a);//失败,显示未定义
    alert(c);//失败,显示未定义
</script>
</html>

能够解决的问题

块级做用域的用处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tite</title>
</head>
<body>
<input type="button">
<input type="button">
<input type="button">
</body>
<script>
    var aBtn=document.getElementsByTagName('input');
    for (var i = 0; i <aBtn.length ; i++) {
        aBtn[i].onclick=function () {//注意这个只是注册函数.调用函数的时候for已经循环完毕了,i的值已经为3了.
            alert(i);//依次按动三个按钮按出来的数据是3,3,3而不是1,2,3
        }//由于没有块级做用域,因此i就至关于java中的全局变量
    }
</script>
</html>

有块级做用域的java

public class test {
    public static void main(String[] args) {

int i=1;//没有块级做用域的js变量(var),相似于java中的这个变量.做用域为整个函数
        for ( i = 1; i < 3; i++) {
         //注意,
            System.out.println(i);//1,2,3
        }
        //模拟按钮的三次按动--伪装有这个功能
        System.out.println(i);//3
         System.out.println(i);//3
         System.out.println(i);//3
    }
}

如今咱们用闭包解决这个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tite</title>
</head>
<body>
<input type="button">
<input type="button">
<input type="button">
</body>
<script>
    //若是看不懂也不要紧,这个不影响大局
    var aBtn=document.getElementsByTagName('input');
    for (var i = 1; i <=aBtn.length ; i++) {
        (function (i) {
            aBtn[i].onclick = function () {
                alert(i);
            };
        })(i);//输出的内容就是1,2,3了
    }
</script>
</html>

而使用let就只用不多的一点

var aBtn=document.getElementsByTagName('input');
    for (let i = 0; i <aBtn.length ; i++) {
        aBtn[i].onclick = function () {
            alert(i);
        }
        // (function (i) {
        //     aBtn[i].onclick = function () {
        //         alert(i);
        //     };//由于没有块级做用域,因此i就至关于java中的全局变量
        // })(i);
    }

函数

声明改进

箭头函数

实际上你们大能够将这个内容当作一个简写,用=>符号代替function.

你能够一直不用......不影响大局

有两个特性:

1.若是只有一个参数,()能够省
2.若是只有一个return,{}能够省

实例1:

=>代替function()

<script>
  window.onload= function show() {
      alert("aab");
    };//正常js
    window.onload=()=>{
        alert("aab");
    };//ES6
show();//显示aab;
</script>

实例2:

=>代替function()

//匿名函数
let show=function () {
        alert("abc"); 
 }//实际上上这两个function不能同时出现
    let show=()=>{
        alert("abc");
    }
    show();

实例3

(a,b)=>代替function(a,b)

let show=function (a,b) {
        alert(a+b);
    }
    let show= (a,b)=> {
        alert(a+b);
    }
    shows(8,8);

实例4:

数组排序

let arr=[12,9,5,1,2];
    arr.sort((a,b)=> {
        return a-b;
    });
    alert(arr);

实例5:

两个特性

let show=function (a) {
        return a*2;
    }//普通js
    alert(show(12));
    let show=a=>{
        return a*12;
    }//特性1:若是只有一个参数,()能够省
    let show=a=>a*12;//加入特性2:若是只有一个return,{}能够省
    alert(show(12));

参数改进

参数扩展

args其实是一个数组,为了知足传入不定数量的参数而存在.

<script>
    function show(a,b, ...args) {
        //args参数必须是最后一个形参
        alert(a);
        alert(b);
        alert(args);
    }
    show(1,2,3,4,5)//先跳一个1,再跳一个2,再跳一个3,4,5
</script>

展开数组

...arr

    let arr=[1,2,3];
    let arr2=[3,4,5];
    let arr3=[...arr,...arr2];
//这就是数组展开
//只要是带逗号的就能够用这个
    alert(arr3);//弹出1,2,3,3,4,5

实例1

function show(...args) {
        fn(...args);
    }
    function fn(a,b) {
        alert(a+b);
    }//弹出17
    show(12,5);

默认参数

function show(a,b=5,c=12) {//这就是默认参数的改进方法
        console.log(a,b,c);
    }
    show(99);//输出99,5,12

解构赋值

必须作到的要求:
1.左边右边结构必须同样
2.右边必须是个东西
3.解构赋值不能分开

let arr=[1,2,3];
    let a=arr[0];
     let b=arr[1];
    let c=arr[2];
console.log(a,b,c)//1,2,3
//二者是一摸同样的做用
    let [a,b,c]=[1,2,3];//结构赋值
console.log(a,b,c)//1,2,3

1.左边右边必须结构同样

let {a,b,c}={"a":12,"b":5,"c":6};//左边是json右边也要是json
let [json,[n1,n2,n3],num,str]=[{a:12,b:13,c:12},[12,5,8],8,"hello world"];//混合赋值
//json,数组,数字,字符串          //json           数组    数字   字符串
    let [a,b]={"a":12,"c":13};//这个报错,由于左边是数组右边是json
 console.log(json,n1,n2,n3,num,str);//{a: 12, b: 13, c: 12} 12 5 8 8 "hello world"

2.右边必须是个东西

这个比较简单,其实就是说你赋值的内容必须符合语法规则.不能瞎赋

3.解构赋值不能分开

let c;
c=10;//这个能够,

let [a,b]//必错!
    [a,b]=[12,5];//解构赋值必须连在一块儿,不能分开

console.log(a,b);

数组

1.map    映射   一个对一个		进来多少,出来多少
[12,58,99,86,45]   
   映射
[不及格,不及格,优秀,良好,不及格]
------------------------------------------------------------------------------
2.reduce 汇总
算个总数
[12,800000,5999999] => ******(懒得算了)
算个平均数
[1,2,3]  =>  2
---------------------------------------------------------------------------
filter 过滤器
forEach 循环(迭代)

map

let arr=[1,2,3];
let result=arr.map(function (item) {
   return item*2;
});//每一个arr中的数都会做为参数到这个函数中走一遭

alert(result);//弹出2,4,6

复习一下上面学过的=>知识

let arr=[1,2,3];
//1.若是只有一个参数,()能够省
//2.若是只有一个return,{},return能够省
let result=arr.map((item)=>item*2) ;//每一个arr中的数都会做为参数到这个函数中走一遭
alert(result);

完成上目标

//将[12,58,99,86,45]   映射   [不及格,不及格,优秀,良好,不及格]
  let score=[12,58,99,86,45]
     var result=score.map(item=>item>=60?"及格":"不及格");
    alert(result);

reduce汇总

let arr=[12,69,180,8763];
   let result= arr.reduce(function (tmp,item,index) {
        //tmp:中间值
        //item:现有元素
        //index:下标
        alert(tmp+","+item+","+index);
        return tmp+item;
    });
 alert(result);//弹出9024

看一下这张图,理解一下.

本质来说就是一个数组中,前两个元素的操做(这里面是加和)获得的值会赋值给tmp而后item的值变为下一个元素(第三个元素)的值而后与tmp再次加和,周而复始.

实例1:算平均值

let result= arr.reduce(function (tmp,item,index) {
        //tmp:中间值
        //item:现有元素
        //index:下标
        alert(tmp+","+item+","+index);
        if(index==arr.length-1){
            return (tmp+item)/arr.length;
        };
        return tmp+item;
    });
   alert(result);

filter过滤器

let arr=[12,3,4,5,6,7,9]
    let result=arr.filter(item=>{
        if (item%3==0) {
            return true;
        }else {
            return false;
        }
    });//每一个元素都被放进返回true的能够被输出,返回false的不会被输出
    alert(result);

用=>简化一下

let arr=[12,3,4,5,6,7,9]
 let result=arr.filter(item=>item%3==0);
 alert(result);

处理JSON相关的问题

let arr=[
        {"title":"男士衬衫","price": 75},
        {"title":"女士衬衫","price": 175},
        {"title":"袜子","price": 75},
    ];
    let result=arr.filter(json=>json.price>100);
    console.log(result);

迭代forEach

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

字符串

1.多了两个新方法
startsWith  以()做为开始
endsWith
2.字符串模板
咱们通常使用字符串链接
字符串模板是对这个方法的一种改进
i.直接把东西塞进字符串里面
ii.能够折行

str.startsWith

let str="http://www.baidu.com";
if (str.startsWith("http://")){
        alert("这是网址");
    }
//弹出这是网址

str.endsWith

let str="1.txt";
    if (str.endsWith("txt")){
        alert("这是文本文件");
    }
//弹出这是文本文件

字符串模板

let a=12;

    let str=`a${a}bc`;
`${a}`//这个就是字符串模板,在${}中的是参数,会根据参数的值来变化
    alert(str);//a12bc

ES6面向对象

ES6面向对象
1.class关键字,构造器和类分开了
2.class里面直接加方法

继承:
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);
    };
   var u1=new User('bule',123);
   u1.showPass();
    u1.showName();

革新后的方法

class User{
    constructor(name,pass){
        this.name=name;
        this.pass=pass;
    }
    showName(){
        alert(this.name);
    }
    showPass(){
        alert(this.pass)
    }
}
    var u1=new User('bule',123);
    u1.showPass();
     u1.showName();

老版的继承

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);//调用父类构造函数(相似于java中的super())
        this.level=level;
    }//构造函数(类)
    vipUser.prototype=new User();
    vipUser.prototype.constructor=vipUser;
    vipUser.prototype.showLevel=function () {
        alert(this.level);
    }
    var vip=new vipUser("blue",123,3);
    vip.showName();//blue
    vip.showPass();//123
    vip.showLevel();//3

新版的继承

function User(name,pass) {
      this.name=name;
      this.pass=pass;
    }
    User.prototype.showName=function () {
        alert(this.name);
    };
    User.prototype.showPass=function () {
        alert(this.pass);
    };
//继承的类
    class vipUser extends User{
        constructor(name,pass,level){
            super(name,pass);
            this.level=level;
        }
        showLevel(){
            alert(this.level);
        }
    }
    var vipUser1 = new vipUser("blue",123,3);
    vipUser1.showLevel();//3
    vipUser1.showName();//123
    vipUser1.showPass();//blue
//其实咱们发现这个更加的像java了.

面向对象应用--React

React --class

1.组件化--class

2.JSX
JS的扩展版
这个暂时不会讲太多,由于主要的应用在React中,能够到React中再看

一个小实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">
    //必需要引进的js库
    </script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
    //必需要引进的js库</script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
    
          <!-- 这个必须这么写 -->
    <script type="text/babel"> 
            
        class Test   extends  React.Component{//组件,也是clas
            constructor(...args){//参数扩展,接到多少给父级多少
                super(...args);
            }
            render(){
                return <span>123</span>;//全部的组件都是可视化的
            }//这个方法必须有
        }
            window.onload=function () {
                let oDiv=document.getElementById("div1");
               ReactDOM.render(<li><Test/></li>,oDiv);
            };

    </script>
</head>
<body>
<div id="div1">

</div>
</body>
</html>

json

1.JSON对象
 JSON.stringify
 JSON.parse
2.简写
  名字跟值同样留一个就行
  方法      能够省略:function这个

<script>
        let a=12;
         let b=5;
        let json={a,b,c:55};//名字和值同样的时候能够直接写一个名字.
            //json={a:12,b:5,c:55}比较相似于这个
        let json={
            a:12,
            show(){
                alert(this.a);
            },//新版写法
            show: function () {
                alert(this.a);
            }//旧版写法
        };
        console.log(json);
    </script>

Promise--承诺

同步：必须等待前面的任务完成，才能继续后面的任务。
异步：不受当前任务的影响。

一个简单的promise demo
说明(arr.txt的文件内容为: [1,2,3,4,575,354] )
要想访问文件时候用localhost

<!DOCTYPE html>
<html lang="en">
<head>
    //数组 [1,2,3,4,575,354] )
    <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>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let p = new Promise(function (resolve,reject) {
            //异步代码
            //resolve 代码成功了
            //reject 代码失败了

            $.ajax({
                url : './arr.txt',
                dataType : 'json',
                success(arr){
                    resolve(arr);
                },
                error(err){
                    reject(err);
                }
            }) 
        })

        //当promise执行有结果的时候就会调用then 接受2个函数做为参数
        p.then(function(){
            alert('成功了.')
        },function(){
            alert('失败了');
        });
    </script>
</head>
<body>
    
</body>
</html>
结果:
成功了.1,2,3,34,77

第二个demo 用到 Promise的all方法

<!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>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let p1 = new Promise(function (resolve,reject) {
            //异步代码
            //resolve 代码成功了
            //reject 代码失败了

            $.ajax({
                url : './arr.txt',
                dataType : 'json',
                success(arr){
                    resolve(arr);
                },
                error(err){
                    reject(err);
                }
            }) 
        })

        let p2 = new Promise(function (resolve, reject) {
            //异步代码
            //resolve 代码成功了
            //reject 代码失败了

            $.ajax({
                url: './arr2.txt',
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                },
                error(err) {
                    reject(err);
                }
            })
        }) 

        //当promise执行有结果的时候就会调用then 接受2个函数做为参数
        Promise.all([
            p1,p2
        ]).then(function(){
            console.log('都成功了');
        },function(){
            console.log('至少有一个成功了');
        });
    </script>
</head>
<body>
    
</body>
</html>
结果
都成功了

generator--生成器

普通函数--一路到底
generator函数--中间能停
走走停停,依靠next进行往下移动.

<script>
    function *show() {
        alert("a");
        yield ;
        alert("b");
    }//generator函数
  let genObj=show();//生成一个generator对象
    console.log(genObj);
    genObj.next();
    genObj.next();

</script>

其实你能够这么理解generator函数其实是以yield为边界将一个函数分红了两个函数.

function show1(){
    alert("a");
}
function show2(){
    alert("b");
}
每次next调用一个

最后两个内容会单开两个文章详细讲解.

若是是刷刷leetcode上面一些内容已经很够了.