10th week blog

10th week blog
1，for each in，for in，for of的explanation和examples

一、一般的遍历数组的方法:
```
 var array = [1,2,3,4,5,6,7]; 
 for (var i = 0; i < array.length; i) { 
 console.log(i,array[i]); 
 } 
```
二、用for in的方遍历数组
```
 for(let index in array) { 
 console.log(index,array[index]); 
 }; 
```
三、forEach
```
array.forEach(v=>{ 
 console.log(v); 
});
```
```
array.forEach（function(v){ 
 console.log(v); 
});
```
```
 
```
四、用for in不仅可以对数组,也可以对enumerable对象操作
```
var A = {a:1,b:2,c:3,d:"hello world"}; 
for(let k in A) { 
 console.log(k,A[k]); 
} 
```
五、在ES6中,增加了一个for of循环,使用起来很简单
```
 for(let v of array) { 
 console.log(v); 
 }; 
```
 let s = "helloabc";

 for(let c of s) {

 console.log(c);

 }
```
 
```
总结来说:for in总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值
结果for of不能对象用
对于新出来的Map,Set上面
```
 var set = new Set(); 
 set.add("a").add("b").add("d").add("c"); 
 var map = new Map(); 
 map.set("a",1).set("b",2).set(999,3); 
 for (let v of set) { 
 console.log(v); 
 } 
 console.log("--------------------"); 
 for(let [k,v] of map) { 
 console.log(k,v); 
 } 
```
javascript遍历对象详细总结

1.原生javascript遍历

（1）for循环遍历
```
let array1 = ['a','b','c'];
for (let i = 0;i < array1.length;i++){
 console.log(array1[i]); // a b c 
}
```
（2）JavaScript 提供了 foreach() map() 两个可遍历 Array对象的方　　　　

forEach和map用法类似，都可以遍历到数组的每个元素，而且参数一致；
```
Array.forEach(function(value , index , array){ //value为遍历的当前元素，index为当前索引，array为正在操作的数组
 //do something
},thisArg) //thisArg为执行回调时的this值
```
不同点：

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组；

例子如下：
```
var array1 = [1,2,3,4,5];
 
var x = array1.forEach(function(value,index){
 
 console.log(value); //可遍历到所有数组元素
 
 return value + 10
});
console.log(x); //undefined 无论怎样，总返回undefined
 
var y = array1.map(function(value,index){
 
 console.log(value); //可遍历到所有数组元素
 
 return value + 10
});
console.log(y); //[11, 12, 13, 14, 15] 返回一个新的数组
```
对于类似数组的结构，可先转换为数组，再进行遍历
```
let divList = document.querySelectorAll('div'); //divList不是数组，而是nodeList
 
//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){
 element.classList.add('test')
})
 
 
Array.prototype.slice.call(divList).forEach(function(element,index){
 element.classList.remove('test')
})
 
[...divList].forEach(function(element,index){ //ES6写法
 //do something
})
```
（3）for ··· in ··· / for ··· of ···

for...in 语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。每次迭代时，分配的是属性名　　

