JS基础第二课（函数、对象篇）

原创

申小兮

发布于 2023-04-12 11:51:14

8110

文章被收录于专栏：前端开发基础前端开发基础

一、函数

1、概念

JavaScript中的重要功能，是一段代码的集合，这段代码可以在不同地方调用，从而提高JavaScript代码的复用性

2、函数的使用

（1）基本格式：

function 函数名(){ //定义函数的关键字函数体 } 函数名(); //一定要调用函数，函数不会自己执行的

（2）定义函数的两种写法

①写法一：

<script>
        function get() {
            console.log(1234);
        }
        get()
</script>

②写法二：

<script>
        var post = function() {
            console.log(123);
        }
        post()
</script>

（3）函数的返回值：return

3、函数的参数

（1）形参：function 函数名(形参1,形参2...){}

（2）实参：函数名(实参1,实参2...)

<script>
        var post = function(a) {//这里的a是形参
            console.log(a);//运行函数结果输出10
        }
        post(10)//这里的10是实参
</script>

（3）两者的个数匹配

①形参个数=实参个数，正常输出

②形参个数<实参个数，从左到右匹配

<script>
        var post = function(a) {//这里的a是形参
            console.log(a);//运行函数结果，还是输出10
        }
        post(10,23)//这里的10，23是两个实参
</script>

③形参个数>实参个数，未匹配的形参为undefined

<script>
        var post = function(a,b) {//这里的a是形参
            console.log(a);//运行函数结果输出10
            console.log(b);//运行函数结果输出undefined
        }
        post(10)//这里的10是实参
</script>

4、立即执行函数

（1）特点：不需要调用，直接可以自己执行的

（2）作用：创建一个独立的作用域，局部作用域

（3）两种写法：注意括号位置

①两个外层括号()()，第一个()写function函数，第二个()写参数

<script>
        (function(a) {
            console.log('执行',a);
        })(10)
</script>

②内外层(())，外层写function函数，内层写参数

<script>
        (function(a){
            console.log('执行',a);
        }(20))
</script>

二、作用域

1、概念

一段代码所用到的变量名，不是总是有效的，该变量名的使用范围就是作用域

2、全局作用域

作用于整个script标签、单独的js文件

3、局部作用域

在函数内部作用

<script>
        var a = 10
        function test() {
            var b = 20
            console.log(a);//10
            console.log(b);//20
        }
        test()
        console.log(b);//b is not defined
</script>

上图中的变量b作为函数test的局部变量，只能在函数里面被调用，在函数意外调用时会报错

4、全局变量和局部变量

（1）全局变量：在浏览器关闭才会销毁，比较占内存

（2）局部变量：在程序运行完就销毁，比较节省内存

5、预解析

（1）js解析器：预解析+代码执行

（2）变量提升：js引擎会把代码中所有的var声明提升到作用域的最顶层（函数的顶层），但是赋值不会被提升

<script>
        console.log(a);//不报错，只是输出为undefined
        var a=10
        function test() {
            console.log(b);//不报错，只是输出为undefined
            var b = 10
        }
        test()
        console.log(c);//报错c is not defined
</script>

三、对象

1、性质

一组无序的相关属性和方法的集合，所有的事物都是对象（字符串、数组、数值、函数...）

（1）属性：事物的特征

（2）方法：事物的行为

2、作用

可以保存一个值的变量、多个值的数组、一个人的信息

3、创建、获取的三种方法

（1）方法一：利用字面量{}大括号

<script>
        var str={//多个属性之间用逗号,隔开
            name:'小明',//属性和方法都是键值对
            age:18,
            sex:'男',
            hoppy:['学习','比赛'],
            say:function(){//方法后面跟的是匿名函数（不设置函数名）
                console.log('写文章啦');
                return '写到不能停'
            }
        }
        console.log(str);
        console.log(str.name);
        console.log(str['age']);
        console.log(str.hoppy);
        str.say();//直接调用方法，输出'写文章'
        console.log(str.say());//打印输出'写文章'、'写个不停'
</script>

注意：

①name:'张三',//属性和方法都是键值对键(属性): 值【键与值之间用:】

②多个属性之间用逗号,隔开

③方法后面跟的是匿名函数（不设置函数名）

④

获取属性值：对象名.属性名、对象名['属性名']

获取方法：对象名.方法名()

（2）方法二：new Object()

<script>
        var user = new Object()
        user.name='小红'
        user.age=18
        console.log(user);
</script>

（3）方法三：构造函数：特殊的函数，用来初始化对象

function 构造函数名(参数1,参数2...){ this.属性名 = 值 //this：解析器每次在调用函数的时候都会想函数的内部传递一个隐含的参数 this.方法名 = 值 } var 变量名 = new 构造函数名//对象

注意：

①构造函数名的首字母要大写

②不需要return

③调用时用new

④new关键字执行过程

a. new在内部创建一个空对象

b. this指向刚刚创建的空对象

c. 执行构造函数里面的代码，给这个空对象去添加属性跟方法

d. 返回对象

<script>
        function Person(name1,age1,sex1) {
            this.name = name1
            this.age = age1
            this.sex = sex1
        }
        var p1 = new Person("小红",10,'女')
        console.log(p1);
</script>

（4）遍历对象：for in

for(item in p1){ // item属性名 console.log(item); console.log(p1[item]); }

<script>
        function Person(name1,age1,sex1) {
            this.name = name1
            this.age = age1
            this.sex = sex1
        }
        var p1 = new Person("小红",10,'女')
        // console.log(p1);
        for(item in p1){
            console.log(item);
            console.log(p1[item]);
        }
</script>

四、内置对象

1、JavaScript对象分为

自定义对象、内置对象、浏览器对象

2、内置对象

js语言自带的对象，供开发者使用，提供一些常用的，基本的属性和方法，帮助快速开发

3、参考文档

JavaScript 对象实例 | 菜鸟教程

4、字符串对象

需要认识并掌握的部分方法如下：（更多方法小伙伴们可以去参考文档找🧐）

方法	描述
charAt()	返回指定位置的字符
indexOf()	返回指定字符串首次出现的位置
lastIndexOf()	从起始位置开始计算该字符串最后出现的位置（运行时是从后往前搜索）
includes()	查找字符串是否包含指定的子字符串
replace(searchvalue,newvalue)	查找匹配的子串，并替换与正则表达式匹配的子串
slice(start,end)	提取字符串片段，在新字符串中返回该片段
split(separator,limit)	字符串的分割
substr(start,length)	从某起始索引号开始提取指定数目的字符
substring(from,to)	提取指定索引号之间的字符

<script>
        function name() {
            var str ='Hello world!';
            console.log(str.charAt(4));
            console.log(str.indexOf('l'));
            console.log(str.lastIndexOf('o'));
            console.log(str.includes('lo'));
            console.log(str.replace('llo','ok'));
            newstr = str.slice(2,6);
            console.log(newstr);
            newstr2 = str.split(3,8);
            console.log(newstr2);
            newstr3 = str.substr(2,4);
            console.log(newstr3);
            newstr4 = str.substring(5,9);
            console.log(newstr4);
        }
        name()
</script>

5、Date日期对象（构造函数，需要使用new）

方法	描述
getFullYear()	年
getMonth()	月
getDate()	日
getDay()	星期
getHours()	小时
getMinutes()	分钟
getSeconds()	秒
getTime()	返回1970年1月1日至今天的毫秒数

<script>
        var date = new Date()
        console.log(date.getFullYear());
        console.log(date.getMonth()+1);
        console.log(date.getDate());
        console.log(date.getDay());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        console.log(date.getTime());
</script>

6、数组对象

方法	描述
push(item1, item2, ..., itemX)	在数组的末尾添加一个/更多元素，并返回新的长度
pop()	删除数组最后一个元素，并返回删除的元素
reverse()	反转数组的元素顺序
indexOf(item)	搜索数组中的指定元素，并返回它所在的位置
lastIndexOf(item)	搜索数组中的指定元素，并返回它最后出现的位置
join(separator)	把数组的所有元素放入一个字符串
forEach(function(currentValue, index, arr), thisValue)	数组每个元素都执行一次回调函数
includes()	判断一个数组是否包含一个指定的值
slice(start, end)	选取数组的一部10分，并返回一个新数组

<script>
        var arr = [1, 2, 3, 4, 5, 6];
        arr.push(7);
        console.log(arr);
        arr.pop();
        console.log(arr);
        console.log(arr.indexOf(2));
        console.log(arr.lastIndexOf(1));
        arr.forEach(function (item) {
            console.log(item);
        });
        console.log(arr.includes(2));
        console.log(arr.slice(1, 4));
</script>

7、数学对象Math（不是构造函数，不需要new）

方法	描述
PI	圆周率(3.14159)
abs(x)	绝对值
floor(x)	对x做下舍入
ceil(x)	对x做上舍入
round(x)	四舍五入
max(x,y,z,...,n)	最大值
min(x,y,z,...,n)	最小值
random()	0~1之间的随机数

<script>
        console.log(Math.PI);
        console.log(Math.abs(-123));
        console.log(Math.floor(3.14));
        console.log(Math.ceil(3.14));
        console.log(Math.round(3.14));
        console.log(Math.max(1,2,3,4,5));
        console.log(Math.min(1,2,3,4,5));
        console.log(Math.random());
</script>

五、练习例子

1、求数组[1,23,54,121,33,4]所有元素的和以及平均值 2、var str = 'qwfvsdbwqqabksh1jdjiirhbzfhtq'; （1）字符q出现的次数（2）统计每个字符出现的次数

3、封装一个格式化日期的方法yyyy-yy-yy

4、数组去重

var arr = [1,2,3,4,4,5,6,7,7,7,8,9,3,3,4,5,6,7,9]

5、返回随机1-100的整数

<script>
        //1、求数组[1,23,54,121,33,4]所有元素的和以及平均值
        var arr1 = [1, 23, 54, 121, 33, 4]
        var sum = 0, avg = 0
        for (var i = 0; i < arr1.length; i++) {
            sum += arr1[i]
        }
        console.log(sum);
        avg = sum / (arr1.length)
        console.log(avg);
 
        //2、var str = 'qwfvsdbwqqabksh1jdjiirhbzfhtq';
        //（1）字符q出现的次数
        var count = 0, str2 = 'qwfvsdbwqqabksh1jdjiirhbzfhtq'
        for (var i = 0; i < str2.length; i++) {
            if (str2[i] == 'q') {
                count += 1
            }
        }
        console.log(count);
 
        //（2）统计每个字符出现的次数
        var str2 = 'qwfvsdbwqqabksh1jdjiirhbzfhtq', str3 = ''
        var count = {};
        for (var i = 0; i < str2.length; i++) {
            if (count[str2[i]]) {
                count[str2[i]]++;
            } else {
                count[str2[i]] = 1;
            }
        }
        console.log(count);
 
        //3、封装一个格式化日期的方法
        //法1
        var date = new Date()
        var str = ''
        str = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        console.log(str);
        //法2
        var a = '', b = '', c = ''
        function getdate(y, m, d) {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            console.log(y + '-' + m + '-' + d);
        }
        getdate(a, b, c)
 
        //4、数组去重
        var arr4 = [1, 2, 3, 4, 4, 5, 6, 7, 7, 7, 8, 9, 3, 3, 4, 5, 6, 7, 9]
        var newArr = '';
        for (var i = 0; i < arr4.length; i++) {
            if (newArr.lastIndexOf(arr4[i]) == -1) {
                newArr += arr4[i];
            }
        }
        console.log(newArr);
 
        //5、返回随机1-100的整数
        console.log(Math.round(Math.random() * 100));
 
    </script>