• 1、 根底阐明及语法界说

    • 1-1、根底阐明
        <!-- 示意：MDN原文 -->
  The Array.from() static method creates a new, 
  shallow-copied Array instance from an array-like or 
  iterable object.
      • 这句话，论述两个含义字符型变量：
        • 1、回来一个数组实例
        • 2、入参为：一个类数组或许一个可迭代目标
    • 1-2、 语法界说
        <!-- 示意：MDN原文 -->
  Array.from(arrayLike [, mapFn [, thisArg]])
      • 参数阐明：
        • arrayLike 一个类数组或许一个可迭代目标 【必填】
        • mapFn 回字符调函数，对回来的数组中的每个元素在数组字符间距回来前，进行操作处理（Map function to call on every element of the array.） 【非必填】
        • thisAphp是前端还是后端rgphp是前端还是后端 回调函数中的this指向

  • 2、 重点解析

    • 2-1、何为类字符间距加宽2磅怎么设置数组？常见的那些？
      • 1、objects with a length property and indexed elements【有length特点；元素可索引】
      • 2、函数的arguments、E索引失效的几种情况lement NodeList等
    • 2-2、何为可迭代目标？常见的那些？
      • 1、对数组的泛化，简直一切目标能够作为在for…of 循环中的目标【简略来说，数组便是特别的目标，只不过key默以为index，不长显算了】
      • 2、Map anAPPd Set等
    • 2-3、Array.from()的回调函数怎样了解？
      • 1、Array.from() has an opti字符型变量ona数组c语言l p字符间距在哪里设置arameter mapFn, which alapprovelows字符间距加宽2磅怎么设置 you to execute a map(数组去重) function on each element of the array being created.
        • 意思便是：Array.from()的回调mapFn，功用相似map()函数，遍历逐个元素；于是乎：Array.from(obj, maphpmyadminpFn, thisArg) === Array.from(obj).map(mapFn, thisArg) 二者的区别是：Array.from does not create an intermediate array, and mapFn only receives two arguments (element, index)【Array.from索引不会创立中心数组，from(obj).map会创立中心数组，一直占着索引内存不会销毁数组初始化】
      • 2、Map and Set等

  • 3、运用场景

    • 3-1、转换字符串为数组
        Array.from('foo');
  // [ "f", "o", "o" ]
      • 为数组词什么这样能够，能够以为【字符串是类数组】< 字符串与数组相同，都有 length 特点以及 indexOf(…) 和 concat(…) 方法等>【关于此结论可作为额appear定文章进行拓宽】
    • 3-2、将Set目标转换为数组
        const set = new Set(['foo', 'bar', 'baz', 'foo']);
  Array.from(set);
  // [ "foo", "bar", "baz" ]
  <!-- 当然你也能够用ES6的简略写法 -->
  [ ... new Set(['foo', 'bar', 'baz', 'foo'])]
    • 3-3、将Map目标转换为数组
        const map = new Map([[1, 2], [2, 4], [4, 8]]);
  Array.from(map);
  // [[1, 2], [2, 4], [4, 8]]
  const mapper = new Map([['1', 'a'], ['2', 'b']]);
  Array.from(mapper.values());
  // ['a', 'b'];
  Array.from(mapper.keys());
  // ['1', '2'];
    • 3-4、将Element NoappledeList转换为数组
        // Create an array based on a property of DOM Elements
  const images = document.getElementsByTagName('img');
  const sources = Array.from(images, image => image.src);
  const insecureSources = sources.filter(link => link.startsWith('http://'));
  //这儿的getElementsByTagName得到的images便是个类数组，同样咱们能够很自然的想到通过querySelectorAll()得到的集合也是类数组
    • 3-5、将函数argumeappearnts转换为数组
        function f() {
    return Array.from(arguments);
  }
  f(1, 2, 3);
  // [ 1, 2, 3 ]
    • 3-6、填充数组【这儿不评论Array.fill()】

      • 3-6-1、方式一：数组去重

          <!-- 用索引填充 -->
  Array.from({length: 5}, (v, i) => i);
  <!-- 用指定的值填充 -->
  Array.from({length: 5}, (v, i) => 6666);
        • {length: 5}得到的是一个可迭代appointment的目标,Array.from处理后便是个数组【长度为5，单个元素每个都为undefined】，然后在经过Array.fappreciaterom的回调mapFn处理，此刻v为undefined，i为索引

      • 3-6-2、方式二：【拓宽】

        <!-- 用指定的值填充 -->
  Array(10).fill(666);
  <!-- map填充会失效 -->
  Array(3).map((item,index)=>index);
  // 这个不会得到[0,1,2],而会得到[empty,empty,empty]

      • 这儿要要特别注意 Arra数组和链表的区别y(10)回来的是一个长度10且每个元素为undefined的数组，而不是[10] 【关于Aphp是什么语言rray函数具体怎么运字符串是什么意思用可自行拓宽】

      • 3-6-3、将只有一个元素的安排快速复制n倍：【考虑】

        var a = [3]
  var b = Array.from({length: 10}, (v, i) => a[0]);
    • 3-7、克隆数组
      • 代码完成： 
          const arr = [1, 2, 3, 4, 5]
  const arrCopy = Array.from(arr)
        • 注意这个是浅复制，Why?【Ex如下：】
          <!-- 一维度操作 -->
  var a = [1, 2, 3, [4, 5, 6]]
  var b = a
  var c = Array.from(a)
  a.push(7)
  // a: [1, 2, 3, [4, 5, 6], 7]
  // b: [1, 2, 3, [4, 5, 6], 7]
  // c: [1, 2, 3, [4, 5, 6]] //这个没有7
  <!-- 二维度操作 -->
  var a = [1, 2, 3, [4, 5, 6]]
  var b = a
  var c = Array.from(a)
  a[3].push(7)
  // a: [1, 2, 3, [4, 5, 6, 7]]
  // b: [1, 2, 3, [4, 5, 6, 7]]
  // c: [1, 2, 3, [4, 5, 6, 7]]
    • 3-8、出产规模数组

      • 3-8-1 出产规模数字：

          // Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
  const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
  // Generate numbers range 0..4
  range(0, 4, 1);
  // [0, 1, 2, 3, 4]
  // Generate numbers range 1..10 with step of 2
  range(1, 10, 2);
  // [1, 3, 5, 7, 9]

      • 3-8-2 出产规模字母：

          // Generate the alphabet using Array.from making use of it being ordered as a sequence
  range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
  // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    • 3-9数组和链表的区别、结合第三个参数操作回调函数
      • 第三个参数能够指定第二个回调函数的this值。apple那么，Array.from既有相似 map字符串是什么意思的功用，也有相似 bphpstudyind的功用，能够给定this
      • 代码完成： 
          const arr = [1, 2, 3, 4, 5, 6];
  const newArr = Array.from(arr, function (item, i) {
    return item + this.value
  }, {
    value: 3
  })
  // [4, 5, 6, 7, 8, 9]

  • 4、考虑：写了这些运用场景,有approach几点仍是能够考虑的：

    • 你能定这么多的运用场景，并不是这个功用有多复杂，而是这个api创立的数组实例索引符号来源于【类数组和可迭代两个方向】，这两个方向太广了，可罗列的也比较多php是什么意思
    • 在常识梳理中咱们phpmyadmin我遇到了几个比较有意思的点，可作为额定常识点，持续梳理拓字符间距在哪里设置宽终结：
      • 字符串是类数组
      • Array()入参一个参数为什么得到的和料想的不相同，入参多个和料想的却又相同
      • Array(n).map()时，map在遍历empty时为什么不会生效
      • 深复制和浅复制怎么区别【是不是能够简略的了解，索引页是哪一页深复制通过递索引超出了数组界限什么意思归就能完成】

  • 5、 参考文献

    • MDN： developer.mozilla.org/zh-CN/docs/… 【引荐】
    • dmitripavlutin.com/javascript-…