涉猎ECMAScript6(ES6/ES2015)之集合(Maps,Sets)

Maps:用来存放key/value的映射,类似Object

var map=new Map();
map.set("a",1);
map.set("b",2);
map.get("a");//1
map.delete("a");
map.size;//1
var arr=[...map.values()];//[1,2]

 

Set:用来存放不重复的数据,通过for…of遍历

var mySet = new Set();

mySet.add(1);
mySet.add(5);
mySet.add("some text");
var o = {a: 1, b: 2};
mySet.add(o);

mySet.has(1); // true
mySet.has(3); // false, 3 has not been added to the set
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 4

mySet.delete(5); // removes 5 from the set
mySet.has(5);    // false, 5 has been removed

mySet.size; // 3, we just removed one value

ES6新增API

1)Array.of:初始化一个元素而不是指定数组Length

var a = Array( 3 );
a.length;                       // 3
a[0];                           // undefined

var b = Array.of( 3 );
b.length;                       // 1
b[0];                           // 3

var c = Array.of( 1, 2, 3 );
c.length;                       // 3
c;                              // [1,2,3]

2)Array.from:把类数组转化为数组

 var arrLike = {
 length: 3,
 0: "foo",
 1: "bar"
 };

 var arr = Array.prototype.slice.call(arrLike);//["foo", "bar", undefined]
 var arr2=Array.from(arrLike,function mapper(val,idx){
 if(typeof val=="string"){
 return val.toUpperCase();
 }else{
 return idx;
 }
 });//["FOO", "BAR", 2]

3)arr.copyWithin:数组内部复制,不改变当前数组的长度,并且返回数组。三个参数:目标,开始(默认0开始),结束(默认Length结束)。

 [1,2,3,4,5].copyWithin( 3, 0 ); // [1,2,3,1,2]

 [1,2,3,4,5].copyWithin( 3, 0, 1 ); // [1,2,3,1,5]

 [1,2,3,4,5].copyWithin( 0, -2 ); // [4,5,3,4,5]

 [1,2,3,4,5].copyWithin( 0, -2, -1 ); // [4,2,3,4,5]

我图解一个:

再图解一个:

 

4)arr.fill()

var a = Array( 4 ).fill( undefined );
a;
// [undefined,undefined,undefined,undefined]
var a = [ null, null, null, null ].fill( 42, 1, 3 );//value,startIndex,endIndex

a;                                  // [null,42,42,null]

5)arr.find(fn),arr.findIndex(fn):查找元素,前者返回找到的值(or undefined),后者返回找到的index

6)Object.is():同一比较

 

本文参考原文:https://github.com/getify/You-Dont-Know-JS

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1617
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注