js-遍历

一、对数组的遍历

1. for循环

语法结构：

var arr =[1,2,3];
for(var i=0; i<arr.length; i++) {
console.log(arr[i]);
}
或
for(let i=0; i<arr.length; i++) {
console.log(arr[i]);
}

注意：

 <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <script>
            // {
            //     var btn = document.querySelectorAll('button');
            //     for( var i=0; i< btn.length; i++){
            //         btn[i].onclick = function(){
            //             alert('点击了第' + i+'按钮')
            //         }
            //     }
            // }
            //for()是同步事件，onclick是个异步事件

            // 解决：闭包

            {
                var btn = document.querySelectorAll('button');
                for( var i=0; i< btn.length; i++){
                    (
                        function(i){
                            btn[i].onclick = function(){
                        alert('点击了第' + i+'按钮')
                    }
                        }
                    )(i)
                }
            }

        </script>

es6:

{
                let btn = document.querySelectorAll('button');
                for( let i=0; i< btn.length; i++){
                       btn[i].onclick = function(){
                        alert('点击了第' + i+'按钮')
                      }
                }
}
//for( let i=0; i< btn.length; i++)是一个作用域，{...}是一个作用域

2.forEach()、map()

遍历Array对象，参数一致
语法结构：
forEach() 列出数组的每个元素，用于调用数组的每个元素，并将元素传递给回调函数。

Array.forEach(function(value, index,array){
...

},thisValue);

Array.map(function(value, index,array){
...

},thisValue);

<button onclick="numbers.forEach(myFunction)">点我</button>
 
<p>数组元素总和：<span id="demo"></span></p>
 
<script>
var sum = 0;
var numbers = [65, 44, 12, 4];
 
function myFunction(item) {
    sum += item;
    demo.innerHTML = sum;
}
</script>

参数index,array,thisValue可选。

相同点：
forEach()、map()都遍历到数组的每个元素，每个元素都执行/调用提供的函数。

不同点：
forEach()返回值是undefined；
map() 不会修改原数组，返回值是一个新的数组，该新数组由每个元素调用提供的函数后的结果组成。

二、对象的遍历

1.for-in
以任意顺序遍历一个兑现改的可枚举属性，对于每个不同的属性，语句都被执行，每次迭代，分配的是属性名。(迭代的顺序由执行环境决定个，所以该遍历不一定按次序访问元素)
语法结构：

for(var i in obj){
console.log(i + ':' + obj[i]);
}
遍历obj对象的属性，i是指属性名

2. for-of
   每次迭代分配的是属性值。

for-in会遍历一个object（当前对象及其原型上的）所有的可枚举属性（属性名）；
for-of遍历具有iteration接口的数据结构（属性值），即遍历当前对象上的每一个属性值

可迭代数据结构：
Array、Map、Set、String、TypeArray arguments对象等。

for循环和for-in能终端循环（使用break，continue，return语句），forEach不可以。