[JavaScript知识库]JavaScript

JavaScript

? ? ? ? JavaScript 是一种具有面向对象能力的、解释型的程序设计语言

? ? ? ? 使用方式：JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中

1. ??行内JS : 写在标签内部的js代码
2. 内部JS : 定义在script标签内部的js代码
3. 外部JS : 单独的js文件，在HTML中通过script标签引入

    <!--行内js-->
    <button type="button" onclick="alert('醒醒吧你!!!!')">按钮</button>
    <!--引入外部js文件-->
    <script src="js/first.js"></script>

JS中的调试

1. .alert() 弹出框
2. document.write("你好啊,中国队必胜!!!");
   1. 内部可以识别html语法结构
   2. 当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
3. console.log() 控制台输出打印 -> 推荐
   1. console.log("日志输出")
   2. console.info("信息输出");
   3. console.error("错误输出");
   4. console.warn("警告输出");

JS变量

????????存储单个数据|表达式?

? ? ? ? JS 是一个弱类型的语言

? ? ? ? 定义：

? ? ? ? ? ? ? ? 声明的同时赋值

? ? ? ? ? ? ? ? ? ? ? ? var 变量名 = 赋值；

? ? ? ? ? ? ? ? 先声明后赋值

? ? ? ? ? ? ? ? ? ? ? ? var 变量名；

? ? ? ? ? ? ? ? ? ? ? ? 变量名 = 赋值；

JDK11 ：

????????Java中的var可以定义局部变量。一当确定就无法改变

?Java 中成员变量不赋值有默认值，局部变量不赋值没有默认值

? ? ? ? 注意：?

????????????????js中变量的数据类型有值决定

????????????????js中的变量不赋值存在默认值 undefined未定义

????????????????变量的作用域提升: 只提升变量的声明,不提升变量的赋值

????????????????变量的定义可以省略var的声明,不能发生作用域的提升

?????????????????

    <script>
        /*
        *   var i = undefined;
        *   var username = undefined;
        * */
        console.log(username);
        //console.log(w);

        //声明的同时赋值
        var i = 1;

        i = "";

        //先声明后赋值
        var username;
        username = "zhangsan";

        //同时定义多个变量
        var x=1,y=2,z=false;
        console.log(x,y,z);

        var b;
        console.log(b);

        w = 1;
        console.log("w = " + w);

    </script>

JS数据类型

?简单| 基础数据类型

1. String 字符串
   1. ?一对''|""表示字符串
   2. 包含0~n个字符
   3. 通过转义字符进行转义
2. Number 数值型
   1. 整数 小数
   2. NaN not a number 不是一个数字
      1. 直接赋值NaN
      2. 当运算无法得到一个正确结果
   3. Boolean 布尔型
      1. true | false
      2. 常常用于对条件判定结果类型
   4. Undefined 未定义
      1. 直接赋值undefined
      2. 声明变量未赋值默认undefined
   5. Null 空
      1. 直接赋值null
      2. 获取不到元素
      3. Null 与 Undefined之间的区别:
         1. undefined : 存在,但是没有值
         2. null : 元素不存在
   6. Function 函数型

????????????????????????????????function 函数名(参数列表){

????????????????????????????????????????????????????????????????函数体;

????????????????????????????????}

????????????????????????通过函数的调用使用?

??复杂|复合数据类型

????????对象类型

????????????????{} 表示对象

????????????????有键值对组合而成

????????????????????????{

???????????????????????????????? key:value,

???????????????????????????????? key:value,

???????????????????????????????? 键值对

????????????????????????}

???????????????? 两个键值对之间使用,分隔,最后一个键值对的后面不加,

????????????????KEY与VALUE之间使用:分隔

????????????????key : 如果符合命名规范可以直接定义,不符合命名规范.需要前后加引号

????????????????value : 可以为任意类型

 <script>
        var str1 = "abc";
        var str2 = 'it\'s';
        var str3 = '123';
        console.log(str1,str2,str3);

        var num1 = 123;
        var num2 = NaN;
        var num3 = 5/'A';
        var num4 = 1.234;
        console.log(num1,num2,num3,num4);

        var n1 = null;

        //函数
        function fun(){
            console.log("这是一个函数");
        }

        //fun();

        //对象
        var obj = {};  /*空对象*/
        var obj2 = {
            name : 'zhangsan',
            age : 18,
            "girl friend" : null,
            son : {
                name : 'haha'
            }
        };
        console.log(obj);
        console.log(obj2);
        console.log(obj2.name);
    </script>

