专栏首页前端与Java学习前端day11-JS学习笔记(构造函数、对象的API、作用域、arguments关键字)
原创

前端day11-JS学习笔记(构造函数、对象的API、作用域、arguments关键字)

1-自定义构造函数(new关键字工作原理)

当我们想要创建多个对象时很容易造成代码冗余,那么我们可以使用函数或者自定义构造函数去创建对象。

        //使用函数 : 创建多个对象,解决代码冗余
          function createPerson(name,age,sex){
             //1.声明空对象
             var p = {};
             //2.赋值
             p.name = name;//左边:属性 = 右边:形参值
             p.age = age;
             p.sex = sex;
             //3.返回赋值好的对象
             return p ;
          };
         var banzhang =  createPerson('班长',36,'男');//调用函数传参即可
         console.log(banzhang);
         
        //自定义构造函数创建对象
        // 下面代码做的事和上面普通函数一样的,只是语法更加简洁
         function CreatePerson(name,age,sex){
             this.name = name;
             this.age = age;
             this.sex = sex;
         };
         var banzhang =  new CreatePerson('班长',36,'男');//使用new关键字
         console.log(banzhang);

new关键字工作原理(4个步骤)

function fn(name, age, sex) {
            //1.创建空对象 {}
            //2.将this指向这个对象 this = {}
            //3.执行赋值代码
            this.name = name;
            this.age = age;
            this.sex = sex;
            //4.自动返回这个对象
            // return 666; // 基本数据类型,无效
            //return [10,20,30];//复杂数据类型 ,覆盖new创建的对象
        };

构造函数注意点:

1.构造函数名字首字母大写(提醒别人别忘记new关键字)

2.如果在构造函数中使用的return关键字

  • 基本数据类型,无效
  • 复杂数据类型 ,覆盖new创建的对象

2-内置对象的API

2.1Date日期对象

1.获取当前日期:var date = new Date();

2.获取日期中的年月日时分秒

//1.创建一个Date对象
    var date = new Date();
    /*时间日期打印*/
    //2.打印当前完整时间:  (1)默认显示当前电脑的时区时间 (2)打印date时会自动转为字符串 date.toString()
    console.log ( date );//Fri Mar 23 2020 20:45:15 GMT+0800 (中国标准时间)
    //3.打印日期:标准版本
    console.log ( date.toDateString () );//Fri Mar 23 2018
    //4.打印日期:本地版本(当前电脑)
    console.log ( date.toLocaleDateString () );// 2018/3/23
    //5.打印当前时间:标准版本
    console.log ( date.toTimeString () );//20:51:17 GMT+0800 (中国标准时间)
    //6.打印当前时间:本地版本
    console.log ( date.toLocaleTimeString () );//下午8:51:17
    /*年月日时打印*/
    //1.打印当前年份
    console.log ( date.getFullYear () );//2018
    //2.打印当前月份  范围:0-11 代表 1-12月
    console.log ( date.getMonth () );//2 代表下标2  也就是3月
    //3.打印当前日
    console.log ( date.getDate () );//23
    //4.打印当前星期  范围0-6 代表星期天-星期六
    console.log ( date.getDay () );//5
    //5.打印时
    console.log ( date.getHours () );
    //6.打印分
    console.log ( date.getMinutes () );
    //7.打印秒
    console.log ( date.getSeconds () );

3.创建自定义日期

/**创建自定义日期*/
    var date1 = new Date(2020,0,1,12,3,5);//依次传入 年,月,日,时,分,秒
    console.log ( date1 );//Wed Jan 01 2020 12:03:05 GMT+0800 (中国标准时间)
    var date2 = new Date("2022-05-06 12:03:35");
    console.log ( date2 );//Fri May 06 2022 12:03:35 GMT+0800 (中国标准时间)

2.2-Array数组对象

