es6（var,let,const,set,map,Array.from()）

1.變量聲明--var，const，let

1.1 var - （全局做用域，局部做用域）會有變量提高

//第一個小例子
<script>
    var num = 123;
    function fn(){
        console.log(num);  // undefined
        var num = 46;
        console.log(num) // 46
    }
    fn()
</script>   
//爲何第一個輸出值會是undefined，而不是123呢？由於這裏存在着變量名的提高，其實上述語句至關於：
<script>
    var num = 123;
    function fn(){
        var num;
        console.log(num);  // undefined
        num = 46;
        console.log(num) // 46
    }
    fn()
</script>

//第二個小例子
<script>
    var num = 123;
    if(true){
        console.log(num) // 123
    　　 var num = 456;
        console.log(num)  // 456
    }
    console.log(num)  // 456
</script>
//這裏爲何第一個輸出值不是undefined，第三個輸出值不是123呢？緣由是這樣的，由於var不存在塊級做用域，且變量名會提高，因此上述代碼其實至關於：
<script>
    var num;
    num = 123
    if(true){
    　　console.log(num) // 123
    　　num = 456;
    　　console.log(num)  // 456
    }
    console.log(num)  // 456
</script>

1.2 const - 經常使用來聲明常量，且常量不可修改，必須初始化，存在着塊級做用域

//1.無變量提高
<script>
    function fn(){
    console.log(num); 
    const num = 456;
    console.log(num)
    }
    fn()
</script>
//運行上述代碼會發現會報錯 Uncaught ReferenceError: num is not defined 。這裏說明，使用const來定義的常量名並無提高。
//2.必須初始化
<script>
    const num;
    console.log(num)
</script>
//這裏運行後發現會報錯。 Uncaught SyntaxError: Missing initializer in const declaration 意思是：語法錯誤，在const聲明中沒有初始化。
//3.塊級做用域
<script>
    const num = 456
    if(true){
        const num = 789;
        console.log(num); // 789
    }
    console.log(num) // 456
</script>

1.3 let - let定義的變量存在着塊級做用域，在函數內定義的變量，對函數外部無影響

//1.塊級做用域
<script>
    let num = 789;
    function fn(){
        let num = 46;
        console.log(num) // 46
    }
    fn()
    console.log(num) // 789
</script> 
//2.無變量提高
<script>
    function fn(){
        console.log(num); // Uncaught ReferenceError: num is not defined
        let num = 46;
        console.log(num)
    }
    fn()
</script>

2.set

　ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

2.1 能夠對數組進行去重

var str = new Set("Hello world!");
for(var str1 of str){
  console.log(str1+" ")  
}
//結果會是這樣：H e l o w r d !

function fn(arr){
    return Array.from(new Set(arr))  // Array.from方法能夠將 Set 結構轉爲數組
}
const items = [1,2,3,4,5,6,7,1,2,1,3,1,2,3]
console.log(fn(items))//[1,2,3,4,5,6,7]

let arr1 = [12,13,23,45,46,48,78,79,45,12,13,23];
let arr = new Set(arr1)
console.log([...arr])  // [ 12, 13, 23, 45, 46, 48, 78, 79 ]



let newarr = [1,2,3,4,5,6,7,1,2,1,3,1,2,3]；
newarr = [...new set(newarr)];//[1,2,3,4,5,6,7]
newarr = Array.form(new Set(newarr));//[1,2,3,4,5,6,7]

2.2 set 實例的屬性和方法

1.屬性
    Set.prototype.constructor：構造函數，默認就是Set函數。
    Set.prototype.size：返回Set實例的成員總數。
2.Set 實例的方法分爲兩大類：操做方法（用於操做數據）和遍歷方法（用於遍歷成員）。
    下面先介紹四個操做方法：
        add(value)：添加某個值，返回 Set 結構自己。
        delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
        has(value)：返回一個布爾值，表示該值是否爲Set的成員。
        clear()：清除全部成員，沒有返回值。

s.add(1).add(2).add(2);
// 注意2被加入了兩次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

