JS总结篇03--数据类型（下篇）

一，迭代器类型对象

迭代器类型对象是一种广义的数组，是指对象实现了obj[Symbol.iterator]方法能够通过for…of来遍历的对象。数组和字符串都是可迭代对象。

迭代对象运行原理：
1.当for…of开始执行时，调用obj[Symbol.iterator]()
2.该方法必须返回一个带有next()方法的对象
3.当for…of获取下一个值的时候，调用next()方法
4.next()方法返回对象格式为{done:Boolean,value:any}当done = true时，代表已经遍历完毕。

let range = {
  from: 1,
  to: 5
};

// 1. call to for..of initially calls this
range[Symbol.iterator] = function() {

  // 2. ...it returns the iterator:
  return {
    current: this.from,
    last: this.to,

    // 3. next() is called on each iteration by the for..of loop
    next() {
      // 4. it should return the value as an object {done:.., value :...}
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  };
};

// now it works!
for (let num of range) {
  alert(num); // 1, then 2, 3, 4, 5
}

类数组对象：
具备坐标和length属性的对象。

Array.from():
将迭代器对象或类数组对象转换为数组的方法。

二，Map，Set，WeakMap，WeakSet

Map: map和object一样，也是键值对的集合，不同点在于Map允许使用任何类型的key，而object的key只能为string或Symbol。

方法：
new Map([entries]) 创建Map
map.set(key, value) 存储
map.get(key) 读
map.has(key) 返回boolean
map.delete(key) 删除
map.clear() 清空
map.size

map中比较key值是否相等采用类似===比较，不同的是NaN此时等于NaN

Map遍历
map.keys() 返回keys的iterable
map.values() 返回values的iterable
map.entries() 返回[key, value]的iterable
map.forEach((value, key, map)=>{})
遍历顺序与插入顺序相同

Set
set是一系列值得集合，每个值仅允许出现一次。
方法：
new Set([iteratable]) 创建set
set.add(value) 返回新的set
set.delete(value) 返回boolean
set.has(value) 返回boolean
set.clear()
set.size();

遍历：
for…of 或 set.forEach()
set.keys() 返回值的iterable
set.values() 返回值的iterable
set.entries() 返回值[value,value]的iterable

WeakMap，WeakSet
当Map以对象作为key值或Set以对象作为元素的时候，如果该对象处于不可访问状态，此时垃圾回收器不会回收该对象，因此会造成内存泄漏。WeakMap和WeakSet因此诞生。

WeakMap只支持以对象作为key，WeakSet只支持以对象作为值。
weakMap支持方法：
weakMap.get(key)
weakMap.set(key,value)
weakMap.delete(key,value)
weakMap.has(key)

weakSet支持的方法：
weakSet.add(value)
weakSet.has(value)
weakSet.delete(value)

支持keys(),values(),entries()的类型：
Map/Set/Array
普通对象支持 Object.keys()/Object.values()/Object.entries()
Object.*返回的是数组，而Map.keys()等返回的是iterable，前者不写在原型中的原因是为了灵活性，使用户自定义的类型可以拥有自己的keys()/values()/entries()方法，也可以调用到Object.keys()/values()/entries()

获取symbolic类型的参数时，可用Object.getOwnPropertySymbols(obj)
或Reflect.ownKeys(obj)

三.解构赋值

解构赋值是一种特殊的语法，允许我们从数组或对象中提取值并赋给变量。

数组解构

右侧可以为任何可迭代对象。
如：
let [a, b, c] = “abc”; // [“a”, “b”, “c”]
let [one, two, three] = new Set([1, 2, 3]);

//1.
// we have an array with the name and surname
let arr = ["Ilya", "Kantor"]

// destructuring assignment
let [firstName, surname] = arr;

alert(firstName); // Ilya
alert(surname);  // Kantor

//2.
let [firstName, surname] = "Ilya Kantor".split(' ');

//3.
// first and second elements are not needed
let [, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

//4.
let user = {
  name: "John",
  age: 30
};

// loop over keys-and-values
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

rest操作符"…"
如果我们只想获取数组前面几个参数，而将后面的其他参数聚集到一个数组时，可以用rest操作符。

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

默认值
默认值可以为表达式，仅当值没有提供时才会执行。

// runs only prompt for surname
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius (from array)
alert(surname); // whatever prompt gets

对象解构

1.
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

2.
let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

rest操作符，只有小部分浏览器支持；

注意点：

原因是遇见{}时，程序会将该代码看成独立代码块，因此报错。

// error in this line
{title, width, height} = {title: "Menu", width: 200, height: 100};

// okay now
({title, width, height} = {title: "Menu", width: 200, height: 100});

嵌套赋值

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true    // something extra that we will not destruct
};

// destructuring assignment on multiple lines for clarity
let {
  size: { // put size here
    width,
    height
  },
  items: [item1, item2], // assign items here
  title = "Menu" // not present in the object (default value is used)
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

为了函数传参方便，通常采用以下形式：

// simplified parameters a bit for clarity
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

四.Date

1.创建
new Date();
new Date(timestamp);
new Date(“YYYY-MM-DDTHH:mm:ss.sssZ”）;
new Date(year,month,day,hours,minus,seconds,ms);

2.获取时间
getFullYear() ; 4位数字的年份
getMonth(); 0~11
getDate(); 1~31
getHours(); 0~23
getMinutes(); 0~59
getSeconds(); 0~59
getMillseconds(); 0~999
getDay; 0~6 一周中的第几天 周日为6
以上方法均有对应的UTC方法
getTime();获取UTC距离1970年一月一日的毫秒数
getTimezoneOffset()；获取时区

设置时间：
setFullYear(year [,month,date])
setMonth(month [,date])
setDate(date)
setHours(hour [,min,sec,ms])
setMinutes(min [,sec,ms])
setSeconds(sec [,ms])
setMilliseconds(ms)
以上方法均有对应的UTC方法如：setUTCHours()
setTime(milliseconds)

自动纠正机制：
当设置了超出范围的值的时候，系统会根据偏移的多少来调整日期，即进行日期计算
如：

let date = new Date(2013, 0, 32); // 32 Jan 2013 ?!?
alert(date); // ...is 1st Feb 2013!

let date = new Date();
date.setSeconds(date.getSeconds() + 70);

alert( date ); // shows the correct date


let date = new Date(2016, 0, 2); // 2 Jan 2016

date.setDate(1); // set day 1 of month
alert( date );

date.setDate(0); // min day is 1, so the last day of the previous month is assumed
alert( date ); // 31 Dec 2015

date转number类型：
相当于date.getTime()
date类型可以相减，返回相差的毫秒数(ms)

Date.now(): 获取当前时间戳
此方法无需创建对象，比date.getTime()速度快。

Date.parse(‘YYYY-MM-DDTHH:mm:ss.sssZ’)
Date.parse(‘YYYY-MM’)
Date.parse(‘YYYY’)
Date.parse()返回timestamp

五.JSON

JSON.stringify(obj)
注意点：
1.json编码化的字符串同原对象的差别：
字符串都是双引号，而不是单引号或反引号
字符串属性也需要用双引号包裹。

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

alert(typeof json); // we've got a string!

alert(json);
/* JSON-encoded object:
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

2.有以下几种类型不可进行转换，将会被无视掉
函数
Symbolic
值为undefined的参数

let user = {
  sayHi() { // ignored
    alert("Hello");
  },
  [Symbol("id")]: 123, // ignored
  something: undefined // ignored
};

alert( JSON.stringify(user) ); // {} (empty object)

3. 无法转换有循环引用的对象。

语法：
let json = JSON.stringify(value[, replacer, space])
value:待转换对象
replacer: 需要转换的属性的数组，或者映射函数function(key,value)
space: 缩进位数

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup references room
};

room.occupiedBy = meetup; // room references meetup

alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
/*
{
  "title":"Conference",
  "participants":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}


或

alert( JSON.stringify(meetup, function replacer(key, value) {
  alert(`${key}: ${value}`); // to see what replacer gets
  return (key == 'occupiedBy') ? undefined : value;
}));
/* key:value pairs that come to replacer:
:             [object Object]
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

对象可以实现自己的toJSON（）方法，当JSON.stringify()转换该对象时，就会采用toJSON()方法进行转换。

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

let meetup = {
  title: "Conference",
  room
};

alert( JSON.stringify(room) ); // 23

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "room": 23
  }
*/

JSON.parse

语法：
JSON.parse(str [,reviver])

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // now works!

JSON字符串必须严格规范，如：

let json = `{
  name: "John",                     // mistake: property name without quotes
  "surname": 'Smith',               // mistake: single quotes in value (must be double)
  'isAdmin': false                  // mistake: single quotes in key (must be double)
  "birthday": new Date(2000, 2, 3), // mistake: no "new" is allowed, only bare values
  "friends": [0,1,2,3]              // here all fine
}`;