需要知道的JS数组之Array.from

需要知道的JS数组之Array.from

相关学习推荐:javascript视频教程

前言

从去年发现字符串的replace方法有很多神奇用法的时候,就想做这个系列,但是一直没空,也没有想到很好的名字,就搁置了。上周五刷题的时候看评论有个解决方法是用Array.from一行解决,而且效率还挺高的。于是啃了一下文档和博客,搞清楚了之后就想正好可以开始这个系列了。而且数组是我们开发中最常用的数据结构之一,作为生成数组的方法之一,以from开始也蛮意思。系列名字就先凑合这么叫吧。

基础语法

定义:from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

语法:Array.from(object, mapFunction, thisValue)

参数描述

object

必需,要转换为数组的对象。

mapFunction

可选,数组中每个元素要调用的函数。

thisValue

可选,映射函数(mapFunction)中的 this 对象。

示例用法

1. 将类数组转化为数组

Array.from('hello')                        //["h", "e", "l", "l", "o"]Array.from(new Set(['name','age']))        //["name", "age"]Array.from({name:'lgc',age:25})            //[]let map=new Map()map.set('name','lgc')map.set('age',25)Array.from(map)                            //[["name", "lgc"],["age", 25]]function test(){    console.log(Array.from(arguments))}test(1,2,3)                                //[1, 2, 3]复制代码

登录后复制

这是我们平时最常用的功能,写这些示例的时候我还奇怪:为什么map能转成数组而object只能转为空数组。当我查看菜鸟教程,看到上述定义我才明白。object既没有length也不是可迭代对象,我之前以为object也是可迭代对象,毕竟都可以用for-in嘛。但其实es6的object不是可迭代对象,这里不多赘述,有兴趣的同学可以去查一下。

2. 数组深拷贝(一行代码)

function clone(arr){    return Array.isArray(arr) ? Array.from(arr, clone):arr}let arrayA=[[1,2],[3,4]]let arrayB=clone(arrayA)arrayA===arrayB                                  //falsearrayA[0]===arrayB[0]                            //false复制代码

登录后复制

这里主要用到了Array.from的第二个参数mapFunction,mapFunction默认传两个参数,数组的值和下标。

3. 数组去重  

function unique(arr){    return Array.from(new Set(arr))}复制代码

登录后复制

这也是from最基本,也是我们最常用的功能之一。

4. from的其他用法  

再看一遍from定义:from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。拥有length就行?试一试

Array.from({length:2},(val,index)=>index)                        //[0,1]复制代码

登录后复制

可以,那他有什么用呢?第一,像上面代码,可以很方便生成在一定范围,有一定规则的数组

Array.from({length:3},(val,index)=>index*10)                     //[0,10,20]复制代码

登录后复制

第二,数组的初始化。比如你想生成指定长度的对象数组。第一反应是什么?fill吗?

let testArr=Array(3).fill({})testArr[0]===testArr[1]                                         //true复制代码

登录后复制

这里的每个对象其实都是同一个,你修改一个其他自然会跟着改变,但很多时候我们需要的并不是这样的。

let testArrb=Array.from({length:3},()=>({}))testArrb[0]===testArrb[1]                                       //false复制代码

登录后复制

这两个方法可以根据需求使用。

5. from的进阶用法

上面的内容其实层层递进下来都是为了更好的理解下面的解题思路。

LeetCode第867题:

给定一个矩阵 A, 返回 A 的转置矩阵。

矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引。

示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7],[2,5,8],[3,6,9]] 示例 2: 输入:[[1,2,3],[4,5,6]] 输出:[[1,4],[2,5],[3,6]] 

当时第一反应这就不是索引互换吗?贼简单。于是写了如下代码

var transpose = function(A) {    let x=A.length    let y=A[0].length    for(let i=0;i0){                [A[i][j],A[j][i]]=[A[j][i],A[i][j]]            }        }    }    return A};复制代码

登录后复制

执行代码:通过,提交:失败。卧槽?看一下错误提示,发现忽略了示例2这种,“长宽”不等的情况。转换思路,内外循环翻转。最外循环每执行一次即一列当做行。执行,通过。

不过这版看起来太捞了,而且执行时间太慢。但毕竟自己实现了,可以去评论区找一下其他思路。

下面这个就是看评论区大神实现,第一次都没看懂。

var transpose = function(A) {    return Array.from({length:A[0].length},(_v,i)=>A.map(v=>v[i]))};复制代码

