对象找值哦

@sudo

已于 2022-03-30 09:44:17 修改

阅读量272

点赞数

分类专栏： front_end方法文章标签： javascript

于 2022-03-29 13:31:19 首次发布

本文链接：https://blog.csdn.net/idpangpengcheng/article/details/123819176

版权

front_end方法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);


        };
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        // var btn1 = document.querySelector('button');
        // btn1.onclick = function() {
        //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
        //     // var that = this;
        //     setTimeout(function() {
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
        //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
        //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        // }

        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        }
    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        let goods = {
            name: '小米10青春版',
            num: '100012816024',
            weight: '0.55kg',
            address: '中国大陆'
        }
        console.dir(goods) // Object
        console.log(goods.address)  // 中国大陆

        // 声明人对象     对象里面可以写方法  其中方法的格式是   方法名: function(){},方法之前用过, 隔开最后一个方法不需要, 。
        let person = {
            uname: '刘德华',
            age: 18,
            sex: '男',
            // 方法名：function(){}
            sayHi: function () {
                console.log('hi~~~')
            },
            mtv: function (s) {
                console.log(s)
            }
        }
        // console.log(uname)
        // 1. 访问属性  得到值   对象.属性名
        console.log(person.uname)
        console.log(person.age)
        // 2. 访问属性  得到值   对象['属性名']
        console.log(person['sex']+"--------") // 男-------- // 对象也可以根据 访问属性值  对象['属性名']
        // 调用方法 对象.方法名()
        person.sayHi()
        person.mtv('无间道')
        console.log('-----------------------')

        // document.write()


        let duixiang = {
            name: '小米10青春版',
            num: '100012816024',
            weight: '0.55kg',
            address: '中国大陆',
            shu1: ['上海','成都','重庆','天津'],
            duixiang1: {
                name: '小米10青春版',
            num: '100012816024',
            weight: '0.55kg',
            address: '中国大陆',
            shu1: ['上海','成都','重庆','天津'],
            }
        }
        console.dir(duixiang) // Object
        console.log(duixiang.address)   // 中国大陆
        console.log(duixiang['address']) // 中国大陆
        console.log("---------");
        console.log(duixiang.shu1);// ['上海', '成都', '重庆', '天津']
        console.log(duixiang['shu1']);// ['上海', '成都', '重庆', '天津']
        // 怎样拿到对象里面数组的数组元素？
        console.log(duixiang.shu1[0]);// 上海


        console.log(duixiang.duixiang1);// {name: '小米10青春版', num: '100012816024', weight: '0.55kg', address: '中国大陆'}
        console.log(duixiang['duixiang1']);// {name: '小米10青春版', num: '100012816024', weight: '0.55kg', address: '中国大陆'}
        console.log(duixiang.duixiang1.shu1);// ) ['上海', '成都', '重庆', '天津']
        console.log(duixiang.duixiang1.shu1[3]);// ) 天津


        



    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        // 定义一个对象
        let obj = {
            uname: '小明',
            age: 18
        }
        console.log(obj.age) // 18
        // 修改  对象.属性 =  新值
        obj.age = 81
        console.log(obj)
        // 新增一个属性  js 可以非常方便的动态新增属性或者方法
        obj.sex = '男'
        // 会去对象里面找是否有 sex这个属性，如果有则更新值修改
        // 会去对象里面找是否有 sex这个属性，如果没有则新增这个属性
       
        // 新增方法
        obj.sing = function () {
            console.log('hi')
        }
        console.dir(obj) // object

        // 删除 (了解)
        delete obj.uname 
        console.dir(obj)  // object

    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        let obj = {
            uname: '小明',
            age: 18,
            sex: '男'
        }
        // 从对象中拿值，可以是 对象名.属性 也可以一是 对象名[属性名]
        console.log(obj['uname'])  // 小明
        // for  in  循环语句
        // 语法
        // for (let k in 对象名) {}  重点
        // k 变量   k  或者  key    value  
        for (let k in obj) {
            console.log(k)  // 属性名  uname
            // console.log(obj.k)  // obj.k 意思是 obj里面的k属性
            console.log(obj['k'])
            console.log(obj[k])  // 属性值 

            // 为什么这么写？
            // k  ===  'uname'   === 'age'  === 'sex'
            // obj.k 
            // // obj['uname']
            // obj['sex']  === 18
        }
    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        // 数组 里面可以放任何的数据类型
        // let arr = [1, 'pink', true, undefined, null, {}, []]
        // console.log(arr)
        // 数组对象
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
        ]
        // 怎么得到小明这个名字
        // students[0]   === 得到 {name: '小明', age: 18, gender: '男', hometown: '河北省'} 
         console.log(students[0]) // {name: '小明', age: 18, gender: '男', hometown: '河北省'}
         console.log(students[0].age)  // 18  拿到对象中的属性值通过 对象.属性名
         console.log(students[0]['age']); //  18
         // 打印对象 其实里面的每一个对象都是 数组里面的元素 值 
        //  遍历数组
        for (let i = 0; i < students.length; i++) {
            console.log(students[i].name)
            console.log(students[i].hometown)
        }
    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        // 求得是 N - M 之间的一个随机数公式
        // let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
        // console.log(random)
        // 封装一个随机数函数  min 到  max  
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let random = getRandom(1, 10)
        console.log(random)
        let random1 = getRandom(1, 50)
        console.log(random1)


        console.log(parseInt(1.1)) //1 
        console.log(parseInt(1.9)) //1
        console.log(Math.round(1.1)) //1     
        console.log(Math.round(1.9)) //2

        // parseInt(Math.random()*(Max-Min)+Min) //不管小数点后面的小数 都只取整数
        // Math.round(Math.random()*(Max-Min)+Min) // 就近取整, 0.5 为基准
        // 大于 0.5向上取，小于0.5向下去
        
    </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
    <script>
        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']

        // 生成1个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        // console.log(random)
        document.write(arr[random])
        console.log(arr)  // 8个数组元素

        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1)
        console.log(arr) //Array(7)  7个数组元素
    </script>
</body>

</html>

<!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>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 2. apply()  应用 运用的意思
        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr); // 'pink'
        };

        fn.apply(o, ['pink']);
        // 1. 也是调用函数 第一个参数可以改变函数内部的this指向
        // 2. 但是他的参数必须是数组(伪数组)
        // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
        // Math.max();
        var arr = [1, 66, 3, 99, 4];
        var arr1 = ['red', 'pink'];
        // var max = Math.max.apply(null, arr);
        var max = Math.max.apply(Math, arr); // 
        var min = Math.min.apply(Math, arr);
        console.log(max, min); // 99 1


        var  max1 = Math.max(...arr)
        console.log(arr) // [1, 66, 3, 99, 4]
        console.log(...arr)//1 66 3 99 4
        console.log([...arr]) //  [1, 66, 3, 99, 4]
        console.log(max1)  // 99
    </script>
</body>

</html>

<!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>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);


        };
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        // var btn1 = document.querySelector('button');
        // btn1.onclick = function() {
        //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
        //     // var that = this;
        //     setTimeout(function() {
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
        //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
        //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        // }

        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        }
    </script>
</body>

</html>

@sudo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对象找值哦

<!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>D.
复制链接

扫一扫