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

原创

帅的一麻皮

修改于 2020-04-13 10:59:17

7940

修改于 2020-04-13 10:59:17

文章被收录于专栏：前端与Java学习前端与Java学习

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都可以识别

思维导图

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

json

编程算法

数据结构

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

json

编程算法

数据结构

登录后参与评论

0 条评论

热度