跟着大神学JavaScript之边学边记（二）

<前一篇文章 跟着大神学JavaScript之边学边记（一）

参考：

• 廖雪峰的官方网站
• JavaScript-教程

对象 由若干键值对构成

特点：

• 对象中都是一组组键值对，且无先后顺序
• key值都是字符串类型，value值可以是任意类型。若key值中有特殊字符，需要用单引号括起来。
• 访问不存在的属性时，返回undefined
• 可以通过=添加属性值，或者使用delete删除

var person = {
  name: "小明",
  age: 16,
  'xx_z': 'nothing'
}
console.log(person.name);  // 小明
console.log(person.newPro);  // undefined
person.newPro = '新属性';   // 赋值
console.log(person.newPro);  // undefined

引用属性的两种方式：

1. obj.key 直接使用点操作符，通过对象.属性获得
2. 使用obj[‘key’]获取属性，当key值中特殊字符时，必须用此方式

for … in …

在第一篇学习中，in操作符可以判断属性是否在对象中，而JavaScript可以通过for ... in ...表达式遍历对象的key值。

var obj= {
	A : "甲",
	B:  "①",
	C: "兵丁"
}
for (var key in obj) {
	var r = key + "\t" + obj[key] + "\t" + obj.key;
	console.log(r);
}

/* 输出
19:25:09.626 	A	甲	undefined 
19:25:09.627 	B	①	undefined 
19:25:09.627 	C	兵丁	undefined
*/

注意： 通过for … in …遍历获得的key值都是字符串，所以obj.key相当于obj.‘A’，于是返回undefined

数组也可以认为是对象（值为字符串类型索引）,于是也可以使用for .. in ..遍历，也可以用数组下标访问。

var arr = [1, "②",  "叁"];  
for (var key in arr) {
	console.log(arr[key]);
}
for(int i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}
// 即arr[0]与arr['0']都是指向数组第一个元素 1

Map 与 Set

ES6中，引入新的的规范，Map与Set。
Map
键值对（key-value）组合，查找速度快，并且比Array更容易查找对应关系。

初始化方式

• var map = new Map();
• var map2 = new Map([[‘李’, ‘优’],[‘王’, ‘良’],[‘和’, ‘差’]]);
• 使用空数据，或者一个n x 2的二维数组

方法

方法名	用法 &含义
set(key,value)	m.set(‘san’,‘优’) ，设置map的值
has(key)	m.has(‘李’)，判断是否有该Key值
get(key)	m.get(‘李’)， 返回key对应的value值，若为空，返回undefined

Set
一组value值组合(个人感觉是value组合，更符合前后方法)，但不允许重复，

初始化方式

• var s = new Set();
• var s2 = new Set([‘yes’, ‘甲’, ‘优’, ‘丁’]);
• 空参数 ，或者使用Array作为输入

方法

方法	用法 & 含义
add()	s.add(8),向set中添加元素
delete()	s.delete(6),删除set中元素，注意与对象中delete方法区分

iterable

目前遍历Array可以使用for ... in或 遍历下标循环。而Map与Set无法使用下标循环。而后引入iterable类型（Array、Map、Set），iterable可以通过for ... of遍历

for .. in 与 for ... of对比

for .. in	for .. of
Array可以认为是一个对象，所以可以通过 =赋值，a.newPro = ‘newProperty’，而for… in 能将newPro遍历出来	不会将newPro遍历出来，且=赋值后的array长度不变
遍历出值为key	遍历出来值为value

iterable内置的forEach方法

// Array
a.forEach(function(element, index, array) {
	// element array中value值
	// index  array中索引值
	// array  数组本身对象
});
// Map
m.forEach(function(value, key, map) {
	// value map中value值
	// key  map中key值
	// map  map本身
});
// Set
s.forEach(function(element, sameElemet, set) {
	// elemetn set中元素值
	// sameElemt  set中无索引值，与set中元素值一样
	// set  set本身
}

注意： 三个参数不必完全输入，可选择一两项，但顺序与位置不可变

基础知识入门小结示例

function out(str) {
  console.log(str);
}

var array = ['甲','乙'];
var map = new Map([['李', 'li'],['王', 'wang']]);
var set = new Set([11,8,25,'8']);

// 遍历索引输出array
for (var i = 0; i < array.length; i++) {
  out(array[i]);
}

// for in 遍历array   以及  点操作符与中括号操作符，
out(`key\tarray[key]\tarray.key`)
for (var key in array) {
  // 遍历的key全是字符串类型
  out(`${key}\t${array[key]}\t${array.key}`)
}

out(`----array -- for  of-----`);
for (var value of array) {
  out(`${value}`)
}

out(`-----map -- for  of------`)
for (var value of map) {
  out(`${value}\t ${map.get(value)}`);
}

out(`-----set -- for  of------`)
for (var value of set) {
  // array、set、map中 3 与 '3'不同
  out(`${value}`);
}

// output
15:01:38.127	甲 	
15:01:38.127 	乙 
15:01:38.127 	key	array[key]	array.key 
15:01:38.128 	0	甲		undefined 
15:01:38.128	1	乙		undefined
15:01:38.128 ----array -- for  of----- 
15:01:38.128 	甲 
15:01:38.128 	乙 
15:01:38.129 -----map -- for  of------ 
15:01:38.129 	李,li	 undefined 
15:01:38.129 	王,wang	 undefined 
15:01:38.130 -----set -- for  of------ 
15:01:38.130 	11 
15:01:38.130 	8 
15:01:38.130 	25 
15:01:38.130 	8