1. 程式人生 > >es6中Array.from()和陣列去重

es6中Array.from()和陣列去重

Array.from()

1.複製陣列,如果傳的是陣列,將把陣列複製一份傳給新陣列。

let arr = [1,2,3,4,5];
let arr2 = Array.from(arr);
console.log(arr)        // [1,2,3,4,5]
console.log(arr2)        // [1,2,3,4,5]

2.如果是偽陣列,將會轉成陣列在賦給新陣列。

// html程式碼
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
// script程式碼
let oli = document.querySelectorAll("li");

console.log(oli);   //NodeList(5) [li, li, li, li, li]

let arr2 = Array.from(oli);

console.log(arr2);  //(5) [li, li, li, li, li] 

 2.1 用...擴充套件運算子也是可以的

let arr3 = [...oli];

console.log(arr3);  //(5) [li, li, li, li, li]

3.利用Array.from() 可以將Unicode編碼拆解成陣列。

console.log(Array.from('\u6211\u7231\u6572\u4ee3\u7801')) 

//(5) ["我", "愛", "敲", "代", "碼"]

4.轉換json物件為陣列

一個類陣列物件必須要有length,他們的元素屬性名必須是數值或者可以轉換成數值的字元。注意:屬性名代表了陣列的索引號,如果沒有這個索引號,轉出來的陣列中對應的元素就為空。

 4.1 如果物件不帶length屬性,那麼轉出來就是空陣列。

let json = {
    0:"a",
    1:"b",
    2:"c",
    3:"zk",
    four:"4",
    5:"zs",
}

let arr = Array.from(json);

console.log(arr);    //[]

4.2 有length屬性,空餘的索引值將會是undefined

let json = {
    0:"a",
    1:"b",
    2:"c",
    3:"zk",
    four:"4",
    5:"zs",
    length:7,
}

let arr = Array.from(json);

console.log(arr);   //(7) ["a", "b", "c", "zk", undefined, "zs", undefined]

Array.from()接受三個引數

1.被轉換的物件

2.mapFn 是一個map函式

3.this指向

示例:

map 函式 用來對轉換中,每一個元素進行加工,並將加工後的結果作為結果陣列的元素值。

let arr = [1,2,3,4,5];

let arr2 = Array.from(arr,(item) => { return item * 2})

// 上面的map函式實際上是給陣列中的每個數值 * 2。

console.log(arr2)

陣列去重 

Array.from() 裡面部署了很多的介面物件

利用 set 可以實現陣列去重。

let arr = [1,1,"six","six",null,null,undefined,undefined,false,false,true,true,"",""];

// new Set 是實現陣列去重,
// Array.from()把去重之後轉換成陣列

let arr2 = Array.from(new Set(arr));

console.log(arr2);

相容性

 IE 是完全不相容的,使用的時候要小心,如果要相容IE,請自行百度相容性方法.