es6之Array.from()方法攻略教程_Array入门基础

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。==只要是部署了Iterator接口==的数据结构,Array.from都能将其转为数组。Array.from(arrayLike[, mapFn[, thisArg]])1)arrayLike:想要转换成数组的伪数组对象或可迭代对象;2)mapFn:如果指定了该参数,新数组

es6之Array.from()方法攻略教程

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。==只要是部署了Iterator接口==的数据结构,Array.from都能将其转为数组。

es6之Array.from()方法攻略教程_Array入门基础

Array.from(arrayLike[, mapFn[, thisArg]])

该方法的返回值是一个新的数组实例(真正的数组)。

使用:

1.将类数组对象转换为真正数组:

let a= {
  0: "tom",
  1: "65",
  2: "男",
  3: ["a", "b", "c"],
  length: 4
};

console.log(Array.from(a))
//["tom", "65", "男", Array(3)]

类数组要求:

(1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

(2)该类数组对象的属性名必须为数值型或字符串型的数字

2.将Set解构的数据转换为数组

let arr = [1,2,3,4,5,6,7,8,9]
let set = new Set(arr)
console.log(Array.from(set))  // [1,2,3,4,5,6,7,8,9]

3.将字符串转换为数组

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

相当于str.split(”)

4.复制数组

let arr = [1,2,3,4,5];
let arr2 = Array.from(arr);
//相当于let arr2 = [...arr]
console.log(arr)        // [1,2,3,4,5]
console.log(arr2)        // [1,2,3,4,5]

5.类似于数组的map方法

用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

let arr = [1,2,3,4,5]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [2,3,4,5,6]

6.返回数组的真正长度

function countSymbols(string) {
  return Array.from(string).length;
}

7.控制函数执行的次数

‘jack’)
// [‘jack’, ‘jack’]” title=”” data-original-title=”复制”>

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
海计划公众号
(0)
上一篇 2020/03/26 23:31
下一篇 2020/03/26 23:31

您可能感兴趣的内容

  • Draggable入门攻略_一个轻量级、响应式的 JS 拖放库

    Draggable入门百科 官方网址:https://shopify.github.io/draggable GitHub:https://github.com/Shopify/d…

    2020/03/06
  • babel polyfill 的一些理解入门教程_babel入门基础

    前言为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。babel 和 babel ployfill 的关系1、先来理解下 babel 到底是做什么的?简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。2、babel polyfill 又是做什么的?如果要解决API层面的问题,需要使用垫

    2020/03/20
  • python实用技巧使用帮助_python指南教程

    1.原地交换两个数字Python 提供了一个直观的在一行代码中赋值与交换(变量值)的方法,请参见下面的示例:In [1]: x,y = 10 ,20 In [2]: print(x,y)
    10 20 In [3]: x, y = y, x In [4]: print(x,y)
    20 10赋值的右侧形成了一个新的元组,左侧立即

    2020/03/22
  • Web入门进价菜鸟教程网_Web前端入门和进阶学习笔记,超详细的前端学习图文教程

    Web入门进价菜鸟教程网 GitHub:https://github.com/qianguyihao/Web 简介描述:Web前端入门和进阶学习笔记,超详细的前端学习图文教程 前端…

    2020/03/10
  • intro.js基础入门教程_网站功能操作分布引导插件

    intro.js基础入门 官方网址:http://usablica.github.com/intro.js/ GitHub:https://github.com/usablica/…

    2020/03/05
  • javascript选择器有哪些?基础教程_选择器使用帮助

    JavaScript选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。1、document.querySelector()querySelector() 方

    2020/03/22
  • Rest/Spread 属性入门知识探索 ES2018 和 ES2019_es6使用攻略

    Rest/Spread 属性Sebastian Markbåge的ECMAScript提案『Rest/Spread属性』可以:rest操作符(…)在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符(…)在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。在对象解构中使用rest操作符(…)在对象解

    2020/04/05
  • jQuery.fontFlex入门知识_轻量级jQuery响应式字体插件

    jQuery.fontFlex入门知识 GitHub:https://github.com/nathco/jQuery.fontFlex 简介描述:轻量级jQuery响应式字体插件…

    2020/03/10
  • 全栈开发者意味着什么?入门攻略_全栈小白攻略

    在诸多的企业尤其是创业型公司中,HR 在招聘时往往希望可以招到一名技术全能型人才,而这种人才又被称之为 全栈开发者,那么对于全栈开发者而言,都需要具备哪些技能?以下为译文:最近,在我参加的一个Web技术会议上,一位开发同事问了我这个问题。这位开发同事遇到的很多新人都自称是全栈开发人员,有点像Bob自称是Tony的意味,名不副实。本文以这位开发同事提的问题作为

    2020/03/26
  • 前端领域不需要架构师?使用攻略_架构入门攻略

    引言在传统桌面软件开发中,架构师是一种通过设计架构保证团队能够良好分工和有序工作的岗位。在工程领域,我们凡是要做点什么事儿,都会有明确的目的性,这个目的性,一定是为了完成生产服务业务的。为什么桌面软件开发需要架构师和架构设计呢?因为桌面软件开发具有高度的复杂性,如果没有架构,就没法分解成互相耦合低的模块来分工。所以一般来说,架构是为了分工而存在的。但是到了前

    2020/03/21
  • web页面的回流和重绘菜鸟教程_web新手入门

    一 概念什么是回流? 回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。什么是重绘(repaint)? 页面中的元素样式发生改变,比如:背景颜色,背景图片,字体颜色的样式改变。 只要页面需要重新渲染,就会触发重绘。注意: 每个页面只要会

    2020/03/29
  • 雁阵入门知识_专业的在线项目管理工具

    雁阵入门知识 官方网址:http://www.geeseteam.com/ 简介描述:专业的在线项目管理工具 雁阵是一款专业的在线项目管理工具,提供功能强大的在线甘特图,可视化项目…

    2020/03/11
  • Javascript – 事件顺序小白攻略_js事件菜鸟教程下载

    Netscape 4 只支持事件捕获,Explorer只支持事件冒泡。Netscape 6和 Konqueror冒泡和捕获均支持,但Opera 和iCab冒泡和捕获均不支持。在介绍事件的那篇文章中,我提了个看起来比较难以理解的问题:“假设一个元素及其祖先元素的事件句柄指向了同一事件,哪个先触发?”不出意料,这取决于浏览器。这个问题其实很简单。假定一个父元素内

    2020/04/05
  • ES6与 CommonJS 模块化的区别攻略教程_模块化使用帮助

    1、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6 Modules 的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用

    2020/03/22
  • Deep playground入门教程_神经网络的交互式可视化,使用d3.js和TypeScript编写

    Deep playground入门教程 官方网址:http://playground.tensorflow.org GitHub:https://github.com/tensor…

    2020/03/07
  • 移动web问题小结入门指南_移动端零基础入门

    本文主要收集一些移动web开发中常见的问题和解决办法,在日常的工作中遇到新的问题会不定时更新到文章中。屏蔽阴影:-webkit-appearance:none亲测,可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用 border-radius属性修改。Meta标签

    2020/04/03