typeof : 运算符 帮助判断数据的类型

? ??????返回一个字符串形式的小写的数据类型

????????Number -> number

????????String -> string

???????? Null -> object

???????? Undefined -> undefined

???????? Boolean -> boolean

???????? Function -> function

???????? Object -> object

????????语法:

???????????????? typeof(数据)

???????????????? typeof 数据

        <script>
            console.log( typeof(123) );
            console.log( typeof("123") );
            console.log( typeof(typeof("123")));
            console.log( typeof(null));
            console.log( typeof(undefined));
            console.log( typeof(false));
            console.log( typeof(function(){}));
            console.log( typeof({}));

            console.log( typeof 123);
        </script>

?类型转换

? ? ? ?对象类型(函数)不参与类型转换

? ? ? ?分类:

????????????????显示类型转换|强制

????????????????????????任意类型(String,Number,Boolean,Null,Undefined)都可以转为以下三种类型 :? ? ? ?????????????????????????????????

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?String(数据)

???????????????????????????????? Boolean(数据)

???????????????????????????????? String :

???????????????????????????????????????? 空串->false

???????????????????????????????????????? 其他包含字符的字符串->true

???????????????????????????????? Number

???????????????????????????????????????? 0,NaN -> false

???????????????????????????????????????? 其他 -> true

???????????????????????????????? Null

???????????????????????????????????????? false

???????????????????????????????????????? Undefined

???????????????????????????????????????? false

???????????????????????????????? Number(数据)

???????????????????????????????????????? String

???????????????????????????????????????????????? 空串,与空格字符串 -> 0

???????????????????????????????????????????????? 纯数字字符串 -> 数字

???????????????????????????????????????????????? 非纯数字字符串 -> NaN

???????????????????????????????????????? Bollean

???????????????????????????????????????????????? true -> 1

???????????????????????????????????????????????? false-> 0

???????????????????????????????????????? Null -> 0

???????????????????????????????????????? Undefined -> NaN

????????????????隐式类型转换|自动

????????????????????????执行某些行为操作时候,目的不是为了转型,但是在执行的时候会默认自动转型->隐式类型转换

????????String(数据) 把参数数据转为字符串类型 在数据的前后+一对引号

<script>
        //String()
        console.log(String(123));
        console.log(String(null));
        console.log(String(undefined));
        console.log(String(false));
        console.log(String(NaN));

        //Boolean
        console.log(Boolean(''));
        console.log(Boolean(' '));
        console.log(Boolean('abc'));
        console.log(Boolean('123'));
        console.log(Boolean('abc123'));

        console.log(Boolean(0));  //false
        console.log(Boolean(123));  //true
        console.log(Boolean(-1.4)); //true
        console.log(Boolean(NaN)); //false

        console.log(Boolean(null)); //false
        console.log(Boolean(undefined)); //false

        console.log("-----------------------------");
        //Number
        console.log(Number('')); //0
        console.log(Number(' ')); //0
        console.log(Number('123')); //123
        console.log(Number('abc')); //NaN
        console.log(Number('abc123')); //NaN

        console.log(Number(true)); //1
        console.log(Number(false)); //0

        console.log(Number(null)); //0
        console.log(Number(undefined)); //NaN

        //隐式类型转换
        console.log('a' - 1);  //NaN
        console.log(false - 1);  //-1
        console.log(true + false);  //1
    </script>

= 赋值
        == 判断数据是否相等
        === 判断数据以及类型是否相等
            先判断类型再检查值

        != 检查数据
        !== 检查类型与数据

        逻辑运算符
            java中要求逻辑运算符左右两边的表达式必须结果为boolean类型
            js中,两边的表达式可以为任意类型
                && : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果就是第一个操作数,如果为true,最终的结果为第二个操作数
                || : 当两边出现非boolean类型,第一个操作数转为boolean如果为false,最终的结果为第二个操作数,如果为true

 <script>
        console.log(1 == '1');  //true
        console.log(1 === '1'); //false

        console.log(1 != '1'); //false
        console.log(1 !== '1'); //true

        console.log(true && false);
        console.log(true || false);

        console.log(Boolean(1));
        console.log(1 && 'a');  //'a'
        console.log(1 || 'a');  //1
    </script>