补充 : 因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。
```
let array2 = ['a','b','c']
let obj1 = {
 name : 'lei',
 age : '16'
}
 
for(variable in array2){ //variable 为 index
 console.log(variable ) //0 1 2
}
 
for(variable in obj1){ //variable 为属性名
 console.log(variable) //name age
}
```
ES6新增了遍历器(Iterator)机制，为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作 ( Iterator详解： http://es6.ruanyifeng.com/#docs/iterator )，每次迭代分配的是 属性值

原生具备 Iterator 接口的数据结构如下：

Array Map Set String TypedArray 函数的arguments对象 NodeList对象
```
let array2 = ['a','b','c']
let obj1 = {
 name : 'lei',
 age : '16'
}
 
for(variable of array2){ //variable 为 value
 console.log(variable ) //'a','b','c'
}
 
for(variable of obj1){ //普通对象不能这样用
 console.log(variable) // 报错 ： main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
} let divList = document.querySelectorAll('div'); for(element of divlist){ //可遍历所有的div节点 　　//do something }
```
如何让普通对象可以用for of 进行遍历呢？ http://es6.ruanyifeng.com/#docs/iterator 一书中有详细说明了！

　　除了迭代时分配的一个是属性名、一个是属性值外，for in 和 for of 还有其他不同 (MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

　　　　for...in循环会遍历一个object所有的可枚举属性。

　　　 for...of会遍历具有iterator接口的数据结构

　　　 for...in 遍历（当前对象及其原型上的）每一个属性名称,而 for...of遍历（当前对象上的）每一个属性值
```
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
 
let iterable = [3, 5, 7];
iterable.foo = "hello";
 
for (let i in iterable) {
 console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
 
for (let i of iterable) {
 console.log(i); // logs 3, 5, 7
}

第一块以上内容来自于“颠覆者的cnblogs” 
https://www.cnblogs.com/amujoe/p/8875053.html
```
2，Constructor的sourse
对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数。
在JavaScript中，每个具有原型的对象都会自动获得constructor属性。除了arguments、Enumerator、Error、Global、Math、RegExp、Regular Expression等一些特殊对象之外，其他所有的JavaScript内置对象都具备constructor属性。例如：Array、Boolean、Date、Function、Number、Object、String等。
语法
Object.constructor
返回值
对象的constructor属性返回创建该对象的函数的引用。
示例&说明
以下代码中的[native code]，表示这是JavaScript的底层内部代码实现，无法显示代码细节。
// 字符串：String()
var str = "张三";
alert(str.constructor); // function String() { [native code] }
alert(str.constructor === String); // true
// 数组：Array()
var arr = [1, 2, 3];
alert(arr.constructor); // function Array() { [native code] }
alert(arr.constructor === Array); // true
// 数字：Number()
var num = 5;
alert(num.constructor); // function Number() { [native code] }
alert(num.constructor === Number); // true
// 自定义对象：Person()
function Person(){
this.name = "CodePlayer";
}
var p = new Person();
alert(p.constructor); // function Person(){ this.name = "CodePlayer"; }
alert(p.constructor === Person); // true
// JSON对象：Object()
var o = { "name" : "张三"};
alert(o.constructor); // function Object() { [native code] }
alert(o.constructor === Object); // true
// 自定义函数：Function()
function foo(){
alert("CodePlayer");
}
alert(foo.constructor); // function Function() { [native code] }
alert(foo.constructor === Function); // true
// 函数的原型：bar()
function bar(){
alert("CodePlayer");
}
alert(bar.prototype.constructor); // function bar(){ alert("CodePlayer"); }
alert(bar.prototype.constructor === bar); // true
为了将实例的构造器的原型对象暴露出来, 比如你写了一个插件,别人得到的都是你实例化后的对象, 如果别人想扩展下对象,就可以用 instance.constructor.prototype 去修改或扩展原型对象
第二块以上内容出自于“臻爷爷cnblogs”

http://www.cnblogs.com/chenweizhen/p/6422995.html
3，原始的函数定义式
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]
基础语法：
(param1, param2, …, paramN) => { statements }

(param1, param2, …, paramN) => expression

// 等价于: => { return expression; }

// 如果只有一个参数，圆括号是可选的:

(singleParam) => { statements }

singleParam => { statements }

// 无参数或者多参数的箭头函数需要使用圆括号或者下划线:

() => { statements } _ => { statements }

高级语法：

// 只返回一个对象字面量,没有其他语句时, 应当用圆括号将其包起来:

params => ({foo: bar})

// 支持 Rest parameters 和 default parameters:

(param1, param2, ...rest) => { statements }

(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// 支持参数列表中的解构赋值

var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

f(); // 6

第三块：

作者：microzz
链接：https://www.jianshu.com/p/bb0da0356013
來源：简书

4，event flow mechanism

事件的概念：

　　HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：

　　1，DOM事件流，

　　"DOM2事件流"规定的事件流包括三个阶段：

　　　　1，事件捕获阶段。

　　　　2，处于目标阶段。

　　　　3，事件冒泡阶段。

js中一种绑定事件的方式：
```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>事件流</title>
 <script>

 window.onload = function(){

 var oBtn = document.getElementById('btn');

 oBtn.addEventListener('click',function(){
 console.log('btn处于事件捕获阶段');
 }, true);
 oBtn.addEventListener('click',function(){
 console.log('btn处于事件冒泡阶段');
 }, false);

 document.addEventListener('click',function(){
 console.log('document处于事件捕获阶段');
 }, true);
 document.addEventListener('click',function(){
 console.log('document处于事件冒泡阶段');
 }, false);

 document.documentElement.addEventListener('click',function(){
 console.log('html处于事件捕获阶段');
 }, true);
 document.documentElement.addEventListener('click',function(){
 console.log('html处于事件冒泡阶段');
 }, false);

 document.body.addEventListener('click',function(){
 console.log('body处于事件捕获阶段');
 }, true);
 document.body.addEventListener('click',function(){
 console.log('body处于事件冒泡阶段');
 }, false);

 };

 </script>
</head>
<body>
 <a href="javascript:;" id="btn">按钮</a>
</body>
</html>
```
效果：

　　1，addEventListener

　　addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

　　2，document，documentElement和document.body三者之间的关系：

　　　　document代表的是整个html页面，

　　　　document.documentElement代表是的<html>标签。

　　　　document.body代表的是<body>标签。

出现上图结果的原因是：

　　在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:

　　首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标。就是id为btn的标签。

　　接着在事件冒泡的过程中，时间开始是由具体的元素(a标签)接收，然后逐级向上传播到较为不具体的节点。

jQuery的常用事件：

第四块以上内容出自于“Qingqiu_Gu的cnblogs"

https://www.cnblogs.com/stfei/p/9134222.html
相关阅读:
Android 微信分享信息
 微信朋友圈如何同时分享(图片+文字)
Android应用加入微信分享
 讨论IT选定的技术招聘企业几点
 MSSQL发现第五到数据的第十
 STL 源代码分析算法 stl_algo.h -- binary_search
加快XCode编译链接速度（200%+）—XCode编译慢液
 linux复制文件命令scp
写出高性能的多核并行编程
 SSH—Struts（三）—跑步者（Action）
原文地址：https://www.cnblogs.com/hayaasyh/p/9936051.html

事件的概念：

什么是事件流：

js中一种绑定事件的方式：

jQuery的常用事件：