六、JavaScript基础语法

1.初始JavaScript：

    （1）JS：脚本语言。（逐行解释）
    （2）作用：表单动态校验、网页特效、服务端开发、桌面程序、APP等。
    （3）HTML/CSS/JS的关系：
    （4）浏览器执行JS：
        浏览器分成两部分：渲染引擎（内核）+JS引擎（JS解释器）。
    （5）JS的组成：
        ECMAScript：JS语法。
        DOM：文档对象模型。（对页面上的各种元素进行操作，大小、位置、颜色等）
        BOM：浏览器对象模型。操作浏览器窗口，比如弹窗框、浏览器控制跳转等。
    （6）JS的书写位置：行内、内嵌和外部。 

2.JS基础语法：

    （1）输入输出语句：
    （2）变量：程序在内存中申请的一块用来存放数据的空间。
        var age = 19;console.log(age);
    （3）变量命名规范：
    （4）变量的数据类型：JS是一种弱类型或者说是动态语言。不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
        注意：JS拥有动态类型，即相同的变量可用作不同的类型。
    （5）数据类型分为两大类：
        简单数据类型：Number、Boolean、String、Undefined、Null。
            数字型Number的三个特殊值：
                isNaN()判断是否是数字型数据。
            String类型：双引号单引号都行，JS里更推荐用单引号。
                '+'号：数值相加，字符相连。
            Undefined：未定义数据类型。（变量声明没赋值）
        复杂数据类型：object

    （6）typeof检查变量数据类型：console.log(typeof num);
        控制台显示黑色的是字符串类型，蓝色的是数字型。
    （7）数据类型转换：
        注意：prompt取过来的值是字符型的。
        转换为字符串：
            x.toString()、String(x)、+号拼接。
        转换为数字型：
            parseInt(x)：字符串转为数字型，得到的是整数。
            parseFloat(x)：同上，但得到的是小数。
            Number(x)：强制转换。
            利用算术运算"- * /" ：隐式转换。
        转换为布尔型：
            Boolean()函数。
            代表空、否定的值（' '、0、NaN、Null、undefined）会被转换为false。

3.JS算数运算符：

    （1）浮点数算术运算里面会有误差。
    （2）比较运算符：//==默认转换数据类型 会把字符串型的数据转换为数字型

console.log(18 == '18'); //true
//全等运算符 === 要求值和数据类型完全一致
console.log(18 === 18);

    （3）短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的值了。

//逻辑与短路运算 如果式1为真 则返回表达式2;否则返回表达式1
console.log(123 && 456); //456
console.log(0 && 456); //0
//逻辑或短路运算 如果表达式1为真 则返回1;否则返回2
console.log(123 || 456); //123
console.log(0 || 456); //456

    （4）运算符优先级：
 

 4.双重循环：

