Day03 JS基础语法

    xiaoxiao2023-10-09  161

    一  JavaScript基本用法

    1.行内JS

    写在html标签中的js代码

    <body>

          <button οnclick="alert('Hello')">Hello</button>

    </body>

    2.内部JS

    写在<script type="text/javascript"></script>标签之间 可以放在html中的任意位置,一般放在<head>标签中或<body>标签中或<body>标签后

    <script type="text/javascript">         alert("这是内部JS");     </script>

    3.外部JS

    引入外部的js文件 <script type="text/javascript" src="js文件的路径" ></script>注:如果<script>标签中设置了src属性,name写在<script>双标签中的js代码无效

    <script type="text/javascript" src="js/test.js" ></script>

    二  变量

    语句:         语句(statement)是为了完成某种任务而进行的操作,语句以分号结尾,一个分号即表示一个语句结束。         多个语句可以写在一行内(不建议这么写代码),但是一行写多条语句时,语句必须以分号结尾。         表达式不需要分号结尾。一旦在表达式后面添加分号,则 JavaScript 引擎就将表达式视为语句,这样会产生一些没有任何意义的语句注释:             // 单行注释             /* 多行注释 */

    变量:             变量的声明        所有的声明都通过"var"                 JavaScript是一种弱类型语言,声明时不需要指定数据类型,直接通过var修饰符声明                     1、先声明再赋值                     2、声明并赋值                                          注:如果声明变量时不使用var修饰符,则该变量是全局变量             变量的注意点:                 1)若只声明而没有赋值,则该变量的值为 undefined                 2)变量要有定义才能使用,若变量未声明就使用,JavaScript 会报错,告诉你变量未定义                 3)可以在同一条 var 命令中声明多个变量。                 4)若使用 var 重新声明一个已经存在的变量,是无效的。                 5)若使用 var 重新声明一个已经存在的变量且赋值,则会覆盖掉前面的值                 6)JavaScript 是一种动态类型、弱类型语言,也就是说,变量的类型没有限制,可以赋予各种类型的值                              变量提升                 JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升  

    三  数据类型

    JavaScript 中有 6 种数据类型,其中有五种简单的数据类型:             Undefined、Null、布尔、 数值字符串。一种复杂数据类型 Object。             数 值(Number): 整数和小数(比如 1 和 3.14)             字符串(String): 字符组成的文本(比如"Hello World")             布尔值(Boolean):true(真)和 false(假)两个特定值             Undefined: 表示“未定义”或不存在,即此处目前没有任何值             Null: 表示空缺,即此处应该有一个值,但目前为空             对象(object)(引用) : 各种值组成的集合              1)、对象(object){name:”zhangsan”,age:”18”}              2)、数组(array)[1,2,3]              3)、函数(function)function test() {}                                   typeof 操作符             typeof 操作符是用来检测数据类型。                          说明:                 1、typeof null 返回的是 object 字符串                 2、函数不是数据类型,但是也可以使用 typeof 操作符返回字符串。                 typeof 操作符可以操作变量也可以操作字面量。                 注意:函数在 JavaScript 中是对象,不是数据类型,所以使用 typeof 区分 function 和object 是有必要的                          undefined             undefined 类型的值是 undefined。             undefined 是一个表示"无"的原始值,表示值不存在。             出现 undefined 的常见情况:             1)当声明了一个变量而没有初始化时,这个变量的值就是 undefined             2)当函数需要形参,但未传递实参时             3)函数没有返回值,但定义了变量接收                                   null             null 类型是只有一个值的数据类型,即特殊的值 null。它表示空值,即该处的值现在为空,             它表示一个空对象引用。             使用 Null 类型值时注意以下几点:             1)使用 typeof 操作符测试 null 返回 object 字符串。            2)undefined 派生自 null,所以等值比较返回值是 true。所以,未初始化的变量和赋值为 null 的变量相等                       数值型             数值型包含两种数值:整型和浮点型。             1)所有数字(整型和浮点型)都是以 64 位浮点数形式储存。所以,JS 中 1 与 1.0 相等,           而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是 17 位小数,由于浮点数运算时可能不精确,尽量不要使用浮点数做判断。             2)在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。             3)对于过大或过小的数值,可以使用科学计数法来表示             4)Infinity、-Infinity                 超过了表数范围,出现 Infinity(正无穷)或者-Infinity(负无穷)                 isFinite()函数可以确定是否超出范围:                 true:没有超出;false:超出了             NaN                 表示非数值(Not a Number),是一个特殊的值。                 如:将字符串解析成数字出错的场合。                 console.log(parseInt("abc"));//parseInt 方法将字符串解析为数值,但若无法解析,返回 NaN                 注意:                     NaN 不等于任何值,包括它本身,因为它不是一个值                     NaN 与任何数(包括它自己)的运算,得到的都是 NaN                                          isNaN()可以用来判断一个值是否为 NaN                     true:不是数字;false:是数字                                  字符串                 使用 ' ' 或 " "引起来,如:'sxt',"good"。                 使用加号’+’进行字符串的拼接,如:console.log('hello' + ' everybody');                                           对象                 instanceof 运算符                     typeof 操作符对数组(array)和对象(object)的显示结果都是 object,那么可以利用                     instanceof 运算符,它可用于判断一个变量是否某个对象的实例

    四  类型转换

    1、自动类型转换 2、函数转换             parseInt()                     (1)、parseInt()在转换之前,首先会分析该字符串,判断位置为 0 处的字符,判断它是否是个有效数字,如果不是,则直接返回 NaN,不再继续,如果是则继续,直到找到非字符                 (2)、parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的                 (3)、如果十进制数包含前导 0,那么最好采用基数 10,这样才不会意外地得到八进制的值

            console.log(parseInt("123ab1c")); // 123         console.log(parseInt("123.4.5ab1c")); // 123         console.log(parseInt("0xA")); //returns 10         console.log(parseInt("22.5")); //returns 22         console.log(parseInt("blue111")); //returns NaN                   console.log(parseInt("AF", 16)); //returns 175         console.log(parseInt("10", 2)); //returns 2         console.log(parseInt("10", 8)); //returns 8         console.log(parseInt("10", 10)); //returns 10                  console.log(parseInt("010")); //returns 8         console.log(parseInt("010", 8)); //returns 8         console.log(parseInt("010", 10)); //returns 10                              parseFloat()                 parseFloat()方法与 parseInt()方法的处理方式相似,但是parseFloat()可以识别第一个小数点

            console.log(parseFloat("123ab1c")); // 123         console.log(parseFloat("123.4ab1c")); // 123         console.log(parseFloat("0xA")); //returns 10         console.log(parseFloat("22.5")); //returns 22         console.log(parseFloat("blue111")); //returns NaN 3、显示转换             toString()函数将内容转换为字符串形式,其中 Number 提供的             toString()函数可以将数字以指定的进制转换为字符串,默认为十进制。             Number 还提供了 toFixed()函数将根据小数点后指定位数将数字转为字符串,四舍五入

            var data = 10;         console.log(data.toString())         console.log(data.toString(2))         data = 1.4;         console.log(data.toFixed(0));         data = 1.49;         console.log(data.toFixed(1));         data = true;         console.log(data.toString());                           4、强制转换             JS 为 Number、Boolean、String 对象提供了构造方法,用于强制转换其他类型的数据。             此时操作的是整个数据,而不是部分

            console.log(Number("1"));         console.log(Number("1.4"));         console.log(Number("123aabc"));         console.log(Number("abc"));         console.log(Number(true));         console.log(Number(false));         console.log(Number(19));         console.log(Number(new Object()));         console.log(Number(new Array()));

    五  数组

    1.数组的特点

                    (1)、数组的长度是可变的                 (2)、数组的类型可以不一样                 (3)、不存在下标越界            

    2.数组的定义

                    (1)、隐式创建                     var 变量名 = [值1,值2,...];                 (2)、直接实例化                     var 变量名 = new Array(值1,值2,...);                 (3)、实例化并指定长度                     var 变量名 = new Array(size);                              获取数组的长度                     数组.length              

    3.数组的遍历

                    数组的遍历即依次访问数组的每一个元素 ,JS 提供三种遍历数组的方式:                 (1)、普通 for 循环遍历                     for(var i = 0; i < 数组名.length; i++) {                         console.log(i + "----------" + arr1[i]);                     }                     注:可以拿到undefinded的值,无法获取数组中属性对应的值                 (2)、for ... in                     for(var i in 数组) {                         // i是下标或属性名

                           console.log(i + '----------' + arr1[i]);                     }                     注:无法拿到undefinded的值,可以获取数组中属性对应的值                                  (3)、foreach                     数组.foreach(function(element,index){                         // element:元素;index:下标

                            console.log(index+ '----' + element);                     });                     注:无法获取属性对应的值与undefinded的值                                      * for --  不遍历属性                 * foreach -- 不遍历属性和索引中的 undefined                 * for in -- 不遍历索引中的 undefined            

    4.数组提供的方法

                    push 添加元素到最后                 unshift 添加元素到最前                 pop 删除最后一项                 shift 删除第一项                 reverse 数组翻转                 join 数组转成字符串                 indexOf 数组元素索引                 slice 截取(切片)数组,原数组不发生变化                 splice 剪接数组,原数组变化,可以实现前后删除效果                 concat 数组合并

    六  函数

    1.函数的定义

    函数,即方法。函数也是对象。 定义方式有3种:(1)函数声明语句                         function 函数名([形参]) {                                                      }                         调用:函数名([实参]);(2)函数定义表达式                         var 变量名/函数名 = function([形参]){                                                      }                         调用:变量名([实参])/函数名([实参]);(3)Function构造函数                         var 函数名 = new Function('参数1','参数2','函数的主体内容');                         调用:函数名([实参]);                         注:构造函数的最后一个参数是函数体。                                          注意:                     (1)、js 中的函数没有重载,同名的函数,会被后面的函数覆盖。                     (2)、js 中允许有不定数目的参数,后面介绍 arguments 对象                                  函数名的提升(了解)                     JavaScript 引擎将函数名视同变量名,所以采用 function 命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错                     但是,如果采用赋值语句定义函数,JavaScript 就会报错

    2.函数的参数,调用和return

    (1)参数                 函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部                 数据就叫参数,定义时的参数称为形参,调用时的参数称为实参       1)、实参可以省略,那么对应形参为 undefined

    function fn1(a,b) {             console.log(a);         }         fn1();//undefined         fn1(1);//1         fn1(1,2);//1       2)、若函数形参同名(一般不会这么干):在使用时以最后一个值为准。

    function fn2(x,x){             console.log(x);         }         fn2(10,20);//20       3)、可以给参数默认值:当参数为特殊值时,可以赋予默认值。

    function fn3(str) {             str = str || "Hello";             console.log(str);         }

    fn3();//Hello fn3("你好");//你好

    function fn4(str) {             (str !== undefined && str !== null) ? str = str : str = "值不存在";             console.log(str);         }

    fn4();//值不存在 fn4("你好呀");//你好呀       4)、参数为值传递,传递副本 ;引用传递时传递地址,操作的是同一个对象

                    (2)函数的调用       1)、直接调用:函数名([实参]);                     存在返回值可以变量接收,若接收无返回值函数则为 undefined       2)、函数调用模式

    var fn9 = function() {             console.log(this); // Window对象             return 1;         }         var f = fn9();         console.log(f);       3)、方法调用模式

    var obj = {             uname:"zhangsan",             uage:18,             cats:["喵喵","猫猫"],             sayHello:function() {                 console.log(this); // obj对象                 console.log("你好呀~");             }         };         console.log(obj.sayHello);         obj.sayHello();       4)、间接调用  call()和apply()

    var obj2 = {};         function fn10(x,y) {             console.log(x+y);             console.log(this);         }         fn10(1,2); //  Window对象                  fn10.call(); //  Window对象         fn10.call(obj2); // obj2         fn10.call(obj2,10,20); // obj2                  fn10.apply(obj2,[100,200]); // obj2                         匿名函数立即调用                 (1)匿名函数:function ([参数]){}                 (2)调用:(function ([形参]) {})([实参]);                 在函数只被使用一次的情况下可以使用这种方式,简便省事                 (3)return 语句                 函数的执行可能会有返回值,需要使用 return 语句将结果返回。return 语句不是必需的,                 如果没有的话,该函数就不返回任何值,或者说返回 undefined。                 作用:在没有返回值的方法中,用来结束方法。                 有返回值的方法中,一个是用来结束方法,一个是将值带给调用者。

    3.arguments 对象和函数的方法及属性

    arguments 对象和函数的方法及属性             arguments对象可以得到函数的实参数量             函数名.name  得到函数名称             函数名.length 得到函数的形参数量             函数名.toString() 得到函数的源码

    4.函数的作用域

    函数作用域:全局(global variable)和局部(local variable)             1)全局变量与局部变量同名问题             2)在函数中定义变量时,若没有加 var 关键字,使用之后自动变为全局变量             3)变量作用域提升

    七   闭包

    1.闭包的形成

    (1)、外部函数内部嵌套内部函数 (2)、内部函数中使用外部函数的环境 (3)、外部函数返回内部函数

    // 1、外部函数内部嵌套内部函数        function outFn() {             var num = 1;             function inFn(){                 // 2、内部函数中使用外部函数的环境                num++;                 console.log(num);             }             // 3、外部函数返回内部函数            return inFn;         }         var inF = outFn();         inF();         inF();         inF();         inF();                  var inF1 = outFn();         inF();

    2.闭包的作用

    (1)、获取函数内部的变量 (2)、保存变量的值在内存中 (3)、避免变量名重复

    八   内置对象

    Date:             //获取             getFullYear()年, getMonth()月, getDate()日,             getHours()时,getMinutes()分,getSeconds()秒             //设置             setYear(), setMonth(), …             toLoacaleString()             说明:             1.getMonth():得到的值:0~11(1 月~12 月)             2.setMonth():设置值时 0~11             3.toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果。// 得到系统当前时间         var mydate = new Date();         console.log(mydate);                  // toLocaleString():可根据本地时间把 Date 对象转换为字符串,并返回结果。         console.log(mydate.toDateString());         console.log(mydate.toLocaleString());                  var mon = mydate.getMonth()+1;         if (mon < 10) {             mon = "0" + mon;         }                  var newDate = mydate.getFullYear() + "-" + mon + "-" + mydate.getDate();         newDate += " " + mydate.getHours() + ":" + mydate.getMinutes() + ":" + mydate.getSeconds();         console.log(newDate);

    九   JS对象

    JS中一切数据皆对象。

    1、定义对象

                    JS 创建自定义对象,主要通过三种方式:           (1)、字面量形式创建对象                         var 变量名 = {}; // 空对象                         var 变量名 = {键:值,....};

    // 1、字面量形式创建对象         var obj = {}; // 空对象         var obj2 = {             uname:"zhangsan",             uage:18         };         obj2.usex=true;                  console.log(obj);         console.log(obj2);           (2)、通过 new Object 对象创建                         var 变量名 = new Object();

    // 2、通过 new Object 对象创建         var obj3 = new Object();         obj3.name = "Tom";         console.log(obj3);           (3)、通过 Object 对象的 create 方法创建对象                         var 变量名 = Object.create(null或对象);

            var obj4 = Object.create(null);         console.log(obj4.uname);                  var obj5 = Object.create(obj2);         console.log(obj5.uname);

    2、对象的序列化和反序列化

                    序列化即将 JS 对象序列化为字符串,反序列化即将字符串反序列化为 JS 对象。JS 中通过                 调用 JSON 方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象 。                     序列化对象,将对象转为字符串                     JSON.stringify(object)                     反序列化,将一个 Json 字符串转换为对象。                     JSON.parse(jsonStr)                          

    3、eval()

                (1)、可借助 eval()动态函数,将参数字符串解析成 js 代码来执行,只接受原始字符串作为参数                     eval(“console.log(‘你好’)”);//控制台输出你好             (2)、可将 json 串转为 json 对象                     1)第一种解析方式:得到的 json 对象名就是 jsonObj                     var ab = '{"uname":"zhangsan", "uage":18 }';         eval("var jsonObj = " + ab);         console.log(jsonObj);                     2)第二种解析方式:对象中有多个属性                    var jsonObj2 = eval("(" +ab + ")");         console.log(jsonObj2);                     由于 json 是以{ }的方式来开始以及结束的,在 eval 中会被当成一个语句块来处理,故必 须强制将它转换成一种表达式。加上圆括号是使 eval 函数在处理时强制将括号内的表达式转化为对象而不作为语句来执行。                     var arrStr = "[1,'1a','fg']";         // 第一种解析方式eval("var arrObj = " + arrStr);         eval("var arr=" + arrStr);         console.log(arr);         // 第二种解析方式:eval(arrStr);                  console.log(arrStr);         console.log(eval(arrStr));

    最新回复(0)