澳门新葡萄京官网注册ES6学习笔记(三):与迭代相关的新东东

Map对象

Map对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 ;

ES6中Map相对于Object对象有几个区别:

1:Object对象有原型, 也就是说他有默认的key值在对象上面,
除非我们使用Object.create(null)创建一个没有原型的对象;

2:在Object对象中, 只能把String和Symbol作为key值
但是在Map中,key值可以是任何基本类型(String, Number, Boolean,
undefined, NaN….),或者对象(Map, Set, Object, Function , Symbol ,
null….);

3:通过Map中的size属性, 可以很方便地获取到Map长度,
要获取Object的长度, 你只能用别的方法了;
Map实例对象的key值可以为一个数组或者一个对象,或者一个函数,比较随意
,而且Map对象实例中数据的排序是根据用户push的顺序进行排序的,
Object实例中key,value的顺序就是有些规律了,
(他们会先排数字开头的key值,然后才是字符串开头的key值);

Symbol

Map实例的属性

map.size这个属性和数组的length是一个意思,表示当前实例的长度;

概念

Symbol:一种新的原始数据类型,表示独一无二的值。

注意:Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();

s1 === s2 // false

// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");

s1 === s2 // false

Map实例的方法

clear()方法, 删除所有的键/值对;
delete(key), 删除指定的键/值对;
entries()返回一个迭代器, 迭代器按照对象的插入顺序返回[澳门新葡萄京官网注册 ,key,
value];
forEach(callback , context) 循环执行函数并把键/值对作为参数;
context为执行函数的上下文this;
get(key) 返回Map对象key相对应的value值;
has(key) 返回布尔值, 其实就是返回Map对象是否有指定的key;
keys() 返回一个迭代器,迭代器按照插入的顺序返回每一个key元素;
set(key, value) 给Map对象设置key/value 键/值对,
返回这个Map对象(相对于Javascript的Set,Set对象添加元素的方法叫做add,而Map对象添加元素的方法为set;
[@@iterator] 和entrieds()方法一样, 返回一个迭代器,
迭代器按照对象的插入顺序返回[key, value];

作为属性的Symbol

三种写法:

var mySymbol = Symbol();

// 第一种写法
var a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
var a = {
  [mySymbol]: 'Hello!'
};

// 第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

注意,Symbol值作为对象属性名时,不能用点运算符。

自己模拟一个Map构造器:

既然知道了Map对象的方法和属性, 我们也可以自己模拟一个Map构造器
需要生成器的支持,
所以要在ES5中使用还需要生成器的补丁(模拟Set构造器)
:

<html>
<head>
    <meta charMap="utf-8">
</head>
<body>
    <script>
        "use strict";
        class Map {
            /**
             * @param [[key, value], [k, val]];
             * @return void;
             */
            static refresh (arg) {
                for(let [key,value] of arg) {
                    //判断是否重复了;
                    let index = Map.has.call(this, key);
                    if(index===false) {
                        this._keys.push(key);
                        this._values.push(value);
                    }else{
                        //如果有重复的值,那么我们执行覆盖;
                        this._keys[index] = key;
                        this._values[index] = value;
                    }
                };
                this.size = this._keys.length;
            }
            /**
             * @desc return false || Number;
             * */
            static has (key) {
                var index = this._keys.indexOf(key);
                if(index === -1) {
                    return false;
                }else{
                    return index;
                };
            }
            constructor(arg) {
                this._keys = [];
                this._values = [];
                Map.refresh.call(this, arg);
            }
            set (key, value) {
                Map.refresh.call(this, [[key,value]]);
                return this;
            }
            clear () {
                this._keys = [];
                this._values = [];
                return this;
            }
            delete (key) {
                var index = Map.has.call(this, key);
                if(index!==false) {
                    this._keys.splice(index,1);
                    this._values.splice(index,1);
                };
                return this;
            }
            entries () {
                return this[Symbol.iterator]();
            }
            has (key) {
                return Map.has.call(this, key) === false ? false : true;
            }
            *keys() {
                for(let k of this._keys) {
                    yield k;
                }
            }
            *values () {
                for(let v of this._values) {
                    yield v;
                }
            }
            //直接使用数组的forEach方便啊;
            forEach (fn, context) {
                return this;
            }
            //必须支持生成器的写法;
            *[Symbol.iterator] (){
                for(var i=0; i<this._keys.length; i++) {
                    yield [this._keys[i], this._values[i]];
                }
            }
        };
        var map  = new Map([["key","value"]]);
        map.set("heeh","dada");
        console.log(map.has("key")); //输出:true;
        map.delete("key");
        console.log(map.has("key"));  //输出:false;
        map.set("key","value");
        var keys = map.keys();
        var values = map.values();
        console.log(keys.next());
        console.log(keys.next());
        console.log(values.next());
        console.log(values.next());
        var entries = map.entries();
        console.log(entries);
    </script>
</body>
</html>

Map的使用Demo:

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 我们给myMap设置值
myMap.set(keyString, "字符串'");
myMap.set(keyObj, "对象");
myMap.set(keyFunc, "函数");

myMap.size; // 输出长度: 3

// 获取值
console.log(myMap.get(keyString));    // 输出:字符串
console.log(myMap.get(keyObj));       // 输出:对象
console.log(myMap.get(keyFunc));      // 输出:函数

console.log(myMap.get("a string"));   // 输出:字符串

console.log(myMap.get({}));           // 输出:undefined
console.log(myMap.get(function() {})) // 输出:undefined

我们也可以把NaN,undefined,
对象,数组,函数
等这些作为一个Map对象的key值 :

"use strict";
let map = new Map();
map.set(undefined, "0");
map.set(NaN, {});
console.log(map); //输出:Map { undefined => '0', NaN => {} }

Symbol属性名的遍历

Object.getOwnPropertySymbols方法,可以获取指定对象的所有Symbol属性名。
Reflect.ownKeys方法可以返回所有类型的键名,包括常规键名和Symbol键名。

循环Map的方法

使用Map实例的forEach方法;

"use strict";
let map = new Map();
map.set(undefined, "0");
map.set(NaN, {});
map.forEach(function(value ,key ,map) {
    console.log(key,value, map);
});

使用for…of循环:

"use strict";
let map = new Map();
map.set(undefined, "0");
map.set(NaN, {});
for(let [key, value] of map) {
    console.log(key, value);
}
for(let arr of map) {
    console.log(arr);
}

Symbol.for(),Symbol.keyFor()

Symbol.for(key):
返回一个命名为key的Symbol值,如果没有则创建。可使不同变量使用同一个Symbol
Symbol.keyFor(value): for的逆操作

WeakMap

WeakMap是弱引用的Map对象,
如果对象在js执行环境中不存在引用的话,相对应的WeakMap对象内的该对象也会被js执行环境回收;

WeakMap对象的属性:无

WeakMap对象的方法:

delete(key) : 删除指定的键/值对;

get(key) :返回Map对象key相对应的value值;

has(key) :返回布尔值, 其实就是返回Map对象是否有指定的key;

set(key):给Map对象设置key/value 键/值对, 返回这个Map对象;

WeakMap相对于Map少了很多的方法,
我们也可以自己再来实现这些方法,比如我们再实现一个Map实例的clear方法:

class ClearableWeakMap {
  constructor(init) {
    this._wm = new WeakMap(init)
  }
  clear() {
    this._wm = new WeakMap()
  }
  delete(k) {
    return this._wm.delete(k)
  }
  get(k) {
    return this._wm.get(k)
  }
  has(k) {
    return this._wm.has(k)
  }
  set(k, v) {
    this._wm.set(k, v)
    return this
  }
}

参考:

MDN:

ruanyifeng:

Set和Map数据类型

Set

概念:类似数组,但是没有重复的值
初始化: new Set([1,2,3,4,4])

注意:在Set内部,两个NaN是相等。而两个空对象不相等,所以它们被视为两个值。

set的属性和方法

Set.prototype.constructor
Set.prototype.size // 获取成员总数

实例方法:
1.操作方法
add():添加某个值,返回Set结构本身。
delete():删除某个值,返回一个布尔值,表示删除是否成功。
has():返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。

2.遍历方法
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员

WeakSet

概念:也是set数据类型,但是成员只能是对象
特点:无法引用WeakSet的成员,因此WeakSet是不可遍历的

Map

概念:类似对象,但是键不限于字符串
初始化:new Map(Object or Array) Object或Array必须是形似键值对集合的

var map = new Map([['name', '张三'], ['title', 'Author']]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

Map属性和方法:

size属性:返回Map结构的成员总数。

1.操作方法:

set(key, value):设置键值对
get(key):获取对应键的值
has(key):是否有对应键
delete(key):删除对应键
clear():清除所有成员

2.遍历方法
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员

需要特别注意的是,Map的遍历顺序就是插入顺序。

问题:map要使用数组的方法怎么用更方便?

let map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);

WeakMap

概念:也是Map数据类型,但是成员只能是对象
特点:键名所指向的对象,不计入垃圾回收机制

WeakMap与Map在API上的区别:
一是没有遍历操作(即没有key()、values()和entries()方法),也没有size属性;
二是无法清空,即不支持clear方法。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。
因此,WeakMap只有四个方法可用:get()、set()、has()、delete()。

Iterator

概念:

1.适用对象:Array、Map、Set、某些类似数组的Object
2.作用
Iterator的作用有三个:
一是为各种数据结构,提供一个统一的、简便的访问接口;
二是使得数据结构的成员能够按某种次序排列;
三是ES6创造了一种新的遍历命令for…of循环,Iterator接口主要供for…of消费。

凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。

一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。

调用场合

1.解构赋值
2.扩展运算符
3.yield
4.所以任何接受数组作为参数的场合,其实都调用了遍历器接口。

字符串的Iterator

for…of

遍历拥有Iterator接口的集合
适用范围:数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM
NodeList对象)、后文的Generator对象,以及字符串。

for…in循环有几个缺点:
1.数组的键名是数字,但是for…in遍历会转化成字符串
2.不止遍历自身,还会遍历原型链上的属性
3.某些情况下,会以任意顺序遍历

发表评论

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