JavaScript函数及应用
为什么要有函数?
函数 可以封装一段特定功能的代码,通过函数名可以重复调用此段代码
定义函数
function 函数名(){
函数体(一段代码);
}
*:函数不会自己运行
调用函数
函数名();
函数的参数:形参和实参
在调用函数时,可以向其传递值,这些值被称为参数
传多个参数时,由逗号(,)分隔
1、形式参数:在声明一个函数的时候,为了函数的功能更加灵活,有些值是固定不了的,对于这些固定不了的值,我们可以给函数设置参数。这个参数没有具体的值,仅仅起到一个占位置的作用,我们通常称之为形式参数,也叫形参。
2、实际参数:如果函数在声明时,设置了形参,那么在函数调用的时候就需要传入对应的参数,我们把传入的参数叫做实际参数,也叫实参。
函数内部是一个封闭的环境,可以通过传参的方式,把外部的值传递给函数内部
在函数内部修改形参的值,不会影响函数外部的实参的值,是因为在调用函数的时候,是把实参的值复制了一份赋给形参的
function fun(形参1,形参2...){ //函数声明
alert("函数使用");
}
fun(实参1,实参2...); //函数调用
注:把形参看做是没有经过声明的变量就好
函数的返回值
当函数执行完的时候,并不是所有时候都要把函数打印。我们期望函数给我们一些反馈(比如计算的结果的返回进行后续的运算),这个时候可以让函数返回一些东西,也就是返回值。函数通过return返回一个返回值
返回值语法:
//声明一个带返回值的函数
function 函数名(形参1,形参2,形参3...){
//函数体
return 返回值;
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1,实参2,实参3...);
函数的调用结果就是返回值,因此我们可以直接对函数调用结果进行操作
注:
1、如果函数没有显示的使用return语句,那么函数有默认的返回值:undefined
2、如果函数使用return语句,那么跟在return后面的值,就成了函数的返回值
3、如果函数使用return语句,但是return后面没有任何职,那么函数的返回值为undefined
4、函数使用return语句后,这个函数会在执行完return语句之后停止并立即退出,也就是说return后面的所有其它代码都不会再执行
arguments的使用
JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参,arguments是一个伪数组,因此可以进行遍历
//求任意个数的最大值
function getMax(){
var max = arguments[0];
for(var i = 1;i < arguments.length;i++){
if(max < arguments[i]){
max = arguments[i];
}
}
return max;
}
var max = getMax(5,10,1,5,11);
console.log(max);
函数其它
1、匿名函数:没有名字的函数
匿名函数如何使用:
1、将匿名函数赋值给一个变量,这样就可以通过变量进行调用
2、匿名函数自调用
2、自调用函数:当函数书写完成之后立即调用
匿名函数不能通过直接调用来执行,因此可以通过匿名函数的自调用的方式来执行
1、函数声明-命名函数
function fn(){}
2、函数表达式 -- =后是 匿名函数
var fn = function(){}
3、自调用函数 --()表达式/函数()调用
(function(){console.log("自调用")})()
4、函数也是一种数据类型 function也是一种数据类型
因为函数是一种数据类型,所以函数可以作为另一个函数的参数
因为函数是一种数据类型,所以函数可以作为另一个函数的返回值
代码规范
1、命名规范:
变量、函数的命名 必须有意义
变量 的名称一般用名词
函数 的名称一般用动词
2、变量规范
操作符的前后要有空格
3、注释规范
// 这里是注释 //后有空格
4、空格规范
if语句 -- if () {} --()前后要有空格
for语句 -- for (; ; ) {} --()前后要有空格, ;后面要有空格
数组 -- var arr = [1, 3, 5]; -- ,后面要有空格
5、换行规范
if (a > b) {
}
--起始的花括号要与if语句在同一行
--花括号之前要有一个空格
作用域:变量可以起到作用的范围
全局变量和局部变量
1、全局变量
在任何地方都可以访问到的变量就是全局变量,对应全局作用域
2、局部变量
只在固定的代码片段内可访问到的变量,最常见的例如函数内部。对应局部作用域(函数作用域)
注:
不使用var声明的变量是全局变量,不推荐使用
变量退出作用域之后会销毁,全局变量关闭网页或浏览器才会销毁
块级作用域
任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域
预解析
1、变量提升:把变量的声明提升到当前作用域的最上面,不包含变量的赋值
2、函数提升:把函数的声明提升到当前作用域的最上面,不包括函数的调用
3、在预解析的过程中如果函数和变量的名字相同,此时函数优先
eg1:
console.log(num);
var num = 5;
预解析:
var num;
console.log(num);
num = 5;
eg2:
var a = 25;
function abc() {
alert(a);
var a = 10;
}
abc();
预解析:
var a;
function abc() {
局部预解析:
var a;
alert(a);
a = 10;
}
a = 25;
abc();
----undefined 全局定义变量a,给a赋值25,调用函数,函数内部有变量a,没赋值,则打印出来为undefined
eg3:
console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);
预解析:
var a;
function a() {
console.log('aaaaa');
}
console.log(a); --函数a
a = 1;
console.log(a); -- 变量a
JavaScript对象
JavaScript对象其实就是生活中事物的一个抽象
JavaScript对象是无需属性的集合:它的属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。
对象 具有属性和方法:属性 – 特征(名词 描述这个对象的) 方法 – 行为(动词 用来做什么)
对象的字面量:{}
// 手机 不是对象 它是一类事物
// 汽车 不是对象 它是一类事物
函数和对象的区别
函数:可以封装一段代码
对象:封装一组属性和方法
对象的基本操作
创建dog对象:
属性:昵称 name age color
方法:叫 bark 吃 eat
var dog = {
name: 'puppy',
age: 3
color: 'black'
bark: function () {
//在方法中如何使用属性的值
//this 在方法中代表的是当前对象 dog
console.log(this.name + '汪汪');
},
eat:function () {
console.log(this.name + '啃骨头');
}
}
//如何访问属性 对象.属性名
console.log(dog.name);
//如何访问方法 对象.方法名
dog.bark();
属性的另一种访问方式
console.log(dog['name']);
函数和方法的区别
函数:独立存在的函数
方法:属于对象的函数
对象的创建方法:
1、对象字面量
var hero = {
name:'lucy';
sex:'女';
}
2、new Object()
//Object 是一个构造函数
//new 的方式来调用构造函数
//new Object() 调用构造函数 会在内存中创建一个对象
//JavaScript的动态特性,随时增加成员
var hero = new Object(); 创建了一个空的对象
hero.name = 'lucy';
hero.sex = '女';
注:1是2的缩写形式
3、工厂方法
function createHero(name,sex){
var hero = new Object(); //返回一个空的对象
hero.name = name;
hero.sex = sex;
return hero;
}
4、自定义构造函数:构造函数第一个英文字母大写
帕斯卡命名:第一个单词的第一个字母大写,后续的每一个单词的第一个字母都大写
//自定义构造函数
function Hero(name,sex){
// this 动态的给对象增加成员
// this指向new Hero的时候创建的对象
this.name = name;
this.sex = sex;
}
new的执行过程
1、在内存中创建了一个空的对象
2、让构造函数中的this指向刚刚创建的对象
3、执行构造函数,在构造函数中设置属性和方法
4、返回了当前对象
this出现在以下位置分别代表什么
1、函数中 --this指向window
2、方法中 --this指向的是这个方法所属的对象
3、构造函数中 --this就是构造函数创建的对象
如何遍历和删除对象的属性
1、for in 可以遍历对象的成员
for (var key in obj){
console.log(key + '----' + obj[key]);
}
2、delete 删除对象的属性
var o = {
name:'abc';
say: function () {
}
}
delete o.name;
delete o.say;
JavaScript简单类型和复杂类型
简单类型 存储在内存中的栈上
复杂类型 存储在内存中的堆上
JavaScript中没有堆栈的概念,通过堆栈的概念更容易理解一些
简单类型在内存中如何存储
var n1 = 10;
var n2 = n1;
复杂类型在内存中如何存储
function Person(name,age){
this.name = name;
this.age = age;
this.sayHi = function(){
console.log(this.name +':Hello');
}
}
var p1 = new Person(‘zs’,18);
var p2 = p1;
p1.name = ‘ls’
p2.name = ?
p2.name = 'ls'
JavaScript内置对象
JavaScript组成:ECMAScript BOM DOM
ECMAScript:变量 注释 数据类型 类型转换 操作符 流程控制语句(判断和循环) 数组 对象 构造函数 内置对象
JavaScript中的对象有三种:自定义对象、内置对象、浏览器对象
ECMAScript中的对象:自定义对象、内置对象
如何学习一个方法? 查文档:MDN
方法的功能
参数的意义和类型
返回值意义和类型
demo进行测试
内置对象:Math/Array/Date…
最常用的属性和方法:
1、Math对象
Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供
Math.PI //圆周率
Math.random() //生成随机数
Math.floor()/Math.ceil() //向下取整/向上取整
Math.round() //取整,四舍五入
Math.abs() //绝对值
Math.max()/Math.min() //求最大值和最小值
Math.sin()/Math.cos() //正弦/余弦
Math.power()/Math.sqrt() //求指数次幂/求平方根
2、Date对象
Math对象和Date对象的区别:
Math 不是一个构造函数,里面提供的是静态成员
Date 是一个构造函数,首先要通过new Date()来创建日期实例(对象),里面提供的是实例成员
日期构造函数 Date()
1、空构造函数 获取的是当前时间对象
var d = new Date();
2、构造函数中传入毫秒值
var d = new Date(1502080);
3、传入日期形式的字符串
var d = new Date('1988-8-8 10:8:8');
4、传入数字
var d = new Date(1988,8,8);
如何获取日期对象的毫秒值
1、valueOf()
var d = new Date();
console.log(d.valueOf()); -- 不推荐在代码中显示使用
2、getTime()
console.log(d.getTime());
3、var num = Date.now() //浏览器兼容问题 Html5
4、var num = + new Date(); // +在这里是取正
日期格式化方法
toString() //转换成字符串
valueOf() //获取毫秒值
获取日期指定部分
getTime() //返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() //返回0-59
getMinutes() //返回0-59
getHours() //返回0-23
getDay() //返回星期几 0周日
getDate() //返回当前月的第几天
getMonth() //返回月份,***从0开始***
getFullYear() //返回4位的年份,如2016
3、Array对象
如何创建数组对象
1、数组字面量 []
var array = [];
var numbers = [1,5,1];
2、数组的构造函数Array
var array = new Array(); //空数组
var numbers = new Array(4,1,6);
如何判断一个变量是否是数组对象
function fn(arr){
//判断参数arr是否是数组对象
//方式1
if(!(arr instanceof Array)){
console.error('参数err 不是数组对象');
return;
}
//方式2 浏览器兼容性问题 HTML5
if(!(Array.isArray(arr))){
console.error('参数err 不是数组对象');
return;
}
}
JavaScript数组常用方法及应用
toString()/valueOf() 每一个对象都有这两个方法
var arr = [5,1,8,0];
console.log(arr);
console.log(arr.toString()); --toString() 把数组转换成字符串,并且使用","分割每一项
console.log(arr.valueOf()); --valueOf()返回数组对象本身
数组常用方法:
1、栈操作(先进后出)
push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度
pop() 返回数组中的最后一个元素,并且会修改数组的长度
2、队列操作(先进先出)
push()
shift() 取出数组中的第一个元素,修改length属性
unshift() 在数组最前面插入项,返回数组的长度
3、排序方法
reserve() 翻转数组
sort() 默认情况下是对字符编码,从小到大排序,直接在原数组上进行排序
eg:
从小到大
var arr = [25,10,108,18];
arr.sort(function(a,b){
return a - b;
})
4、操作方法
concat() 把参数拼接到当前数组
slice() 从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
splice() 删除或替换当前数组的某些项目,参数start,deleteCount,options(要替换的项目)
5、位置方法
indexOf()、lastIndexOf() 如果没找到返回-1
6、迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
7、方法将数组的所有元素连接到一个字符串中
join()
清空数组
1、推荐 arr = [];
2、arr.length = 0;
// 第一个参数,是从什么位置开始删除 索引
//第二个参数,删除多少个元素
3、arr.aplice(0,arr.length)
JavaScript字符串常用方法
字符串对象的常用方法
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
1、字符方法
charAt() 获取指定位置处字符
charCodeAt() 获取指定位置处字符的ASCII码
str[0] HTML5,IE8+支持,和charAt()等效
2、字符串操作方法
concat() 拼接字符串,等效于+,+更常用
slice() 从start位置开始,截取到end位置,end取不到
substring() 从start位置开始,截取到end位置,end取不到
subster() 从start位置开始,截取length个字符
3、位置方法
indexOf() 返回指定内容在元字符串中的位置
lastIndexOf() 从后往前找,只找第一个匹配的
4、去除空白
trim() 只能去除字符串前后的空白
5、大小写转换方法
to(Locale)UpperCase() 转换大写
to(Locale)LowerCase() 转换小写
6、其它
search()
replace()
split()
eg:‘abcoefoxyozzopp’查找字符串中所有o出现的位置
var s = 'abcoefoxyozzopp';
当查找不到的时候返回的是-1
var index = -1;
do{
index = s.indexOf('o',index + 1);
if(index !== -1){
console.log(index);
}
}while(index !== -1);
eg:把字符串中所有的o替换成!
var s = 'abcoefoxyozzopp';
当查找不到的时候返回的是-1
var index = -1;
do{
index = s.indexOf('o',index + 1);
if(index !== -1){
s = s.replace('o','!');
}
}while(index !== -1);
console.log(s);
eg:判断一个字符串中出现次数最多的字符,统计这个次数
var s = 'abcoefoxyozzopp';
//出现次数最多的字符
var ch;
//统计这个次数
var num;
//记录字符串中每一个字符出现的次数
var o = {};
for(var i = 0;i< s.length;i++){
var item = s.charAt(i);
if(o[item]){
//已经有该属性,+1
o[item]++;
}else{
o[item] = 1;
}
}
求最大值,并且找到次数最多的字符
假设最大值是1
num = 1;
for( var key in o){
if(num < o[key]){
num = o[key];
ch = key;
}
}
获取url中?后面的内容
var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
//
//console.log(url.substr(index));
获取url后面的参数
function getParams(url){
//获取url?后面第一个字符的索引
var index = url.indexOf('?') + 1;
//url中?后面的字符串 name=zs&age=18&a=1&b=2'
var params = url.substr(index);
使用&切割字符串,返回一个数组
var arr = params.split('&');
var o = {};
//数组中每一项的样子 key = value
for(var i = 0;i < arr.length; i++){
var tmpArr= arr[i].split('=');
var key = tmpArr[0];
var value = tmpArr[1];
o[key] = value;
}
return o;
}
getParams(url);