/* Array数组对象
            数组常用api
            * 连接数组:`concat()`
            * 将数组元素拼接成字符串:`join()`
            * 删除数组最后一个元素:`pop()`
            * 往数组后面添加元素:`push()`
            * 翻转数组:`reverse()`
            * 删除数组第一个元素:`shift()`
            * 查找数组元素:`slice()`
            * 数组排序:`sort()`
         */
 var arr1 = [10, 20, 30, 40];
 var arr2 = [33, 44, -1]
 //1.连接多个数组:将传入的数组的所有元素都添加到arr1的后面
 var arr3 = arr1.concat(arr2, arr1);
 console.log(arr3); //[10, 20, 30, 40, 33, 44, 10, 20, 30, 40]
 //2.将数组中的每一个元素都拼接成一个字符串
 var str = arr1.join();
 console.log(typeof str);
 console.log(str); //10,20,30,40
 //3.pop()删除数组最后一个数
 arr1.pop();
 console.log(arr1); //[10, 20, 30]
 //4.往数组后面添加元素:`push()`
 console.log(arr1);
 arr1.push(arr2, 99);
 console.log(arr1); //[10, 20, 30, Array(3), 99]
 //5.翻转数组:`reverse()`
 arr1.reverse();
 console.log(arr1); // [99, Array(3), 30, 20, 10]
 ///6.删除数组的第一个元素
 arr1.shift();
 console.log(arr1); //[Array(3), 30, 20, 10]
 //7.查找一个数组中的某些元素
 var arr1 = [10, 20, 70, 40, 50, 60];
 // 第一个参数:start:从那一个下标开始查找 如果为负数则倒着查找
 //第二个参数: end : 结束位置    start <= 范围 < end
 console.log(arr1.slice(1, 3)); //[20, 70]
 //8.数组排序 sort
 arr1.push(arr2);
 var sortarr = arr1.sort(function (a, b) {
 return a - b;
        });
 console.log(sortarr);//从小到大排序
 console.log(sortarr.reverse());//从小到大翻转一下就变成从大到小

2.3String字符串对象

/* 
        ## String字符串对象

            * 1.获取字符串长度:`str.length`
            * 2.获取字符串某一个下标字符:`str.charAt()`
            * 3.拼接字符串:`str.concat`
            * 4.判断字符串中是否包含某些字符串:`str.indexOf()`
            * 5.截取字符串:`str.substr()`
            * 6.修改字符串:`str.replace()`
            * 7.大小写转换:`str.toLowerCase()`小写 `str.toUpperCase()`大写
            * 8.分隔字符串:`str.split()`
         */
        var str = "欢迎来到 ITheima 程序员!"
        console.log(str.charAt(0)); //欢

        //拼接字符串:`str.concat`
        var str1 = str.concat("一起加油!", "666");
        console.log(str1); //欢迎来到 ITheima 程序员!一起加油!666

        //判断字符串中是否包含某些字符串:`str.indexOf()`
        console.log(str.indexOf("程序员")); //包含返回第一个匹配的字符下标:13
        console.log(str.indexOf("程序猿")); //不包含返回:-1

        //截取字符串:`str.substr(index,length)` 
        //第一个参数:从哪个下标开始截取  第二个参数:截取的长度
        var substr = str.substr(5, 7);
        console.log(substr); //ITheima

        //修改字符串:`str.replace(str1,str2)`
        //第一个参数:要修改的字符串  第二个参数:修改后的字符串
        //它并不会在原有的字符串上去修改  而是返回一个新的字符串
        var repstr = str.replace("程序员", "前端工程师");
        console.log(str); //欢迎来到 ITheima 程序员!
        console.log(repstr); //欢迎来到 ITheima 前端工程师!

        //大小写转换:`str.toLowerCase()`小写 `str.toUpperCase()`大写
        console.log(str.toLowerCase()); //欢迎来到 itheima 程序员!
        console.log(str.toUpperCase()); //欢迎来到 ITHEIMA 程序员!

        //`str.split()`分隔字符串:将字符串按照指定的符号分隔,得到一个数组
        var str2 = "人本/过客/来无处,休说/故里/在何方"
        var splstr1 = str2.split(",");
        var splstr2 = str2.split("/");
        console.log(splstr1); //["人本/过客/来无处", "休说/故里/在何方"]
        console.log(splstr2); //["人本", "过客", "来无处,休说", "故里", "在何方"]

2.4字符串恒定性

  • 字符串恒定性:字符串不可以被修改的
    • 一般调用字符串api的时候使用新的变量来接收
  • 字符串恒定性原理
    • 1.在内存中有一块专门的内存空间区域负责存储字符串(字符串常量区)
    • 2.当我们声明一个字符串的时候,编译器会先去这个区域寻找有没有该字符串,如果有就直接取出来,没有就新开辟空间
      • 相当于缓存机制
    • 3.这块内存空间中的字符串一旦被创建,是不可以被修改的
  • 字符串恒定性注意点
  • (1) var str1 = 'abc'
    • 先去字符串常量区寻找有没有叫做abc的字符串,没有就创建
  • (2) str1[0] = 'b'
    • 修改无效
  • (3) str1 = 'cba';
    • 修改有效,因为我修改的是str1这个变量存储的数据,而不是改abc这个字符串
  • (4) var str2 = 'cba'
    • 这行代码效率极高,相当于str2 = str1,编译器不会重新开辟内存空间,而是从已有的字符串中寻找
  • (5) str2 += 'abc'
    • 可以修改,这行代码相当于将'cba' + 'abc'拼接之后的新字符串赋值给str2

