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]

参考链接:

  • https://blog.csdn.net/yangaoyuan1999/article/details/119993661
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Array.from和Array.of是两个不同的Array构造函数的静态方法。 1. Array.from: - Array.from方法用于从可迭代对象或类数组对象创建一个新的数组实例。 - 它接受一个类数组对象或可迭代对象作为第一个参数,可以是类似数组的对象(拥有length属性和索引)或可迭代对象(如Set、Map、字符串等)。 - 可选的第二个参数是一个映射函数,用于对每个元素进行映射转换。 - 可选的第三个参数是指定映射函数中this的值。 - 返回一个新的数组实例。 示例使用Array.from方法创建一个新的数组实例: ```javascript const str = 'hello'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o'] ``` 2. Array.of: - Array.of方法用于创建一个新的数组实例,不论传递的参数数量是多少。 - 它接受任意数量的参数作为数组的元素值,并返回一个包含这些元素的新数组实例。 - 与Array构造函数不同,如果只传递一个参数且该参数为数字类型,则会创建一个具有指定长度的空数组,而不是包含该数字作为唯一元素值的数组。 示例使用Array.of方法创建新的数组实例: ```javascript const arr1 = Array.of(1, 2, 3); console.log(arr1); // [1, 2, 3] const arr2 = Array.of(5); console.log(arr2); // [5] const arr3 = Array.of(5, 'hello', true); console.log(arr3); // [5, 'hello', true] ``` 总结: - Array.from方法用于从可迭代对象或类数组对象创建新的数组实例,并可选择进行映射转换。 - Array.of方法用于创建一个新的数组实例,不论传递的参数数量是多少。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值