• 欢迎大家分享资料!前往留言板评论即可!

ECMAScript(ES6)基本语法介绍(二)

合宙 模组资料网 7个月前 (05-15) 79次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

3.解构赋值

允许按照一定模式,从数组和对象中提取值,并对变量进行赋值,这被称为解构赋值

  1. 数组解构赋值

    顺序对应

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

  2. 对象解构赋值

    key 值对应

    let { foo, bar } = { foo: "aaa", bar: "bbb" }

  3. 解构赋值——别名

    foo: 原始名称

    f:别名

    let { foo: f, bar: b } = { foo: "aaa", bar: "bbb" }

  4. 多重解构

    let { foo: [a, b] } = { foo: [10,20], bar: "bbb" }

4.扩展运算符

把数组/对象转成参数序列(使用逗号分隔的序列)

['a,'b','c'] => 'a','b','c'相当于去除数组的中括号

{left:100, top:200} => left: 100, top: 200相当于去除大括号

  • 案例
    // 合并数组
    var arr1 = [1,7,3,6,2];
      var arr2 = ['a', 'b', 'c'];
      console.log( [...arr1, 'maiov', ...arr2] );  
    
    // 合并对象
       let obj1 = {left:100, top: 200};
       let obj2 = {width: 200, height: 200};
    
       let obj3= {
         ...obj1,
         ...obj2
        };
      console.log(obj3);
    

5.迭代

  1. 迭代协议
  • 规定了迭代与实现的逻辑

  • 基本结构

    “`
    // 迭代协议
    obj[Symbol.iterator] = function () {
    return {
    next: function () { // 迭代函数必须的
    return {
    value: '' // 迭代输出值
    done: true | faslse // 是否结束迭代
    }
    }
    }
    }
    “`

  1. 迭代器
  • 具体的迭代实现逻辑,即 [Symbol.iterator]方法

    输出结果:left 100

    top 200

  • 实例

    “`
    /*
    * 迭代对象
    * 实现了迭代器的对象
    * 迭代器:方法 [Symbol.iterator]
    */

    <pre><code> var obj = {
    left: 100,
    top: 200
    };

    // 迭代协议
    // 自定义迭代条件,以及返回值
    obj[Symbol.iterator] = function () {
    let keys = Object.keys(obj); // 获取对象的key值,返回一个数组
    let len = keys.length;
    let n = 0;
    return {
    next: function () { // 迭代函数必须的
    if (n < len) { // 迭代条件
    return {
    value: { k: keys[n], v: obj[keys[n++]] },// 迭代输出的值,此处的n++的含义是先输出obj[keys[n]]的值,然后在n++
    done: false // false代表还需继续迭代
    }
    } else {
    return {
    done: true
    }
    }
    }
    }
    }

    // obj[Symbol.iterator]().next() => {done: true}
    for (var { k, v } of obj) { //of 是一个可迭代的对象
    console.log(k, v);
    }
    </code></pre>

    “`

  1. 迭代对象
  • 可被迭代的对象,含有 [Symbol.iterator]方法的对像
  1. 迭代语句
  • for…in:以原始插入的顺序迭代对象的可枚举属性

    输出结果:0, 1, 2

  • 实例

    “`
    <script>
    var arry = ['a', 'b', 'c'];
    for(var attr i arry){
    console.log(attr);
    }
    </script>
    “`

  • for…of:根据迭代对象的迭代器具体实现迭代对象数据

    输出结果:a, b, c

  • 实例

    “`
    <script>
    var arry = ['a', 'b', 'c'];
    for(var attr of arry){
    console.log(attr);
    }
    </script>
    “`


转载请注明原文链接:ECMAScript(ES6)基本语法介绍(二)
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址