对象

105 阅读1分钟

对象

对象(object):JavaScript里的一种数据类型

可以理解为是一种无序的数据集合

语法

let 对象名 = {

属性名:属性值

方法名:函数

}

组成

属性:信息或叫特性(名词)

方法:功能或叫行为(动词)

<script>
    let goods = {
        name: '小米',
        num: 111,
        weight: '0.55kg',
        address: '中国大陆',
        play: function () {
            console.log(`我要玩王者荣耀`);
        }    
    }
</script>

注:属性和值用 分隔

多个属性间用 分隔

属性访问

访问获取对象里面的属性值

<script>
    let goods = {
    name: '小米',
    num: 111,
    weight: '0.55kg',
    address: '中国大陆'
    }
    // 1. 对象.属性
    console.log(goods.name)
    // 2. 对象.['属性']
    // 要注意[]的属性名要加引号,不然会被解析成变量
    console.log(goods['name'])
</script>

访问获取对象中的方法

<script>
    let goods = {
        name: '小米',
        num: 111,
        weight: '0.55kg',
        address: '中国大陆',
        play: function (game = '我的世界') {
            console.log(`我要玩${game}`);
        }    
    }
    // 匿名函数的调用
    goods.play('王者荣耀')
    goods.play('LOL')
    goods.play('QQ飞车')
    goods.play()
</script>

操作对象

<script>
    let person = {
        name: '李狗蛋',
        age: 18
    }
</script>

查:直接对象.属性

<script>
    console.log(person.name);
    console.log(person['name']);
</script>

增: 对象.属性 = 值

<script>
    person.sex = '男'
    console.log(person);
</script>

如果对象中没有设置的属性则会新增一个属性

增: 对象.方法 = 匿名函数

<script>
    person.sayHi = function () {
        console.log('大家好~请多多关照');
    }
    console.log(person);
    person.sayHi()
</script>

也可以动态为对象 添加方法,语法更加灵活

改: 对象.属性 = 值

<script>
    person.name = '张翠花'
    console.log(person);
</script>

如果对象中有对应的属性则会重新赋值

删: delete 对象.属性

<script>
    delete person.name
    console.log(person);
</script>

删除数组中选中的对象属性

遍历对象

对象没有向数组一样的length属性,所以无法确定长度

对象里面是无序的键值对,没有规律,不像数组里有规律的下标

<script>
    let person = {
        name: '李狗蛋',
        age: 18,
        sex: '男'
    }
    // 利用 for in 遍历对象 key 代表属性名  
    for (let key in person) {
        console.log(key);
        // 在遍历对象的时候,不能用 对象名.key 的这种方式获取对象中的属性值
        // 当前遍历的属性值
        console.log(person[key]);
    }
</script>

注:因为key并不是person中的属性,所以用 . key 的这种方式是获取不到内容的,只能通过[ key ]的方式去访问

数组对象

<script>
    let students = [
    { name: '李狗蛋', age: 18, gender: '男', hometown:     '广东省' },
    { name: '张翠花', age: 19, gender: '女', hometown:     '四川省' },
    { name: '赵铁柱', age: 17, gender: '男', hometown:     '广西省' },
    { name: '钱多多', age: 18, gender: '女', hometown:     '湖南省' }
    ]
    // 因为我们要访问的对象本身是一个数组,所以要先选中索引,再选中对象属性
     console.log(students[3].hometown);
</script>

内置对象

Math对象是JavaScript提供的一个“数学高手”对象

提供了一系列做数学运算的方法

<script>
    // Math.random() 求从0 - 1 的随机数(包括0 不包括1)
    console.log(Math.random())
    // Math.ceil() 向上取整(往大了取)
    console.log(Math.ceil(2.3));
    // Math.floor() 向下取整(往小了取)
    console.log(Math.floor(3.2));
    // Math.max() 求最大值
    console.log(Math.max(11, 30, 23, 22, 8));
    // Math.min() 求最小值
    console.log(Math.min(11, 30, 23, 22, 8));
    // Math.PI 求圆周率
    console.log(Math.PI);
</script>

更多参数可以在相关网站

www.w3school.com.cn/jsref/jsref…查看

随机数对象

<script>
    // 求 0 - 10的随机数
    /* 推导过程
       Math.random() -> [0, 1)
       // 我们想要的是整数,把 小数 * 10 = 整数
       Math.random() * 10 -> [0,10)
       // 还是会有小数,需要向下取整 Math.floor()
       // 向下取整还是到不了我们需要的10,那么我们可以+1,让它的范围是0-11,就可以向下取整到我们需要的10
       Math.random() * 11 -> [0,11)  */
       console.log(Math.floor(Math.random() * 11)); 
    // 求 5 - 10的随机数
    // 0 - 5的随机数 + 5
       console.log(Math.floor(Math.random() * (5 + 1)) + 5);
    // 求 min - max 的随机数
       Math.floor(Math.random() * (max - min + 1)) + min

推导出公式:封装成函数以便后续使用

<script>
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
    }
    console.log(getRandom())
</script>
案例*随机数
<script>
    // 随机数
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min     + 1)) + min
    }
    // 声明变量 如果是错的 就继续执行循环
    let res = getRandom(1, 100)
    let random = true
    while (random) {
        let num = +prompt(`请您输入数字`)
        if (num > res) {
            alert('您输入的数字太大了,再来一次吧')
        } else if (num < res) {
            alert('您输入的数字太小了,再来一次吧')
        } else if (num === res) {
            alert('恭喜您猜对了,快去买彩票吧')
            // 退出循环
            break
        }
    }
</script>
案例*随机点名-不允许重复出现
<script>
    // 随机数
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
    }
    // 声明一个数组
    let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    // 生成1个随机数 作为数组的索引号
    let random = getRandom(0, arr.length - 1)
    document.write(arr[random])
    // 之后删除这个 人的名字
    // arr.splice(从哪里开始删, 删几个)
    arr.splice(random, 1)
    console.log(arr);
</script>

术语

image.png