不是有效变量时,命名和索引都有区别 访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用’‘括起来: 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是一组键值对的结构 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和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重复赋值会覆盖,
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])})
