Javascript教程四——对象与遍历

对象

JavaScript用一个{…}表示一个对象，键值对以 xxx: xxx 形式申明，用 , 隔开之后通过对象.属性进行访问。

var person = {
	name: 'ruby_ruby',
	age: 20,
	sex: male
};
person.name; // 'ruby_ruby'
person.age; // 20

如果属性名包含特殊字符，就必须用 ' '括起来

var xiaohong = {
	name: '小红',
	'middle-school': 'No.1 Middle School'
};

**访问这个属性需要使用 ['xxx'] 来访问**。

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

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

xiaohong.age = 22;  // add a prop
delete xiaohpng.age;  //  delete a prop

可以利用 in判断对象是否拥有某个属性

‘sex’ in xiaohong; // false

可以使用方法hasOwnProperty()来判断是否拥有属性

xiaohong.hasOwnProperty('sex'); // false
xiaohong.hasOwnProperty('age'); // true

JSON

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。JS将JSON内置在处理器里面，因此可以直接使用JSON进行数据交换，尤其是网络交互。

为了统一解析，JSON的字符串规定必须用双引号"“，Object的键也必须用双引号”"。

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

序列化

var s = JSON.stringify(ruby); // 注意，此时s是一个字符串
// {"name":"ruby","age":"20"}

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]

Map

JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的(例如我把一个函数当成key，把一个对象当成key)。因此ES6语法中引入Map数据类型。

Map类型定义有两种方式：

1、直接定义一个二维数组
var array1 = new Map( [ ['ruby', 20],  ['bob', 22],  ['xiaohong', 21] ] );

2、先定义一个空间，之后插入数据
var array2 = new Map()
array2.set( ['ruby', 20] );
array2.set( ['bob', 22] );

获取Map中key对应的value 使用get，删除用delete

array1.get('ruby'); // 20
array1.delete('ruby'); // 删除一个key

这里有必要说明一下，当我们需要验证一组数据的访问情况的时候，我们一般会选择利用hash表，而此时便可以利用Map来帮忙实现hash表：

例如我们有一条链表，然后把它们逐个放到Map里面：

ListNode {
	val: '111',
	next: listnode2
} // 一个链表结点

我们就可以通过

let hash = new Map();
hash.set(listNode, listNode.val); // 通过这样的方式，让当前对象作为key

之后我们就可以通过has判断Map中是否访问过：

hash.has(listNode);

也可以通过get来获取value的值。

hash.get(listNode)； //  listNode.val =》 111

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

重复元素在Set中自动被过滤。

var arr = new Set([1,2,3,4,3,2,5]);  // [1,2,3,4,5]

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果
通过delete(key)方法可以删除元素

arr.add(6); // [1,2,3,4,5,6]
arr.delete(4); // [1,2,3,5,6]

iterable

ES6标准引入了新的 iterable 类型用于遍历 Array、Map 与 Set 。

具有 iterable 类型的集合可以通过新的 for … of 循环来遍历。

var a = [1, 2, 3];  // 数组
for (var x of a) {
	console.log(x); 
}
// 1,2,3

var s = new Set(['A', 'B', 'C']);   // Set 集合
for (var x of s) {
	console.log(x); 
}；// A,B,C

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); // Map 哈希表
for (var x of m) {
	console.log(x[0] + '-' + x[1]); 
}; // 1-x, 2-y, 3-z

for … of循环和for … in循环的区别

for … in 循环遍历的实际上是 对象的属性名称，可以理解成遍历的是key。
for … of 循环则完全修复了这些问题，它只循环集合本身的元素,也就是value。

更好的方式是直接使用iterable内置的 forEach 方法，它接收一个函数，每次迭代就自动回调该函数，但是forEach有个大问题，那就是return在forEach里面是无法生效的。

var a = ['A', 'B', 'C'];
a.forEach(number => {
	console.log(number);      // 'A', 'B', 'C'
});    

for(let num in a){
	console.log(num); //   0, 1, 2  是key，也就是数组的下标
}

for(let num of a){
	console.log(num);    // 'A', 'B', 'C'，也就是数组的value
}

var s = new Set(['A', 'B', 'C']);   // Set 集合
s.forEach( x => {
	console.log(x); 
})；// A,B,C

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); // Map 哈希表
s.forEach( (value, key) => {
	console.log(key + '-' + value); 
}); // 1-x, 2-y, 3-z

for(let num of a){
	console.log(num[0] - num[1]);    // 1-x, 2-y, 3-z
}

本文来源廖雪峰老师教程的笔记，有疑惑可以直接访问廖雪峰老师教程：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022043494624