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

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 // 是否结束迭代
  }
  }
  }
  }
  “`

2. 迭代器

• 具体的迭代实现逻辑,即 [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>

  “`

3. 迭代对象

• 可被迭代的对象，含有 [Symbol.iterator]方法的对像

4. 迭代语句

• 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>
  “`