for in与for of区别

原创已于 2022-12-20 16:56:53 修改 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-12-20 16:53:29 首次发布

本文解析了for-in和for-of在JavaScript中的不同用途，强调了for-of用于遍历数组元素的高效性，以及它们在遍历原型属性和数据类型的区别。通过实例展示了如何正确使用这两种遍历方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* for-in与for-of区别 
        1.功能不同
            for-in是遍历数组的下标
            for-of是遍历数组的元素
        2.原型的属性
            for-in会遍历原型的属性
            for-of不会遍历原型的属性
        3.数据类型
            for-in可以遍历Object类型
            for-of不可以遍历Object类型
        
        总结：如果只想要属性值/元素，使用for-of效率更高
        */

        //数组
        let arr = ['a','b','c']//下标0 1 2
        //给原型添加成员
        Array.prototype.age = 30

        //对象
        let obj = {name:'ikun',age:30}
        

        //遍历数组
        //for-in
        for(let key in arr){
            console.log(key,arr[key])//下标,元素
        }
        //for-of
        for (let item of arr ) {
            console.log(item)  //元素     
        }

        //遍历对象 : 程序报错
        // for (let item of obj ) {
        //     console.log(item)  //属性名    
        // }
   
    </script>
</body>
</html>