从数组到js基础结束

本篇含数组基础内容，数组排序（冒泡排序） 函数的定义和使用 对象的定义和使用 以及 js内置函数 Math()常用方法 Date()常用方法 String() 字符串常用方法以及Array()常用方法

数组

数组概念

数组是保存一组元素的集合 这些元素 可以是数字型也可以是布尔型 字符型，甚至对象 都可以

数组中的元素按照从0开始顺序有序排列 第一个元素 对应的下标为0 第二个元素对应下标为1 如此往复

数组的定义

var arr = [] ;

var arr = new Array() 后面括号可以跟参数 如果跟一个参数 表示当前创建的数组的长度 如果参数大于一个 那么就是数组的元素

输出数组元素（遍历数组）

利用for循环 从下标为0开始

<script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>

函数

函数概念

关键字：function（） 函数是封装一段可以重复被使用的代码，从而节省代码重复 函数中有且只有一个return 且函数遇到return之后就会停止，不再执行函数后面的内容 且函数 不调用不执行 函数可以传递参数 其中函数中的参数为形参 调用时传入的参数为实参

函数定义

var 函数名 = function（）{代码块} // 匿名函数 定义方法 在对象中常用

function函数名（）{代码块}

arguments

arguments是函数中内置的存储数据的数组 是个伪数组 伪数组有length 但是没有pop和push等数组该有的方法

函数案例

函数封装求最大值

function arrMax(arr) {
            var max = arr[0];
            for (var i = 1; i < arr.length; i++) {
                if (arr[i] > max) {
                    var temp = arr[i];
                    arr[i] = max;
                    max = temp;
                }
            }
            return max;
        }

        var arr = [5, 8, 6, 2, 85, 12, 6, 5, 106, 84, 1, 23, 65];
        var max = arrMax(arr);
        console.log(max);

    </script>

函数封装判断闰年

 <script>
        //判断闰年案例   函数封装  return的是闰年还是平年
        function decide(year) {
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                return true;
            }
            return false;
        }
        var year = decide(1953)
        console.log(year);
    </script>

函数封装反转数组元素

<script>
        //利用函数封装的方式，翻转数组
        //思路：利用循环，把第一个值，传给数组的最后一个值，然后return 数组
        //记忆单词 reverse  翻转
        function reverse(arr) {
            var brr = [];
            brr.length = arr.length;
            for (var i = 0; i < arr.length; i++) {
                brr[arr.length - i - 1] = arr[i];
            }
            return brr;
        }
        var arr = [5, 8, 3, 2, 5, 6, 2, 1];
        var brr = reverse(arr);
        console.log(brr);
        
    </script>

对象

对象概念

万物皆对象 手中的苹果 桌子上的玩具 我的女朋友 我的老师 我的兄弟张三疯 等等这些都是对象。

为什么需要对象？

我们想要描述一台手机，那么需要保存手机的 屏幕大小 颜色 重量 以及手机的功能 可在我们学习的内容里面 数组不能 变量太过于麻烦 那么用什么来保存？

于是就出现了对象。

对象关键字 object 对象里保存的是一个对象的属性和方法（功能）

对象的三种创建方式

