10th week blog

Posted shengbowen1004

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10th week blog相关的知识，希望对你有一定的参考价值。

作业1：For each in，For in和For of（explain，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){   //<strong>ES6写法</strong>
  //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){   //<strong>variable  为 value</strong>
  console.log(variable )   //‘a‘,‘b‘,‘c‘
}
 
for(variable  of obj1){  //<strong>普通对象不能这样用</strong>
  console.log(variable)   // 报错 ： main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}<br><br>let divList = document.querySelectorAll(‘div‘);<br><br>for(element of divlist){  //可遍历所有的div节点<br>　　//do something <br>}
技术分享图片
技术分享图片

 

如何让普通对象可以用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
}
作业二、constructor vs object   source     
  constructor的定义和用法：constructor 属性返回对创建此对象的数组函数的引用。 语法：object.constructor
  举例说明constructor属性：
技术分享图片技术分享图片
 
 
 作业三、Arrow function restore
  箭头函数表达式的语法比函数表达式短，并且不绑定自己的 this，arguments，super或 new.target。此外，箭头函数最好在非方法函数中使用，且不能用作构造函数。
   语法：
   1.基础语法：
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 等价于: => { return expression; }
// 如果只有一个参数，圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }
// 无参数或者多参数的箭头函数需要使用圆括号或者下划线:
() => { statements } _ => { statements }
 
   2.高级语法：
// 只返回一个对象字面量,没有其他语句时, 应当用圆括号将其包起来:
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
 
   箭头函数的引入有两个方面的作用：一是更简短的函数书写，二是对 this的词法解析。
   1.更短的函数：
var a = [ "Hydrogen", "Helium", "Lithium", "Beryl-lium" ];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );
   
   2.不绑定this：
function Person() {
// 构造函数 Person() 定义的 `this` 就是新实例对象自己
this.age = 0;
setInterval(function growUp() {
// 在非严格模式下，growUp() 函数定义了其内部的 `this`为全局对象, 不同于构造函数Person()的定义的`this`
this.age++; }
, 1000);
}
 
var p = new Person();
// 在 ECMAScript 3/5 中，这个问题通过把this的值赋给变量，
// 然后将该变量放到闭包中来解决。
function Person() {
var self = this; // 也有人选择使用 `that` 而非 `self`.
// 只要保证一致就好.
self.age = 0;
 
setInterval(function growUp() {
// 回调里面的 `self` 变量就指向了期望的那个对象了
self.age++; }
, 1000);
}

箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，因此下面的代码将如期运行。functionPerson()  this.age = 0
  setInterval(() => {
    this.age++; // this正确地指向了person对象
  }, 1000);
}

var p = new Person();
 作业四、Event Flow   mechanism（事件流）
  什么是事件流：

　　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的常用事件：

技术分享图片

 资源来源：https://www.cnblogs.com/stfei/p/9134222.html


  https://www.cnblogs.com/lbjiu/p/9939262.html


https://www.jianshu.com/p/bb0da0356013
https://www.cnblogs.com/amujoe/p/8875053.html






















以上是关于10th week blog的主要内容，如果未能解决你的问题，请参考以下文章
 

 10th week blog


 10th week blog1


 11th week blog


 6th week blog3


 8th week blog


 13th week blog