JavaScript

1. 对象的使用

        // 声明一个产品对象，里面包含以下信息
        // 对象是一个产品信息可以命名为：  goods
        // 商品名称：name
        // 商品编号：num
        // 商品毛重：weight
        // 商品产地：address
        let goods = {
            name: '小米',
            num: '123456',
            weight: '12.5kg',
            address: '中国大陆'
        }
        
        //第一种获取方法
        console.log(goods);
        console.log(goods.name);             //小米
        console.log(goods.num);              //123456
        console.log(goods.weight);           //12.5kg
        console.log(goods.address);          //中国大陆
        
        //第二种获取方法
        console.log(goods['name']);            //小米
        console.log(goods['num']);             //123456
        console.log(goods['weight']);          //12.5kg
        console.log(goods['address']);         //中国大陆

2. 对象的方法

            let goods = {
            name: '小米',
            num: 1000032313,
            weight: '0.55kg',
            address: '中国大陆',
            play: function (game) {
                console.log(`小米手机可以玩${game}`);
            }
        }
        goods.play('王者荣耀,lol,和平精英')
        goods.play() 

3. 对象操作

         let person = {
            name: '李狗蛋',
            age: 18
        }

• 查：直接对象.属性即可

       console.log(person.name);
       console.log(person['name']);

• 增： 对象.属性 = 值 如果对象中没有设置的属性则会新增一个属性

       person.sex = '男';
       console.log(person);

• 增： 对象.方法 = 匿名函数 也可以动态为对象 添加方法，语法更加灵活

        person.sayHi = function () {
            console.log('你好');
        }
        person.sayHi()
        console.log(person);

• 改： 对象.属性 = 值 如果对象中有对应的属性则会更新属性值

        person.name='张翠花'
        console.log(person);

• 删： delete 对象.属性

        delete person.sex
        console.log(person);

4. 遍历对象

       let person = {
            name: '李狗蛋',
            age: 18,
            sex: '男'
        }

        // 利用 for in 遍历对象 key 代表属性名  
        for (let key in person) {
            console.log(person[key]);
        }
        console.log(person);

5. 数组对象

        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[0].name);

6. 学生信息表案例

      //css部分样式
      table {
            width: 600px;
            text-align: center;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:first-child {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
        //js部分
          let students = [            { name: '李狗蛋', age: 18, gender: '男', hometown: '广东省' },            { name: '张翠花', age: 19, gender: '女', hometown: '四川省' },            { name: '赵铁柱', age: 17, gender: '男', hometown: '广西省' },            { name: '钱多多', age: 18, gender: '女', hometown: '湖南省' },            { name: '松松老师', age: 18, gender: '女', hometown: '黑龙江省' },            { name: '班班', age: 18, gender: '女', hometown: '广东省' }        ]

        // 通过js的方式创建表格
        document.write(`
        <table>
        <caption>
            <h3>学生列表</h3>
        </caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        `)

        for (let i = 0; i < students.length; i++) {
            document.write(`
            <tr>
            <td>${i + 1}</td>
            <td>${students[i].name}</td>
            <td>${students[i].age}</td>
            <td>${students[i].gender}</td>
            <td>${students[i].hometown}</td>
        </tr>
            `)
        }
        document.write(`
    </table>
        `)

7. 数学内置对象

• // Math.random() 求从0 - 1 的随机数(包括0 不包括1) console.log(Math.random(0,1));

• // Math.ceil() 向上取整 console.log(Math.ceil(11.2)); //12 console.log(Math.ceil(1.9)); //2 console.log(Math.ceil(-1.5)); //-1

• // Math.floor() 向下取整 console.log(Math.floor(1.9)); //1 console.log(Math.floor(1.1)); //1 console.log(Math.floor(-1.5)); //-2

• // Math.max() 求最大值 console.log(Math.max(1,2,5,9)); //9

• // Math.min() 求最小值 console.log(Math.min(1,2,5,9)); //1

8. 随机数对象

 0 - 10的随机数
 Math.random() -> [0, 1)
 console.log(Math.floor(Math.random()*10+1));
 console.log(Math.floor(Math.random()*10));
 console.log(Math.floor(Math.random()*11));
 Math.random()*10 -> [0,10)
 Math.random()*(10 + 1) -> [0,11)
 Math.floor( Math.random()* (10 + 1)) -> 从0 - 10的整数

• 10-15的随机数

     function getRandom(min,max){
            return Math.floor(Math.random()*(15-10+1))+10
        }
        console.log(getRandom(10,15));

• m-n的随机数【Math.floor(Math.random() * (m - n + 1)) + n】

9. ① 随机点名

           // 封装随机数函数
        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])             

② 随机点名不允许重复

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

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

        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random,1)
        console.log(arr);

10. 猜数字游戏

        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let res = getRandom(1, 100)
        let isWrong = true
        while (isWrong) {
            let num = +prompt('请输入数字')
            if (num > res) {
                alert('您输入的数字太大了，再试一次吧')
            } else if (num < res) {
                alert('您输入的数字太小了，再试一次吧')
            } else if (num = res) {
                alert('你猜对啦')
                break
            }
        }