美文网首页程序员
关于ES6的一些事

关于ES6的一些事

作者: chasing_dream | 来源:发表于2018-03-14 21:51 被阅读31次

    既然选择了远方,便只顾风雨兼程!

    关于es6我也只是跟开始接触,说的不好请大家多多关照,希望能对学习前端的朋友一点帮助。

    Babel转码器:

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。
    Babel下载地址

    声明变量let与const:

    因为var命令会发生“变量提升”现象,即变量可以在声明之前使用,值是undefined。这种逻辑多多少少有点奇怪,为了纠正这种现象,let改变了语法行为,变量在声明之前使用就会报错。

            // var 的情况
            console.log(a);  //输出undefined
               var a=2;
           // let 的情况
            console.log(a);  //自己报错
                let a=2; 
    

    这表明let声明的变量只他所在的代码块内有效。
    let命令非常适合计数器。
    let 不会再预解析的时候不会提升
    let不允许在声明之前赋值,否则报错,这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
    let不允许重复声明

    // 报错
    function func() {
      let a = 10;
      var a = 1;
    }
    
    // 报错
    function func() {
      let a = 10;
      let a = 1;
    }
    

    let只会在离他最近的作用域有效不会泄露为全局变量。
    ES6 允许块级作用域的任意嵌套。

    const 命令

    const声明一个只读的常量。一旦声明,常量的值就不能改变。

       const arr = 3;
       arr = 2  //报错
    

    const一旦声明变量,就必须立即初始化,不能留到以后赋值。

    const arr;  //报错
    

    const的作用域与let命令相同:
    只在声明所在的块级作用域内有效。
    预解析不会提升变量
    不允许重复声明

    ES6声明变量的方法

    var和function;
    let和const;
    import命令和class命令。

    var a=1;
    let b=1;
    function fun(){};
    import any from "./a.js"
    //class  就好比构造函数
    class Pad{
         fun(){
             console.log(123)
         }
    
     }
     var ad=new Pad();
     ad.fun()
    

    变量的解构赋值

    变量的结构赋值

    //ES5变量赋值
    var a = 1;
    var b = 2;
    //ES6 变量赋值
    let [a, b] = [1, 2];
    

    ES6可以从数组中提取值,按照对应位置,对变量赋值。可以从数组中提取值,按照对应位置,对变量赋值。
    如果解构不成功,变量的值就等于undefined。
    null 和 undefined 不能解构赋值

    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3
    
    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"
    
    let [x, , y] = [1, 2, 3];
    x // 1
    y // 3
    
    let [head, ...tail] = [1, 2, 3, 4];
    head // 1
    tail // [2, 3, 4]
    
    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []
    

    对象的结构赋值
    对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    let { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined
    

    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    baz // "aaa"
    foo // 报错 foo is not defined
    

    Interator是遍历器点这里查看详情

    用途

    交换变量的值

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

    四种数据集合

    JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。这样就有了四种数据集合。

    字符串的扩展










    待更新

    Set

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    //直接赋值
    const set = new Set([1, 2, 3, 4, 4]);
    //不会出现重复的值
    const s = new Set();
    
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
    
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4
    

    Map

    待更新

    箭头函数

    拓展的对象功能

    超级字符串

    set和map

    相关文章

      网友评论

        本文标题:关于ES6的一些事

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