Array.from的食用指南

简介: Array.from的食用指南
看红宝书+查资料,重新梳理JavaScript的知识。

将伪数组转换成数组

伪数组:有若干索引属性的任意对象以及一个length属性

const fakeArr = {
  0: 'red',
  b: 'blue',
  2: 'purple',
  w: 'white',
  length: 4
}

console.log(Array.from(fakeArr))  // ['red', undefined, 'purple', undefined]

伪数组的属性名应该是索引,所以上面的例子中,属性名是字母的都得不到结果,因为没有该索引位置上的属性,所以最终的结果是 undefined

const fakeArr = {
  0: 'red',
  1: 'blue',
  2: 'purple',
  3: 'white',
  4: 'black',
  length: 4
}

console.log(Array.from(fakeArr))  //  ['red', 'blue', 'purple', 'white']

其次,如果如果伪数组的属性有很多(个数比 length属性还要多)的话,就会直截取一段 length长度的。如上面例子中, fakeArr对象中实际有5个属性(除掉 length),但是最终通过 Array.from转换成的真数组的长度为4。

将字符串转换成数组

const mystr = 'Hello, CLZ!'
console.log(Array.from(mystr))  // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'C', 'L', 'Z', '!']

将可迭代对象转换成数组

map

const mymap = new Map()
mymap.set('name', 'clz')
mymap.set('age', 21)

console.log(mymap)
console.log(Array.from(mymap))

image-20220415004308593

set

const myset = new Set()

myset.add(1)
myset.add(2)
myset.add(1)
myset.add(3)

console.log(myset)              // Set(3) {1, 2, 3}
console.log(Array.from(myset))  // [1, 2, 3]

配合Set使用实现数组去重

首先,利用的是 Set结构不允许重复的特性,然后利用 Array.from可以将可迭代对象转换成数组,而 Set恰恰也是可迭代对象。

function unique(arr) {
  return Array.from(new Set(arr))
}

console.log(unique([1, 2, 3, 2, 1, 6, 6, 7, 5]))  // [1, 2, 3, 6, 7, 5]

浅克隆

因为数组也是可迭代对象,所以也可以将数组转换成数组,而这就实现了克隆

function shallowClone(arr) {
  return Array.from(arr)
}

const arr = [1, 2, 3, 4, 5]
const arrCopy = shallowClone(arr)

console.log(arr)
console.log(arrCopy)

arrCopy[2] = 999
console.log('%c%s', 'color: red;font-size: 24px;', '=====================')

console.log(arr)
console.log(arrCopy)

image-20220415092319749

另外,Array.from是浅克隆,即如果数组里面有对象,那么只是复制对象的引用而已。所以修改克隆的对象,也会修改到原来的对象。直接给对象赋新值倒是不会修改到原来的对象因为这个时候是直接把地址给修改了。

function shallowClone(arr) {
  return Array.from(arr)
}

const arr2 = [
  {
    name: 'clz',
    age: 21
  },
  {
    name: 'czh',
    age: 1
  }
]

const arrCopy2 = shallowClone(arr2)

arrCopy2[1].age = 999
console.log(arr2)
console.log(arrCopy2)

image-20220415092444023

接收第二个映射函数参数

可以直接修改数组的每一项的值,而不再需要 Array.from().map(),因为 Array.from().map()会创建出一个中间数组,而这个中间数组你没办法使用,却会占内存。

const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1, x => x ** 2);
console.log(a2); // [1, 4, 9, 16]

const a3 = Array.from(a1).map(x => x ** 2)    // 用这个方法来实现的话,会创建一个访问不到的中间数组
console.log(a3)   // [1, 4, 9, 16]

接收第三个映射函数参数

第三个参数可以指定第二个映射函数参数中 this的值。这么一说,Array.from既有类似 map的功能,还有类似 bind的功能。

const a1 = [1, 2, 3, 4];

const a2 = Array.from(a1, function (x) {
  return x * this.value
}, {
  value: 3
})

console.log(a1)   //  [1, 2, 3, 4]
console.log(a2)   //  [3, 6, 9, 12]

参考链接:

目录
相关文章
|
前端开发 应用服务中间件 Linux
一份简单够用的 Nginx Location 配置讲解
Location 是 Nginx 中一个非常核心的配置,这篇重点讲解一下 Location 的配置问题以及一些注意事项。
2524 0
一份简单够用的 Nginx Location 配置讲解
|
机器学习/深度学习 存储 边缘计算
边缘计算
【7月更文挑战第13天】边缘计算
307 7
|
索引 Python
【Python】数据解析—Xpath解析
【Python】数据解析—Xpath解析
193 0
|
Web App开发 JavaScript 前端开发
TE二次开发:BS和CS的架构说明
skyline二次开发,BS和CS的架构说明
309 0
|
前端开发 JavaScript 程序员
「《奇迹再现》专属音乐播放器🎵」致以跃动的心与阳光
「《奇迹再现》专属音乐播放器🎵」致以跃动的心与阳光
369 0
|
JavaScript
vue下一代状态管理Pinia.js 保证你看的明明白白!(下)
vue下一代状态管理Pinia.js 保证你看的明明白白!
vue下一代状态管理Pinia.js 保证你看的明明白白!(下)
|
前端开发 Java
图书管理系统【部署开发环境、解决分类、图书、前台页面模块】五
巩固Servlet+JSP开发模式,做一个比较完整的小项目.
226 0
图书管理系统【部署开发环境、解决分类、图书、前台页面模块】五
|
弹性计算 Linux 数据库
飞天加速计划·高校学生在家实践 续费任务文章
得益于ECS,我们部署了自己的服务端,使用阿里云ECS Server,我不仅体验了基本的Linux操作命令,理解了远程控制的概念,还对Linux操作系统有了更深入的了解
|
JavaScript 前端开发 Java
Javascript前端和JAVA后端对加密库的处理实例
前端加密 Javascript的加解密有开源的库,http://www.oschina.net/p/crypto-js/ 如下是具体的使用例子 //引入的js文件在该链接中:https://github.
1585 0
|
4天前
|
弹性计算 运维 搜索推荐
三翼鸟携手阿里云ECS g9i:智慧家庭场景的效能革命与未来生活新范式
三翼鸟是海尔智家旗下全球首个智慧家庭场景品牌,致力于提供覆盖衣、食、住、娱的一站式全场景解决方案。截至2025年,服务近1亿家庭,连接设备超5000万台。面对高并发、低延迟与稳定性挑战,全面升级为阿里云ECS g9i实例,实现连接能力提升40%、故障率下降90%、响应速度提升至120ms以内,成本降低20%,推动智慧家庭体验全面跃迁。