//第一个小例子
<script>var num = 123;function fn(){console.log(num);  // undefinedvar num = 46;console.log(num) // 46}fn()
</script>
//为什么第一个输出值会是undefined，而不是123呢？因为这里存在着变量名的提升，其实上述语句相当于：
<script>var num = 123;function fn(){var num;console.log(num);  // undefinednum = 46;console.log(num) // 46}fn()
</script>//第二个小例子
<script>var num = 123;if(true){console.log(num) // 123var num = 456;console.log(num)  // 456}console.log(num)  // 456
</script>
//这里为什么第一个输出值不是undefined，第三个输出值不是123呢？原因是这样的，因为var不存在块级作用域，且变量名会提升，所以上述代码其实相当于：
<script>var num;num = 123if(true){console.log(num) // 123num = 456;console.log(num)  // 456}console.log(num)  // 456
</script>

//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 = 456if(true){const num = 789;console.log(num); // 789}console.log(num) // 456
</script>

//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 definedlet num = 46;console.log(num)}fn()
</script>

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]

s.add(1).add(2).add(2);
// 注意2被加入了两次s.size // 2s.has(1) // true
s.has(2) // true
s.has(3) // falses.delete(2);
s.has(2) // false

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 结构。

const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // falseconsole.log([...m])const map = new Map([['name', '张三'],['title', 'Author']]);map.size // 2map.has('name') // truemap.get('name') // "张三"map.has('title') // truemap.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') // 3console.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) // 111map.get(k2) // 222console.log([...map]) //[[['a'],111],[['b'],222]]let map = new Map();map.set(-0, 123);map.get(+0) // 123map.set(true, 1);map.set('true', 2);map.get(true) // 1map.set(undefined, 3);map.set(null, 4);map.get(undefined) // 3map.set(NaN, 123);map.get(NaN) // 123console.log([...map]) //[[0,123],['true',1],['true',2],[undefined,2],[null,4],[NaN,123]]

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

const m = new Map();m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

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

const m = new Map();const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数m.get(hello)  // Hello ES6!

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

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

let map = new Map();
map.set('foo', true);
map.set('bar', false);map.size // 2
map.clear()
map.size // 0

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"

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']]

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(function(value, key, map) {console.log("Key: %s, Value: %s", key, value);
});

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);

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

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

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 }

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}

function strMapToJson(strMap) {return JSON.stringify(strMapToObj(strMap));
}let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

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"]]]'

function jsonToStrMap(jsonStr) {return objToStrMap(JSON.parse(jsonStr));
}jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

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 ]

//实际应用中，常见的类似数组的对象是 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;
}