Set 結構的實例有四個遍歷方法，能夠用於遍歷成員。
        keys()：返回鍵名的遍歷器
        values()：返回鍵值的遍歷器
        entries()：返回鍵值對的遍歷器
        forEach()：使用回調函數遍歷每一個成員

keys方法、values方法、entries方法返回的都是遍歷器對象。因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys方法和values方法的行爲徹底一致。

let set = new Set([
		{
	        ID:'1',
	        Robort_name:'桑桑',
	        Wechat_Name:'Only',
	        is_read:'1'
	    },{
	        ID:'2',
	        Robort_name:'33',
	        Wechat_Name:'O',
	        is_read:'0'
	    },{
	        ID:'3',
	        Robort_name:'55',
	        Wechat_Name:'1',
	        is_read:'1'
	    }
    ])
    for (let item of set.keys()) {
    	//keys() 返回鍵名的遍歷器
	  console.log(item);
	}
	for (let i of set.values()) {
		//values() 返回鍵值的遍歷器
		console.log(i);
	}
	for(let i of set.entries()){
		//entries()：返回鍵值對的遍歷器
		console.log(i)
	}

　　

//擴展運算符（...）內部使用for...of循環，因此也能夠用於 Set 結構。
	let set = new Set(['red', 'green', 'blue']);
	let arr = [...set];
	console.log(arr)
	//['red', 'green', 'blue']

	//擴展運算符和 Set 結構相結合，就能夠去除數組的重複成員。
	let arr1 = [3, 5, 2, 2, 5, 5];
	let unique = [...new Set(arr1)];
	console.log(unique)
	// [3, 5, 2]

	//並且，數組的map和filter方法也能夠間接用於 Set 了。
	let set = new Set([1, 2, 3]);
	set = new Set([...set].map(x => x * 2));
	console.log(set)
	// 返回Set結構：{2, 4, 6}
	let set1 = new Set([1, 2, 3, 4, 5]);
	set1 = new Set([...set1].filter(x => (x % 2) == 0));
	// 返回Set結構：{2, 4}

	//所以使用 Set 能夠很容易地實現並集（Union）、交集（Intersect）和差集（Difference）。
	let a = new Set([1, 2, 3]);
	let b = new Set([4, 3, 2]);
	// 並集
	let union = new Set([...a, ...b]);
	console.log(union)
	// Set {1, 2, 3, 4}
	// 交集
	let intersect = new Set([...a].filter(x => b.has(x)));
	console.log(intersect)
	// set {2, 3}
	// 差集
	let difference = new Set([...a].filter(x => !b.has(x)));
	console.log(difference)
	// Set {1}

	//若是想在遍歷操做中，同步改變原來的 Set 結構，目前沒有直接的方法，但有兩種變通方法。一種是利用原 Set 結構映射出一個新的結構，而後賦值給原來的 Set 結構；另外一種是利用Array.from方法。
	// 方法一
	let set3 = new Set([1, 2, 3]);
	set3 = new Set([...set3].map(val => val * 2));
	console.log(set3)
	// set的值是2, 4, 6
	// 方法二
	let set4 = new Set([1, 2, 3]);
	set4 = new Set(Array.from(set4, val => val * 2));
	console.log(set4)
	// set的值是2, 4, 6
	//上面代碼提供了兩種方法，直接在遍歷操做中改變原來的 Set 結構。

3.map 

JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），可是傳統上只能用字符串看成鍵。
ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。
Map 的鍵其實是跟內存地址綁定的，只要內存地址不同，就視爲兩個鍵。

