纯手工打印调试~~~~

九种用途~~~超赞的哦~~~~~

<!DOCTYPE html>

<html lang="en">

<head>

  <title></title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- <link href="css/style.css" rel="stylesheet"> -->

</head>

<body>

  <script>

    // 第一種用途：遍歷對象對象值進行操作

    const someNumbers = {

      '0': 10,

      '1': 15,

      length: 2

    };

    Array.from(someNumbers, value => value * 2);

    // console.log(someNumbers);

    // {0: 10, 1: 15, length: 2}

    // console.log(Array.from(someNumbers, value => value * 2));

    // ArrayFrom.html:14 (2) [20, 30]

    // 第二種用途：將類數組對象轉化為數組

    // 通常，你会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。

    function sumArguments() {

      // console.log(Array.from(arguments));

      // [1,2,3,4]

      return Array.from(arguments).reduce((sum, num) => sum + num);

    }

    sumArguments(1, 2, 3, 4);

    // console.log(sumArguments(1,2,3,4));

    // 10

    // 第三種用途：克隆一個數組，实现数组的浅拷贝。

    const numbers = [3, 6, 9];

    const numbersCopy = Array.from(numbers);

    // console.log(numbers === numbersCopy);

    // false

    // 來，讓我們搞一個數組的深拷貝

    function recursiveClone(val) {

      return Array.isArray(val) ? Array.from(val, recursiveClone) : val;

    }

    const numbers1 = [[[0, 7, 8], 1, 2], [4, 5, 6]];

    const aa = numbers1;

    // console.log(aa[0] === numbers1[0]); // true

    const numbersClone = recursiveClone(numbers1);

    // console.log(numbersClone[0][0] === numbers1[0][0]) //false

    //第四種用途：使用各種東西來填充數組

    const length = 3;

    const init4 = 0;

    const result4 = Array.from({ length }, () => init4);

    // console.log(result4);

    // [0, 0, 0]

    // console.log(Array.from({ length: 5 }, _ => 6));

    // (5) [6, 6, 6, 6, 6]

    // console.log(Array.from({ length: 8 }, (_, i) => i));

    // [0, 1, 2, 3, 4, 5, 6, 7]

    // 使用對象填充數組，好處大大的哦~~  每個都是新對象！！！

    const resultA = Array.from({length: 9}, _ => ({})); // 好用不貴，經濟實惠

    // console.log(resultA);

    // [{}, {}, {}, {}, {}, {}, {}, {}, {}]

    // console.log(resultA[0] === resultA[1]); //false

    // 來來我們對比一下~~

    const resultB = Array(8).fill({});

    // console.log(resultB);

    // [{}, {}, {}, {}, {}, {}, {}, {}]

    // console.log(resultB[0] === resultB[1]); //true

  //  不要用map()方法，这是因为 Array(length) 创建了一个有3个空项的数组(也称为稀疏数组)，但是 map() 方法会跳过空项。

  // 第五種：數組去重

  function unique(array) {

    return Array.from(new Set(array));

  }

  // console.log(unique([1,1,2,2,3])); // [1, 2, 3]

  // 首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。

  // 因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。

  // 这样，我们就实现了数组去重。

  // 第六種： 從String 生成數組

  // console.log(Array.from('hello'));

  // ["h", "e", "l", "l", "o"]

  // 第七種：從Map 生成數組

  const map = new Map([[1,2],[3,4]]);

  Array.from(map);

  const mapper = new Map([['1','a'],['2','b']]);

  console.log(mapper.values()); // MapIterator {"a", "b"}

  console.log(Array.from(mapper.values())); // ["a", "b"]

  console.log(mapper.keys()); // MapIterator {"1", "2"}

  console.log(Array.from(mapper.keys()));// ["1", "2"]

  // 第八種: 序列產生工具，可以根據自定義規則產生序列

  const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

  const arr8 = range(0, 30, 3)

  console.log(arr8);

  // [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30]

  // 使用Array.from将其作为序列排序，生成字母表

  const arrCode = range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1);

  console.log(arrCode);

  // [65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90]

  const arrCode1 = arrCode.map(_ => String.fromCharCode(_));

  console.log(arrCode1);

  // ["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"]

  // 第九種：數組去重合併

  function combine() {

    let arr = [].concat.apply([], arguments); //這個是沒有去重的新數組

    return Array.from(new Set(arr));

  }

  var arr9 = [1,2,2,3,3], arr91 = [5,5,8,8,9,7];

  console.log(combine(arr9, arr91));

  // [1, 2, 3, 5, 8, 9, 7]

  </script>

</body>

</html>