1.利用字面量创建对象 2.用对象关键字 new Object创建对象 3.构造函数创建对象

 // 对象  万物都可以称为对象   为什么会出现对象，因为我们想要存放不同的属性值和方法  数组办不到，所以有了对象
        // 对象  存放多个属性和方法
        // 对象声明的三种方式
        //第一种，  利用字面量创建对象   采用的是键值对的方式，用逗号隔开
        // var abj = {
        //     uname: '王者荣耀',
        //     age: 3
        // }
        // console.log(abj.uname);
        // 第二种，用对象关键字  new Object创建对象
        // var abj = new Object();
        // console.log(typeof (abj));//object
        // // 追加属性和方法
        // abj.name = '张三';
        // abj.sex = '男';
        // abj.age = 18;
        // //追加方法
        // abj.sayHi = function () {
        //     console.log('hi~~');
        // }
        // // 调用对象中的方法
        // abj.sayHi();
        // // 调用对象中的属性值
        // console.log(abj.name);
        // console.log(abj['sex']);
        // 第三种，构造函数方法
        // 为什么会出现构造函数这种方法   ：  因为不管是对象关键字还是字面量创建对象，一次只能创建一个，如果我们想创建一堆不一样的对象，但是这些对象又有很多重复的代码块，那么我们可以把这些相同的代码块封装到函数里面，减少了代码量，于是就出现了构造函数对象
        // 必须要掌握构造函数的代码规范

        // 这一个类似于用函数表达式创建函数
        // var Star = function () {
        //     this.属性 = 属性值;
        //     this.属性 = 属性值;
        //     this.方法 = function () {
        //     }
        // }

        // console.log(typeof Star); // function   函数
        // // 使用构造函数创建对象
        // var abj = new Star();
        // console.log(typeof abj);

        // 以四大天王来距离，创建一个明星的对象
        var Star = function (name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.Sing = function (str) {
                console.log(str);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(typeof ldh); //object  对象
        // 打印输出姓名 年龄   性别
        console.log(ldh.name);
        console.log(ldh['age']);
        console.log(ldh.sex);
        // 使用方法和对象无差别
        ldh.Sing('雨夜');

打印对象中某一属性对应的值

对象名.属性

对象名['属性'] 重点 中括号里面的引号不能掉

输出对象（遍历对象）

for ... in 固定语法 要记住

 <script>
        var fn = {
            name: '刘德华',
            sex: '男',
            age: 18,
            sayHi: function () {
                console.log('hi~~~');
            }
        }
        // 以前我们打印，都是一个一个的打印，但是我现在想像for循环输出数组那样，一下子全都打印出来
        // for  in   变量我们通常用k  或者 key
        for (var k in fn) {
            //一定要记住这种语法结构   k 是我们随便起的一个名字
            console.log(k);    // k 是属性   
            console.log(fn[k]);  // k属性对应的属性值
        }

    </script>

基础篇到此结束 ，是不是觉得做案例，实现一种功能比如排序 求最大最小 或者翻转数组要写这么多代码很苦恼？

接下来我们来学习js作者 佩奇先生为我们内置的函数

在此 我将全部以代码块的形式将Array数组 Math数学 String字符串 以及 Date 时间四种对象常用的方法写出来

Math()

<body>
    <!-- math常用方法整理 -->
    <!-- Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。
    这句话告诉我们  math的方法直接使用就可以，不需要new一下
    -->
    <script>
        // Math.PI 表示一个圆的周长与直径的比例，约为 3.14159
        console.log(Math.PI); // 3.141592653589793
        // abs()函数  求一个数的绝对值 如果参数是整数和0 则返回原值 如果是负数 则返回相反数
        console.log(Math.abs(5));
        console.log(Math.abs(0));
        console.log(Math.abs(-95));
        // ceil() 向上取整  floor()  向下取整  round()  四舍五入
        console.log(Math.ceil(1.2));  //  2 向上取整  得到的数是大于或者等于该数的数  遇到小数点就进1
        console.log(Math.floor(1.8)); //  1 向下取整  得到的数是小于或者等于该数的数  遇到小数点就省略，返回原值
        console.log(Math.round(1.4));  // 1   四舍五入 特别注意的是.5  向大的取整
        console.log(Math.round(1.5));  // 2   四舍五入 特别注意的是.5  向大的取整
        console.log(Math.round(-1.5));  // -1  四舍五入 特别注意的是.5  向大的取整
        console.log(Math.round(-1.6));  // -2  四舍五入 特别注意的是.5  向大的取整
        // max()   min()   求最大值和最小值   注意 参数只能是固定的数  不能够传数组 如果想要求数组的最大值和最小值  那么就要自己封装一个求max 和 min  的函数
        console.log(Math.max(1, 2, 58, 32, 45)); // 58
        console.log(Math.min(1, 2, 58, 32, 45)); // 1
        var arr = [1, 5, 2, 6, 5, 2, 87];
        console.log(Math.max(arr)); // NaN
        console.log(Math.min(arr)); // NaN
        function getMax(arr) {
            var max = arr[0];
            for (var i = 1; i < arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        function getMin(arr) {
            var min = arr[0];
            for (var i = 1; i < arr.length; i++) {
                if (arr[i] < min) {
                    min = arr[i];
                }
            }
            return min;
        }
        console.log(getMax(arr)); // 87
        console.log(getMin(arr)); // 1
        // 获取随机数  random()  通过random方法能够得到0-1 包括0 但是不包括1的随机数 每次刷新都是不一样的
        console.log(Math.random());
        // 但是在我们生活中，一般都是需要我们自己确定的两数之间的随机数
        // 那么我们就需要自己写一个获取随机数的函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        console.log(getRandom(1, 30));  // 包括1 也包括30  通常我们都会获取一个整数的随机数  所以两个参数要写整数
    </script>
</body>

Date()

<body>
    <!-- Date常用方法总结 -->
    <!-- Date是构造函数，和Math函数不同，如果我们想要使用Date函数里面的方法，我们首先要new一个对象出来 -->
    <script>
        var date = new Date(); // 创建一个Date 构造函数 的实例化对象
        var year = date.getFullYear(); // 获取当前年份
        console.log(year);
        var month = date.getMonth() + 1; // 获取当前的月份，要注意  在计算机系统中月份是从0 开始计数，所以我们在输出时要+1
        console.log(month);
        var day = date.getDate(); // 获取当前的号  或 日子
        console.log(day);
        var zhouji = date.getDay(); // 获取当前是周几  0 表示周日 1 表示周一 ... . 6表示周六  所以我们要输出周几，可以搭配数组
        // 数组也要从周日开始写 因为周日的下标是0  
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        console.log(arr[zhouji]);
        // 案例：输出 2022-04-10 星期几  格式
        // 我们可以封装函数
        function getTime() {
            var date1 = new Date(); // 创建一个Date 构造函数 的实例化对象
            var y = date1.getFullYear(); // 获取当前年份
            var m = date1.getMonth() + 1; // 获取当前的月份，要注意  在计算机系统中月份是从0 开始计数，所以我们在输出时要+1
            // 此处用三元运算符更加简洁
            m = m < 10 ? '0' + m : m;
            var d = date1.getDate(); // 获取当前的号  或 日子
            d = d < 10 ? '0' + d : d;
            var zhouji = date1.getDay(); // 获取当前是周几  0 表示周日 1 表示周一 ... . 6表示周六  所以我们要输出周几，可以搭配数组
            // 数组也要从周日开始写 因为周日的下标是0  
            var arr1 = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return '今天是' + y + '-' + m + '-' + d + ' ' + arr1[zhouji];
        }
        console.log(getTime());

        // 上面是获取年月日  下面是获取时分秒
        var hour = date.getHours(); // 获取当前小时
        console.log(hour);
        var minute = date.getMinutes(); // 获取当前的分钟数
        console.log(minute);
        var miao = date.getSeconds(); // 获取当前秒数
        console.log(miao);
        var haomiao = date.getMilliseconds(); // 获取当前毫秒数
        console.log(haomiao);

        // 案例  要求  按以下格式输出   20:06:20
        // 封装函数
        function getTime2() {
            var date2 = new Date();
            var h = date2.getHours(); // 获取当前小时
            h = h < 10 ? '0' + h : h;
            var m = date2.getMinutes(); // 获取当前的分钟数
            m = m < 10 ? '0' + m : m;
            var s = date2.getSeconds(); // 获取当前秒数
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s
        }
        console.log(getTime2());

        // 获取标准化时间 美式英语日期格式的字符串
        var date3 = new Date();
        console.log(date3); // Sun Apr 10 2022 20:10:06 GMT+0800 (中国标准时间)
        console.log(date3.toString());

        // 获取1970 年 1 月 1 日 00:00:00到当前时间所经过的毫秒数
        var nowTime = Date.now() // H5新增方法  常用
        console.log(nowTime);
        var nowTime1 = +new Date(); // 前辈们总结出来的方法  常用
        console.log(nowTime1);
        var nowTime2 = new Date();
        console.log(nowTime2.valueOf());
        var nowTime4 = new Date();
        console.log(nowTime4.getTime());

        // 最后一个案例  倒计时案例
        // 思路：1.获取当前时间距离1970 年 1 月 1 日 00:00:00所经过的毫秒数
        // 2.获取目标时间距离1970 年 1 月 1 日 00:00:00所经过的毫秒数
        // 3.两个毫秒数相减 所得的差值 就是这段时间总的毫秒数
        // 4.将毫秒数转换成天  时  分   秒  
        function getDao() {
            var begin = +new Date(); //  第一步
            // console.log(begin);
            var end = +new Date('2022-4-20 20:00:00'); // 重点 一定要以字符串的形式
            // var end = +new Date('2022/4/20 20:00:00'); // 以上两种写法都是可以的
            // console.log(end);
            var tt = (end - begin) / 1000; // 把获取的毫秒数  /1000 变成秒  
            var d = parseInt(tt / 60 / 60 / 24);
            var h = parseInt(tt / 60 / 60 % 24);
            var m = parseInt(tt / 60 % 60);
            var s = parseInt(tt % 60);
            return '距离2022-4-20 20:00:00还有' + d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(getDao());;
    </script>
</body>

String()

<script>
        // 字符串常用方法：   
        var str = 'abcdefghijklmnopqrstuvwxyz';
        console.log(str.length); // 打印字符串的长度
        // charAt 根据下标查找字符
        var num = str.charAt('5'); // 返回数组的下标为5的字符内容
        console.log(num);
        // indexOf 根据字符查找下标  与 charAt正好相反    查找 找到返回查找元素的下标，找不到返回-1   可以跟第二个参数 表示从第几个开始查找
        var num1 = str.indexOf('g'); // 在字符串中查找字符'g'，如果有返回下标，如果没有  返回-1
        console.log(num1);
        var num11 = str.indexOf('a', 2);
        console.log(num11); // -1
        // toLocaleUpperCase()转换成大写
        var num2 = str.toLocaleUpperCase(); // 转换成大写的方法
        console.log(num2);
        // toLocaleLowerCase()转换成小写
        var num3 = num2.toLocaleLowerCase(); //转换成小写的方法
        console.log(num3);
        // concat连接,可多个
        var num4 = str.concat('red', 'blue', 'red');  // 连接新的字符串
        console.log(num4);
        // repeat 重复当前字符对象的次数
        var num5 = str.repeat('3'); // 重复次数
        console.log(num5);
        // replace 替换一个目标字符
        var num6 = num4.replace('red', 'green'); // replace  替换字符串  只替换一个
        console.log(num6);
        // replaceAll 替换所有目标字符
        var num7 = num5.replaceAll('a', 'tab'); // 替换所有
        console.log(num7);
        // slice() 方法提取某个字符串的一部分，并返回一个新的字符  包括开始，但是不包括结束
        // slice()  参数   跟两个 表示从当前下标  到结束下标，但是不包括结束下标
        var num8 = str.slice(0, 5);
        console.log(num8);    // 内容是下标0-4的字符内容     包括0  但不包括5
        // 跟一个下标  表示从下标5开始的字符串  到字符串末尾
        var num9 = str.slice(5);
        console.log(num9);
        // 第二个下标跟负数  从后往前数五个数 打印从第一个下标开始，到倒数的那个数，但是不包括最后一个
        var num10 = str.slice(2, -5);  // 打印c-u
        console.log(num10); // cdefghijklmnopqrstu


        // split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置
        var arr2 = 'red,blue,green,yellow';
        var num12 = arr2.split(',');
        console.log(num12);
        // substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。  第一个参数是下标，第二个参数是截取的个数
        var num13 = str.substr(1, 5);
        console.log(num13);

        // subString()  截取字符串   感觉与slice差不多   第一个参数是开始的位置，第二个是结束的位置，同样不包括结束位置的字符
        var num14 = str.substring(1, 5);
        console.log(num14);
    </script>

Array()

 <script>
        var arr = ['red', 'pink', 'blue', 'yellow', 'green', 'purple'];
        console.log(arr.length); // length 长度
        //  concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
        var arr1 = arr.concat(['blue', 'yellow']); // 可以放数组
        var arr2 = arr.concat('blue', 'yellow');  // 也可以放字符串
        console.log(arr1);
        console.log(arr2);
        // indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
        // lastIndexOf()  从后往前找
        var num1 = arr.indexOf('red');   // 查找当前元素，如果数组中有 则返回下标 没有返回-1
        console.log(num1); // 0
        var num2 = arr.indexOf('www');
        console.log(num2); // -1
        // 检测是否是数组   instanceof   Array.isArray(参数)
        console.log(arr instanceof Array); // 如果是 返回true  如果不是返回false
        console.log(num2 instanceof Array);
        console.log(Array.isArray(arr));
        console.log(Array.isArray(num2));
        // 把数组转换成字符串   join可以自己设置连接符    toString  不可以设置连接符 默认 ，隔开   相反的是    split 把字符串转成数组  括号里要写分隔符
        var num3 = arr.toString();
        console.log(num3); // red,pink,blue,yellow,green,purple
        var num4 = arr.join('&');
        console.log(num4); // red&pink&blue&yellow&green&purple
        // 数组添加和删除元素    push   unshift   添加：  push是从后面添加  unshift是从前面添加  返回值是数组的新长度
        var num5 = arr.push('杨子星');
        console.log(arr); // ['red', 'pink', 'blue', 'yellow', 'green', 'purple', '杨子星']
        console.log(num5); // 返回值是数组的新长度
        arr.unshift('郑欢');
        console.log(arr); // ['郑欢', 'red', 'pink', 'blue', 'yellow', 'green', 'purple', '杨子星']
        // 删除   shift 是从前面删除   pop是从后面删除   都不用跟参数    返回值是删除的元素
        var num6 = arr.shift();
        console.log(num6); // 郑欢
        console.log(arr);
        arr.pop();
        console.log(arr);
        // reverse将数组中元素的位置颠倒，并返回该数组  返回值是该数组
        var arr3 = arr.reverse();
        console.log(arr3); // ['purple', 'green', 'yellow', 'blue', 'pink', 'red']
        // slice  截取数组的一部分  浅拷贝，不改变原来的数组   返回值是新的数组 两个参数   begin（如果是负数，表示从倒数第几个开始拷贝）  end（可省略，省略则表示一直拷贝到最后一个）  包括begin但是不包括end
        var arr4 = arr.slice(-5);
        console.log(arr4); // ['green', 'yellow', 'blue', 'pink', 'red']
        var arr5 = arr.slice(1, 5);
        console.log(arr5); // ['green', 'yellow', 'blue', 'pink']
        var arr6 = arr.slice(1);
        console.log(arr6); // ['green', 'yellow', 'blue', 'pink', 'red']
        // sort  排序   注意点：只能排个位数的   碰到十位数的数组就不能够正确排列，我们应该给括号里面添加函数
        var arr7 = [5, 2, 6, 3, 8, 5, 4];
        console.log(arr7.sort()); //  [2, 3, 4, 5, 5, 6, 8]  正确
        var arr8 = [5, 12, 6, 23, 65, 45, 8, 65, 32];
        console.log(arr8.sort()); //  [12, 23, 32, 45, 5, 6, 65, 65, 8] 错误
        var arr9 = arr8.sort(function (a, b) {
            return a - b;  // 从小到大
            // return b-a; // 从大到小
        })
        console.log(arr9); // [5, 6, 8, 12, 23, 32, 45, 65, 65]

        // splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组    如果跟两个参数 截取的内容会包括第一个 也包括最后一个
        // 第一个参数  开始位置   如果是负数  则表示倒数第几个  第二个参数   截取的位置 可省略
        // 第三个参数    要添加的值   不写默认不添加
        var arr10 = arr.splice(1);
        console.log(arr10); // ['green', 'yellow', 'blue', 'pink', 'red']  返回值是从下标1开始截取到末尾， 并且返回截取的值，且影响原来的数组  与浅拷贝不同，浅拷贝不影响原来的数组
        console.log(arr); // ['purple']
        arr = ['red', 'pink', 'blue', 'yellow', 'green', 'purple'];
        console.log(arr); // ['red', 'pink', 'blue', 'yellow', 'green', 'purple']
        var arr11 = arr.splice(1, 5);
        console.log(arr11); // ['pink', 'blue', 'yellow', 'green', 'purple'] 
        // 会从下标为1的开始截取，一直取到下标为5的元素 
        arr = ['red', 'pink', 'blue', 'yellow', 'green', 'purple'];
        var arr12 = arr.splice(1, 2, '杨子星');
        console.log(arr12);  // 截取的两个元素  ['pink', 'blue']
        console.log(arr); //  ['red', '杨子星', 'yellow', 'green', 'purple']  从开始截取的位置添加元素
    </script>

js基础到这里也就结束了，我们webAPI再相见~~

祝大家学习开心~