const m = new Map();
	const o = {p: 'Hello World'};
	m.set(o, 'content')
	m.get(o) // "content"
	m.has(o) // true
	m.delete(o) // true
	m.has(o) // false
	console.log([...m])

	const map = new Map([
	  ['name', '張三'],
	  ['title', 'Author']
	]);
	map.size // 2
	map.has('name') // true
	map.get('name') // "張三"
	map.has('title') // true
	map.get('title') // "Author"
	console.log([...map]) //[{'name':'張三'},{'title':'Author'}]
	// 其實是這樣
	const items = [
	  ['name', '張三'],
	  ['title', 'Author']
	];
	const map = new Map();
	items.forEach(
	  ([key, value]) => map.set(key, value)
	);
	console.log([...map]) //[{'name':'張三'},{'title':'Author'}]

	const set = new Set([
	  ['foo', 1],
	  ['bar', 2]
	]);
	const m1 = new Map(set);
	m1.get('foo') // 

	const m2 = new Map([['baz', 3]]);
	const m3 = new Map(m2);
	m3.get('baz') // 3
	console.log([...m1]) //map轉爲數組 ['foo',1] ['bar',2]
	console.log([...m2]) //['baz',3]
	console.log([...m3])	//['baz',3]

	const map = new Map();
	map
	.set(1, 'aaa')
	.set(1, 'bbb');
	map.get(1) // "bbb"
	console.log([...map]) //[1,'bbb']

	const map = new Map();
	const k1 = ['a'];
	const k2 = ['a'];
	map
	.set(k1, 111)
	.set(k2, 222);
	map.get(k1) // 111
	map.get(k2) // 222
	console.log([...map]) //[[['a'],111],[['b'],222]]

	let map = new Map();
	map.set(-0, 123);
	map.get(+0) // 123
	map.set(true, 1);
	map.set('true', 2);
	map.get(true) // 1
	map.set(undefined, 3);
	map.set(null, 4);
	map.get(undefined) // 3
	map.set(NaN, 123);
	map.get(NaN) // 123
	console.log([...map]) //[[0,123],['true',1],['true',2],[undefined,2],[null,4],[NaN,123]]

 

實例的屬性和操做方法
（1）size 屬性
size屬性返回 Map 結構的成員總數。

const map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2

（2）set(key, value)
set方法設置鍵名key對應的鍵值爲value，而後返回整個 Map 結構。若是key已經有值，則鍵值會被更新，不然就新生成該鍵。

const m = new Map();

m.set('edition', 6)        // 鍵是字符串
m.set(262, 'standard')     // 鍵是數值
m.set(undefined, 'nah')    // 鍵是 undefined

Set方法返回的是當前的Map對象，所以能夠採用鏈式寫法。

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

（3）get(key)
get方法讀取key對應的鍵值，若是找不到key，返回undefined。

const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 鍵是函數

m.get(hello)  // Hello ES6!

（4）has(key)
has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

（5）delete(key)
delete方法刪除某個鍵，返回true。若是刪除失敗，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

（6）clear()
clear方法清除全部成員，沒有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

遍歷方法
Map 結構原生提供三個遍歷器生成函數和一個遍歷方法。
keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回全部成員的遍歷器。
forEach()：遍歷 Map 的全部成員。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同於使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

Map 結構轉爲數組結構，比較快速的方法是使用擴展運算符（...）。

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

結合數組的map方法、filter方法，能夠實現 Map 的遍歷和過濾（Map 自己沒有map和filter方法）。

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 產生 Map 結構 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 產生 Map 結構 {2 => '_a', 4 => '_b', 6 => '_c'}

此外，Map 還有一個forEach方法，與數組的forEach方法相似，也能夠實現遍歷。

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

forEach方法還能夠接受第二個參數，用來綁定this。

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

 

 

與其餘數據結構的互相轉換
（1）Map 轉爲數組
前面已經提過，Map 轉爲數組最方便的方法，就是使用擴展運算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）數組 轉爲 Map
將數組傳入 Map 構造函數，就能夠轉爲 Map。

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])
// Map {
//   true => 7,
//   Object {foo: 3} => ['abc']
// }

（3）Map 轉爲對象
若是全部 Map 的鍵都是字符串，它能夠無損地轉爲對象。若是有非字符串的鍵名，那麼這個鍵名會被轉成字符串，再做爲對象的鍵名。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

　（4）對象轉爲 Map

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