打印九九乘法表：

    <script>
        var str = '';
        for (var i = 1; i < 10; i++) {
            for (var j = 1; j <= i; j++) {
                str = str + j + 'x' + i + '=' + i * j + '\t';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>

5.数组：

（1）数组长度是可变的：

    <script>
        var arr = [0, 1, 2];
        console.log(arr.length); //3
        arr[3] = 3;
        arr[4] = 4;
        console.log(arr.length); //5
    </script>

6.函数：

（1）形参与实参：

    <script>
        //若实参的个数=形参的个数，返回结果符合所想
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        //实参的个数 > 形参的个数,只取到形参的个数
        getSum(3, 7, 20); //10
        //实参的个数 < 形参的个数, num1 + undefined(形参2) = Nan
        getSum(1); //NaN
    </script>

（2）函数没有return直接调用则返回undefined。

    <script>
        function test(num1, num2) {
            num1 + num2;
        }
        console.log(test(3, 7));  //undefined
    </script>

（3）arguments的使用：不知道用户传多少个实参，可以用arguments来获取，里面存储了传递的所有实参。

    <script>
        //只有函数才有arguments对象， 而且是每个函数都内置好了。
        function test() {
            //arguments展示形式是一个伪数组:
            //具有length属性,按索引方式存储数据;
            //可以用遍历获取元素,不具有数组的一些方法push(),pop()等
            console.log(arguments); //arguments =[1,2,3]
        }
        test(1, 2, 3);
        test(1, 2, 3, 4, 5);
    </script>

（4）函数的两种声明方式：

    <script>
        //1.命名函数:利用function关键字自定义函数
        function fun1(){

        }
        fun1();

        //2.匿名函数:函数表达式
        var fun2 = function(aru){
          console.log('函数表达式');
          console.log(aru);
        }
        fun2('你好'); //fun2是变量名,不是函数名
    </script>

7.预解析：

js引擎运行js分为两步: 预解析、代码执行。

• 预解析：js引擎会把js里面所有的var，function提到作用域的最前面。

  • 预解析分为：变量预解析（变量提升) 和 函数预解析（函数提升）。

    • （1）变量预解析：把所有的变量声明提升到当前作用域的最前面，但不提升赋值操作。

    • （2）函数预解析：同上，不调用函数。

• 代码执行：代码按顺序执行。

理解了上面的就能理解下面代码报错的原因了：

    <script>
        //1问
        // console.log(num); //报错
        //2问
        console.log(num);
        var num = 10; //undefined 坑1 
                      //执行顺序 var num;console.log(num); num =10;  

        //3问
        fn();    //结果输出11
        function fn() {
            console.log(11);
        }
        //4问
        fun();
        var fun = function() { //报错 坑2 
                console.log(20);    //执行顺序 var fun;fun(); fun=...
            }
    </script>

预解析案例：

    <script>
        var num = 10;
        fun();    //undefined
        function fun() {
            console.log(num);
            var num = 20;
        }
        //相当于执行如下操作:
        //1.var num;
        //2.function fun() {
              //提升作用域 var num;
        //     console.log(num);
        //     var num = 20;
        // }
        //3.num=10; fun();
    </script>

    <script>
        function fun() {
            //相当于var a=9;b=9;c=9;  b和c直接赋值没有var声明,当全局变量看
            //集体声明: var a =9,b=9,c=9;
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(a); //报错
        console.log(b); //9
        console.log(c); //9
    </script>

8.对象：

（1）对象的三种创建：

•     利用对象字面量{}创建对象。

    <script>
        //属性和方法采取键值对的形式,用冒号隔开
        var obj = {
                uname: '科比',
                age: 41,
                sayHi: function() {
                    console.log('你好');
                }
            }
            //调用对象的两种方法:
        console.log(obj.uname);
        console.log(obj['age']);
    </script>

•     利用new Object创建对象。

      <script>
          var obj = new Object();
          //用=追加赋值属性和方法
          obj.uname = '科比';
          obj.age = 41;
          obj.sayHi = function() {
              console.log('hi~');
          }
      </script>

•     利用构造函数创建对象。

        构造函数：把对象里面相同的属性和方法抽象出来封装到函数里面。

    <script>
        //1.构造函数名字首字母要大写
        //2.构造函数不需要return就可以返回结果
        //3.调用构造函数必须使用new
        function Star(uname, age, sex) {
            this.name = uname; //this.属性=值
            this.age = age;
            this.sex = sex;
            this.skill = function(pb) {
                console.log(pb);
            }
        }
        var Kobe = new Star('科比', 41, '男');
        Kobe.skill('打篮球');
    </script>

（2）new关键字执行过程：

1. 在内存中创建一个新的空对象；
2. 让this指向这个新的对象；
3. 执行构造函数里面的代码，给这个新对象添加方法和属性；
4. 返回这个新对象。（所以构造函数里面不需要return）

（3）for...in遍历对象：

    <script>
        var obj = {
            name: '科比',
            age: 41,
            sex: '男'
        }
        for (var k in obj) { //k是变量,输出得到的是属性名
            console.log(obj[k]); //obj[k]得到的是里面的属性值
        }
    </script>

9.内置对象： 

JS中的对象分为3种：自定义对象、内置对象、浏览器对象。前两种是JS基础内容，属于ECMAScript。第三个是JS独有的。

（1）内置对象：JS自带的一些对象，提供了一些常用的功能。

（2）MDN文档：https://developer.mozilla.org/zh-CN/

10.Math对象：

Math.random()        （其它请查看上面的文档）

猜数字游戏：

    <script>
        //要求：猜1-50之间的数字,只有10次机会
        //getRandom():生成两个数之间的随机整数,并且包含两个整数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var realNum = getRandom(1, 50);
        for (var i = 1; i <= 10; i++) {
            var num = prompt('输入一个数字');
            if (realNum == num) {
                alert('猜对了');
                break;
            } else if (realNum < num) {
                alert('数字太大了,继续猜');
            } else {
                alert('数字小了,继续猜');
            }
        }
    </script>

11.日期对象：

 （1）格式化日期年月日星期：

    <script>
        //Date()是构造函数,所以需要先new
        var date = new Date();
        var year = date.getFullYear();
        //getMonth()返回的月份小一个月,要+1
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        //getDay()函数周日返回的是0
        var day = date.getDay();
        console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
    </script>

（2）格式化日期时分秒：

    <script>
        //封装一个函数返回当前的时分秒,比如01:01:01
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            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(getTimer());
    </script>

（3）获得Date总的毫秒数（时间戳）：距离1970年1月1日过了多少毫秒数

    <script>
        //1.通过valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());
        //2.简单的写法(最常用的写法)
        var date1 = +new Date(); //+new Date()返回的就是总的毫秒数
        console.log(date1);
        //3.H5新增的 获得总的毫秒数
        console.log(Date.now());
    </script>

（4）倒计时：

    <script>
        //倒计时:用户输入时间总的毫秒数 - 现在时间的总毫秒数 = 剩余时间的毫秒数
        //把剩余时间总的毫秒数转换为天时分秒
        //不能拿着时分秒相减, 02分-20分,结果会是负数
        //转换公式如下:
        //计算天数: day = parseInt(总秒数/60/60/24);
        //计算小时: hour = parseInt(总秒数/60/60 %24);
        //计算分钟: minute = parseInt(总秒数/60 %60);
        //计算当前秒数: second = parseInt(总秒数%60);
        function countDown(time) {
            var nowTime = +new Date(); //返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
            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-3-17 12:00:00'));
    </script>

12.数组对象：

（1）创建数组的两种方式：

    <script>
        //1.利用数组字面量
        var arr = [1, 2, 3];
        //2.利用new Array()
        var arr1 = new Array(2); //这个2表示数组长度为2,里面有2个空的数组元素
        var arr1 = new Arrqy(2, 3); // [2,3]
    </script>

（2）检测是否为数组：

    <script>
        var arr = [];
        //1.instanceof运算符,用来检测是否为数组
        console.log(arr instanceof Array);
        //2.Array.isArray(参数); H5新增的方法
        console.log(Array.isArray(arr));
    </script>

（3）添加删除数组元素方法：

    <script>
        var arr = [1, 2, 3];
        //1.添加操作:
        //(1)push():在数组末尾添加一个或多个数组元素
        arr.push(4, 5, 6);
        //(2)unshift():在数组开头添加一个或多个数组元素
        // console.log(arr.unshift(0)); 返回结果都是新数组的长度
        arr.unshift(0);
        console.log(arr);

        //2.删除操作:
        //(1)pop():在删除数组的最后一个元素
        arr.pop();
        //(2)shift():删除数组的第一个元素
        // console.log(arr.shift()); 返回结果是删除的那个元素
        arr.shift();
    </script>

（4）筛选数组：

    <script>
        //将数组中超过2000的删除,放到新数组中
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
    </script>

（5）数组排序：

    <script>
        var arr = [13, 4, 22, 555, 10, 1];
        arr.sort(function(a, b) {
            // return a-b; 升序排列
            return b - a; //降序排列
        });
        console.log(arr);
    </script>

（6）获取数组元素索引：

    <script>
        //1.indexOf(数组元素),返回该数组的索引号,从前面开始查找
        //只返回第一个满足条件的索引号,若不存在则返回-1
        var arr = [1, 5, 7, 5];
        console.log(arr.indexOf(5)); //1
        //2.lastIndexOf():同上,区别就是从后面开始查找
        console.log(arr.lastIndexOf(5)); //3
    </script>

（7）数组去重：

    <script>
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
        var demo = unique(arr);
        console.log(demo);
    </script>

（8）数组转换为字符串：

    <script>
        //1.toString()
        var arr = [1, 2, 3];
        console.log(arr.toString());
        //2.join(分隔符)
        console.log(arr.join('&')); //1&2&3
    </script>

13.字符串对象：

（1）基本包装类型： 

        把简单数据类型包装为复杂数据类型，这样基本数据类型就有了属性和方法。

        为了方便操作基本数据类型，JS提供了三个特殊的引用类型：String、Number和Boolean。

（2）求某个字符出现的位置以及次数：（根据字符返回位置）

    <script>
        //查找字符串中k出现的位置以及次数
        //思想:先查找第一个k出现的位置,然后只要indexOf返回的不是-1则继续往后查找
        var str = "ksahflkazkp";
        var index = str.indexOf('k');
        var count = 0;
        while (index !== -1) {
            console.log(index);
            count++;
            index = str.indexOf('k', ++index);
        }
        console.log('k出现的次数为:' + count + '次');
    </script>

（3）根据位置返回字符：

    <script>
        // 1.charAt(index)
        var str = 'hello';
        console.log(str.charAt(1));
        //遍历所有字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        //2.charCodeAt(index) 返回相应索引号的字符的ASCII值 目的:判断用户按下了那个键
        console.log(str.charCodeAt(0)); //h-104
        //3. str[index] H5新增的
        console.log(str[0]);
    </script>

（4）统计出现次数最多的字符：

    <script>
        // 判断字符串中出现次数最多的字符,并统计次数。
        //o.a=1 ; o.b=1 ; o.c = 1 ; ......
        //核心算法:利用charAt() 遍历这个字符串
        //把每个字符都存储给对象,如果对象没有该属性,就为1,如果存在了就+1
        //遍历对象,得到最大值和该字符
        var str = 'abcdefgaaabc';
        var o = {}; //创建对象
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            if (o[chars] != null) { //得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        //遍历对象
        var max = 0;
        var ch = '';
        // k得到的是属性
        // o[k] 得到的是属性值
        for (var k in o) {
            if (max < o[k]) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>

（5）字符串操作方法：

    <script>
        //1.concat('字符串1','字符串2')
        var str = 'yellow';
        console.log(str.concat('blue'));
        //2.substr(start,'截取几个字符');
        var str1 = 'hello';
        console.log(str1.substr(2, 2));
        //3.replace('被替换的字符','替换的字符') 它只替换第一个字符
        var str2 = 'tarr';
        console.log(str2.replace('r', 't'));
        //4.字符转换为数组 split('分隔符')  -----join 数组转换为字符串
        var str3 = 'a,b,c';
        console.log(str3.split(','));
    </script>