1. 程式人生 > 實用技巧 >Js Array.from() 將類似陣列物件轉換成陣列

Js Array.from() 將類似陣列物件轉換成陣列

Array.from()會把類似陣列的物件轉換成真實陣列,物件需滿足兩個條件:

  1. 具有length屬性,length的值即為陣列的長度
  2. 物件key要是數字,並會作為陣列的下標
let obj = {
    '0': 'first',
    '1': 'second',
    '2': 'third',
    length: 3
}
let arr = Array.from(obj)
console.log(arr) //["first", "second", "third"]

//es5 實現
let arr2 = Array.prototype.slice.call(obj)
console.log(arr2) //["first", "second", "third"]

Array.from()同樣會對可遍歷的資料結構(如Set)和字串進行轉換

Array.from('abc') //["a", "b", "c"]

let arr = Array.from(new Set(['a','b','c']))
console.log(arr) //["a", "b", "c"]

此方法可以快速實現陣列的複製

let arr = ['a','b',{'c1':'hello','c2':'world'}]
let newArr = Array.from(new Set(arr))
console.log(newArr) //["a", "b", {c1: "hello", c2: "world"}]
console.log(newArr == arr) //false

//擴充套件運算子同樣可以實現
let newArr2 = [...arr]
console.log(newArr2) //["a", "b", {c1: "hello", c2: "world"}]
console.log(newArr2 == arr) //false

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

Array.from()可以接收第二個引數,類似陣列map方法,返回處理後的結果

let arr = [1, 2, 3]
let newArr = Array.from(arr, item => item *2)
console.log(newArr) //[2, 4, 6]

比如快速生成陣列,每項從1到100

let arr = Array.from(new Array(100), (item, index) => { return index + 1 })
console.log(arr) //[1, 2, 3,..., 100]