2020-10-09

学习时间：

第二天

---

学习产出：

不是有效变量时，命名和索引都有区别
访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用’‘括起来：
var xiaohong = {
name: ‘小红’,
‘middle-school’: ‘No.1 Middle School’
};
xiaohong的属性名middle-school不是一个有效的变量，就需要用’'括起来。访问这个属性也无法使用.操作符，必须用[‘xxx’]来访问：

xiaohong[‘middle-school’]; // ‘No.1 Middle School’

由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

var xiaoming = {
name: ‘小明’
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：
‘toString’ in xiaoming; // true
要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
name: ‘小明’
};
xiaoming.hasOwnProperty(‘name’); // true
xiaoming.hasOwnProperty(‘toString’); // false
for … in可以对象中的属性遍历出来
var o=
{ name=‘xiaoming’,
age:18
}
for( var key in o){
if(o.hasOwnProperty.(key))
{console.log(o.key)}
}
这里插播一下ES6的${}问题，必须是在两个反引号之间
{console.log(Hello, ${arr[i]}!)}
ES6新的数据类型

Map

Map是一组键值对的结构
var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
m.get(‘Michael’); // 95
初始化Map需要一个二维数组，或者直接初始化一个空Map。
Map具有以下方法set，has，delete，get
var m = new Map(); // 空Map
m.set(‘Adam’, 67); // 添加新的key-value
m.set(‘Bob’, 59);
m.has(‘Adam’); // 是否存在key ‘Adam’: true
m.get(‘Adam’); // 67
m.delete(‘Adam’); // 删除key ‘Adam’
m.get(‘Adam’); // undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
var m = new Map();
m.set(‘Adam’, 67);
m.set(‘Adam’, 88);
m.get(‘Adam’); // 88

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
Set的方法add，delete
重复元素在Set中自动被过滤：

var s = new Set([1, 2, 3, 3, ‘3’]);
s; // Set {1, 2, 3, “3”}
通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
简单来说，Map是一组键值对，Set是key的组合，但是Set没有value且key不能重复，Map中value重复赋值会覆盖，

iterable

Array、Map和Set都属于iterable类型，对象不是iterable类型。具有iterable类型的集合可以通过新的for … of循环来遍历。
for … of循环是ES6引入的新的语法

用for … of循环遍历集合，用法如下：
var b={a:1,b:2};
var a = [‘A’, ‘B’, ‘C’];
var s = new Set([‘A’, ‘B’, ‘C’]);
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
for (var x in b) { // 遍历对象属性，对象不是iterable类型，所以不能用for of来遍历
console.log(x);//a b
}
for (var x of a) { // 遍历Array本身
console.log(x);//A B C
}
for (var x in a) { // 遍历Array属性
console.log(x);//0 1 2
}
for (var x of s) { // 遍历Set
console.log(x);
}
for (var x of m) { // 遍历Map
console.log(x[0] + ‘=’ + x[1]);
}
你可能会有疑问，for … of循环和for … in循环有何区别？

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for … in循环将带来意想不到的意外效果：

var a = [‘A’, ‘B’, ‘C’];
a.name = ‘Hello’;
for (var x in a) {
console.log(x); // ‘0’, ‘1’, ‘2’, ‘name’
}
for … in循环将把name包括在内，但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = [‘A’, ‘B’, ‘C’];
a.name = ‘Hello’;
for (var x of a) {
console.log(x); // ‘A’, ‘B’, ‘C’
}
forEach()方法
是ES5.1标准引入的，是iterable内置的
Set的forEach()
Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：
var s = new Set([‘A’, ‘B’, ‘C’]);
s.forEach(function (element, sameElement, set) {
console.log(element);
});

Map的forEach()
Map的回调函数参数依次为value、key和map本身：
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
m.forEach(function (value, key, map) {
console.log(value);
});
Array的forEach()
var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ’ + index);
});

如果只需要获得Array的element：
var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element) {
console.log(element);
});
总结
var a=[1,2,3];
var b={a:1,b:2};
var m=new Map([[‘aa’,11],[‘bb’,22]]);
var s=new Set([‘aaa’,‘bbb’]);
//for in
for( var x in a){
console.log(x+a[x]);
}
for( var x in b){
console.log(x+b[x]);
}
//for of
for( var x of a){
console.log(x+a[x]);
}
for( var x of m){
console.log(x);
}
for( var x of s){
console.log(x);
}
forEach
a.forEach(function(value,index,array){console.log(value+’’+index)});
m.forEach(function(value,key,map){console.log(value+key)});
s.forEach(function(value,samevalue,set){console.log(value)});
补充：对象的简单3种遍历方法
var a={name:1,age:2}
//方法一for in
for(var x in a){console.log(x+a[x])};
//方法二Object.keys Object.values 注意s
console.log(Object.keys(a));
console.log(Object.values(a));
//方法三 Object.getOwnPropertyNames(a).forEach
Object.getOwnPropertyNames(a).forEach(function(key){console.log(key+a[key])})