JavaScript学习笔记7

最新推荐文章于 2023-04-16 14:10:10 发布

正在加载jjj

最新推荐文章于 2023-04-16 14:10:10 发布

阅读量329

点赞数

分类专栏： JS 文章标签： javascript 前端

原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=154&spm_id_from=333.851.header_right.history_list.click

版权

JS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

构造函数

可以创建多个对象
把一些相同的属性和方法抽象出来封装到函数里面
构造函数是用来封装对象的
语法规范：
- 构造函数的函数名首字母必须大写
- 调用构造函数必须是：new 构造函数名（）{}
- 属性和方法前面一定使用this.属性（方法）
- 构造函数不需要return就可以返回结果；
对象是一个具体的事物，构造函数是泛指某一大类
我们利用构造函数创建对象的过程也称对象实例化

案例

<!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>
    <script>
        //创建四大天王的对象 相同的属性： 名字 年龄 性别 相同的方法:唱歌
        /* function 构造函数名(){
            this.属性 = 值; //this指当前的对象
            this.方法 function(){
            }
        }
        new 构造函数名();//调用的时候一定使用new调用 */
        function Star(uname, age, sex) {//构造函数的函数名首字母必须大写
            this.name = uname;
            this.age = age;
            this.sex = sex;//必须使用赋值操作
            this.sing = function (sang) {//构造函数创建方法
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男');//调用构造函数必须使用new
        // console.log(typeof ldh); 输出结果为object
        console.log(ldh.name, ldh.age);
        console.log(ldh['sex']);
        ldh.sing('冰雨');//调用构造函数的方法

        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name, zxy.age, zxy.sex);
        zxy.sing('李香兰');
    </script>
</head>

<body>

</body>

</html>

结果

new关键字

new构造函数会在内存中创建一个空的对象
this就会指向刚才创建的空对象
接下来执行构造函数里面的代码给这个空对象添加属性和方法，最后返回这个对象。

案例

<!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>
    <script>
        //1.new构造函数可以在内存中创建一个空的对象
        //this就会指向刚才创建的空对象
        function Star(uname, age, sex) {//构造函数的函数名首字母必须大写
            this.name = uname;
            this.age = age;
            this.sex = sex;//必须使用赋值操作
            this.sing = function (sang) {//构造函数创建方法
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
    </script>
</head>

<body>

</body>

</html>

遍历对象

for in遍历对象
语法格式：for (var 变量 in 对象){}
console.log(k);输出k变量得到属性名
console.log(obj[k]); 输出obj[k] 得到属性值
for in里面的变量我们喜欢写k或者key

案例

<!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>
    <script>
        var obj = {
            name: '潮湿',
            age: 18,
            sex: '男'

        }
        //传统方法一个一个打印
        /* console.log(obj.name);
        console.log(obj, age);
        console.log(obj, sex); */

        //使用for in方法遍历
        for (var k in obj) {
            console.log(k);//输出k变量 得到属性名
            console.log(obj[k]);//obj[k]  得到属性值
        }
    </script>
</head>

<body>

</body>

</html>

结果

内置对象

JavaScript中对象分为3种：自定义对象、内置对象、浏览器对象
内置对象就是指JS语言自带的一些对象，这些对象提供开发者使用，并提供了一些常用而且最基本的功能
JavaScript提供了多个内置对象：Math、Date、Array、String等

查阅MDN文档

MDN Web Docs

案例

<!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>
    <script>
        var myMath = {
            PI: 3.141592653,
            max: function () {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function () {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(Math.max(1, 5, 9));
        console.log(Math.min(1, 5, 9));
    </script>
</head>

<body>

</body>

</html>

结果

Math对象

Math数学对象不是一个构造函数，不需要new来调用，直接使用里面的属性和方法即可
Math.max（参数1，参数2··）
- 返回这些数中最大值
Math.abs() 取绝对值的方法
- 如果遇到字符型数字会进行隐式转换为数字型
- 如果遇到字符型非数字的则返回NaN
Math.floor() 向下取整
Math.ceil() 向上取整

Math.round() 四舍五入取整

其他数字都是四舍五入，但是.5比较特殊，他往大了取，当1.5时取2，当-1.5是-1

案例

<!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>
    <script>
        //1.绝对值方法
        console.log(Math.abs(1));
        console.log(Math.abs(-3));
        console.log(Math.abs('-1'));//隐式转换  会把字符串的-1转换为数字型
        console.log(Math.abs('多云'));//输出为NaN

        //2.三个取整方法

        //往下取整
        console.log(Math.floor(1.1));//结果是1  往下取最小值
        console.log(Math.floor(1.9));//结果是1  往下取最小值

        //往上取整
        console.log(Math.ceil(1.1));//结果是2
        console.log(Math.ceil(1.9));//结果是2

        //四舍五入
        console.log(Math.round(1.4));//结果是1
        console.log(Math.round(1.5));//结果是2
        console.log(Math.round(-1.5));//结果是-1  


    </script>
</head>

<body>

</body>

</html>l

结果

随机数方法random()

random()返回一个随机小数取值范围[0,1)
这个方法不跟参数

案例

<!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>
    <script>
        //随机整数 包含末端的两个数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        console.log(getRandom(1, 10));

        //随机[0,1)之间的数
        console.log(Math.random());

        //随机点名
        var arr = ['张三', '李四', '王五'];
        console.log(arr[getRandom(0, arr.length - 1)]);//使用getRandom（数组下边最小值，数组下标最大值）

    </script>
</head>

<body>

</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>猜数字</title>
    <script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);
        while (true) {
            var num = prompt('猜数字输入1~10之间的一个数字');
            if (num > random) {
                alert('猜大了');
            } else if (num < random) {
                alert('猜小了');
            } else {
                alert('猜对了');
                black;
            }
        }
    </script>
</head>

<body>

</body>

</html>

结果

日期对象

日期对象是一个构造函数 必须使用new来调用
如果没有参数，则返回当前系统时间
数字型：2019,10,01或者是字符串型‘2019-10-1 8:8:8’

案例

<!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>Date日期函数</title>
    <script>
        var arr = new Array();//创建一个数组对象
        var obj = new Object;//创建一个对象实例
        //1.没有任何参数，则返回当前系统时间
        var date = new Date();
        console.log(date);
        //2.参数常用写法 
        //3.数字型参数
        var date1 = new Date(2019, 10, 1);
        console.log(date1);//返回的是11月  不是10月
        //4.字符串型参数
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
    </script>
</head>

<body>

</body>

</html>

结果

方法：

getFullYear();返回当前日期的年
getMouth();月份返回比实际月份小一个月
getDate();返回的是几号
getDay();返回的是周几，其中周日是0
getHours();获取时
getMinutes();获取分
getSeconds();获取秒

案例

<!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>
    <script>
        var date = new Date();
        console.log(date.getHours());//时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒

        //封装一个函数  格式00:00:00
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;//小于10时 前面添加0
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());



    </script>
</head>

<body>

</body>

</html>

结果

获取日期的总毫秒的形式，距离1970年1月1号过了多少毫秒数 ,毫秒数永远不会重复，又称为时间戳

valueof（）
getTime（）
+new Date()

案例

<!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>返回Date总的毫秒数</title>
    <script>
        //1.通过valueof（）
        var date = new Date();
        console.log(date.valueOf());//得到总毫秒数
        //2.通过getTime（）
        console.log(date.getTime());//就是现在时间距离1970年总的毫秒数
        //3.简单写法(最常用写法)
        var date1 = +new Date();//+new Date()返回就是总的毫秒数
        console.log(date1);
        //4.H5新增的
        console.log(Date.now());
    </script>
</head>

<body>

</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>倒计时</title>
    <script>
        function countDown(time) {
            var nowTime = +new Date();//返回当前时间总的毫秒数
            var inputTime = +new Date(time);//返回用户输入的总的毫秒数
            var times = (inputTime - nowTime) / 1000;//times就是剩余时间总的秒数 /1000为秒数
            var d = parseInt(times / 60 / 60 / 24);//得到天数
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);//得到时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);//得到分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);//得到秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2022-10-1 18:00:00'));//输入倒计时结束的时间
    </script>
</head>

<body>

</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>格式化日期</title>
    <script>
        var date = new Date();
        console.log(date.getFullYear());//返回当前日期的年  2022
        console.log(date.getMonth());//返回月份 0~11月  得到的月份比实际的小一个月
        console.log(date.getMonth() + 1);
        console.log(date.getDate());//返回的是几号
        console.log(date.getDay());//返回是周几  周日返回0 

        //写一个2022年 8月 22号 星期一
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
    </script>
</head>

<body>

</body>

</html>

结果

数组对象

数组对象的创建

new Array()

括号里面如果是空，则表示创建了一个空数组
括号里面如果是一个数字，则表示创建了一个数组长度为数字的数组
括号里面如果是两个以上的数字，则表示创建了一个数组

案例

<!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>
    <script>
        //1.利用数组字面量
        var arr = [1, 2];
        console.log(arr);

        //2.利用new Array（）
        var arr1 = new Array(2);//这个2表示数组长度是2 里面有两个空元素
        console.log(arr1);

        var arr2 = new Array(1, 2);//表示创建了一个数组元素 是1和2的数组  表示必须要包含两个以上的元素
        console.log(arr2);


    </script>
</head>

<body>

</body>

</html>

结果

字面量方式

检测是否为数组

instanceof 运算符
- 如果是数组则返回true，否则返回false

Array.isArray(参数)；

如果是数组则返回true，否则返回false

案例

<!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>
    <script>
        var arr = [];
        var obj = {};
        //1.instanceof运算符
        console.log(arr instanceof Array);//判断Array是否为一个数组
        console.log(obj instanceof Array);//判断Array是否为一个数组
        //2.Array.isArray（参数）
        console.log(Array.isArray(arr));
    </script>
</head>

<body>

</body>

</html>

结果

添加或者删除元素

push（）
- 在数组末尾添加一个或者多个数组元素
- push（）括号里面直接写需要添加的数组元素
- push完之后返回的是新数组的长度
unshift（）
- 是在数组前面添加新的元素
- unshift返回值是新数组的长度
pop()
- 删除数组的最后一个元素
- pop()里面不跟参数
- 返回值是删除的那个元素

shift

可以删除数组元素的第一个元素
shift也没有参数
返回值是被删除的那一个元素

案例

<!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>
    <script>
        //1.push()在数组末尾添加
        var arr = [1, 2, 3];
        arr.push(4, '多云');//把4和多云添加到数组末尾
        console.log(arr);
        //2.unshift在数组开头添加新的元素
        arr.unshift('red');
        console.log(arr);
        //3.pop() 删除数组最后一个元素
        console.log(arr.pop());;//后面没有参数  返回值是删除的元素
        console.log(arr);
        //4.shift()删除数组开头的元素
        console.log(arr.shift());;
        console.log(arr);
    </script>
</head>

<body>

</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>筛选数组</title>
    <script>
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                //newArr[newArr.length] = arr[i];
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
    </script>
</head>

<body>

</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>数组排序</title>
    <script>
        //1.翻转数组  reverse直接翻转数组
        var arr = ['张三', '李四', '王五']
        arr.reverse();
        console.log(arr);
        //2.冒泡排序  sort直接对数组进行冒泡排序
        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function (a, b) {
            return a - b;//升序排列
            //return b - a;//降序排列
        });
        console.log(arr1);
    </script>
</head>

<body>

</body>

</html>