　（5）Map 轉爲 JSON
Map 轉爲 JSON 要區分兩種狀況。一種狀況是，Map 的鍵名都是字符串，這時能夠選擇轉爲對象 JSON。

　

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

　　另外一種狀況是，Map 的鍵名有非字符串，這時能夠選擇轉爲數組 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

　　（6）JSON 轉爲 Map
JSON 轉爲 Map，正常狀況下，全部鍵名都是字符串。

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

4.Array.from()方法

Array.from方法用於將兩類對象轉爲真正的數組：(類數組)相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

　

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

　　

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
//那麼，若是將上面代碼中length屬性去掉呢？實踐證實，答案會是一個長度爲0的空數組。
//這裏將代碼再改一下，就是具備length屬性，可是對象的屬性名再也不是數字類型的，而是其餘字符串型的，代碼以下：
let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

　會發現結果是長度爲4，元素均爲undefined的數組
　　因而可知，要將一個類數組對象轉換爲一個真正的數組，必須具有如下條件：
　　一、該類數組對象必須具備length屬性，用於指定數組的長度。若是沒有length屬性，那麼轉換後的數組是一個空數組。
　　二、該類數組對象的屬性名必須爲數值型或字符串型的數字
　　ps: 該類數組對象的屬性名能夠加引號，也能夠不加引號

　

//實際應用中，常見的相似數組的對象是 DOM 操做返回的 NodeList 集合，以及函數內部的arguments對象。Array.from均可以將它們轉爲真正的數組。
// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});
// arguments對象
function foo() {
  var args = Array.from(arguments);
  // ...
}
//上面代碼中，querySelectorAll方法返回的是一個相似數組的對象，能夠將這個對象轉爲真正的數組，再使用filter方法。

//只要是部署了 Iterator 接口的數據結構，Array.from都能將其轉爲數組。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
//上面代碼中，字符串和 Set 結構都具備 Iterator 接口，所以能夠被Array.from轉爲真正的數組。

//若是參數是一個真正的數組，Array.from會返回一個如出一轍的新數組。
Array.from([1, 2, 3])
// [1, 2, 3]

//值得提醒的是，擴展運算符（...）也能夠將某些數據結構轉爲數組。
// arguments對象
function foo() {
  const args = [...arguments];
}

// NodeList對象
[...document.querySelectorAll('div')]
//擴展運算符背後調用的是遍歷器接口（Symbol.iterator），若是一個對象沒有部署這個接口，就沒法轉換。Array.from方法還支持相似數組的對象。所謂相似數組的對象，本質特徵只有一點，即必須有length屬性。所以，任何有length屬性的對象，均可以經過Array.from方法轉爲數組，而此時擴展運算符就沒法轉換。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
//上面代碼中，Array.from返回了一個具備三個成員的數組，每一個位置的值都是undefined。擴展運算符轉換不了這個對象。

//對於尚未部署該方法的瀏覽器，能夠用Array.prototype.slice方法替代。

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

//Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
下面的例子是取出一組 DOM 節點的文本內容。

let spans = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

//下面的例子將數組中布爾值爲false的成員轉爲0。
Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

//另外一個例子是返回各類數據的類型。
function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']
//若是map函數裏面用到了this關鍵字，還能夠傳入Array.from的第三個參數，用來綁定this。

//Array.from()能夠將各類值轉爲真正的數組，而且還提供map功能。這實際上意味着，只要有一個原始的數據結構，你就能夠先對它的值進行處理，而後轉成規範的數組結構，進而就可使用數量衆多的數組方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
//上面代碼中，Array.from的第一個參數指定了第二個參數運行的次數。這種特性可讓該方法的用法變得很是靈活。

//Array.from()的另外一個應用是，將字符串轉爲數組，而後返回字符串的長度。由於它能正確處理各類 Unicode 字符，能夠避免 JavaScript 將大於\uFFFF的 Unicode 字符，算做兩個字符的 bug。

function countSymbols(string) {
  return Array.from(string).length;
}