ES6入门教程之Array.from()方法

前言

ES6为Array增加了from函数用来将其他对象转换成数组。

当然，其他对象也是有要求，也不是所有的，可以将两种对象转换成数组。

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

1、将类数组对象转换为真正数组：

let arrayLike = {
 0: 'tom',
 1: '65',
 2: '男',
 3: ['jane','john','Mary'],
 'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么，如果将上面代码中 length 属性去掉呢？实践证明，答案会是一个长度为0的空数组。

这里将代码再改一下，就是具有 length 属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike = {
 'name': 'tom',
 'age': '65',
 'sex': '男',
 'friends': ['jane','john','Mary'],
 length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4，元素均为 undefined 的数组

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

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

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

该类数组对象的属性名可以加引号，也可以不加引号

2、将Set结构的数据转换为真正的数组：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from 还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

如下：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

快速创建一个1~20的数组

Array.from({length:20},(t,i)=>i+1)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

模拟生成 1万条数据

// 模拟生成 1万条数据，利用了 Array.from 来快速生成数据
const originNews = Array.from(
 { length: 10000 },
 (v, k) => ({ content: `新闻${k}` })
)

3、将字符串转换为数组：

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

4、Array.from参数是一个真正的数组：

console.log(Array.from([12,45,47,56,213,4654,154]))

像这种情况，Array.from 会返回一个一模一样的新数组

把数组按指定大小进行分组，可以用于分页、数据切割、异步操作数据。

const chunk = (arr, size) =>
 Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
 arr.slice(i * size, i * size + size)
 );

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • ES6中Array.includes()函数的用法

    在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方面是没问题,就是不够语义化.另一个问题是不能判断是否有NaN的元素. const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', NaN] console.log('%s', arr1.indexOf(NaN)) 结果:

  • ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, start = 0, end = this.length) 该函数有三个参数. target:目的起始位置. start:复制源的起始位置,可以省略,可以是负数. end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1. 例: 把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置

  • ES6中数组array新增方法实例总结

    本文实例讲述了ES6中数组array新增方法.分享给大家供大家参考,具体如下: ●find : let arr=[1,2,234,'sdf',-2]; arr.find(function(x){ return x<=2; })//结果:1,返回第一个符合条件的x值 arr.find(function(x,i,arr){ if(x<2){console.log(x,i,arr)} })//结果:1 0 [1, 2, 234, "sdf", -2],-2 4 [1, 2, 23

  • ES5 ES6中Array对象去除重复项的方法总结

    输入例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq() 输出例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a'] 分析 题目要求给 Array 添加方法,所以我们需要用到 prototype.数组去重本身算法不是很难,但是在 JavaScript 中很多人会忽视 NaN 的存在,因为在 JS 中 NaN !== NaN .但是在去重中我们

  • ES6中Array.find()和findIndex()函数的用法详解

    ES6为Array增加了find(),findIndex函数. find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined. findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1. 他们的都是一个查找回调函数. [1, 2, 3, 4].find((value, index, arr) => { }) 查找函数有三个参数. value:每一次迭代查找的数组元素. index:每一次迭代查找的数组元素索引. arr:被查找的数组. 例: 1.查找

  • 基于ES6 Array.of的用法(实例讲解)

    ES6为Array增加了of函数用已一中明确的含义将一个或多个值转换成数组. 因为,用new Array()构造数组的时候,是有二意性的. 构造时,传一个参数,表示生成多大的数组. 构造时,传多个参数,每个参数都是数组的一个元素. const arr1 = new Array() const arr2 = new Array(5) const arr3 = new Array(1, 3, '白色', {p1: 'v1'}) console.log('%s', JSON.stringify(arr

  • ES6入门教程之Array.from()方法

    前言 ES6为Array增加了from函数用来将其他对象转换成数组. 当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组. 1.部署了Iterator接口的对象,比如:Set,Map,Array. 2.类数组对象,什么叫类数组对象,就是一个对象必须有length属性,没有length,转出来的就是空数组. Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象. 1.将

  • ES6入门教程之let、const的使用方法

    一.前提 解决ES5中只有全局作用域和函数作用域,没有块级作用域而带来的不合理的场景. let 基本用法 用法和var 一样,只是let声明的变量只有在let命令所在的代码块有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 可以看出var 声明的变量在代码块之外也是可以调用,而let声明的则调用报错.所以let 声明只在它声明的当前代码块中才能调用. 变量提升 在使用 var 的时候会出现 "变

  • ES6入门教程之Iterator与for...of循环详解

    本文主要介绍了关于ES6中Iterator与for...of循环的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 一.Iterator(遍历器) 遍历器(Iterator)是一种协议,任何对象只要部署了这个协议,就可以完成遍历操作.在ES6中遍历操作特质for-.of循环. 它的作用主要有两个: 为遍历对象的属性提供统一的接口. 使对象的属性能够按次序排列. ES6的遍历器协议规定,部署了next方法的对象,就具备了遍历器功能.next方法必须返回一个包含value和d

  • ES6入门教程之Class和Module详解

    本文主要介绍了ES6中Class和Module的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.Class ES6引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var point = new

  • ES6入门教程之let和const命令详解

    前言 在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量会在全局范围内有效,这我们是非常熟悉的: for (var i = 0; i < 10; i++) { console.log(i); // 0,1,2...,9 } console.log(i); //10 if(true){ var s = 20; } console.log(s); //

  • iOS汇编入门教程之在Xcode工程中嵌入汇编代码的方法

    简介 上一篇文章ARM64汇编基础中介绍了汇编在iOS开发中的应用以及ARM汇编基础知识,本文将介绍在C或Objective-C构成的工程中如何嵌入汇编代码. 注意 在调试ARM汇编时,Xcode的Build对象必须为真机,如果对象为模拟器则是x86汇编. 内联汇编 汇编与C间接通信 在函数中可以直接插入汇编代码来影响函数的运行逻辑,使用的语法为编译指令 __asm__ ,注意插入汇编有可能会被编译器忽略,因此需要加入 __volatile__ 修饰符保证汇编代码有效. 下面给出一个简单的例子,

  • CocosCreator入门教程之用TS制作第一个游戏

    CocosCreator入门教程之用TS制作第一个游戏

    前提 无论学什么技术知识,官方文档都应该是你第一个教程,所以请先至少阅读新手上路这一节 http://docs.cocos.com/creator/manual/zh/getting-started/ 再来看这篇文章. 这里假设你已经安装成功了 Cocos Creator. TypeScript VS JavaScript 这里当然只会讲优点: 1. ts 是 js 的超集,所有 js 的语法 ts 都支持. 2. ts 支持接近完美的代码提示,js 代码提示接近于没有. 3. ts 有类型定义

  • Zend Framework入门教程之Zend_Session会话操作详解

    本文实例讲述了Zend Framework入门教程之Zend_Session会话操作.分享给大家供大家参考,具体如下: 会话命名空间 实现会话 代码: <?php require_once "Zend/Session/Namespace.php"; $myNamespace = new Zend_Session_Namespace('Myspace'); if(isset($myNamespace->numberOfPageRequests)) { $myNamespace

  • Zend Framework入门教程之Zend_View组件用法示例

    本文实例讲述了Zend Framework入门教程之Zend_View组件用法.分享给大家供大家参考,具体如下: Zend_View组件可以实现MVC模式中视图部分的代码与Model和Controller部分的分离. 使用步骤:首先在Controller中建立一个Zend_View实例,并将需要的变量传递给它:之后,Controller通知Zend_View显示一个特定的视图, 生成View输出的内容. 实例之控制器代码脚本: <?php //使用模型来获取书籍作者和标题相关数据 $data =

  • php入门教程之Zend Studio设置与开发实例

    php入门教程之Zend Studio设置与开发实例

    本文实例讲述了php入门教程之Zend Studio设置与开发方法.分享给大家供大家参考,具体如下: 新建文档的模板设置 新建文档的模板设置 Demo1.php: <?php echo "阅谁问君诵,水落清香浮." ?> orderform.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

随机推荐