美文网首页
ES6的兼容和新特性

ES6的兼容和新特性

作者: 木子川页心 | 来源:发表于2018-09-08 08:17 被阅读458次

    兼容性:IE10+、Chrome、firefox、移动端、Node.js

    编译、转换

    1、在线转换

    2、提前编译

    label==browser.js

    新特性

    1.变量(let const)

    >为什么需要块级作用域

    var :

    1.可以重复声明

    2.无法限制修改

    3.没有块级作用域

    let:

    不能重复声明

    变量--可以修改

    块级作用域

    const:

    不能重复声明

    常量--不可以修改

    块级作用域

    2.函数(箭头函数)

    箭头函数

    1.如果只有一个参数,()可以省略

    2.如果只有一个return,{}可以省略


    函数的参数

    1.参数扩展/展开

    参数扩展:

    收集剩余的参数

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

          *Rest Parameter必须是最后一个

    展开数组

          *展开后的效果和数组内容直接写上去一样

    2.默认参数

    $('#div1').animate({width:'200px'});

    $('#div1').animate({width:'200px'},1000);


    3.数组

    map 映射

    reduce 汇总

    filter 过滤器

    forEach 循环(迭代)

    4.字符串

    ##模板字符串

    增强的字符串

    在字符串中添加变量(表达式)

    ```

    var x=3,y=5;

    var str = `${x}+${y}=${x+y}`

    ```

    ```

    var arr = [1,2,3,4]

    var resStr = `${arr.map(function(item,index){

    return `${item}:${index}`

    })}`

    ```

    ##标签模板                                                                                                                                                                                                                                                                                                                    

    5.面向对象

    6.Promise

    7.generator

    生成器( generator)是能返回一个迭代器的函数。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

    这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值,它返回的对象具有两个属性:done和value。value是你获得的值,done用来表明你的generator是否已经停止提供值

    8.模块化

    9.解构赋值

    两边模式相同,左边就可以顺序赋予相应值

    解构默认值

    var [a,b]=[1,2];console.log('a='+a+',b='+b);

    //a=1,b=2//必须一一对应

    var [,,test]=[1,2,3];

    console.log('test='+test);

    //test=3//这属于不完全解构,解构不成功返回undefined

    var [a1,a2]=[1];

    console.log('a1='+a1+',a2='+a2);

    //a1=1,a2=undefined

    默认值引用解构赋值变量

    //若右边少于左边 右边则按默认值,无默认值则是undefined

    var [x,y=2]=[1];

    console.log('x='+x+',y='+y);

    //x=1,y=2//右边可以覆盖默认值

    var [c,d=5]=[3,4];

    console.log('c='+c+',d='+d);

    //c=3,d=4//undefined不成功

    var [a,b=2]=[1,undefined];

    console.log('a='+a+',b='+b);

    //a=1,b=1

    var [i,j=2]=[1,null];

    console.log('i='+i+',j='+j);

    //i=1,j=null

    对象的解构赋值

    将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上

    var { log, sin, cos } = Math;

    交换变量值

    var [x,y]=[y,x]

    从函数返回多个值

    function example() { return [1, 2, 3];}                                                                                                                                                                 var [a, b, c] = example();// 返回一个对象                                                                                                                                                           function example() { return { foo: 1, bar: 2 };}                                                                                                                                              var { foo, bar } = example();

    无序传参

    function f([x, y, z]) { ... }f([1, 2, 3]);                                                                                                                                                                      // 参数是一组无次序的值                                                                                                                                                                                 function f({x, y, z}) { ... }                                                                                                                                                                                                                               f({z: 3, y: 2, x: 1});

    提取json数据

    var jsonData = { id: 42, status: "OK", data: [867, 5309]};                                                                                                                               let { id, status, data: number } = jsonData;console.log(id, status, number);


    相关文章

      网友评论

          本文标题:ES6的兼容和新特性

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