玖叶教程网

前端编程开发入门

es6中Array.from()和数组去重(es6实现数组去重)

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,请自行百度兼容性方法.

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言