JS基础第二课(函数、对象篇)

一、函数

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

2、函数的使用

(1)基本格式:

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

(2)定义函数的两种写法

①写法一:

②写法二:

(3)函数的返回值:return

3、函数的参数

(1)形参:function 函数名(形参1,形参2...){}

(2)实参:函数名(实参1,实参2...)

(3)两者的个数匹配

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

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

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

4、立即执行函数

(1)特点:不需要调用,直接可以自己执行的

(2)作用:创建一个独立的作用域,局部作用域

(3)两种写法:注意括号位置

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

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

二、作用域

1、概念:一段代码所用到的变量名,不是总是有效的,该变量名的使用范围就是作用域

2、全局作用域:作用于整个script标签、单独的js文件

3、局部作用域:在函数内部作用

JS基础第二课(函数、对象篇)_第1张图片

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

4、全局变量和局部变量:

(1)全局变量:在浏览器关闭才会销毁,比较占内存

(2)局部变量:在程序运行完就销毁,比较节省内存

5、预解析

(1)js解析器:预解析+代码执行

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

JS基础第二课(函数、对象篇)_第2张图片

三、对象

1、性质:一组无序的相关属性和方法的集合,所有的事物都是对象(字符串、数组、数值、函数...)

(1)属性:事物的特征

(2)方法:事物的行为

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

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

(1)方法一:利用字面量{}大括号

JS基础第二课(函数、对象篇)_第3张图片

 注意:

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

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

③方法后面跟的是匿名函数(不设置函数名)

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

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

(2)方法二:new Object()

 JS基础第二课(函数、对象篇)_第4张图片

(3)方法三:构造函数:特殊的函数,用来初始化对象

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

注意:

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

②不需要return

③调用时用new

④new关键字执行过程
        a. new在内部创建一个空对象
        b. this指向刚刚创建的空对象
        c. 执行构造函数里面的代码,给这个空对象去添加属性跟方法
        d. 返回对象

JS基础第二课(函数、对象篇)_第5张图片

 (4)遍历对象:for in

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

JS基础第二课(函数、对象篇)_第6张图片

 四、内置对象

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) 提取指定索引号之间的字符

JS基础第二课(函数、对象篇)_第7张图片

5、Date日期对象(构造函数,需要使用new)

方法 描述

getFullYear()

getMonth()

getDate()

getDay()

星期

getHours()

小时

getMinutes()

分钟

getSeconds()

[getTime()

返回1970年1月1日至今天的毫秒数

6、数组对象

方法 描述

push(item1, item2, ..., itemX)

在数组的末尾添加一个/更多元素,并返回新的长度

pop()

删除数组最后一个元素,并返回删除的元素

reverse()

反转数组的元素顺序

indexOf(item)

搜索数组中的指定元素,并返回它所在的位置

lastIndexOf(item)

搜索数组中的指定元素,并返回它最后出现的位置

join(separator)

把数组的所有元素放入一个字符串

forEach(function(currentValue, index, arr), thisValue)

数组每个元素都执行一次回调函数

includes()

判断一个数组是否包含一个指定的值

slice(start, end)

选取数组的一部10分,并返回一个新数组

JS基础第二课(函数、对象篇)_第8张图片 

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之间的随机数

JS基础第二课(函数、对象篇)_第9张图片

 五、练习例子

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的整数

JS基础第二课(函数、对象篇)_第10张图片

你可能感兴趣的:(前端开发,javascript,学习,前端)