js基础知识06

最新推荐文章于 2024-06-13 16:29:32 发布

fdt__

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量307

点赞数

分类专栏： js基础(未更完) 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Int321/article/details/123984503

版权

js基础(未更完) 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这里写目录标题

1.变量和属性的区别

一个对象的属性名只有两个格式:数字或者字符串

var name = 10;
 var obj = {
     name: '培训',
 };
 console.log(obj.name); //获取OBJ这个对象的NAME属性对应的值
 console.log(obj['name']); //获取OBJ这个对象的NAME属性对应的值

 /*--------------*/
 console.log(obj[name]);// obj[name变量代表的值] 此时name变量是10  输出undefined

     var name = '培训'; 
     var obj = {
         //name:'培训' (放的是变量也是把变量存储的值拿过来做属性值)
         name: name
         name//=>ES6的简化和 name: name 一模一样

         
     };

2.for…in循环

用来循环遍历对象中的键值对的(continue和break同样适用)

  var obj = {
        name: '春亮',
        age: 52,
        friends: '王鹏,志刚',
        1: 20,
        2: 149,
        3: 140
    };
    console.log(obj.friends);
    console.log(obj['friends']);

    //for(var变量(key) in 对象) for in在遍历的时候，优先循环数字属性名（从小到大)
    //对象中有多少组键值对，循环就执行几次（除非break结束)

    for (var key in obj) {
        //每一次循环key变量存储的值是当前对象的属性名
        console.log(key + ':' + obj[key]);
        //console.log(obj.key);  undefined
			1:20
			2:149
			3:140
			name:春亮
			age:52
			friends:王鹏,志刚
        }

3.for…in循环实现隔行变色+自定义属性

自定义属性前期保存，后期用

自定义属性编程思想:前期把一些值存储到元素的自定义属性上，后期需要用到的时候，直接从属性上获取到这些值即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量和属性的区别</title>
</head>

<body>
    <script>

    </script>
    <style>
        li {
            list-style: none;
        }

        ul>li {
            line-height: 30px;
        }

        #box li {
            width: 200px;
        }
    </style>
    // ## 3.for...in循环实现隔行变色

    <ul id="box">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
        <li>第7个</li>
        <li>第8个</li>
    </ul>
    <script>
        var box = document.getElementById('box');
        var lis = box.getElementsByTagName('li');
        init();
        for (var key in lis) {
            console.log(key);
            lis[key].onmouseover = function () {
                this.style.backgroundColor = 'white';
            }
            //自定义属性前期保存，后期用
            //自定义属性编程思想:前期把一些值存储到元素的自定义属性上，后期需要用到的时候，直接从属性上获取到这些值即可

            lis[key].onmouseout = function () {
                this.style.backgroundColor = this.myOriginBg;
            }
        }

        function init() {//初始化函数
            var bg;
            for (var i = 0; i < lis.length; i++) {
                var bg = i % 2 === 0 ? 'green' : 'red '; 
                lis[i].style.backgroundColor = bg;
                //设置自定义属性myOriginBg用来存储每一个LI的背景
                lis[i].myOriginBg = bg;
            }
        } 
    </script>
</body>
</html>

在这里插入图片描述

4.函数的底层运行机制

在这里插入图片描述

问题：(选项卡案例，堆栈)

以下代码的功能是要实现为5个input按钮循环绑定click点击事件，绑定完成后点击五个按钮分别会输出0、1、2、3、4五个字符。请问如下代码是否能实现?如果不能实现那么现在的效果是什么样的?应该做怎样的修改才能达到我们想要的效果，并说明原理?
选项卡01
选项卡02

解决方法1：自定义属性

<button value="按钮1">1</button>
<button value="按钮2">2</button>
<button value="按钮3">3</button>
<button value="按钮4">4</button>
<button value="按钮5">5</button>
<script>
    var btnList = document.getElementsByTagName('button');
    for (var i = 0; i < btnList.length; i++) {
        btnList[i].myid = i;  自定义属性myid
        //循环了5次,创建了5个function()函数
        btnList[i].onclick = function () {
            console.log(this.myid);
            //console.log(btnList[i-1].myid); 都可以输出
        }
    }
</script>

5.函数内置的实参集合arguements(任意数求和)

任意数求和
1.传递实参的个数不定
2.传递的值是否为有效数字不定
=>把传递的有效数字进行相加求和

arguments: 函数内置的实参集合
1.类数组集合,集合中存储着所有函数执行时,传递的实参信息
2.不论是否设置形参,arguments都存在
3.不论是否传递实参,arguments也都存在
arguments.callee:存储的是当前函数本身(一般不用的,JS严格模式下禁止使用这些属性)

function sum() {
            var val = 0
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) != 'number') {
                    console.log('请输入正确的数字');
                    return;
                }
                val = val + arguments[i];
            }
            return val;
            //console.log(arguments);
        }

        let total = sum(10, 20, 30, 40);
        console.log('结果是' + total);

        total = sum(10, 20);
        console.log('结果是' + total);

        total = sum(10, 20, '30');
        console.log('结果是' + total);

        total = sum(10, 'AA');
        console.log('结果是' + total);

6.ES6箭头函数（初步学习）

arrow function箭头函数

fdt__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础知识06

这里写目录标题1.变量和属性的区别2.for...in循环3.for...in循环实现隔行变色+自定义属性4.函数的底层运行机制问题：(选项卡案例，堆栈)解决方法1：自定义属性5.函数内置的实参集合arguements(任意数求和)1.变量和属性的区别一个对象的属性名只有两个格式:数字或者字符串var name = 10; var obj = { name: '培训', }; console.log(obj.name); //获取OBJ这个对象的NAME属性对应的值 console.
复制链接

扫一扫