js中的Array.from()和Array.of()方法的用法详情

在这里插入图片描述

😁 作者简介:一名大四的学生,致力学习前端开发技术
⭐️个人主页:夜宵饽饽的主页
❔ 系列专栏:JavaScript小贴士
👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气

​🔥​前言:

本文是关于Array.from方法和Array.of方法的运用,这是一种创建数组和类型转化成数组的方法,希望可以帮助到大家,欢迎大家的补充和纠正

8.2 Array.from()

8.2.1 含义

Array.from方法用于将两类对象转为真正的数组

  1. 类似数组的对象,比如:DOM操作返回的NodeList集合,以及函数内部的arguments对象
  2. 可遍历(iterable)对象(包括ES6新增的数据结构Set和Map)

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

Array.from(arrayLike,x=>x*x)

//等同于
Array.from(arrayLike).map(x => x*x)

⭐️ Array和扩展运算符的区别

先解释何为类似数组对象的:本质特征只有一点,即必须有 length属性

扩展运算符: 其背后调用的是遍历器接口(Symbo.iterator),如果一个对象没有部署该接口,就无法转换

Array.from(): 其是支持类似数组对象,任何有length对象,都可以通过Array.from方法转换为数组,扩展运算符是无法转换这种情况的

Array.from({
    length:3 })
//[undefined,undefined,undefined]

8.2.3 应用

  1. Array.from()可以将各种值转为真正的数组,并且提供map功能。这实际上意味着,只要有一个原始数据结构,就可以先对它的值进行处理,然后转成规范的数组结构,在使用数组方法进行操作
  2. Array.from()可以将字符串转为数组,然后返回字符串的长度,因为它可以正确处理各种Unicode字符,可以避免JavaScript将大于 、uFFFF的Unicode字符算作2个字符的bug

8.2.4 实例

//传入字符串
let str='foo'
let ex1=Array.from(str)
console.log(ex1)

//传入Set类型的
const set=new Set(['foo','bar','baz','foo'])
let ex2=Array.from(set)
console.log(ex2)

//传入Mao类型
const mapper=new Map([
    [1,2],
    [2,4],
    [4,8]
])
let ex3=Array.from(mapper)
console.log(ex3)

//传入类数组对象
function f(){
   
    return Array.from(arguments)
}

let ex4=f(1,2,3)
console.log(ex4)

8.3 Array.of()

📑 描述: 将一组值转为数组

Array.of(3,2,6) //[3,2,6]

使用细节:

这个方法主要是用于弥补数组构造函数Array()的不足,因为参数个数不同会导致Array()的行为差异

Array(3) //[, , ,]
Array(3,11,8) //[3,11,8]

Array只有当参数个数不少于2个时,Array()才会返回有参数组成的新数组

Array.of 基本上可以用来替代Array()或 new Array()

8.3 最后:

🌼下面推荐的两篇文章可以补充和扩展文章中涉及的知识点 😃

相关推荐

  1. Pythonclass类方法用法详解及常见坑

    2023-12-22 10:12:07       32 阅读
  2. js! 、!!、?.、??、??=用法及使用场景

    2023-12-22 10:12:07       24 阅读
  3. jsconsole.log()使用方法

    2023-12-22 10:12:07       55 阅读
  4. WordPress引入cssjs方法

    2023-12-22 10:12:07       55 阅读
  5. C语言#define用法详解

    2023-12-22 10:12:07       67 阅读
  6. SQL Server RAISERROR 用法详解

    2023-12-22 10:12:07       56 阅读
  7. pythonjson用法(详细)

    2023-12-22 10:12:07       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-22 10:12:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-22 10:12:07       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-22 10:12:07       82 阅读
  4. Python语言-面向对象

    2023-12-22 10:12:07       91 阅读

热门阅读

  1. 计算机网络个人小结

    2023-12-22 10:12:07       58 阅读
  2. Vite与Webpack对比

    2023-12-22 10:12:07       57 阅读
  3. 访问者模式

    2023-12-22 10:12:07       63 阅读
  4. 【HTML5】HTML5 语音合成

    2023-12-22 10:12:07       57 阅读
  5. 最小二乘法

    2023-12-22 10:12:07       62 阅读
  6. 【打卡】牛客网:BM69 把数字翻译成字符串

    2023-12-22 10:12:07       54 阅读
  7. 《漫画算法》笔记——内存管理算法LRU

    2023-12-22 10:12:07       57 阅读
  8. 2866. 美丽塔 II(单调栈)

    2023-12-22 10:12:07       73 阅读