3-js作用域及变量预解析

3.1作用域:变量起作用的范围

js中只有两种:全局作用域 局部作用域

1.全局作用域:变量在任何地方起作用

全局变量:在函数外面声明

2.局部作用域:变量只能在函数内部起作用

局部变量:在函数内部声明

3.2-作用域链

  • 1.作用域链是怎么来的
    • 默认情况下,我们的js代码处于全局作用域,当我们声明一个函数时,此时函数体会开辟一个局部作用域, 如果我们在这个函数体中又声明一个函数,那么又会开辟一个新的局部作用域,以此类推,就会形成一个作用域链
  • 2.变量在作用域链上的访问规则
    • 就近原则:访问变量时,会优先访问的是在自己作用域链上声明的变量,如果自己作用域链上没有声明这个变量,那么就往上一级去找有没有声明这个变量,如果有就访问,如果没有就继续往上找有没有声明,直到找到0级作用域链上,如果有,就访问,如果没有就报错

注意点:js中只有函数才可以开辟作用域,其他的任何语句都不可以

3.3-js预解析

  • 为什么要有预解析机制?
    • 通过前面的学习我们知道,js代码是从上往下执行的,这样有什么不好的地方呢?
    • 实际开发中,往往一个文件中js代码会有很多的函数,而如果我们都把函数的声明写在最上面,那么我们的业务逻辑就会在下面,这样的话开发效率不高
      • 函数毕竟只是保存一段代码的,我们希望可以将函数写在页面的下面,而把一些业务逻辑功能写在代码上面,这样的话维护起来更方便
  • 2.什么是预解析机制
    • (1)其实js代码并不是从上往下执行的,这种说法不严谨
    • (2)预解析:JS在执行代码之前,会把变量的声明提前到所在作用域的最顶端
      • a.只是声明提前(相当于提前开辟内存空间),变量的赋值与函数的调用还是在原地
      • b.函数的声明也会提前
  • 3.预解析的意义(好处)
    • 让函数可以在任意地方调用

数据类型总结

1.数据类型种类

五种基本数据类型:string,number,boolean,undefine,null

两种复杂数据类型:array,object(function属于object)

2.数据类型判断

除数组之外,所有的数据类型都可以使用 `typeof 变量名`来判断

数组是一个例外,如果使用 `typeof 数组名`得到的是object

  • 数组名 instanceof Array:得到boolean类型
  • Array.isArray ( 数组名 ):得到boolean类型

引用类型与值类型区别

引用类型

复杂数据类型,两种:array和object

值类型

基本数据类型,五种:string number boolean undefined null

为什么要有引用类型与值类型?
  • 假设将数据比喻为现实生活中的钱,当我们买东西的时候如果是比较少量的钱,一般我们使用钱包里面的现钱,这样更加快捷方便。如果我们买东西需要使用很多的钱,比如买一辆五百万的法拉利,那么使用现金就不方便,一般我们会把大量现金存到银行,然后使用刷卡来支付
  • 在计算机的内存中,数据的存储也是如此。
    • 1.内存主要有两部分:栈(钱包) 与 堆(银行金库)
    • 2.如果是值类型(基本数据类型),则数据保存在栈中(数据比较小,读取比较快捷方便)
    • 3.如果是引用类型(复杂数据类型),则将保存在堆中(银卡),而栈中存储的是这个数据的地址(钱包里面的银行卡)
    • 4.变量只能访问栈中的空间(买东西要么给现金要么刷卡,不会跟别人你把钱存到什么什么银行别人就会把东西给你)

        //1.值类型:拷贝的是数据
        var num1 = 10;
        var num2 = num1; //将num1的数据拷贝一份保存到num2中
        num2 = 100;
        console.log(num1, num2); //修改num2不会对num1造成影响

        //2.引用类型:  拷贝的是地址
        var arr1 = [10, 20, 30, 40, 50];
        var arr2 = arr1; //将arr1的地址拷贝一份保存到num2中
        arr2[0] = 100; //修改arr2会对arr1造成影响
        console.log(arr1); //[100, 20, 30, 40, 50]
        console.log(arr2); //[100, 20, 30, 40, 50]        