数组 [ ] 存储多个数据

????????长度可变，可以存储任意类型的数据

????????创建方式：

???????????????? 1.new Array() 创建空数组

???????????????? 2.new Array(值1,值2,值3...);

???????????????????????? 创建数组并赋值

???????????????? 3.[值1,值2,值3...] -> 推荐

???????? 索引：

???????????????? 从0开始，每次+1

???????????????? 操作数组中的数据

???????????????????????? 数组名[索引]

 <script>
        //1)
        var arr1 = new Array();
        console.log(arr1);

        /*操作数组中的数据*/
        arr1[0] = 101;
        arr1[1] = '红色';

        console.log(arr1[0]);
        console.log(arr1[1]);

        //2)
        var arr2 = new Array(1, 2, 3, 4, 5);
        console.log(arr2);
        console.log(arr2.length);

        //3)
        var arr3 = ["", false, 0, null, undefined, function () {
        }, {}];
        console.log(arr3);

        /*当[]中不是0~n的正整数时候,相当于为数组添加自定义的属性*/
        arr1['haha'] = 123;
        console.log(arr1);
        console.log(arr1['haha']);
    </script>

数组的遍历

????????数组的遍历:

???????????????? 普通for

???????????????? for in

???????????????? foreach

????????数组的常用方法:????????

????????????????push 添加元素到最后

????????????????unshift 添加元素到最前

????????????????pop 删除最后一项

????????????????shift 删除第一项

????????????????reverse 数组翻转

????????????????join 数组转成字符串

????????????????indexOf 数组元素索引

????????????????slice 截取（切片）数组，原数组不发生变化

????????????????splice 剪接数组，原数组变化，可以实现前后删除效果

????????????????concat 数组合并

<script>
        var arr = ['1','a',5,'3'];
        console.log(arr);
        arr.push(10);
        console.log(arr);
        arr.unshift('b');
        console.log(arr);
        arr.pop();
        console.log(arr);
        arr.shift();
        console.log(arr);
        arr.reverse();
        console.log(arr);
        console.log(arr.join('\''));
        console.log(arr);
        console.log(arr.indexOf('a'));
        console.log(arr.slice(2,5));
        console.log(arr);
        arr.splice(1,1,'一','二');
        console.log(arr);
        var arr1 = [0,'100'];
        console.log(arr.concat(arr1));
        console.log(arr);
        console.log(arr1);
        console.log(arr1.(arr));
        var arr = ["red", "green", "yellow", "pink", "black"];

        //for
        for (var i = 0; i <= arr.length - 1; i++) {
            console.log(arr[i]);
        }

        //for .. in
        for (var i in arr) {
            console.log(arr[i]);
        }

        //foreach
        arr.forEach(function (value, index) {
            console.log(value + "--->" + index)
        });

        //数字常用方法
        console.log(arr);
        //slice 截取（切片）数组，原数组不发生变化
        console.log(arr.slice(2));  /*默认从参数索引位置开始截取到最后*/
        console.log(arr.slice(1, 3));  /*默认从参数1索引位置开始截取到参数2索引位置结果,结束索引不包含*/
        console.log(arr);
        //splice 剪接数组，原数组变化，可以实现前后删除效果
        //console.log(arr.splice(2));  /*实现了剪切|删除的效果,从索引位置开始剪切到最后,修改原数组*/
        //console.log(arr.splice(1,2));  /*实现了删除的效果,从参数1索引位置开始删除参数2个*/
        console.log(arr.splice(1, 2, "哈哈", "呵呵", "吼吼"));  /*实现替换效果,把参数1索引位置开始,删除参数2个数据,替换为参数3开始后面的数据*/
        console.log(arr);
    </script>

?JS的函数

?????????1.函数声明

???????????????? function 函数名(参数列表){ 函数体; }

???????????????? 调用: 执行函中的代码

???????????????????????? 1.函数名(实参);

???????????????????????? 2.转为函数表达式然后通过最后添加(实参)的方式调用

???????????????????????????????? 在函数声明的前面添加+|-|~|!或者前后添加一对()

???????? 2.函数表达式

???????????????? var 变量名 = function (参数列表){ 函数体; };

???????????????? 函数表达式中的函数名作用只有一个,在递归使用的时候有用,否则默认一般省略

???????????????? 调用:

???????????????????????? 1.变量名(实参);

???????????????????????? 2.函数表达式后面直接添加(实参),在当前直接调用

