今天处理数据时用到了Array.from()和Array.fill()方法,平时用的不多,这里记一下。

我的需求是要把字符串'abc',处理为[{exaple: 'abc_001.bcd'}, {exaple: 'abc_002.bcd'}, {exaple: 'abc_003.bcd'}]

处理方法如下:

// 创建数组['abc', 'abc', 'abc']
let arr = new Array().fill('abc'); arr = Array.from(covers, (item, index) => { return { example: `${item}_00${index + }.bcd` } });

  

一、Array.fill()

Array.fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

例子:

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0] // fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5] console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

二、Array.from()

Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

例子:

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

  参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

END--------------------------

你藏在我衣服的針線裡面,我藏在你口袋裡面。

ES6的Array.from()和Array.fill()方法的更多相关文章

  1. es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()

    将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...

  2. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  3. js--数组的 Array.of() 和 Array.from() 方法的使用总结

    前言 JavaScript 中数组的本质是一个对象,它存在的 length 属性值随数组元素的长度变化,但是开发中经常会遇到拥有 length 属性和若干索引属性的对象,被称为类数组对象,类数组对象和 ...

  4. 修复浏览器不支持Array自带的indexOf方法的扩展

    JavaScript中Array的indexOf方法支持的浏览器有:IE9+.Firefox 2+.Safari 3+.Opera 9.5+和Chrome 如果想要在不支持的浏览器中使用indexOf ...

  5. 总结Array类型中常用的方法

    Array类型应该是 ECMAScript 中最常用的类型之一了,并且它定义的数组与其他语言有着相当大的区别.数组是数据的有序集合,我们可以通过下标对指定位置的数据进行读 写:特别的是,在 ECMAS ...

  6. Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?

    这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...

  7. js中Array数组的属性和方法

    这是我自己整理出来的一些关于Array数组的属性和方法,即查即用. 1.Array.length属性:数组的项数组,始终返回0或者更大的值. 2.instanceof操作符:value instanc ...

  8. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

  9. javascript总结25:Array的5中迭代方法: every(), filter() , forEach() map() some()

    1 Array常用的操作方法: 1 操作方法 - concat() //把参数拼接到当前数组 -slice() //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开 ...

随机推荐

  1. http概述——http笔记一

    之前想深入的了解学习下HTTP,所以就买了本砖头<HTTP权威指南>.最近一直在看,可是发现看书只有输入并没有输出,不行.所以就打算把自己的理解写成一系列的笔记,供以后翻阅. 大概画了张本 ...

  2. 移动 H5 首屏秒开优化方案探讨

    转载bang大神文章,原文<移动 H5 首屏秒开优化方案探讨>,此文仅仅用做自学与分享! 随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好 ...

  3. 阿里云Confluence无法发送邮件修复

    阿里云屏蔽外网的25端口,防止发送垃圾邮件,所以导致阿里云上的ecs无法发送邮箱 采用腾讯邮箱,端口25和465都试了好几遍,最终改成587即可 参考https://blog.csdn.net/qq_ ...

  4. 本地开启https服务

    ### ##自签名证书 ##配置Apache服务器SSL ##自己作为CA签发证书 ###这里是OpenSSL和HTTPS的介绍 OpenSSL HTTPS 开启HTTPS配置前提是已在Mac上搭建A ...

  5. DBFlow框架的学习笔记之入门

    什么是DBFlow? dbflow是一款android高性的ORM数据库.可以使用在进行项目中有关数据库的操作.github下载源码 1.环境配置 先导入 apt plugin库到你的classpat ...

  6. kali pinyin

    重装了kali,原来一直用的ibus pinyin重装之后再apt-get install的时候总是找不到包,换了各种源都不行,纠结N久果断换别的输入法了. apt-get install fcitx ...

  7. C++走向远洋——25(项目二,游戏类)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:game.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  8. C++走向远洋——42(项目二,我的数组类,深复制,构造函数)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. redis BLPOP

    一.需求 redis中保存了需要download的image url,存储格式为列表. 我需要从列表中获取数据,将图片下载保存到本地. 列表中的数据是一直增加的. 二.实现 使用redis BLPOP ...

  10. JavaScript逻辑分支switch 练习题

    1.输入月份,显示当月的天数, 利用case穿透简化代码  var month = prompt("请输入月份"); var year = prompt("请输入年份&q ...