美文网首页JavaScript 进阶营Web 前端开发
第一章:ES6详解(变量,函数-箭头函数-参数,解构赋值....

第一章:ES6详解(变量,函数-箭头函数-参数,解构赋值....

作者: 这个超人不会飞阿 | 来源:发表于2018-06-14 16:23 被阅读23次
    程序员也可以有艺术人生,大家好我是超人不会飞.

    先看下基本的版本
    ES历史版本


    image.png

    兼容性
    http://kangax.github.io/compat-tablees5/
    http://kangax.github.io/compat-tablees6/

    ES6(ES2015) : 不用编译就可以运行ES66语法的浏览器 IE10+ Chrom FF 移动端 NodeJS

    因此为了兼容老版本的浏览器,我们可以使用babel去提前编译.

    编译,转换

    1. 在线转换(麻烦,用户每次点击就会去编译一次)
    2. 提前编译

    babel==browser.js 是同义词.

    简单的小demo(在线编译,效率慢)


    image.png

    ES6
    1.变量
    2.函数
    3.数组
    4.字符串
    5.面向对象
    6.Promise
    7.generator 将同步操作拆成异步操作 事实上generator是对Promise的封装
    8.模块化

    变量
    var 问题
    1.可以重复声明
    2.无法限制修改
    3.没有块级作用域 {} if(){}else{}

    解决var的问题.
    因此在ES6


    image.png

    块级作用域有什么用?
    1.典型问题

    image.png

    优化

    image.png

    ES6

    image.png

    把项目写出来是容易,最难的是管理这个项目.

    函数
    箭头函数

    ()=>{
    
    }
    

    1如果只有一个参数, ()可以省略
    2.如果只有一个return语句,没有其他语句的情况下,{}可以省略

    函数
    参数
    1.参数的 扩展/展开 大白话就是,我可以将 数组收一起,也可以将数组摊开.
    2.默认参数

    参数的扩展:
    1.收集剩余的参数

    function(a,b,...args){}
    

    *Rest Parameter必须是最后一个
    2.展开数组

    function bin(a,b,c){
        console.log(a,b,c);
    }
    var arr = [1,2,3];
    bin(...arr);
    
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    
    let arr = [...arr1,...arr2];
    console.log(arr);
    

    这一种展开是不支持的

    let a;
    let arr = [1,2,3];
    a = ...arr;
    这样是不支持的.
    

    扩展与展开的结合

    function arr(...args){
            fn(...args);
    }
    
    function fn(a,b){
          console.log(a,b);
    }
    
    arr(1,2);
    

    默认参数

    function arr(a,b=77,c=99){
            console.log(a,b,c);
    }
    
    arr(1);
    arr(1,2);
    arr(1,2,3);
    结果:
    > 1 77 99
    > 1 2 99
    > 1 2 3
    

    解构赋值
    解构就是把东西拆开
    1.左右两边结构必须一样.
    2.右边必须是个东西
    3.声明和赋值不能分开(必须在一句话里面)

    let arr = [1,2,3]
    let[a,b,c] = [...arr] //左边是数组,右边是数组
    console.log(a,b,c)
    
    let arr = {a:1,b:2,c:3};
    let {a,b,c} = {...arr} //左边是json 右边是json
    console.log(a,b,c)
    
    image.png image.png

    特别注意:下面这个会报错,因为要符合右边是个东西

    let [a,b] = {1,2};
    console.log(a,b);
    

    上面的代码, {1,2} 上面都不是,不是数组也不是json,也不是对象............

    另外要符合声明和赋值不能分开,如代码就不对

    let [a,b];
    [a,b] = [1,2];
    

    数组
    主要是多了4个方法,这4分方法是非常好用的.
    map --映射 一个对一个 我给你10个东西你给我返回10个东西
    reduce --汇总
    filter --过滤
    forEach -- 循环

    map

    let arr = [1,2,3];
    let result = arr.map(item=>item*2);
    console.log(result);
    结果
    > Array [2, 4, 6]
    
    let arr = [60,45,99];
    let result = arr.map(item=>item>=50?'及格':'不及格');
    console.log(result);
    结果
    > Array ["及格", "不及格", "及格"]
    

    reduce
    汇总 一堆出来一个
    求和

    let arr = [60,45,99];
    let result = arr.reduce(function(temp,item,index){
        return temp + item;
    });
    console.log(result);
    结果
    204
    

    求平均

    let arr = [60,45,99];
    let result = arr.reduce(function(temp,item,index){
        if(arr.length-1==index){
            return (temp+item)/arr.length;
        }
        return temp + item;
    });
    console.log(result);
    结果
    68
    

    filter

    let arr = [60,45,99];
    let result = arr.filter(item=>item>50?true:false);
    console.log(result);
    结果
    > Array [60, 99]
    
    let arr = [{name:'a',price:1000},{name:'b',price:20000},{name:'c',price:50}];
    let result = arr.filter(item=>item.price<60);
    console.log(result);
    结果
    > Array [Object { name: "c", price: 50 }]
    

    forEach 和for循环是一样的.就是写法简单了一点.

    let arr = [60,45,99];
    arr.forEach((item,index)=>{
        console.log(index+ ':' + item)
    })
    

    字符串
    1.有2的新的方法 startsWith endsWith
    2.字符串模板

    startsWith(应用场所)

    function withWho(str) {
        if(str.startsWith('http://')){
            console.log('开始为http')
        }else if(str.startsWith('https://')){
            console.log('开始为https');    
        }else {
            console.log('其他类型');
        }
    }
    withWho('http://a.com');
    withWho('ht//a.com');
    结果
    > "开始为http"
    > "其他类型"
    

    endsWith(应用场所)


    image.png

    字符串模板
    使用的是'' ` '' 返单引号

    i: 直接将东西塞到字符串里面
    ii:可以折行

    let a = 99;
    let str = `这是字符串模板${a}`;
    console.log(str)
    结果
    > "这是字符串模板99"
    

    ES6面向对象-基础
    1.class关键字
    2.class里面直接加方法

    ES6之前面向对象的写法

    function User(name,age){
        this.name = name;
        this.age = age;
    }
    
    User.prototype.sayName = function(){
        console.log(this.name);
    }
    User.prototype.sayAge = function() {
        console.log(this.age);
    }
    
    u1 = new User('bin',23);
    u1.sayName();
    u1.sayAge();
    结果
    > "bin"
    > 23
    

    新版ES6的出来使对象更像java,因为出现了class

    class User{
        constructor(name,age){
          this.name = name;
          this.age = age;    
        }
        sayName(){
            console.log(this.name);
        }
        sayAge(){
            console.log(this.age);
        }
    }
    u1 = new User('bin',23);
    u1.sayName();
    u1.sayAge();
    结果
    > "bin"
    > 23
    

    旧的继承的写法

    function User(name,age) {
        this.name = name;
        this.age = age;
    }
    User.prototype.sayName = function(){
        console.log(this.name);
    }
    User.prototype.sayAge = function(){
        console.log(this.age);
    }
    
    function VIPUser(name,age,level) {
        User.call(this,name,age);
        this.level = level;
    }
    
    VIPUser.prototype = new User();
    VIPUser.prototype.constructor = VIPUser;
    
    VIPUser.prototype.sayLevel = function(){
        console.log(this.level);
    }
    
    u1 = new VIPUser('bin',23,3);
    u1.sayName();
    u1.sayAge();
    u1.sayLevel();
    结果
    > "bin"
    > 23
    > 3
    

    新的ES6的继承的写法
    super 叫做 超类(父类)
    super() 就是在执行超类(父类)的构造函数;

    class User{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            console.log(this.name);
        }
        sayAge () {
            console.log(this.age);
        }
    }
    
    class VIPUser extends User {
        constructor(name,age,level){
          super(name,age);//执行超类的构造函数.
          this.level = level;
        }
        sayLevel(){
            console.log(this.level);
        }
    }
    
    var u1 = new VIPUser('superman',23,3);
    u1.sayName();
    u1.sayAge();
    u1.sayLevel();
    结果
    > "superman"
    > 23
    > 3
    

    面向对象-实例
    即应用

    面向对象应用-React
    React是强依赖ES6的面向对象的.
    React
    1.组件化
    2.JSX
    JSX==babel==browser.js


    基本依赖

    可以去看看我的React基础开发.

    下一篇是ES6 json Promise generator ES6总结.
    谢谢您的支持.

    相关文章

      网友评论

        本文标题:第一章:ES6详解(变量,函数-箭头函数-参数,解构赋值....

        本文链接:https://www.haomeiwen.com/subject/pgyeeftx.html