Day03 JS 基础语法

最新推荐文章于 2024-10-25 23:20:48 发布

何以所谓

最新推荐文章于 2024-10-25 23:20:48 发布

阅读量223

点赞数

分类专栏： JAVAEE笔记文章标签： JavaScript JS 数组函数对象

本文链接：https://blog.csdn.net/weixin_44695396/article/details/90545519

版权

JAVAEE笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的基础知识，包括JS的基本用法、变量、数据类型、类型转换、数组、函数、对象以及闭包。内容涵盖行内JS、内部JS、外部JS的声明，变量的声明和赋值，数据类型如Number、String、Object的特性和转换方法，以及数组的定义、遍历和操作方法。此外，还讨论了函数的定义、参数传递、返回值，以及闭包的概念和作用。最后，文章提及了内置对象Date的使用和JS对象的定义方式。

摘要由CSDN通过智能技术生成

一 JavaScript基本用法

1.行内JS

写在html标签中的js代码

<body>

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

</body>

2.内部JS

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

3.外部JS

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

二变量

语句：
        语句（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()

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));