今天处理数据时用到了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. A Knight's Journey (DFS)

    题目: Background The knight is getting bored of seeing the same black and white squares again and agai ...

  2. useful_tool

    记录工作学习中遇到的经典好用的工具软件. 工作篇 AxeSlide斧子演示 AxeSlide是PPT的良好替代品,跨平台,基于Html5 2D/3D技术开发.动画特效等效果十分不错.工具提供很多免费模 ...

  3. OpenGL Panorama Player

    JMGL_PANO star_war_eve source 1 star_war_eve source 2 1. 介绍 JMGL_PANO 是Justin开源的一个全景视频播放器(Github).基于 ...

  4. 机器学习的盛宴:NIPS 2015

    作者:微软亚洲研究院实习生:林添 冰雪王国的浪漫 机器学习的盛宴 NIPS(Advances in Neural Information Processing Systems,神经信息处理系统进展大会 ...

  5. C++走向远洋——58(项目二3、动物这样叫、改进版)

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

  6. 致敬尤雨溪,Vue.js 让我赚到了第一桶金

    最近这个 Vue.js 纪录片在前端圈广为传播,相信不少人已经看过了.第一次看编程领域的纪录片,感觉还挺新鲜的.这部 30 分钟左右的纪录片制作精良,主角是 Vue.js 作者尤雨溪,还穿插采访了框架 ...

  7. [翻译]python3中新的字符串格式化方法-----f-string

    从python3.6开始,引入了新的字符串格式化方式,f-字符串. 这使得格式化字符串变得可读性更高,更简洁,更不容易出现错误而且速度也更快. 在本文后面,会详细介绍f-字符串的用法. 在此之前,让我 ...

  8. 盒马微信小程序

    盒马app刚出现,就吸足了眼球.最近看了看盒马界面,很Q,就想着仿照app写个小程序. 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序.实现了app的部分功能,还 ...

  9. .NET Core 获取主机运行资源的库

    简介 CZGL.SystemInfo 是一个支持 Windows 和 Linux 的资源信息获取库,用于获取系统环境.机器资源信息.系统资源使用情况. Nuget 搜索 CZGL.SystemInfo ...

  10. Simple: 一个支持中文和拼音搜索的 sqlite fts5插件

    之前的工作关系,需要在手机上支持中文和拼音搜索.由于手机上存储数据一般都是用 sqlite,所以是基于 sqlite3 fts5 来实现.这段时间再次入门 c++,所以想用 c++ 实现一下,一来用于 ...