Array.from的9大优美用途！！！看了不后悔哦~~~~的更多相关文章

  1. Python GUI之tkinter窗口视窗教程大集合（看这篇就够了） JAVA日志的前世今生 .NET MVC采用SignalR更新在线用户数 C#多线程编程系列（五）- 使用任务并行库 C#多线程编程系列（三）- 线程同步 C#多线程编程系列（二）- 线程基础 C#多线程编程系列（一）- 简介

    Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 ...

  2. Qt加载网页(加载浏览器插件)和制作托盘后台运行(南信大财务报账看号)

    程序模块要添加QNetWork和QWebKit模块: nuistfinancevideo.h文件: #ifndef NUISTFINANCEVIDEO_H #define NUISTFINANCEVI ...

  3. [转载] JAVA面试题和项目面试核心要点精华总结（想进大公司必看）

    JAVA面试题和项目面试核心要点精华总结(想进大公司必看) JAVA面试题和项目面试核心要点精华总结(想进大公司必看)

  4. JAVA JAVA面试题和项目面试核心要点精华总结（想进大公司必看）

    http://blog.csdn.net/ourpush/article/details/53706524 1．常问数据库查询.修改(SQL查询包含筛选查询.聚合查询和链接查询和优化问题,手写SQL语 ...

  5. python能用来做什么？这3大主要用途你一定要知道！（实用）

    导读:如果你想学Python,或者你刚开始学习Python,那么你可能会问:“我能用Python做什么?” 这个问题不好回答,因为Python有很多用途. 但是随着时间,我发现有Python主要有以下 ...

  6. uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型 - 大总结，看完全明白了

    转自:http://blog.csdn.net/kiddy19850221/article/details/6655066 uint8_t / uint16_t / uint32_t /uint64_ ...

  7. Python GUI之tkinter窗口视窗教程大集合（看这篇就够了）

    一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 二.Tkinter 是什么 三.Tkinter 控件详细介绍 1. T ...

  8. 暑期OI大电影——不看后悔整个OI生涯！

    惊爆~!! 2018暑期OI大电影要开始放送啦~!! 各位OI骨灰级大咖登场荧幕~!! 近四十部大电影纷至沓来~!! 著名特级导演CCF.著名特级编剧刘汝佳等纷纷给予高度评价~!! 观众朋友们,OI的 ...

  9. 小白写了一堆if-else，大神实在看不下去了，竟然用策略模式直接摆平了

    这里涉及到一个关键词:策略模式,那么到底什么是策略模式呢?本文就来好好给大家讲讲策略模式,大家可以带着如下几个问题来阅读本文:   1. 如何通过策略模式优化业务逻辑代码(可以根据自己从事的工作思考) ...

  10. arm64大服务器安装ubuntu18看不到安装界面

    前言 最近在使用arm的大服务器需要用到ubuntu相关的一些东西,在操作系统安装过程中遇到了一些问题 记录 华为鲲鹏服务器 这个默认安装centos的都很顺利,安装ubuntu18最新的,impi就 ...

随机推荐

  1. python批量依赖包操作

      1.导出所有的python依赖 pip freeze > requirements.txt #requirements.txt 为自定名称,可以指定路径 2.自动安装所有依赖包 pip in ...

  2. 【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  3. MySQL的下载、安装、配置

    下载 官方下载地址:下载地址: 找到免费社区版本 进入到下面页面的时候,下载对应的MySQL,我这里选择Windows. 点击Download ,如下图: 后面他会提示你登录注册啥的,我们选择不需要, ...

  4. ubuntu20.04修改静态ip不生效问题

    一.前言 最近从头开始配置hadoop的时候,由于想切换到NAT模式下配置hadoop,但在修改ip的时候发现设置了静态ip,但ip不生效,查了很多资料,发现由于配置信息写错了. 二.解决问题 ifc ...

  5. Java安全之反序列化(1)

    序列化与反序列化 概述 Java序列化是指把Java对象转换为字节序列的过程:这串字符可能被储存/发送到任何需要的位置,在适当的时候,再将它转回原本的 Java 对象,而Java反序列化是指把字节序列 ...

  6. 使用@Transactional注解的方法所在的类获取不到注解的解决方案

    前段时间遇到一个问题,一个service叫做A吧,有多个实现类分别是B,C,D,需要根据前端传的不同参数去匹配不同的实现类,我就自定义了一个注解@OrderDeal放在B,C,D上面,然后匹配前端传的 ...

  7. ui自动化测试数据复原遇到的坑——1、hibernate输出完整sql

    公司老项目使用SSH+informix+weblogic+IE开发,我们要做ui自动化测试,其中的测试数据复原,我打算通过hibernate输出sql,然后把插入.更新的sql改为delete或upd ...

  8. （一）Spring Boot集成MyBatis快速入门

    一.在IDEA中创建Spring Boot项目 二.添加依赖(把以下三个依赖都勾上) 三.Maven POM (把上面的依赖选中后,创建项目,打开pom.xml文件就可以看到以下代码,即添加成功) & ...

  9. 安卓APP和小程序渗透测试技巧总结

    安卓APP和小程序渗透测试技巧总结 免责声明: 安卓7以上抓取https流量包 证书信任 首先安装OpenSSL,此步骤不再赘述,可以参考百度. 然后安装模拟器(我使用的是夜神模拟器). 导出需要的证 ...

  10. win11如何双屏幕(1台主机2块显示器)

    1.买两块大小相宜.刷新率相同的屏幕(如诺刷新率不一样可能后期造成卡顿现象) 2.用数据线将两块屏幕都接主机上(现在买新款屏幕基本上都会送双头HDMI线,老旧款式可能是VGA) HDMI款 VGA款 ...