前言

  JavaScript 中数组的本质是一个对象,它存在的 length 属性值随数组元素的长度变化,但是开发中经常会遇到拥有 length 属性和若干索引属性的对象,被称为类数组对象,类数组对象和数组类似,但是不能调用数组的方法。Array.from()方法解决了这一问题,将类数组转化为数组,本文就来总结一下 Array.of()  和Array.from()  的相关知识。

正文

  1、Array.of()

  首先来对比一下普通创建数组的方法:

    var ar1 = new Array(2)
console.log(ar1.length, ar1) //2 [empty,empty] (empty表示空位)
var ar2 = new Array(1, 2, 3, 4)
console.log(ar2.length, ar2) //4 [1,2,3,4]
var ar3 = new Array("2")
console.log(ar3.length, ar3) //1 ["2"]

  上面的代码中当使用单个数值参数来调用构造函数创建数据的时候,该数值会默认成为数组的长度;如果使用多项数据作为参数,这些参数会成为数组的项;而使用单个非数值类型的参数来调用,该参数会成为数组的唯一项。通过调用构造函数来创建数组,无法确定传入的参数是数组的长度还是具体的每一项,因此,ES6 针对这一点做了优化,提供了 Array.of () 方法。

  Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。使用方法与构造函数类似,如下:

    var ar1 = Array.of(3)
console.log(ar1); //[3]
var ar2 = Array.of("3")
console.log(ar2); //["3"]
var ar3 = Array.of(undefined)
console.log(ar3); //undefined

  区别:Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(3) 创建一个具有单个元素 3 的数组,而 Array(3) 创建一个长度为 3 的空数组(注意:这是指一个有 3 个空位 ( empty ) 的数组,而不是由 3 个 undefined 组成的数组)。

  2、Array.from()

  Array.from()  方法从一个类似数组或可迭代对象(内部有Symbol.iterator迭代器)创建一个新的,浅拷贝的数组实例并返回。

  语法:Array.from ( arrayLike [,  mapFn [,  thisArg ] ] ),Array.from()  方法接收三个参数,其中第一个arrayLike 表示想要转化成数组的伪数组对象或者可迭代对象,第二个参数 mapFn 为可选参数,指定新数组中每个元素都执行的回调函数,相当于执行了一边map遍历,第三个参数 thisArg 为可选参数,表示执行第二个回调函数时的 this 对象。

  (1)Array.from 转化 arguments类数组对象为数组

  首先对比一下没有Array.from() 方法之前的转化方法:

    function makeArray(arrayLike) {
var resultArr = []
for (let i = 0; i < arrayLike.length; i++) {
resultArr.push(arrayLike[i])
}
return resultArr
//或者return Array.prototype.slice.call(arrayLike);
}
function doSomething() {
console.log(arguments);
var args = makeArray(arguments)
console.log(args);
}
doSomething("a", "b")
// Arguments(2)["a","b",length:2...]
// ["a","b"]

  基于上面的问题,ES6 优化后的便利方法如下:同样,除了arguments对象类似数组外,常用的还有 DOM 节点类数组 nodeList 等。

    function doSomething() {
var args = Array.from(arguments)
console.log(args);
}
doSomething("a", "b")//["a","b"]

  

  (2)Array.from()  不仅可以用于类数组对象,也可以用于迭代对象,这意味着该方法可以将任意Symbol.iterator 属性的对象转化为数组。

    var numbers = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
var numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); // [2,3,4]

  

  (3)除此之外,Array.from() 还有其他使用方法,如下:

     // 将字符串转化为数组
var str = 'foo'
console.log(Array.from(str)); //['f','o','o']
// 将Set集合转化为数组
var set = new Set([1, 1, 2, 3, 4])
console.log(Array.from(set));//  [1, 2, 3, 4] 数组去重
// 将map 集合转化为数组
var map = new Map([['1', 'a'], ['2', 'b']])
console.log(Array.from(map)); // [['1', 'a'], ['2', 'b']]
console.log(Array.from(map.keys()));// ['1','2']
console.log(Array.from(map.values())); // ['a','b']
// 传入第二个参数
var arr = [1, 2, 3]
console.log(Array.from(arr, x => x * 2));//[2, 4, 6]
// 数组浅复制(拷贝)
var arr1 =[{name:"name"},{age:"age"}]
var arr2 = Array.from(arr1)
console.log(arr2);//[{name:"name"},{age:"age"}]
arr1[0].name = "new Nmae"
console.log(arr1);// [{name:"new Nmae"},{age:"age"}]
console.log(arr2);// [{name:"new Nmae"},{age:"age"}]

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