登录后复制

{length:A[0].length},是以给定矩阵的宽作为转置矩阵的长,为了满足“拥有 length 属性的对象”这一条件。(_v,i)=>A.map(v=>v[i]),取给定矩阵的列作为转置矩阵的行。核心思路和我第二版是一样的,但是实现方式和技巧就秀太多了。而且执行时间也较短,膜拜大神。

想了解更多编程学习,敬请关注php培训栏目!

以上就是需要知道的JS数组之Array.from的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2725839.html

(0)
上一篇 2025年3月7日 23:26:45
下一篇 2025年2月28日 10:38:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS数组学习之判断数组元素是不是都满足给定条件

    在上一篇文章《js数组学习之遍历数组,将元素值全部扩大一倍》中,我们介绍了遍历数组,对数组中每个元素进行处理的方法。这次继续聊聊数组的遍历,介绍一下检测数组元素是否全部符合指定条件的几种方法,有需要的朋友可以学习了解一下~ 那么如何判断数组…

    2025年3月7日
    200
  • JS数组学习之返回满足给定条件的全部元素

    在之前的文章《js数组学习之判断数组元素是不是都满足给定条件》中,我们介绍了几种检测数组元素是否全部符合指定条件的方法。这次我们继续聊聊数组的遍历,介绍一下javascript返回数组中满足指定条件元素的方法,有需要的朋友可以学习了解一下~…

    2025年3月7日 编程技术
    200
  • JS数组学习之返回满足给定条件的首个元素

    在之前的文章《js数组学习之返回满足给定条件的全部元素》中,我们介绍了过滤数组元素,获取满足给定条件的全部元素的方法。这次我们继续聊聊过滤元素,介绍一下获取第一个满足给定条件元素的方法,有需要的朋友可以学习了解一下~ 今天本文的主要内容是:…

    2025年3月7日 编程技术
    200
  • JS数组学习之检查是不是存在给定元素

    在上一篇文章中我们介绍了javascript返回满足给定条件首个元素的3种方法,感兴趣的可以点击链接进行查阅→《js数组学习之返回满足给定条件的首个元素》。这次我们继续javascript数组的学习,来聊聊利用js怎么检测指定值在数组中是否…

    2025年3月7日
    200
  • JS数组学习之反向连接全部元素并输出字符串

    在之前的文章《js数组学习之怎么拼接全部元素,返回一个字符串》、《js数组学习之迭代数组计算元素总和、将值连接成字符串》中,我们介绍了按照数组顺序,从左到右正向拼接全部元素,形成一个字符串的几种方法。这次我们继续介绍js数组转字符串,聊聊逆…

    2025年3月7日 编程技术
    200
  • 【归纳总结】JS数组的常见操作方法,助你提高开发效率!

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组相关操作。本篇文章就归纳总结了一些常见的操作方法分享给大家,要是在开发中能信手拈来,可大大提高开发效率。 随机排序 1、生成随机数 遍历数组,每次循环都随机一个在数组长度范围内的数,并交…

    2025年3月7日
    200
  • php数组如何转js数组对象

    php数组转js数组对象的方法:首先获取【$arr】数组;然后使用函数【json_encode()】将数组每一个值进行json编码,;接着输出一个json的数组;最后使用arr接受数组。 相关学习推荐:js视频教程 php数组转js数组对象…

    2025年2月24日
    200
  • js数组怎么转为php数组

    在web开发中,由于javascript(js)和php是两种最为常用的编程语言,因此数组在开发过程中是不可避免的。针对这种情况,很多时候我们需要将js数组转为php数组。实现这种功能的方法有很多,下面将一一介绍。 方法一:使用AJAX请求…

    编程技术 2025年2月24日
    200
  • js数组可以转化成php数组吗

    js数组可以转化成php数组,其操作方法是:1、建立php示例文件;2、使用语法“JSON.stringify()”将js数组转化为JSON格式的字符串;3、使用语法“json_decode()”将JSON格式字符串转为PHP数组,此处添加…

    2025年2月23日
    200
  • php数组怎么转js数组

    PHP数组转换为JavaScript数组,可以使用JSON格式化函数来实现,具体步骤为:1、在PHP中,使用“json_encode()”函数将数组转换为JSON字符串;2、将生成的JSON字符串传递给JavaScript中的“JSON.p…

    2025年2月23日
    200

发表回复

登录后才能评论