???????? 注意:

???????????????? 1.参数个数可以不同,函数没有传递实参,默认undefined

???????????????? 2.函数都存在返回值,没有显示定义return关键字返回结果,默认返回值为undefined

 <script>
        /*函数声明*/
        function fun1(name){
            console.log("我的名字是"+name);
            return name+"haha";
        }
        //输出函数的返回值
        console.log(fun1("马龙","张继科"));

        //函数表达式
        var f1 = function fun2(i){
            console.log("我是函数表达式1-->"+i);
            if(i==5){
                return;
            }
            fun2(++i);
        };
        //函数表达式调用1
        f1(1);

        //函数表达式调用2
        var f2 = function(x){
            console.log("函数表达式2");
        }(1);

        /*函数声明的其他调用方式*/
        ~function fun2(){
            console.log("函数声明2");
        }();
        +function fun3(){
            console.log("函数声明3");
        }();
        -function fun4(){
            console.log("函数声明4");
        }();
        !function fun5(){
            console.log("函数声明5");
        }();

        (function fun6(){
            console.log("函数声明6");
        })();
    </script>

JS是值传递 | 引用传递（地址值传递）

????????js中的作用域 ： 函数为单位

????????js中的函数可以任意嵌套

????????函数存在作用域的提升: 函数声明的方式会发生作用域的提升

????????变量的作用域提升: 把当前的变量的声明提升到当前作用域的最上面

????????当在函数中省略var关键字定义的变量,成为全局变量,但是事前要求这个函数至少被调用过一次

<script>
        /*
            function func(){
                console.log("普通的函数声明");
            }
         */
        //调用函数的作用域提升
        func();

        // 给形参o赋予了新的数组
        var obj2 = [1, 2, 3];
        function paramter2(o){
            o = [2, 3, 4];
            o[1] = 3;
        }
        paramter2 (obj2);
        console.log(obj2); //[1, 2, 3];


        //快
        {
            var i = 1;
        }
        console.log(i);
        //作用域
        function fn1(){
            var j = 11;
        }
        //console.log(j);

        //嵌套
        function f1(){
            function f2(){
                function f3(){}
            }
        }

        //返回值为函数时
        function f4(){
            console.log("我是f4");
            return function(){
                console.log("返回值函数");
            }
        }
        console.log(f4); //打印函数结构
        console.log(f4()); //打印输出函数f4的返回值
        f4()(); //调用f4函数,得到返回值函数再调用

        function func(){
            console.log("普通的函数声明");
        }


        //变量作用域提升
        function func2(){
            //var haha = undefined;
            console.log(haha);
            var haha = "zhangsan";  //局部变量
            m = 1; //全局变量
        }
        //func2();

        console.log(m);
    </script>

?THIS绑定对象

????????this的决策树:

???????????????? 1.this所在的函数,是否是通过new关键字调用的,如果是this,绑定new的对象

???????????????? 2.this所在的函数是否是通过对象.函数名()调用的,如果是函数中的this绑定.前面调用的对象

???????????????? 3.没有显示的通过某一个对象调用,默认this指代全局window对象,默认通过window调用,window.可以省略

???????? 注意:

???????????????? 定义在全局位置的变量和函数,默认为window对象的属性和功能,调用的时候window.可以省略

????????修改this的引用指向

???????????????? obj.fn.call(obj2,100); //调用的方法多个实参作为call方法的第二个参数开始 ???????????????? ???????????????? obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位

    <script>
        function fn(){
            console.log(123);
        }
        fn();
        window.fn();

        /*全局变量*/
        var str = "希望疫情立即结束!!!";
        console.log(str);
        console.log(window.str);

        //自定义的模板
        function Person(name,age){
            this.name = name;
            this.age = age;
        }

        var person = new Person("zhangsan",18);
        console.log(person);

        var a = 1;

        var obj = {
            a : 10,
            fn : function(b){
                console.log(this.a+"---->"+b);
            }
        };

        obj.fn(100); //10-->100
        var f = obj.fn;
        f(); //1-->undefined

        var obj2 = {
            a : 12
        };

        /*修改this的引用指向*/
        obj.fn.call(obj2,100);  //调用的方法多个实参作为call方法的第二个参数开始
        obj.fn.apply(obj2,[1000]); //调用的方法多个实参作为apply方法的第二个参数,以数组为单位
    </script>