js--数组的 Array.of() 和 Array.from() 方法的使用总结的更多相关文章

  1. js数组和字符串去重复几种方法

    js数组去重复几种方法 第一种:也是最笨的吧. Array.prototype.unique1 = function () { var r = new Array(); label:for(var i ...

  2. js数组遍历的常用的几种方法以及差异和性能优化

    <script type="text/javascript"> /*对比: 1.map速度比foreach快 2.map会返回一个新数组,不对原数组产生影响,forea ...

  3. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  4. js 数组取出最大值最小值和平均值的方法

    1.直接遍历数组 ,,,,,,,]; ]; ;i<arr.length;i++){ if(max<arr[i]) max=arr[i]; } 2.借用Math的方法 ,,,,,,,]; v ...

  5. Js数组代替写循环的几个方法

    简介 循环是个不可避免的结构,而且不好复用,同时循环还很难加入其他操作中.更麻烦的是,使用循环就意味着在每一个新的迭代中有更多变化需要响应. 上了循环的控制结构会使代码看起来变得复杂,故而这里提几个替 ...

  6. Js数组的map,filter,reduce,every,some方法

    var arr=[1,2,3,4,5,6]; res = arr.map(function(x){return x*x}) [1, 4, 9, 16, 25, 36] res = arr.filter ...

  7. JS 数组去重(数组元素是对象的情况)

    js数组去重有经典的 几种方法 但当数组元素是对象时,就不能简单地比较了,需要以某种方式遍历各值再判断是否已出现. 因为: 1.如果是哈希判断法,对象作哈希表的下标,就会自动转换成字符型类型,从而导致 ...

  8. js数组,字符串,json互相转换函数有哪些

    js数组,字符串,json互相转换函数有哪些 一.总结 一句话总结: JSON.stringify(arr) JSON.parse(jsonString) str.split('') array.jo ...

  9. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  10. 【转】 js数组 Array 交集 并集 差集 去重

    原文:http://blog.csdn.net/ma_jiang/article/details/52672762 最劲项目需要用到js数组去重和交集的一些运算,我的数组元素个数可能到达1000以上, ...

随机推荐

  1. spring Data Jpa的依赖+配置

    spring data jpa 是spring基于的orm框架,jpa规范的基础上封装的一套JPA应用框架 添加的相关依赖: <properties> <spring.version ...

  2. 鸿蒙内核源码分析(事件控制篇) | 任务间多对多的同步方案 | 百篇博客分析OpenHarmony源码 | v30.02

    百篇博客系列篇.本篇为: v30.xx 鸿蒙内核源码分析(事件控制篇) | 任务间多对多的同步方案 | 51.c.h .o 进程通讯相关篇为: v26.xx 鸿蒙内核源码分析(自旋锁篇) | 自旋锁当 ...

  3. 鸿蒙内核源码分析(源码结构篇) | 内核每个文件的含义 | 百篇博客分析OpenHarmony源码 | v18.04

    百篇博客系列篇.本篇为: v18.xx 鸿蒙内核源码分析(源码结构篇) | 内核每个文件的含义 | 51.c.h .o 前因后果相关篇为: v08.xx 鸿蒙内核源码分析(总目录) | 百万汉字注解 ...

  4. 基于SpringBoot+Mybatis plus+React.js实现条件选择切换搜索功能

    笔记/朱季谦 在写React前端逻辑时,经常遇到可以切换不同条件的列表查询功能,例如下边截图这样的,其实,这块代码基本都一个逻辑,可以一次性将实现过程记录下来,待以后再遇到时,直接根据笔记复用即可. ...

  5. 深入浅出WPF-11.Template(模板)02

    模板 DataTemplate和ControlTemplate的关系 通过上面的内容,控件只是一个数据和行为的载体,是一个抽象的概念,至于它长什么样子,或者它的数据是怎么展示的,都是由模板生成的.决定 ...

  6. python爬虫抓取中国最好大学排名1 清华大学 北京 94.0 100.0 97.70% 清华大学 2 北京大学

    import requests from bs4 import BeautifulSoup import bs4.element r=requests.get("http://www.zui ...

  7. 数据结构与算法——弗洛伊德(Floyd)算法

    介绍 和 Dijkstra 算法一样,弗洛伊德(Floyd)算法 也是一种用于寻找给定的加权图中顶点间最短路径的算法.该算法名称以创始人之一.1978 年图灵奖获得者.斯坦福大学计算机科学系教授罗伯特 ...

  8. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  9. javascriptRemke之深入迭代

    javascriptRemke之深入迭代 前言:"迭代"意为按照顺序反复多次执行一段程序,ECMAscript6中新增了两个高级特性:迭代器与生成器,使用这两个特性能更高效地实现迭 ...

  10. python的参数传递是值传递还是引用传递??

    函数参数传递机制,传值和引用的是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(pa ...