arguments关键字介绍

  • 1.arguments关键字:获取函数的所有实参
  • 2.为什么要有arguemnts关键字
    • js是一门弱语言:声明函数的时候假如只有一个形参,实际上在调用的时候无论我们传入多少实参程序都不会报错
    • 为了防止这种情况:函数有一个arguments关键字来获取所有的实参
  • 3.arguments特点
    • 1.只能在函数体中使用,在函数外使用会报错
    • 2.是一个特殊的数组(伪数组)
      • 有数组的三要素,但是没有数组其他的方法
    • 3.arguemngs数组中的元素与形参一一对应
  • 4.arguements好处:可以让函数变得更加灵活
    • 可以让函数根据实参的不同而实现不同的功能
        //1.这行代码会报错,因为函数外部无法使用arguments
        // console.log ( arguments );

        //2.定义一个无参的函数,作用是打印该函数的所有参数
        function fn(num1) {
            //(1)arguemnt保存的是所有的实参的值

            console.log(num1);//10
            //arguments只能在函数内部使用 
            console.log(arguments);//Arguments(2) [10, 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
             
            //(2)arguemnt与形参是一一对应的
            //修改了形参,arguemnt也会修改
            num1 = 100;
            console.log(arguments); //[100, 20, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    
            //反之,修改了argeumnts,形参也会变化
            arguments[0] = 33;
            console.log(num1);//33
            
        }
        fn(10, 20); //实参与形参一一对应


        /** 二:arguments实际用途展示:根据参数的数量让函数实现不同的功能 */
        function test() {
            if (arguments.length == 0) {
                //执行这个代码
                console.log("没有参数");
            } else if (arguments.length == 1) {
                //执行这个代码
                console.log("只有一个参数"+arguments[0]);//只有一个参数100
            } else {
                //执行这个代码
                console.log(arguments[0] + arguments[1]);//30
            }
        }
        test();
        test(100);
        test(10, 20);  

基本包装类型

为了让js中的基本数据类型也可以像对象一样调用方法,js中提供了三种特殊的对象类型(基本包装类型)

  • new Number()
  • new String()
  • new Boolean()

json对象介绍

  • json对象与js对象外观上唯一的区别: json对象的属性和值都需要双引号,js对象不需要
  • 为什么要有json对象:因为在实际开发中,后台并不是只是为了前端服务,他们还需要为android和ios服务 如果直接返回一个js对象,那么其他语言无法转换,为了统一,所以会返回给我们一个json对象,这样前端/安卓/ios都可以识别

思维导图

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript高级语法补充(函数参数传递、in delete关键字、比较运算符隐式转换)

    1.值类型 (5种):  栈中存储的是数据,赋值时拷贝的也是数据。修改拷贝后的数据对原数据没有影响。

    帅的一麻皮
  • ES6语法学习(变量的解构赋值)

    另一种情况是不完全解构:就是等号左边的模式只匹配一部分等号右边的数组,这样解构依然可以成功

    帅的一麻皮
  • 前端day21-JS正则表达式

    1.字符类: /[abc]/ 含义:只要字符串中有 a 或者有 b 或者有 c 就满足条件

    帅的一麻皮
  • 前端学习(43)~js学习(二十):内置对象 - String

    上方代码中,当我们尝试打印str.aaa的时候,会发现打印结果为:undefined。也就是说,不能给 string 绑定属性和方法。

    Vincent-yuan
  • javascript字符串

    字符串是JavaScript中7种数据中的一种,用于表示由零个或多个16位的Unicode字符组成的字符序列。创建字符串有两种方式,一种是字面量,另一种是构造函...

    踏浪
  • JS ES各版本特性

    JS包含三个部分:ECMAScript(核心),DOM(文档对象模型),BOM(浏览器对象模型)。ECMAScript是JS语言的基础。 ECMAScript的...

    剑行者
  • javascript正则表达式RegExp再次研究-replace

    虽然有那么多属性,但是基本用不到,为什么呢?因为这些信息都包含在模式声明中了: 字面量创建的正则

    陌上寒
  • JavaScript基本类型与引用类型(二)

    前文已经对基本类型和引用类型作了简单的介绍,本文将进一步介绍基本类型和引用类型。 基本包装类型   为了方便操作基本类型的值,JavaScript提供了特殊的引...

    水击三千
  • javascript(三):对象

     对象(object)是javascript中很重要的数据类型。对象是“键值对”的集合,同时也是无序的。(注意:对象结尾处有分号) 1 var ob1={ ...

    用户1149564
  • JavaScript从初级往高级走系列————异步

    上面这个例子中,当执行了alert(1),如果用户不点击确定按钮,console.log(2)是不会执行的。

    FinGet

扫码关注云+社区

领取腾讯云代金券